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

検索

メニュー

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

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

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

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

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

本ウェブサイトのコンテンツ

お知らせ

ドキュメント

  • コンポーネント:日付ピッカー/カレンダー
    • デスクリプションを修正
      日付ピッカーは、日付を選択するためのフォームコントロールを提供します。カレンダーは、日付の選択を補助するコンポーネントです。日付ピッカーに加えて任意でカレンダーを表示できます。 日付ピッカーは、日付を選択するためのフォームコントロールとして、入力フィールドおよびカレンダーによって構成されるコンポーネントです。
    • 日付ピッカーは入力フィールドおよびカレンダーの組み合わせであることを明確にし、各ページに反映
    • 「コンポーネント要素」の入力フィールドの説明からエラー時を別項目に分割

デザインデータ

  • デザインデータ(Figma)v2.8.1を公開しました。

    v2.8.1の更新内容
    基本デザイン
    • カラー
      • リンクテキストカラーの組み合わせスタイルの例におけるActive時の色をOrange-700からOrange-800に変更
      リンクテキスト
      • リンクのActive時の色をOrange-700からOrange-800に変更
    コンポーネント
    • パンくずリスト
      • リンクのActive時の色をOrange-700からOrange-800に変更
    「v2.8.1の更新内容」の先頭に戻る

コードスニペット

  • HTML版:リンク
    • リンクactive時の色をOrange-700からOrange-800に変更
    React版:リンク
    • リンクactive時の色をOrange-700からOrange-800に変更

その他

    • 本ウェブサイト(デジタル庁デザインシステム専用サイト)のURLを変更しました。
      旧:https://design.digital.go.jp/
      新:https://design.digital.go.jp/dads/