ようこそデジタル庁デザインシステムへ
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。
デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
デジタル庁デザインシステムの構成
- デザインシステム本体
- 本ウェブサイトです。本デザインシステムの使い方、基本デザインやコンポーネントの仕様、ガイドライン、作例、アクセシビリティのドキュメントなどが含まれます。
- デザインデータ（Figma）v2系
- v2.0.0以降のFigmaファイルです。本ウェブサイトのガイドラインに対応したデザインデータです。Figma Communityから取得できます。
- デザインデータ（Figma）v1系
- v1.x系統のFigmaファイルは以前のバージョンです。v1.x系統のガイドラインやコンポーネントは今後、順次v2系統に置き換えられます。
- コードスニペット
- デザイントークンやサンプルコードです。GitHubに展開します。
- イラストレーション・アイコン素材
- 行政手続きの説明コンテンツ等での使用を念頭に置いて作られたグラフィック素材です。
本ウェブサイトのコンテンツ
お知らせ
ドキュメント
- コンポーネント：テキストエリア（Rev 002）
- エラーテキストと文字数カウンターのレイアウトを変更
- コンポーネント：ファイルアップロード／ドロップエリア（Rev 001）
- 初版公開
- コンポーネント：カルーセル（Rev 001）
- 初版公開
デザインデータ
デザインデータ（Figma）v2.10.0を公開しました。
v2.10.0の更新内容
- コンポーネント
- 「カルーセル」コンポーネントを新規追加
- 「ファイルアップロード／ドロップエリア」コンポーネントを新規追加
- インプットテキスト
- Input Text Unitsに含まれるInput Textの幅をFillに変更
- エラーテキストに誤って指定されていたStrokeを削除
- テキストエリア
- Text Area Unitsに含まれるText Area Fieldsの幅をFillに変更
- エラーテキストと文字数カウンターのレイアウトを変更
- エラーテキストと文字数カウンターに誤って指定されていたStrokeを削除
- リソースリスト
- インタラクションをInlineまたはWholeから選べるようにする
- WholeタイプのDisabled時にリソースリスト全体をグレーアウトする
- Action Buttonをコンポーネント化
- Frame Styleで角丸ではない作例を追加
- 外枠の色をOpacityGrayからSolidGrayに変更
- Selected時外枠の色をGray-500に変更
コードスニペット
- HTML版：カルーセル
- 新規追加
- HTML版：リソースリスト
- 新規追加
- HTML版：その他の修正
- 「はじめに」を更新
- 「HTML版の開発方針」を更新
- React版：カルーセル
- 新規追加
- React版：その他の修正
- 「はじめに」を更新
- 「React版の開発方針」を新規追加
- 依存パッケージの更新
その他
デザインデータ（Figma）へのリンクをわかりやすくしました。