本文へ移動

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

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

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

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

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

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

    • 「入力」「入力フォーム添付」内におけるスマートフォン固有の機能部分(ステータスバー、ナビゲーションバー、ソフトウェアキーボード)を削除