デジタル庁デザインシステムβ版 v2.17.0

検索

メニュー

デジタル庁デザインシステムβ版 v2.17.0

ようこそデジタル庁デザインシステムへ

デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。

デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。

デジタル庁デザインシステムの構成

デザインシステム本体
本ウェブサイトです。本デザインシステムの使い方、基本デザインやコンポーネントの仕様、ガイドライン、作例、アクセシビリティのドキュメントなどが含まれます。本ウェブサイト上のコンテンツとして提供するほか、Markdownで一式を提供しておりダウンロードして利用いただけます。
デザインデータ(Figma)v2系
v2.0.0以降のFigmaファイル です。本ウェブサイトのガイドラインに対応したデザインデータです。Figma Communityから取得できます。
デザインデータ(Figma)v1系
v1.x系統のFigmaファイルは以前のバージョンです。v1.x系統のガイドラインやコンポーネントは今後、順次v2系統に置き換えられます。
コードスニペット
デザイントークンやサンプルコードです。GitHubに展開します。
イラストレーション・アイコン素材
行政手続きの説明コンテンツ等での使用を念頭に置いて作られたグラフィック素材です。

本ウェブサイトのコンテンツ

お知らせ

  • はじめに:利用上の注意事項 (Rev 003)
    • サードパーティライセンスについての記述を追加
    基本デザイン:タイポグラフィ (Rev 008)
    • 「フォントファミリー」のCSSの記述例を簡素化し、HTMLの記述例(Google Fontsを利用する場合)を追加
    • 「書体の太さ」の記述を修正(現在のNoto Sans JPおよびNoto Sans Monoではバリアブルフォントが利用できるようになっているため)

      なお、CSS Fonts Module Level 4ではバリアブルフォントが導入される前提で、1から1000までの任意の数値を受け付けるようになっています。(Noto Sans JPおよびNoto Sans Monoでは利用できません)

    基本デザイン:カラー (Rev 004)
    • 「機能カラー」にフォーカスカラーおよび検索ハイライトカラーを追加
  • デザインデータ(Figma)v2.17.0を公開しました。

    v2.17.0の更新内容
    基本デザイン:カラー
    • 機能カラーにフォーカスカラーおよび検索ハイライトカラーを追加
    スタイルガイド
    • 基本デザインのページに統合
    「v2.17.0の更新内容」の先頭に戻る
  • HTML版:スイッチ
    • 新規追加
    React版:導入方法
    • 新規追加
    React版:カード
    • 新規追加
    React版:検索ボックス
    • 新規追加
    React版:ステップナビゲーション
    • 新規追加
    React版:リソースリスト
    • 新規追加
  • 本ウェブサイトのMarkdownファイル一式を更新しました。