ようこそデジタル庁デザインシステムへ
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。
デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
デジタル庁デザインシステムの構成
- デザインシステム本体
- 本ウェブサイトです。本デザインシステムの使い方、基本デザインやコンポーネントの仕様、ガイドライン、作例、アクセシビリティのドキュメントなどが含まれます。
- デザインデータ（Figma）v2系
- v2.0.0以降のFigmaファイルです。本ウェブサイトのガイドラインに対応したデザインデータです。Figma Communityから取得できます。
- デザインデータ（Figma）v1系
- v1.x系統のFigmaファイルは以前のバージョンです。v1.x系統のガイドラインやコンポーネントは今後、順次v2系統に置き換えられます。
- コードスニペット（React）
- デザイントークンやサンプルコードです。GitHubに展開します。
- イラストレーション・アイコン素材
- 行政手続きの説明コンテンツ等での使用を念頭に置いて作られたグラフィック素材です。v1.x系統のFigmaファイル内に格納されています。
本ウェブサイトのコンテンツ
お知らせ
ドキュメント
- コンポーネント：日付ピッカー／カレンダー
- 「文脈に応じて
autocompleteを使用する」を加筆修正年月日の各フィールドに適切なフォームの入力操作は、操作そのものの煩雑さだけでなく入力内容の検討もあり、ユーザーに一定の負担がかかるものとなります。ブラウザの自動入力機能（オートフィル）を用いることで負担の軽減が期待できるため、対応するautocomplete属性を指定することで、ブラウザの自動入力機能に対応できます。日付に関連するautocompleteの値は以下のとおりです。autocomplete属性を指定するようにしましょう。日付ピッカーに関連するautocompleteの値は以下のとおりです。 - 「文脈に応じて
autocompleteを使用する」に参考情報を追加
- 「文脈に応じて
デザインデータ
デザインデータ（Figma）v2.4.0を公開しました。
v2.4.0の更新内容
- コンポーネント
- 「リソースリスト」コンポーネントを新規追加
コードスニペット
- Accordionコンポーネント
- 意図しないリストマーカーを非表示にする（Safari 18.4）
- Checkboxコンポーネント
- 強制カラーモード時の色を
CanvasTextからButtonTextに修正 - 全選択チェックボックスのチェックボックスをチェック時にフォーカスが失われないように修正
- 強制カラーモード時の色を
- DatePickerコンポーネント
- カレンダーのみのStoryを新規追加
- エラー時は3つのフィールドすべてを
aria-invalid="true"とする - エラー時のエラーテキストをデザインに合わせる
- カレンダーの閉じるボタンを削除ボタンに修正
- Radioコンポーネント
- 強制カラーモード時の色を
CanvasTextからButtonTextに修正
- 強制カラーモード時の色を
- その他の修正
- コンポーネント一覧のコンポーネント名を日本語化
- Biomeのa11y/noLabelWithoutControlルールを無効化
- 依存パッケージの更新
その他
お知らせページを追加しました