行政のUIを一つにする「公式の部品箱」――デジタル庁デザインシステムβ版とは何か
確定申告、パスポートの更新、児童手当の申請。行政のオンラインサービスは、省庁や自治体ごとに別々の事業者が別々の時期に開発してきた結果、ボタンの色も形も、入力フォームのエラー表示も、サイトごとにバラバラだった。利用者は手続きのたびに「このサイトではどこを押せばいいのか」を学び直すことになり、視覚障害のある人や高齢者にとっては、その不統一自体が大きな障壁になってきた。
デジタル庁デザインシステム（公式サイトのURLパスに使われる略称は DADS = Digital Agency Design System）は、この問題に対する答えとして整備されている「公式の部品箱とルールブック」である。公式サイトによれば、その中身はスタイリングの考え方を示す「デザイン言語」、ボタンやフォームなど情報の視覚表現とインタラクションを具現化する「UIコンポーネント」、そしてユーザビリティとアクセシビリティを踏まえた設計・実装のための「ガイドライン」の3層で構成される。デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを掲げ、官公庁や地方自治体などの行政機関、公共性の高い組織のウェブサイトやウェブアプリケーションでの利用を念頭に構築されている。
身近な例で言えば、家具の組み立て説明書と規格化されたネジの関係に近い。「アコーディオン（開閉するパネル）はこういう見た目で、こういう時に使い、キーボードだけでも操作できなければならない」という仕様と、実際に使える部品（Figmaデータとサンプルコード）がセットで提供される。作り手が省庁ごとに違っても、同じ部品箱から組み立てれば、利用者にとっては「いつもの操作」で使えるサービスになる、という発想だ。英国政府の GOV.UK Design System や米国の U.S. Web Design System（USWDS）が先行してきた領域であり、日本では DADS がその役割を担う。重要なのは、行政・公共機関であるかどうかを問わず、誰でも無料で利用できると明記されている点で、実際には民間企業のデザイナーやエンジニアが「日本語UIのお手本」として参照するケースが目立つ。
Figmaの1ファイルから専用サイトへ――DADSの歩み
DADSの歴史は、2021年9月に発足したデジタル庁の初期から始まる。一般公開の起点は2022年11月で、このときはウェブサイトではなく、デザインツール「Figma」のファイルとして公開された。利用の手引き、配色やフォントをまとめたスタイル、ボタンなどの仕様をまとめたコンポーネント、サンプルUIのテンプレートまでが、1つのFigmaファイルに同梱される形だった。ビジュアルアセットの整備には日本デザインセンターが参画しており、同社はアートディレクター大黒大悟氏のもと、行政手続きを視覚的に表現するイラストレーションやシステムアイコン・サービスアイコンの設計を担当したことを自社サイトで公表している。
転機は2024年5月30日である。この日、専用サイト「デジタル庁デザインシステムβ版」が公開され、同時にデザインデータがv2.0.0へメジャーアップデートされた。それまでFigma内に書かれていた利用の手引きとガイドラインはウェブサイト側へ移され、「ドキュメントはサイトで読み、部品はFigmaとGitHubから取る」という現在の役割分担が確立した。2025年10月8日にはサイトURLが design.digital.go.jp から design.digital.go.jp/dads/ へ変更され、サイト内検索の追加（2025年7月30日）など機能面の拡充も続いている。旧v1系のFigmaデータは「【旧版】」として残るものの、今後はエラー修正のみの更新となる段階的廃止のフェーズに入っており、実務で参照すべきはv2系統に一本化されつつある。
以後の更新リズムは驚くほど安定している。公式の更新履歴を追うと、2025年から2026年にかけてほぼ毎月新バージョンが出ており、2025年12月24日のv2.10.0でカルーセルとファイルアップロードが、2026年3月18日のv2.11.0でタブが、4月にはコンボボックスと画像コンポーネントが、5月27日のv2.14.0でスタイルガイド初版が、6月24日のv2.15.0で目次・スイッチ・モーダルダイアログが追加された。そして2026年7月8日公開の最新版v2.16.0では、注釈ブロックの初版公開やテーブルの外周枠線追加などが行われている。「一度作って放置」ではなく、実利用のフィードバックを毎月取り込み続ける「生きたデザインシステム」であることが、海外の先行事例と比べても遜色ない特徴になっている。
中身を開く――カラー、タイポグラフィ、アクセシビリティ
基本デザイン（Foundations）は、カラー、タイポグラフィ、アイコン、レイアウト、リンクテキスト、余白、角の形状、エレベーション（要素の高さ表現）の8項目で構成される。
カラーは、Blue、Light Blue、Cyan、Green、Lime、Yellow、Orange、Red、Magenta、Purpleの10色相をそれぞれ13階調に展開したプリミティブカラーと、White・Black・Grayのニュートラルカラーが土台になる。その上に「成功（緑）」「エラー（赤）」「警告（黄・オレンジ）」といった意味を割り当てたセマンティックカラーが定義され、色の使い分けが恣意的にならないよう設計されている。実データはnpmパッケージ @digital-go-jp/design-tokens として配布されており、その中を見ると、DADSの顔とも言える濃い青 Blue-900 は #0017C1、淡い背景色 Blue-50 は #E8F1FE と定義されている。政府サイトで見かける、あの鮮やかなロイヤルブルーの正体がこの #0017C1 だ。
タイポグラフィは、オープンソースフォント（SIL Open Font License 1.1）である Noto Sans JP を本文用に、Noto Sans Mono を等幅用に採用する。特徴的なのはスタイルの命名規則で、たとえば「Std-17N-170」は「スタンダードスタイル・フォントサイズ17px・太さNormal・行間170%」を1つの名前に圧縮した表記である。この機械的な命名は人間には一見無骨だが、後述するAIエージェントにとっては極めて解釈しやすい形式になっている。本文の行間は150〜175%、14px未満の文字サイズは原則非推奨といった、日本語の可読性研究を反映した具体的な数値が並ぶ。
そして DADS を貫く柱がアクセシビリティである。コンポーネントの仕様には WCAG（Web Content Accessibility Guidelines）の達成基準が織り込まれ、2026年6月24日にはウェブアクセシビリティ基盤委員会（WAIC）の最新訳に合わせて達成基準の名称を修正するといった、地味だが誠実な追随が続く。フォーカスインジケーターやキーボード操作の仕様が最初から部品に組み込まれているため、「あとからアクセシビリティ対応を追加する」コストを構造的に減らせる。内閣府の「令和7年版障害者白書」（Web版）の関連リンクにも掲載されており、障害者施策の文脈で公的文書から参照される存在になっている。
Markdown形式での一括配布が始まった――2026年7月8日の静かな転換点
今回の記事の核心がここだ。2026年7月8日、デジタル庁はデザインシステムβ版サイトで「Markdownファイルの提供」を開始した。公式のお知らせは「本ウェブサイトを構成する全てのドキュメント・アクセシビリティガイドラインの一式です」という簡潔なもので、ZIP形式でまとめてダウンロードできる。最新版は「デジタル庁デザインシステムβ版サイト ドキュメント（Markdown）2026年7月15日版」のように日付でバージョン管理され、「今後、本ウェブサイトの内容が更新されるたびに、Markdownファイル一式も更新されます」と同期更新が明言されている。あわせて7月14日には「利用上の注意事項」が更新され、Markdown資料への言及が加筆された。
なぜこれが重要なのか。Markdownは人間が読み書きしやすいだけでなく、Claude Code、Cursor、GitHub Copilot といったAIコーディングエージェントが最も自然に取り込めるテキスト形式だからである。従来、AIにDADSのルールを守らせたい開発者は、ウェブサイトを自力でスクレイピングして整形するか、要点を手作業で書き写す必要があった。実際、公式提供に先行して、2026年4月10日にはnoteでタテイシ氏が、DADSの資料を「共通基盤・入力系・ナビゲーション・表示系・フィードバック系・操作系」という実務の判断単位で再分類し、SKILL.md・INDEX.md・LOAD_RULES.mdの3ファイル構成でClaudeのスキルとして整理する試みを公開していた。必要な部分だけを読み込ませてトークン消費を抑えるという設計は、まさに「公式Markdownが無いこと」への対処だった。公式の一括配布は、こうしたコミュニティの手作業を一夜にして不要にした。
タイミングも絶妙だった。2026年4月21日、Google LabsはUI生成ツール「Stitch」で使われてきた DESIGN.md のドラフト仕様をApache 2.0ライセンスでオープンソース化し、「AIエージェントにデザインシステムの値と意図を伝える標準ファイル」という考え方を業界に広めた。gihyo.jpやCodeZineがこれを報じ、Qiita・Zenn・企業技術ブログでは「デザインシステムはAIが読める形で配るもの」という認識が急速に共有されていた。DADSのMarkdown配布は、DESIGN.mdのようなフロントマター付き単一ファイル仕様でも、近年サイト側で流行する llms.txt 方式でもなく、サイト全文をZIPで丸ごと渡すという素朴な形式だが、「政府のデザインシステムがAI時代の配布形態に公式対応した」という点で、この潮流と完全に合流している。デジタル庁自身はAI用途を声高に語っていないものの、ドキュメント・デザインデータ・コード・トークンのすべてが機械可読になったことの意味は大きい。
Figmaとコード――デザインからnpmパッケージまで一気通貫
デザイナー向けの本丸はFigmaデータである。Figma Community上で「デジタル庁デザインシステム デザインデータ」として公開されており、無料のFigmaアカウントがあれば誰でも複製して使える。ライセンスはCC BY 4.0（データに含まれるMaterial Symbolsアイコン部分はApache License 2.0）で、編集・加工したデータから作ったUIを自分のサービスで使う場合には出典記載も不要という、実務に配慮した条件になっている。v2.16.0時点のコンポーネントは、アコーディオン、テーブル/データテーブル、タブ、コンボボックス、日付ピッカー、カルーセル、ファイルアップロード、ステップナビゲーション、モーダルダイアログ、チップラベル、注釈ブロックなど、行政手続きのフォーム画面を組むのに必要な部品が一通り揃う。
エンジニア向けにはGitHubの digital-go-jp オーガニゼーションでコードスニペットが公開されている。2026年7月16日時点で、React版サンプルコンポーネント（design-system-example-components-react）が623スター、HTML版が69スター、デザイントークン（design-tokens）が75スター、Tailwind CSSテーマプラグイン（tailwind-theme-plugin）が111スターと、政府系リポジトリとしては異例の支持を集める。ライセンスはすべてMITで、Storybookによる実装例の確認もできる。
技術的に面白いのはトークンのパイプラインだ。design-tokensリポジトリのREADMEによれば、デザイントークンはFigmaプラグイン「Tokens Studio」で管理され、Figma上の更新がGitHubリポジトリへプッシュされると、GitHub ActionsがStyle Dictionaryでビルドし、npmパッケージ @digital-go-jp/design-tokens としてリリースされる。つまり「Figmaで色を変えると、npm経由でコードの色も変わる」自動化が政府のデザインシステムで動いている。CSS向けには全トークン入りの tokens.css と、色・フォント・エレベーションに絞った軽量版 tokens-simple.css が提供される。
一方で、サイボウズのフロントエンドエンジニアBaHo氏が2024年6月25日のZenn記事で指摘したとおり、DADSはReactやWeb Componentsの「完成品UIライブラリ」を配布しない方針を取っている。提供されるのはあくまで「作例」としてのスニペットであり、各事業者が自分たちの技術スタックに合わせて実装することが前提だ。同記事はガイドラインの作り込みを高く評価しつつ、当時のv1/v2仕様の混在に注意を促しており、現在のv2一本化と月次更新体制は、こうした初期の指摘が解消されていく過程でもあった。
実践――Claude CodeにDADSを読ませ、Marp用スライドテンプレートを作る
素材が全部機械可読になった今、何ができるのか。エンジニアリングの現場で最も手軽に効果を体感できる応用が、Markdownベースのスライド作成ツール「Marp」のテンプレート生成である。Marp（Markdown Presentation Ecosystem）はOSSプロジェクトmarp-teamが開発するツールチェーンで、--- 区切りのMarkdownをスライドに変換し、見た目はCSSファイル1枚の「テーマ」で差し替えられる。VS Code拡張やCLIが揃い、スライドをGitで差分管理できることから、2026年のエンジニア界隈では標準的な資料作成手段になりつつある。Qiitaでは広木大地氏が2026年1月30日に公開した「AIエージェントと協働してmarpでスライドを作る2026」が547いいねを集め、スタイルガイド適用・スクリーンショットによるレイアウト検証・SVG図解生成までをClaude Codeのスキルとして自動化する構成を示した。
DADSのMarkdown一式とデザイントークンを組み合わせると、この流れに「政府品質の配色とタイポグラフィ」を注入できる。手順はシンプルだ。まず公式サイトのリソースページからMarkdown ZIP（2026年7月15日版）をダウンロードし、プロジェクトの docs/dads/ などに展開する。次にCLAUDE.mdやAgent Skillsから参照させ、たとえば次のように指示する。
docs/dads/ にデジタル庁デザインシステムのMarkdown一式を置いた。
基本デザインのカラーとタイポグラフィの定義を読み、Marp用テーマCSS「dads.css」を作って。
- 見出しとアクセントは Blue-900 (#0017C1)、囲みの淡色背景は Blue-50 (#E8F1FE)
- フォントは Noto Sans JP、本文は 17px・行間 1.7（Std-17N-170 準拠）
- タイトル用・本文用・セクション区切り用の3クラスを定義
完成したら marp-cli でサンプル3枚をPNG出力し、文字のはみ出しを確認して。
ポイントは、色コードやフォント名を人間が暗記して伝える必要がないことだ。DADSのドキュメントには「Std-17N-170＝17px・Normal・行間170%」のような機械的に解釈できる命名が使われているため、Claude Codeは定義の出典ごと理解した上でCSSに落とし込める。さらに近道として、npmの @digital-go-jp/design-tokens が配る tokens-simple.css をMarpテーマから読み込み、var(--color-primitive-blue-900) のようにCSS変数で参照すれば、将来トークンが更新されてもテーマ側の追随が最小限で済む。仕上げは広木氏のワークフローに倣い、marp-cliで画像出力→Claude Codeに目視相当のレイアウト検証をさせる修正ループを回すと、「タイトルは #0017C1 の地に白抜き、本文はNoto Sans JPで行間170%、注意喚起はセマンティックカラーの警告色」という、行政資料らしい端正なテンプレートが短時間で得られる。
note発の隣接事例も豊富だ。パワポ図解で知られるしらき氏は2026年4月16日の記事で、デジタル庁が公開する「ダッシュボードデザインの実践ガイドブック」（2026年3月31日刷新）のデザインテンプレートをClaudeのスキル化し、SKILL.mdとdesign-tokens.mdに配色・フォント・余白を定義して既存PowerPointをワンクリックでリデザインする手法を示した。その後、配色を7種類（Solid Gray/Blue/Light Blue/Cyan/Green/Orange/Red）に展開するカラーバリエーション化も公開している。ガイドブック系テンプレートはPowerPoint向け、DADS本体はWeb UI向けと出自は異なるが、「政府公式のデザイン定義をAIに読ませ、自分の成果物へ転写する」という同じパターンの上にあり、Marpテンプレート生成はそのMarkdown版と位置づけられる。
実務上の注意はライセンス表記である。ドキュメント（Markdown）はデザインシステム本体の一部としてデジタル庁ウェブサイトの著作権ポリシーに従い、コンテンツを利用する場合は「出典：デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/dads/」の記載が、編集・加工した場合はその旨の明記が求められる。また「編集・加工した情報を、あたかもデジタル庁が作成したかのような態様で公表・利用してはいけない」と明確に禁じられているため、生成したテンプレートで作ったスライドを社外配布する際は、デジタル庁公式資料と誤認されない体裁にしておくことが必須だ。逆に言えば、この2点さえ守れば商用利用も自由という、極めて開かれた条件である。
技術者・デザイナー・各メディアはどう報じているか
報道の広がり方には明確な特徴がある。テレビや新聞のような一般メディアではなく、開発者コミュニティが震源になっている点だ。
Markdown提供開始の直後、はてなブックマークではリソースページのエントリーに2026年7月15日から16日にかけてブックマークが集中し、7月16日時点で28ユーザーが登録した。数としては爆発的ではないが、著名なOSS開発者を含むエンジニア層が「議論するまでもなく保存する」反応を見せたのが実態で、コメント欄での賛否より先に実用が始まる、道具的な受容のされ方をしている。Zennではサイボウズフロントエンドの技術検証記事（2024年）以来、DADSを題材にした実装・分析記事が蓄積し、GovTech東京のエンジニアによる「東京都版カラーパレットができるまで」のように、デジタル庁の成果物を参照して自治体側が独自の標準化に踏み出す連鎖も記録されている。
noteではデザイナー・資料作成層のムーブメントが先行した。前述のタテイシ氏のスキル化記事、しらき氏の一連のClaude×デジタル庁テンプレート記事は2026年4月に相次いで公開され、「政府のデザイン資産×生成AI」という組み合わせを一般のビジネスパーソンにまで広げた。デジタル庁自身も広報を強化しており、2024年10月17日のデジタル庁ニュースではデザインシステムを「アクセシビリティファースト」の取り組みとして動画付きで紹介、2026年4月22日には「ダッシュボードデザインの実践ガイドブックとデザインテンプレート」の活用事例集を公開し、デジタル認証アプリの利活用ダッシュボード、約48万人の職員が使う電子決裁システムEASYの分析、国立教育政策研究所の全国学力・学習状況調査アーカイブ、東京都「データでわかる東京」という4事例を具体的に示した。国立教育政策研究所の事例では「テンプレートという『正解の型』があったため、レイアウトや配色の試行錯誤が最小限になった」という現場の声が紹介されている。
技術系メディアでは、DADSそのものより「AIが読むデザインシステム」という文脈での報道が厚い。gihyo.jpとCodeZineはGoogleのDESIGN.md仕様OSS化（2026年4月）をそれぞれ報じ、DevelopersIO（クラスメソッド）は自社デザインガイドのDESIGN.md化を実験するなど、企業ブログ圏では「機械可読なデザイン定義」の実装例が続々と出ている。DADSのMarkdown配布を単発ニュースとして大きく扱った一般ITニュースサイトは現時点で確認できず、その意味で本件は「静かだが、実務家の行動を確実に変えた」タイプの発表と言える。エンジニアとデザイナーの受け止めを総合すると、評価点は「政府が出す日本語UIの規範として品質が高い」「毎月更新が続く信頼感」「Figma・コード・トークン・Markdownと、職種ごとの入口が全部ある」の3点に集約され、批判的な論点としては完成品UIライブラリ非配布ゆえの実装コスト、そしてβ版という位置づけの曖昧さが残る。
今後の展望――正式版への道と、AIエージェント連携の行方
確実に予定されている動きから押さえたい。第一に、Markdown一式はサイト更新のたびに同期更新されると公式に明言されており、月次のバージョンアップごとに新しい日付版が出続ける。第二に、v1系Figmaデータの段階的廃止が進行中で、エラー修正のみの保守を経て、参照先はv2系へ完全に一本化されていく。第三に、更新履歴が示す2024年以降のほぼ月次のリリースサイクルからは、2026年8月下旬から9月にかけて次期バージョン（v2.17.0相当）が出るという見通しが立つ。スタイルガイド（2026年5月初版）やモーダルダイアログのv2化（同6月)など、直近は既存部品の成熟に軸足が移っており、フォーム系・ナビゲーション系の網羅が進んだ今、残るギャップの補完と作例拡充が当面の中心になるとみられる。
「正式版」がいつ来るのかについて、デジタル庁は時期を公表していない。2022年のFigma初公開から4年近く「β」を掲げ続けているが、その間に専用サイト公開、URL恒久化、npm配布、Markdown配布と基盤整備は着実に進んでおり、βの文字はむしろ「仕様変更の自由を確保するための宣言」として機能している。調達との接続はすでに始まっており、公式サイトには調達事業向けに特定バージョンを提供する個別対応の窓口が用意されている。政府情報システムの調達仕様にDADS準拠が書き込まれる事例が増えるほど、事実上の標準としての地位は正式版の名を待たずに固まっていくだろう。
AI連携の行方は、業界全体の動きとの合流点を見るのが良い。GoogleのDESIGN.md、各所で進むMCP（Model Context Protocol）対応と、「デザインシステムをエージェントに配る」ためのインフラは急速に整備されている。DADSのMarkdown ZIPは現時点では最も素朴な形だが、トークンがnpmで、コードがGitHubで、ドキュメントがMarkdownで揃った今、コミュニティがMCPサーバーやDESIGN.md形式への変換レイヤーを被せるのは時間の問題であり、公式が追認・吸収していく展開も考えられる。確実なのは、2026年7月8日を境に「日本の行政UIの知識は、AIに直接手渡せる資産になった」ということだ。Marpのスライドテンプレートはその最初の小さな応用にすぎず、行政サービスのプロトタイプ生成、自治体サイトの自動監査、アクセシビリティ検証の自動化と、この部品箱から組み立てられるものはこれから増えていく。