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

検索

メニュー

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

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

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

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

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

デザインシステム本体
本ウェブサイトです。「β版」はリビングスタンダードであることを示しています。本デザインシステムの使い方、基本デザインやコンポーネントの仕様、ガイドライン、作例、アクセシビリティのドキュメントなどが含まれます。
デザインデータ(Figma)
本ウェブサイトのガイドラインに対応したデザインデータです。Figma Communityから取得できます。
コードスニペット
デザイントークンやサンプルコードです。GitHubとStorybookに展開しています。
イラストレーション・アイコン素材
行政手続きの説明コンテンツ等での使用を念頭に置いて作られたグラフィック素材です。

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

お知らせ

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

    v2.18.2の更新内容
    基本デザイン:カラー
    • 「タイトルにアイコンがついている作例」のボタン位置を修正
    画像
    • キャプションのカラーをGray-700に変更
    • 作例のキャプション下のマージンを調整
    スイッチ
    • モードスイッチのFocusスタイルを変更
    ステップナビゲーション
    • ステップ番号のHoverスタイルを変更
    日付ピッカー
    • 週末に色をつけたカレンダーパネルを追加
    • 今日を表す日付ボタンを追加
    • カレンダーボタンのHoverスタイルを変更
    • 日付ボタンのHoverスタイルを変更
    ページナビゲーション
    • TextタイプおよびOutline with TextタイプにActiveステートを追加
    • ArrowタイプにHoverおよびActiveステートを追加
    モーダルダイアログ
    • 「タイトルにアイコンがついている作例」のボタン位置を修正
    「v2.18.2の更新内容」の先頭に戻る
  • HTML版:引用ブロック
    • テキストスタイルの継承についてドキュメントに追記
    HTML版:箇条書きリスト
    • テキストスタイルの継承についてドキュメントに追記
    HTML版:画像
    • キャプションのテキストカラーを変更、キャプションの下マージンを設定
    HTML版:緊急時バナー
    • デスクトップでの本文文字サイズを正しく20pxにする
    HTML版:説明リスト
    • テキストスタイルの継承についてドキュメントに追記
    HTML版:ディスクロージャー
    • テキストスタイルの継承についてドキュメントに追記
    HTML版:フォームコントロールラベル
    • 項目ラベルとコントロールを水平方向に並べる作例を追加
    HTML版:リンク
    • テキストスタイルの継承についてドキュメントに追記
    HTML版:その他
    • ドキュメントをMDXからMarkdownに移行
    • READMEに採用情報を追加
    React版:画像
    • キャプションのテキストカラーを変更、キャプションの下マージンを設定
    React版:ノティフィケーションバナー
    • Errorタイプのアクションボタンの色を修正
    React版:フォームコントロールラベル
    • 項目ラベルとコントロールを水平方向に並べる作例を追加
    React版:その他
    • React 19に対応
    • READMEに採用情報を追加
    • トップページに採用情報を追加しました。
    • 本ウェブサイトのMarkdownファイル一式を更新しました。

採用情報

デジタル庁デザインシステムのチームメンバーを募集しています。行政のデジタル環境を支える基盤づくりに、あなたのスキルや経験を活かしてみませんか? 求人ページからご応募ください。