結論: デジタル庁デザインシステムは、49種類のUIコンポーネント仕様・カラーや余白の基準・アクセシビリティガイドラインを、AI参照用に125個のMarkdownファイルへ変換したうえで公式に無料公開しています。プロジェクトのフォルダに展開して「UIはこの仕様に従う」と1行伝えるだけで、Claude Codeがボタンのターゲット領域(44 CSS px以上)のような細かいルールまで踏まえて実装するようになります。
この記事の要点
- 要点1: 公式配布のMarkdown一式は125ファイル・49コンポーネント仕様を収録し、MANIFEST.mdが目次として機能する(2026年7月22日版で実測確認)
- 要点2: 出典を明記すれば民間企業のサイト・業務システムでも利用でき、Figmaデータ(CC BY 4.0)・コードスニペット(MIT License)は編集前提でさらに使いやすい
- 要点3: Claude Codeにフォルダを読ませてから実装させると、余白やボタンサイズをゼロから相談する時間を削減できる
対象読者: 官公庁・自治体案件や、行政っぽい信頼感のあるUIを求められる業務システムを開発しているエンジニア・PM、社内ツールのデザイン基準に悩む情報システム部門
読了後にできること: デジタル庁デザインシステムのMarkdown一式をダウンロードし、Claude Codeに読み込ませて最初の1コンポーネントを実装できるようになります
「行政っぽい、信頼できる見た目にしてほしい」——官公庁や自治体が絡む案件、あるいは社内の申請フォームのような”お堅い”画面を作るとき、こう頼まれて困った経験はないでしょうか。
Uravationの研修や個別指導の現場でも、この手の相談はよく出てきます。ボタンの色は何を基準に決めればいいのか、フォームのエラー表示はどこに置くのが正解なのか、タップ領域は何pxあれば十分なのか——毎回、開発者の感覚と過去の案件の記憶を頼りに手探りで決めているチームが少なくありません。結果として、後からアクセシビリティの指摘を受けて手戻りになったり、担当者によってボタンのサイズやフォームの余白がバラバラになったりします。
この悩みに直接効くのが、デジタル庁が公開している「デジタル庁デザインシステム」です。もともと行政サービス向けに作られたものですが、出典を明記すれば民間の会社でも自由に使えます。しかも2026年7月時点では、49コンポーネントの仕様・カラーや余白の基準・アクセシビリティガイドラインを含む本体一式が、AIが読みやすい125個のMarkdownファイルとして公式に配布されています。
この記事では、この「Markdown一式」の中身を実際にダウンロードして確認した結果と、Claude Codeへの読み込ませ方、そのまま使えるプロンプト、公開前に確認すべき利用条件までをまとめます。
デジタル庁デザインシステムの「AI参照用Markdown一式」とは
デジタル庁デザインシステム（DADS）は、行政サービスの画面を作るためのデザイン言語・UIコンポーネント・実装ガイドラインをまとめた公式のデザインアセットです。公式サイト(design.digital.go.jp/dads/)では、Figmaのデザインデータ、HTML/React向けのコードスニペット、そしてMarkdown形式のドキュメント一式が配布されています。
このうちMarkdown一式は、公式サイトの「はじめに」「基本デザイン」「コンポーネント」「リソース」といったページの内容を、AIツールから参照しやすい形へ変換したものです。実際にダウンロードして展開すると、収録ファイルの説明を担うREADME.mdには次のように明記されています。
「このzipアーカイブ（本アーカイブ）は、本ウェブサイトのコンテンツの一式を、主にAI参照用途としてMarkdown形式へ変換したものです。」
各Markdownファイルの冒頭には、タイトル・カテゴリ・スラッグ・文書種別・変換元URL・言語を記したYAML Front Matterが付与されており、AIツールがどのファイルが何の仕様なのかを機械的に把握できるよう設計されています。
| 項目 | 内容（2026年7月24日 公式ZIPを実際にダウンロードして確認） |
|---|---|
| 収録ファイル数 | 125ファイル（Markdown形式。すべて拡張子.md） |
| コンポーネント仕様数 | 49種類（ボタン、フォーム部品、モーダル、ナビゲーション等） |
| 目次ファイル | MANIFEST.md（全ファイルへのリンクと概要を一覧化） |
| 説明ファイル | README.md（アーカイブの目的・YAML Front Matterの仕様を説明） |
| 最新配布バージョン | 2026年7月22日版（本ウェブサイトの更新に合わせて随時更新される運用） |
| 配布元 | デジタル庁デザインシステムβ版 リソースページ（design.digital.go.jp/dads/resources/） |
公式サイトのAIエージェント関連ガイダンスの基本的な考え方は、AIエージェントとは？仕組み・15サービス比較・始め方で整理していますが、今回のように「公式ドキュメントをAIが読みやすい形で提供する」動きは、国内の官公庁発の取り組みとしてはかなり踏み込んだ事例だと言えます。
49コンポーネント・125ファイルの中身
MANIFEST.mdを開くと、Markdown一式が公式サイトと同じ階層構造で整理されていることが分かります。実際に数えたカテゴリ別の内訳は次のとおりです。
| カテゴリ | 主な内容 |
|---|---|
| はじめに | デザインシステムの概要、利用上の注意事項 |
| ガイダンス | デザインシステムとは何か、ロール別の使い方、アクセシビリティ方針、スタイルガイドの作り方 |
| 基本デザイン | カラー、タイポグラフィ、アイコン、レイアウト、リンクテキスト、余白、角の形状、エレベーション |
| コンポーネント（49種） | ボタン、インプットテキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトボックス、コンボボックス、日付ピッカー、ファイルアップロード、モーダルダイアログ、ドロワー、タブ、アコーディオン、パンくずリスト、水平メニュー、メガメニュー、テーブル／データテーブル、カード、ノティフィケーションバナーなど |
| リソース／お知らせ | デザインデータ・コードスニペットの案内、更新履歴 |
| ウェブアクセシビリティ | 方針、検証結果、対象ページ一覧 |
各コンポーネントのMarkdownファイルには、仕様説明だけでなく、画面のスクリーンショットに対する詳細なテキスト説明（代替テキスト）も含まれています。例えばボタンの仕様ファイルには、次のような具体的な数値ルールが明記されています。
「ボタンのターゲット領域は44 CSS px以上を保ってください。ボタンの大きさが44 CSS pxに満たない場合（Small、X-Small）は、上下に余白を設けて、ターゲット領域を確保します。」
図版に頼らずテキストだけで数値・条件が明記されているため、画像を読み込めないAIコーディングツールでも仕様を正確に参照できるのが、この一式の実用的なポイントです。
Claude Codeで使う3ステップ
使い方自体は難しくありません。研修でよく「結局どう読み込ませればいいのか」と聞かれるので、手順を分解しておきます。
ステップ1: Markdown一式をダウンロードして展開する
デジタル庁デザインシステムβ版のリソースページから、ドキュメント（Markdown）のZIPファイルをダウンロードし、任意のフォルダに展開します。展開するとcomponents/foundations/guidance/などのフォルダと、目次役のMANIFEST.mdが現れます。
ステップ2: プロジェクト内に置く
展開したフォルダを、実装対象のリポジトリ内（例:/design-system/）に配置します。Claude Codeはプロジェクト配下のファイルを自由に読み書きできるため、この時点で仕様書はすでに「参照可能な状態」になっています。
ステップ3: 「この仕様に従う」と1行伝える
CLAUDE.mdやセッション冒頭で、「UIは/design-system/の仕様に従う」と一言添えるだけで、Claude CodeはMANIFEST.mdを起点に必要なコンポーネント仕様を自分で辿りながら実装するようになります。125ファイル全部を毎回読ませる必要はなく、目的の画面に関係する数ファイルだけを都度参照させる使い方が現実的です。
すぐ使えるプロンプト6選
実際にClaude Codeへ渡す際の指示文の例です。コピペしてプロジェクトのパスだけ書き換えて使ってください。
1. 初期セットアップ
このプロジェクトのUIは、/design-system/ フォルダに展開したデジタル庁デザインシステムのMarkdown一式(MANIFEST.md、components/配下の各コンポーネント仕様)に従って実装してください。
まず MANIFEST.md を読み、今回作る画面に関係しそうなコンポーネントの index.md だけを開いて仕様を確認してから着手してください。
仕様に書かれていない挙動は仮定として明記し、判断に迷う場合は先に質問してください。2. ボタンコンポーネントの実装
/design-system/components/button/index.md の仕様に従って、プライマリー・セカンダリー・テキストボタンの3種類をReact + Tailwindコンポーネントとして実装してください。
ボタンのターゲット領域は44 CSS px以上を確保し、Small/X-Smallサイズでは上下の余白で領域を補ってください。
1画面につきプライマリーボタンは原則1つまでという配置ルールも守ってください。3. 入力フォームの実装
/design-system/components/input-text/index.md と /design-system/components/textarea/index.md の仕様に従って、氏名・連絡先・お問い合わせ内容を入力するフォームを実装してください。
エラー表示・注釈ブロック(/design-system/components/notice-block/index.md)の使い方も仕様書に沿って実装し、根拠にした仕様ファイルのパスをコード中にコメントで残してください。4. モーダル・ドロワーの実装
/design-system/components/modal-dialog/index.md の仕様に従って確認モーダルを実装してください。
モバイル表示では /design-system/components/drawer/index.md のドロワーパターンに切り替え、ブレークポイントの考え方も仕様書の記載に合わせてください。5. 既存UIをデザインシステム準拠へ書き換える
このリポジトリの src/components/ 配下にある独自実装のボタン・フォーム部品を、/design-system/ の仕様に沿った実装へ書き換えてください。
色・余白・角の形状は /design-system/foundations/ 配下(color, spacing, corner-shapes)の値を優先し、既存の独自CSS変数は仕様と矛盾する場合のみ置き換えてください。
差分は一度に全部でなく、コンポーネント単位でPRを分けられる粒度で進めてください。6. アクセシビリティの突き合わせチェック
実装済みのコンポーネントを、/design-system/webaccessibility/ 配下の記載と /design-system/components/ 配下の各仕様のアクセシビリティ関連記述と突き合わせてチェックしてください。
特にターゲット領域のサイズ、フォーカス状態の視認性、色のコントラストについて、仕様と食い違う箇所をリストアップしてください。
仕様書に明記がない項目は「未記載」として区別し、憶測で断定しないでください。研修現場でよく聞かれる悩みと、この一式が効く理由
研修先での実例ですが、こうしたデザイン基準まわりの相談は業種を問わず出てきます。
1つ目は、行政っぽいトーンの資料や画面を求められたときの相談です。「官公庁っぽい信頼感を出したい」と言われても、具体的に何を基準に配色や余白を決めればいいのか分からず、担当者の感覚で決めてしまうケースをよく見かけます。デジタル庁デザインシステムのように、数値と根拠が明記された仕様書があれば、「なぜこの余白にしたのか」を説明できるようになります。
2つ目は、フォーム系のUIを毎回ゼロから設計している状態です。エラーメッセージの位置、注釈の出し方、必須項目の示し方は、プロジェクトごとにバラバラになりがちです。仕様書を1つ決めてClaude Codeに参照させれば、少なくとも社内の複数プロジェクト間での表記ゆれは防げます。
3つ目は、アクセシビリティ対応を後工程で指摘されて手戻りになるケースです。ボタンのタップ領域が小さすぎる、フォーカス時の見た目が分かりにくいといった指摘は、実装が終わった後に発覚すると修正コストが大きくなります。44 CSS px以上というような具体的な数値が最初から仕様書に入っていれば、実装時点でクリアできます。
民間利用は本当にできるのか — 出典の書き方
公式サイトの「利用上の注意事項」ページには、素材ごとに異なる利用条件が明記されています。実際の記載を引用します。
「コンテンツを利用する際は出典を記載してください。（出典記載例）出典：デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/dads/」
「コンテンツを編集・加工等して利用する場合は、上記とは別に、編集・加工などを行ったことを記載してください。なお、編集・加工した情報を、あたかもデジタル庁が作成したかのような態様で公表・利用してはいけません。」
この「デザインシステム本体」には、Markdownドキュメントも含まれると明記されています。素材ごとの利用条件を整理すると次のとおりです。
| 素材 | ライセンス・条件 | 出典の要否 |
|---|---|---|
| デザインシステム本体（Markdown含む） | デジタル庁ウェブサイトのコピーライトポリシーに準拠 | 必須（未編集・編集どちらの場合も出典記載が必要） |
| デザインデータ（Figma） | CC BY 4.0（一部Material SymbolsはApache License 2.0） | 編集・加工して利用する場合は出典不要／未編集で公開する場合は必要 |
| コードスニペット | MIT License（GitHubで公開） | 編集・加工して利用する場合は出典不要／未編集で公開する場合は必要 |
つまり、Markdown一式を含む「デザインシステム本体」を参照してコードを実装する場合、出典を明記すれば民間企業のサイトや業務システムでも問題なく利用できます。編集・加工した内容を、あたかもデジタル庁が作成したかのように公表することだけは避ける必要があります。
エコシステム全体像 — 仕様はMarkdown、実装はReact/HTML、トークンはTailwind、デザインはFigma
デジタル庁デザインシステムは、Markdown一式だけで完結しているわけではありません。用途に応じて複数の配布形式が用意されています。
| レイヤー | 形式 | 備考 |
|---|---|---|
| 仕様・ドキュメント | Markdown（125ファイル） | 今回紹介したAI参照用の一式。公式サイトの内容と同期 |
| 実装（React） | GitHub: digital-go-jp/design-system-example-components-react | MIT License。2026年7月24日時点で630スター(実測)。React v18・Tailwind CSS対応 |
| 実装（HTML/CSS/JS） | コードスニペット集（GitHub公開） | プレーンなHTML/CSS/JavaScriptでの実装例。Storybookで各コンポーネントの挙動を確認可能 |
| デザイントークン | Tailwind CSSテーマプラグイン | カラー・タイポグラフィ等の基本デザインをTailwindの設定として反映するプラグイン |
| デザインデータ | Figma（Figma Community） | 執筆時点でv2.16.0が公開中。CC BY 4.0 |
Claude Codeで実装まで一気に進めたい場合はMarkdown一式＋Reactスニペットの組み合わせが手早く、デザイナーとの認識合わせにはFigmaデータを併用するのが現実的です。
なお、Claude系のツールで資料・スライドを作る場合の選択肢はClaude Designとは？機能と使い方を完全ガイドで解説しています。官公庁トーンの資料そのものを素早く作りたい場合は、社内で公開しているClaude Codeでパワポ自動作成｜編集可能PPTX無料公開のスキルも参考になります。Claude Codeそのものの基本的な使い方はClaude Codeとは？Claudeとの違い・できること・料金にまとめています。
【要注意】よくある失敗パターンと回避策
失敗1: フォルダを読ませずに「デジタル庁っぽく」とだけ指示する
❌「デジタル庁っぽい感じでUIを作って」
⭕「/design-system/のMANIFEST.mdを読んでから、components配下の該当仕様に従って実装して」
なぜ重要か: AIは「っぽい」の基準を持っていません。仕様書のパスを明示しなければ、独自の解釈でボタンサイズや配色を決めてしまい、結局仕様との乖離を後から直す羽目になります。
失敗2: 出典を書かずにそのまま公開する
❌ 加工・編集したコンテンツを出典なしで自社サイトに掲載する
⭕「出典：デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/dads/」を明記し、編集した場合はその旨も記載する
なぜ重要か: 「利用上の注意事項」では出典記載を明確に求めており、編集内容を「あたかもデジタル庁が作成したかのように」公表することも禁止されています。
失敗3: 古いバージョンのZIPを使い続ける
❌ 一度ダウンロードしたMarkdown一式を、更新されないまま何ヶ月も参照し続ける
⭕ お知らせページで更新頻度を確認し、公式サイトの内容が更新されるタイミングでMarkdown一式も取り直す
なぜ重要か: 公式の運用ルールでは、本ウェブサイトの内容が更新されるたびにMarkdownファイル一式も更新されるとされています。古いバージョンのまま実装を続けると、仕様変更に気づけないまま作り込んでしまうリスクがあります。
失敗4: 素材ごとに異なる出典ルールを混同する
❌ Figmaデータやコードスニペットも、デザインシステム本体とまったく同じ出典ルールだと思い込む
⭕ Figma・コードスニペットは編集・加工して利用する場合は出典不要（未編集で公開する場合のみ必要）、デザインシステム本体（Markdown含む）は編集・未編集を問わず出典必須、と素材ごとに確認する
なぜ重要か: 素材によって適用されるライセンス・出典ルールが異なるため、一律の理解のまま運用すると意図せずルール違反になる可能性があります。
よくある質問
デジタル庁デザインシステムは民間企業のサイトでも本当に使えますか？
はい。デザインシステム本体（Markdownドキュメントを含む）は出典を明記すれば利用でき、Figmaデータ・コードスニペットにもそれぞれCC BY 4.0・MIT Licenseが適用されています。ただし編集・加工した内容を「あたかもデジタル庁が作成したかのように」公表することは禁止されています。
Claude Code以外のAIコーディングツールでも使えますか？
公式のMarkdown一式はREADME.mdに「主にAI参照用途」と明記されており、特定のツールに限定されていません。プロジェクトのフォルダをコンテキストとして読み込めるツールであれば、同じ使い方が可能です。
125ファイルを毎回全部読み込ませる必要がありますか？
必要ありません。MANIFEST.mdが目次の役割を持っているため、まずMANIFEST.mdを読ませ、実装したい画面に関係するコンポーネントのindex.mdだけをそのつど参照させる使い方が、コンテキストを圧迫しない現実的な運用です。
まとめ：今日から始める3つのアクション
- 今日やること: デジタル庁デザインシステムβ版のリソースページからMarkdown一式をダウンロードし、MANIFEST.mdを開いて目次を眺めてみる
- 今週中: 自分のプロジェクトの/design-system/フォルダに展開し、ボタンかフォームのどちらか1コンポーネントをプロンプト2・3の要領で実装してみる
- 今月中: チームの実装ルールとして「UIは/design-system/の仕様に従う」を明文化し、出典表記のルールも合わせて社内に共有する
次回予告: 次の記事では、Claude Codeにプロジェクト固有の仕様書を読み込ませて運用する際の、CLAUDE.md・スキルの設計パターンをテーマにお届けします。
著者: 佐藤傑（さとう・すぐる）
株式会社Uravation代表取締役。X（@SuguruKun_ai）フォロワー約10万人。
100社以上の企業向けAI研修・導入支援。著書『AIエージェント仕事術』（SBクリエイティブ）。
SoftBank IT連載7回執筆（NewsPicks最大1,125ピックス）。
社内でClaude Codeを使った開発体制を整えたい、AI活用の研修を検討したいという方は、ご質問・ご相談はお問い合わせフォームからお気軽にどうぞ。
参考・出典
- デジタル庁デザインシステムβ版 — デジタル庁（参照日: 2026-07-24）
- リソース｜デジタル庁デザインシステムβ版 — デジタル庁（参照日: 2026-07-24）
- コンポーネント｜デジタル庁デザインシステムβ版 — デジタル庁（参照日: 2026-07-24）
- 利用上の注意事項｜デジタル庁デザインシステムβ版 — デジタル庁（参照日: 2026-07-24）
- お知らせ（コードスニペット）｜デジタル庁デザインシステムβ版 — デジタル庁（参照日: 2026-07-24）
- GitHub – digital-go-jp/design-system-example-components-react — デジタル庁（参照日: 2026-07-24）
あわせて読みたい:
- 自治体・行政のAI活用事例10選 — 官公庁・自治体でのAI活用の全体像
- Claude Code法人導入ガイド｜SSO・料金・部門別21例 — 社内でClaude Codeを本格導入する際の論点
Claude Code / Codex を“自社の業務”で使いこなすなら
週1回60分のマンツーマンで、御社の実務をその場で自動化。設計から定着まで、業務に合わせて伴走します。
- 30分・オンライン
- 売り込みでなく業務診断
- 完全マンツーマン
お問い合わせフォームから24時間以内にUravation担当者がご返信します。
