AIがバラバラなUIを作る問題、これで解決？ Google提唱の新標準「DESIGN.md」とは：Deep Insider Brief ― 技術の“今”にひと言コメント
AIが作るUIは、毎回デザインがバラバラになることがある。この課題を解決するかもしれない新標準が登場した。Googleが提唱する「DESIGN.md」の概要と書き方、AIコーディングにおける.mdファイル運用に関する筆者の考え、さらに開発者コミュニティーでの広がりをまとめる。
AIコーディングエージェントの進化により、自然言語でWebサイトのUI（ユーザーインタフェース）が作れるようになった。しかし実際に使ってみると、「修正を頼むたびにボタンの形が変わる」「ページごとに色のトーンがバラバラになる」といった、デザインの一貫性が保てない問題に直面することがある。
この「AIがバラバラなUIを作る問題」に対し、Google LabsのStitchチームが、2026年3月18日（米国時間）に公式ブログで注目すべき解決策を提示した。それが、プロジェクトのルートディレクトリ（最上層のフォルダ）に置く設計図、DESIGN.mdファイルだ。
DESIGN.mdファイルは、AIが理解するために最適化されたデザインシステム（共通ルール）用のドキュメントである。Markdown（マークダウン：簡単な記号で構造化するテキスト形式）の見出しやリスト構造を活用することで、人間が読んでも理解しやすく、AIに読み込ませても正確にルールを反映できる設計になっている。
公式ドキュメントによると、このファイルには色、タイポグラフィ（文字のデザイン）、余白、コンポーネント（部品）のスタイルなどを定義する。AIエージェントはプロジェクトを開始する際、このファイルを読み取ることで、Webサイトが持つ“ブランド”のトーン＆マナーを外さずに一貫したUIを出力できるようになる。つまり、プロジェクト固有の「デザインのコンテキスト（文脈）」をAIに渡すための“フォーマット”として設計されている。
――ここからは『Deep Insider Brief』恒例の“ひと言コメント”として、私自身が実践している「AIにデザインを守らせるための運用術」を補足したい。その後で、DESIGN.mdの仕様と構成要素を簡潔に説明する。また、このDESIGN.mdはStitch用として発表されて以降、ユーザーコミュニティーを中心にさまざまな場面で広がり続けているので、その内容も含めて紹介する。AIコーディングを行う人は、ぜひチェックしてほしい。
Deep Insider編集長の一色です。こんにちは。
私自身はフロントエンドやUX（ユーザー体験）の専門家ではありませんが、Webアプリケーションを作る際にはAIをフル活用しています。そこで痛感するのは、AIは「言ったことをすぐに忘れる」という性質を持っていることです。仕様書（SPEC.mdファイル）を渡しても、長時間対話していると初期の仕様やルールを読み飛ばし、勝手な解釈でUIを作り始めることがあります。
この「AIの指示無視」を防ぐために私が確立しているのが、網状の参照構造です。具体的には、CLAUDE.mdやAGENTS.mdといったAIの行動指針を書くファイルの中に、「UI生成時は必ずDESIGN.mdのルールを厳守せよ」という一文を入れ、物理的に参照パス（読み込み経路）を固定しています。この中にDESIGN.mdを組み込むことで、プロジェクト固有の「デザイン厳守ルール」となるはずです。
私は、こういったMarkdownファイルの多くをAI自身に書かせ、定期的に見直し（ブラッシュアップ）も行っています。この作業は本当に大切だと私は考えており、皆さんにもぜひお勧めします。DESIGN.mdについても、この運用により、AIコーディングエージェントが「気まぐれな作業者」から「忠実な専属デザイナー」へと育っていくことが期待されます。
それでは、Googleが公開したレファレンスに基づき、DESIGN.mdの具体的な書き方（サンプル）とその構成要素を確認しよう。ここからは箇条書きを中心にしてシンプルにまとめる。
DESIGN.mdの仕様と構成要素
以下は、Google提供のDESIGN.mdサンプルを、日本語に翻訳したバージョンだ。
# デザインシステム（Design System）
## 概要（Overview）
開発者向け生産性ツールのための、フォーカスを絞ったミニマルなダークインタフェース。
クリーンなライン、視覚的ノイズの抑制、および高い情報密度を特徴とする。
## カラー（Colors）
- **Primary（主要色）** (#2665fd): CTA（Call to Action：行動喚起）、アクティブ状態、主要なインタラクティブ要素。
- **Secondary（補助色）** (#475569): 補助的なUI、チップ（タグ状の小さなUI部品）、二次的なアクション。
- **Surface（サーフェス）** (#0b1326): ページの背景色。
- **On-surface（オン・サーフェス）** (#dae2fd): ダーク背景上のプライマリテキスト。
- **Error（エラー）** (#ffb4ab): バリデーションエラー、破壊的なアクション（削除など）。
## タイポグラフィ（Typography）
- **見出し（Headlines）**: Inter、セミボールド。
- **本文（Body）**: Inter（フォントの一つ）、レギュラー、14〜16px。
- **ラベル（Labels）**: Inter、ミディアム、12px、セクションヘッダーには大文字（Uppercase）を使用。
## コンポーネント（Components）
- **ボタン（Buttons）**: 角丸 (8px)、プライマリボタンにはブランドカラー（ブルー）の塗りつぶしを適用。
- **入力フォーム（Inputs）**: 1pxのボーダー、控えめなサーフェスバリアント（背景色と微妙に異なる色）を入力フォームの背景に適用。
- **カード（Cards）**: エレベーション（影による浮き上がり）は使用せず、ボーダーと背景のコントラストで表現。
## 禁止事項と推奨事項（Do's and Don'ts）
- **Do（推奨）**: プライマリカラーは控えめに使用し、最も重要なアクションにのみ適用すること。
- **Don't（禁止）**: 同一のビュー内で、角丸とシャープな角を混在させないこと。
- **Do（推奨）**: 全てのテキストにおいて 4:1 以上のコントラスト比を維持すること。
DESIGN.mdに含めるとよい主なセクション
必ずしもこの通りにする必要はないが、主に以下のようなセクションをDESIGN.mdファイルに記載することが公式サイトで推奨されている。
- Overview（概要）：
インタフェースの全体的な方向性や「Vibe（雰囲気）」を自然言語で記述する。高レベルの意思決定やデザインの性格をAIにガイドする役割を持つ。 - Colors（カラー）：
Primary（主要色）、Secondary（補助色）、Tertiary（アクセント色）、Neutral（ニュートラル／背景色）などの配色のHEXコード（16進数の色記号）と用途を定義する。定義したベースカラーから派生色（surface：サーフェス、on-primary：プライマリ上の文字色、error：エラー色、outline：境界線など）が自動生成され、AIによるUI生成でも活用される。 - Typography（タイポグラフィ）：
フォントの種類、サイズ、太さ、行間などを指定し、見出し、本文、ラベルなど階層ごとのルールを明示する。 - Elevation（深さ・影）：
コンポーネントの浮き上がりや影の有無を定義し、階層構造や奥行きを表現する。 - Layout / Spacing（レイアウト／余白）：
余白の基本単位やグリッドルールを定義し、要素間の距離や配置を調整する。 - Components（コンポーネント）：
ボタンやカードなど再利用する部品の具体的な見た目やスタイルを記述する。 - Do's and Don'ts（推奨事項と禁止事項）：
AIがやってよいこと、やってはいけないことを明文化し、デザインの逸脱を防ぐ。
ユーザーコミュニティーでの発展とエコシステム
そもそもDESIGN.mdはStitch専用ではなく、Claude CodeやOpenAI Codexなど、どのAIツールでも利用可能でベンダーロックインがない。そのため発表から間もないが、多くの開発者コミュニティーで活用され、周辺ツールも登場している。大きな注目を集めつつあり、将来的に“事実上の標準”になっていく可能性がある。
- 有名サイトのデザイン解析・抽出：
npmのbrandmdパッケージなどを使い、AppleやStripeなどのサイトからデザインルールを抽出してDESIGN.mdを自動生成する試みが進んでいる。 - テンプレート集の公開・共有：
awesome-design-mdリポジトリやサイト「designmd.ai」など、すぐに使える高品質なDESIGN.mdテンプレートを集めたコレクションやコミュニティーサイトが複数立ち上がっている。 - CLIやMCPによるツール連携：
designmd CLIを使えばターミナルからデザインシステムを検索／ダウンロードでき、MCP（Model Context Protocol）サーバ経由でAIエージェントがDESIGN.mdを構造化データとして直接読み取る仕組みも整備されつつある。 - 日本語での実践記事も登場：
日本語圏でも、DESIGN.mdを5パターン自作してClaude Codeでデモサイトを生成した実践レポート（Qiita）や、既存のClaude CodeスキルからDESIGN.mdへの移行を試みた記事（DevelopersIO）が公開されており、国内でも関心が広がり始めている。
情報元
Copyright© Digital Advantage Corp. All Rights Reserved.