ようこそデジタル庁デザインシステムへ
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。
デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
デジタル庁デザインシステムの構成
- デザインシステム本体
- 本ウェブサイトです。本デザインシステムの使い方、基本デザインやコンポーネントの仕様、ガイドライン、作例、アクセシビリティのドキュメントなどが含まれます。
- デザインデータ（Figma）v2系
- v2.0.0以降のFigmaファイルです。本ウェブサイトのガイドラインに対応したデザインデータです。Figma Communityから取得できます。
- デザインデータ（Figma）v1系
- v1.x系統のFigmaファイルは以前のバージョンです。v1.x系統のガイドラインやコンポーネントは今後、順次v2系統に置き換えられます。
- コードスニペット（React）
- デザイントークンやサンプルコードです。GitHubに展開します。
- イラストレーション・アイコン素材
- 行政手続きの説明コンテンツ等での使用を念頭に置いて作られたグラフィック素材です。v1.x系統のFigmaファイル内に格納されています。
本ウェブサイトのコンテンツ
お知らせ
デザインデータ（Figma）v2.0.4を公開しました。
v2.0.4の更新内容
全体
- Color、Size、TypographyのLocal variablesを設定
基本デザイン
- アイコン
- arrow_upwardのスモール、arrow_downward、drag_indicator、errorアイコンを追加
- ステートを含むアイコンをAction Iconとして追加
- カラー
- Color stylesを全てLocal variablesに変更
- リンクテキスト
- Local styles内のText stylesに「Link」を追加
コンポーネント
- チェックボックス
- hover時の表現を変更（グレーボーダーを追加）
- ドロワー
- 下タイプ（モードレス）を追加
- ボタン
- ボタンバリアブルを統合し、Styleプロパティを追加。各スタイルはStyleプロパティより変更、選択が可能となります。
- コンポーネント内のAuto layout設定を変更
- テキストボタン、hover時の下線ウェイトを変更
- 下線付きのテキストにローカルライブラリーを適用
- メニューリストボックス
- メニューリストボックスの上下左右マージンを24 CSS pxに変更
- メニューリスト
- Menu List ItemsのWith Thumbnailにボーダー有無のバリアントを追加
- Boxed / Menu List Itemsコンポーネントの左右のマージンを24 CSS pxに変更
- Boxed / Menu List Items（With Thumbnailを除く）コンポーネントのバリアントを統合し、サイズプロパティを追加
- Category Titleのインデントを追加し、16、24、32、40、48、56に変更
- ラジオボタン
- hover時の表現を変更（グレーボーダーを追加）
- ランゲージセレクター
- メニューリストボックスとメニューリストの変更を同コンポーネントに反映
- リストコンポーネントを新規追加
デザインデータ（Figma）v2をアップデートしました。アップデート内容は各Figma内の更新履歴をご参照ください。
デザインデータ（Figma）v2をアップデートしました。アップデート内容は各Figma内の更新履歴をご参照ください。
デザインデータ（Figma）v2とv1をアップデートしました。アップデート内容は各Figma内の更新履歴をご参照ください。
RSSフィードの配信を開始しました。
デジタル庁デザインシステムの専用サイトおよびデザインデータv2.0.0を公開しました。
v2.0.0の紹介（従来のデザインシステムv1.4.2からの主な変更点）
- 今後は専用サイトでコンテンツ展開するため、Figma内に記載されていた「利用の手引き」、「ガイドライン」、およびPagesから「テンプレート」を削除
- 「スタイル（Style）」としていたPagesの名前を「基本デザイン（foundations）」に変更
- アクセシビリティ確保のため、デザインシステムの方針としてフォントサイズは16px以上を求めているため、Figma内でのテキストのフォントサイズを原則16px以上に設定
- フォーカス状態の視認性向上のため、フォーカスインジケーターのスタイルを変更
- フォーカスインジケーターのスタイル変更にともない、カラートークンのうちFocus-BlueとFocus-Yellowを削除
- リンクの視認性向上のため、「ユーティリティリンク」のDefaultステートおよびVisitedステートにUnderlineを追加
- コントラスト要件を満たすため、「リンクテキスト」のHoverステートのスタイルにおいて、Defaultに対してbackground-colorを変化させていたのを取りやめ、underlineの太さを変化させるように変更
- ディスレクシア対応のため、ベースとなるテキストカラーをGrey-900からGrey-800に変更
- FigmaのColor stylesを新カラートークンのみの構成に変更（移行用で保持していた旧カラートークンを削除）
- FigmaのText stylesを新タイポグラフィトークンのみの構成に変更（移行用で保持していた旧タイポグラフィトークンを削除）
- FigmaのGrid stylesに基本デザイン「レイアウト」の内容を追加
- イラストレーションアセットをデザインデータから分離（イラストレーションアセットは引き続きDS1内からご参照ください）
従来のデザインシステムv1.4.1におけるアクセシビリティ上の重要な問題点を含む各種修正を実施し、v1.4.2として公開しました。
v1.4.1からv1.4.2へのコンポーネントの修正内容
- 色覚多様性を考慮し、識別性を高めるため、フォームコントロールの「必須」ラベルの接頭辞として「※」（米印、U+203B Reference Mark）を追加
- 色覚多様性を考慮し、識別性を高めるため、フォームコントロールの「エラーテキスト」の文頭に「＊」（アスタリスク、U+FF0A Fullwidth Asterisk）を追加
- 「テキスト入力」、「テキストエリア」、「セレクター」、「ラジオボタン」、「チェックボックス」の「必須」ラベルの文字サイズ、および「ラジオボタン」、「チェックボックス」に関してはラベル自体のフォントサイズが、それぞれ14px・12pxになっていたため、すべて16pxに修正
- 「ノティフィケーションバナー」内の「情報提示 2（Info）」のボーダーおよびアイコンのカラーを黒（Black）からグレー（Solid Grey-536）へ変更
- 「ノティフィケーションバナー」内の「バナーデスクリプション」を任意要素に変更
v1.4.1からv1.4.2へのテンプレートの修正内容
- 「入力」「入力フォーム添付」内におけるスマートフォン固有の機能部分（ステータスバー、ナビゲーションバー、ソフトウェアキーボード）を削除