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

検索

メニュー

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

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

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

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

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

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

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

お知らせ

  • デザインデータ(Figma)v2.14.0を公開しました。

    v2.14.0の更新内容
    スタイルガイド
    • 初版公開
    アコーディオン
    • 色の参照をキーカラーに変更
    カード
    • 色の参照をキーカラーに変更
    カルーセル
    • 色の参照をキーカラーに変更
    検索ボックス
    • 色の参照をキーカラーに変更
    コンボボックス
    • 色の参照をキーカラーに変更
    水平メニュー
    • 「グローバルメニュー」から名称変更
    • 色の参照をキーカラーに変更
    タブ
    • 色の参照をキーカラーに変更
    チェックボックス
    • 色の参照をキーカラーに変更
    チップタグ
    • 色の参照をキーカラーに変更
    ディスクロージャー
    • 色の参照をキーカラーに変更
    テーブルコントロール
    • 色の参照をキーカラーに変更
    テーブル/データテーブル
    • 色の参照をキーカラーに変更
    ファイルアップロード/ドロップエリア
    • 色の参照をキーカラーに変更
    日付ピッカー/カレンダー
    • 色の参照をキーカラーに変更
    プログレスインジケーター
    • 色の参照をキーカラーに変更
    ページナビゲーション
    • 色の参照をキーカラーに変更
    ボタン
    • 色の参照をキーカラーに変更
    見出し
    • 色の参照をキーカラーに変更
    メニューリスト
    • 色の参照をキーカラーに変更
    モバイルメニュー
    • 色の参照をキーカラーに変更
    ラジオボタン
    • 色の参照をキーカラーに変更
    リソースリスト
    • 色の参照をキーカラーに変更
    「v2.14.0の更新内容」の先頭に戻る
  • HTML版:アコーディオン
    • 色の参照をキーカラーに変更
    HTML版:カード
    • 色の参照をキーカラーに変更
    HTML版:カルーセル
    • 色の参照をキーカラーに変更
    HTML版:カレンダー
    • 色の参照をキーカラーに変更
    HTML版:検索ボックス
    • 色の参照をキーカラーに変更
    • サイズのバリエーションを追加
    • 詳細検索付きの作例を追加
    HTML版:水平メニュー
    • 色の参照をキーカラーに変更
    HTML版:タブ
    • 色の参照をキーカラーに変更
    HTML版:チェックボックス
    • 色の参照をキーカラーに変更
    HTML版:ディスクロージャー
    • 色の参照をキーカラーに変更
    HTML版:テーブル/データテーブル
    • 色の参照をキーカラーに変更
    HTML版:日付ピッカー
    • 色の参照をキーカラーに変更
    HTML版:プログレスインジケーター
    • 色の参照をキーカラーに変更
    HTML版:ページナビゲーション
    • 色の参照をキーカラーに変更
    HTML版:ボタン
    • 色の参照をキーカラーに変更
    HTML版:見出し
    • 色の参照をキーカラーに変更
    HTML版:メニューリスト
    • 色の参照をキーカラーに変更
    HTML版:ラジオボタン
    • 色の参照をキーカラーに変更
    HTML版:リソースリスト
    • 色の参照をキーカラーに変更
    React版:アコーディオン
    • 色の参照をキーカラーに変更
    React版:カルーセル
    • 色の参照をキーカラーに変更
    React版:カレンダー
    • 色の参照をキーカラーに変更
    React版:チェックボックス
    • 色の参照をキーカラーに変更
    React版:ディスクロージャー
    • 色の参照をキーカラーに変更
    React版:テーブル/データテーブル
    • 色の参照をキーカラーに変更
    React版:日付ピッカー
    • 色の参照をキーカラーに変更
    React版:ファイルアップロード
    • 色の参照をキーカラーに変更
    React版:プログレスインジケーター
    • 色の参照をキーカラーに変更
    React版:ボタン
    • 色の参照をキーカラーに変更
    React版:見出し
    • 色の参照をキーカラーに変更
    React版:メニューリスト
    • 色の参照をキーカラーに変更
    React版:ラジオボタン
    • 色の参照をキーカラーに変更
    React版:ランゲージセレクター
    • 色の参照をキーカラーに変更
  • 本ウェブサイトのソースコードの可読性を向上しました。