ようこそデジタル庁デザインシステムへ
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。
デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
デジタル庁デザインシステムの構成
- デザインシステム本体
- 本ウェブサイトです。本デザインシステムの使い方、基本デザインやコンポーネントの仕様、ガイドライン、作例、アクセシビリティのドキュメントなどが含まれます。
- デザインデータ(Figma)v2系
- v2.0.0以降のFigmaファイルです。本ウェブサイトのガイドラインに対応したデザインデータです。Figma Communityから取得できます。
- デザインデータ(Figma)v1系
- v1.x系統のFigmaファイルは以前のバージョンです。v1.x系統のガイドラインやコンポーネントは今後、順次v2系統に置き換えられます。
- コードスニペット
- デザイントークンやサンプルコードです。GitHubに展開します。
- イラストレーション・アイコン素材
- 行政手続きの説明コンテンツ等での使用を念頭に置いて作られたグラフィック素材です。
本ウェブサイトのコンテンツ
お知らせ
ドキュメント
- コンポーネント:箇条書きリスト(Rev 001)
- 初版公開
- コンポーネント:イメージスライダー(Rev 001)
- 初版公開
- コンポーネント:ディスクロージャー(Rev 001)
- 初版公開
- コンポーネント:カルーセル(Rev 002)
- 打ち出しタイプおよびコンテナタイプについて追記
- 打ち出しタイプにシングルを追加
- アコーディオン(Rev 001)
- 初版公開
デザインデータ
デザインデータ(Figma)v2.10.2を公開しました。
v2.10.2の更新内容
- コンポーネント
- 箇条書きリスト
- コンポーネント名を「リスト」から「箇条書きリスト」に変更
- インデントのバリエーションを0、32、64の3種類に変更
- 項番を左揃えに変更
- 項番のバリエーションを拡充
- カルーセル
- 打ち出しタイプ-シングル、および作例を追加
- グローバルメニュー
- Selected : Focusのステートを追加
- 箇条書きリスト
コードスニペット
- HTML版:箇条書きリスト
- コンポーネント名を「リスト」から「箇条書きリスト」に変更
ol要素を使用しないようにマークアップを変更
- HTML版:カルーセル
- 打ち出しタイプの作例を追加
- シングルの作例を追加
- リンク無しの作例を追加
- HTML版:日付ピッカー/カレンダー
- 月の前後ボタンのホバースタイルを修正
- React版:チップラベル
- 新規追加
- React版:日付ピッカー/カレンダー
- 月の前後ボタンのホバースタイルを修正
- React版:ファイルアップロード
- 新規追加
その他
デザインデータ(Figma)へのリンクをわかりやすくしました。