>_DEVELOP

デジタル庁デザインシステムを紐解く

Posted on 2025-07-05 by coffee

以下は「デジタル庁デザインシステムβ版」（design.digital.go.jp）のサイト構成を整理したものです。

おおよそWebサイトやWebアプリの作成の際に必要な考え方がきれいにまとめられています。

🌐 サイト構成一覧

1. はじめに（Introduction）

2. ガイダンス（Guidance）

  • デザインシステムとは
  • 使い方（How to use）
  • アクセシビリティ
  • スタイルガイド

3. 基本デザイン（Foundations / Basic Design）

  • カラー
  • タイポグラフィ
  • レイアウト
  • リンクテキスト
  • 余白（spacing）
  • 角の形状（corner radius）
  • エレベーション（elevation） (design.digital.go.jp)

4. コンポーネント（Components）

以下のUI要素が整理され、解説・コードスニペット付きで提供されています (design.digital.go.jp)：

  • アコーディオン
  • インプットテキスト
  • カード
  • 緊急時バナー
  • グローバルメニュー
  • 検索ボックス
  • スクロールトップボタン
  • セレクトボックス
  • チェックボックス
  • ディスクロージャー
  • ディバイダー
  • テーブル／データテーブル
  • テキストエリア
  • ドロワー
  • ノティフィケーションバナー
  • パンくずリスト
  • ハンバーガーメニューボタン
  • 日付ピッカー／カレンダー
  • プログレスインジケーター
  • ページネーション
  • ヘッダーコンテナ
  • ボタン
  • ボトムナビゲーション
  • メガメニュー
  • メニューリスト
  • メニューリストボックス
  • モーダルダイアログ
  • モバイルメニュー
  • ユーティリティリンク
  • ラジオボタン
  • ランゲージセレクター
  • リスト
  • リソースリスト

5. リソース（Resources）

  • デザインデータ（Figma v2 & v1）
  • コードスニペット（React, Tailwind CSS）
  • アクセシビリティ導入ガイドブック
  • イラスト／アイコン素材
  • バージョン指定リクエスト対応 (design.digital.go.jp)

6. お知らせ（News / Updates）

  • コンポーネント変更、ドキュメント更新内容（例：テーブル／データテーブルへのアクセシビリティ強化） (design.digital.go.jp)

7. 採用情報（Careers）

  • 現在の採用ポジションや採用に関する案内

🔍 補足・ポイント

  • Figmaデータは v2 系が最新で、v1 系は段階的に移行中 (design.digital.go.jp)
  • ガイダンスセクションは“誰向け”のステップ別説明も含み、デザイナー／開発者／企画担当者それぞれに案内あり (design.digital.go.jp)

🗂 整理まとめ

/introduction
/guidance
  ├─ design-system
  ├─ how-to-use
  ├─ accessibility
  └─ style-guides
/foundations
  ├─ color
  ├─ typography
  ├─ layout
  ├─ link-text
  ├─ spacing
  ├─ corner-radius
  └─ elevation
/components
  ├─ accordion
  ├─ input-text
  ├─ card
  └─ …（全30以上）…
/resources
  ├─ figma-v2
  ├─ figma-v1
  ├─ code-snippets
  ├─ accessibility-guide
  └─ illustrations-icons
/news
/careers