AIが洗練された統一感のあるデザインを作り出すDESIGN.md
Claude CodeやCodexなどのAIエージェントに画面を作らせると、画面ごとに色や角丸、余白が少しずつ違ったり、どこかで見たようなAIっぽい見た目になったりします。
これはAIの仕組みからすると当然のことで、AIが下手なわけではありません。デザインの決まりごとを渡していないことが原因です。
この決まりごとをAIに渡すファイルが、Googleが公開した規格のDESIGN.mdです。
この記事では、DESIGN.mdの仕組みと具体的な利用方法を解説します。
動画で見たい方はこちら。
AIっぽいデザインの原因は、無難なデザインに収束するから
Claude Codeを開発するAnthropicは、公式ブログで、AIっぽいデザインが生まれる理由を説明しています。
指示なしでAIにLP（商品PRのWebページ）を作らせると、ほぼ必ずInterフォントに白地の紫グラデーション、控えめなアニメーションになるそうです。
原因は「分布の収束」です。学習データは、万人向けで誰も不快にしない無難なデザインがほとんどのため、指定がないとAIはこの無難なデザインを出します。
画面ごとにデザインがブレるのも同じ理由です。無難な選択肢はいくつもあり、指定がなければ毎回そのどれかを選ぶため、色や余白が少しずつ変わります。
曖昧な指示ほどAIは無難な答えに逃げるのは、文章でもデザインでも同じ。解決策は、デザインのルールを明文化してAIに渡すことです。
DESIGN.mdは「どんな見た目にするか」をAIに伝えるGoogle公式の規格
DESIGN.mdは、Googleが2026年4月21日にドラフト仕様をオープンソース化し、どのAIツールでも使える規格になりました。
AIへの指示ファイルとして知られる AGENTS.mdが「プロジェクトをどう作るか」を定義するのに対し、DESIGN.mdは「どんな見た目の成果物を作るか」を定義します。
DESIGN.mdの中身は以下のような2層です（公式ページからの抜粋）。
---name: Heritagecolors: primary: '#1A1C1E' secondary: '#6C7278' tertiary: '#B8422E' neutral: '#F7F5F2'typography: h1: fontFamily: Public Sans fontSize: 3rem body-md: fontFamily: Public Sans fontSize: 1rem label-caps: fontFamily: Space Grotesk fontSize: 0.75remrounded: sm: 4px md: 8pxspacing: sm: 8px md: 16px---
## Overview
建築的なミニマリズムと、報道紙のような重厚さ。高級な新聞や現代的なギャラリーを思わせる、上質なマット仕上げの画面にする。
## Colors
パレットは、高コントラストの無彩色と、1つのアクセントカラーで構成する。
- **Primary (#1A1C1E):** 見出しと本文に使う深い墨色- **Secondary (#6C7278):** 罫線・キャプション・補足情報に使う落ち着いたスレートグレー- **Tertiary (#B8422E):** 「ボストンクレイ」。操作を促す唯一の色- **Neutral (#F7F5F2):** 純白より柔らかい、温かみのある石灰岩色の土台- 先頭のYAML：色・書体・角丸・余白などのデザイントークン（名前付きの値）。機械が読む部分
- 本文のMarkdown：色や書体をなぜそう決めたか、どう使うかの説明。人が読む部分
本文の章は、概要、色、書体、レイアウト、影と奥行き、形、コンポーネント、Do’s and Don’ts（やることやらないこと）の8つ。不要な章は省略できますが、書く順番は公式の仕様でこの順と決まっています。
上の例は、先頭の2章だけを書いたものです。
有名企業のDESIGN.mdを利用する
自分のアプリやサイトのDESIGN.mdをゼロから書くのは大変です。おすすめは、GitHubのawesome-design-mdから見本を取ってくることです。
awesome-design-mdには、実在するWebサイトから作られたDESIGN.mdが、2026年9月時点で74サイト分あります。無料で使えるMITライセンスです。
掲載サイトは、Apple、Airbnb、Stripeなどの有名企業。
各サイトでは、DESIGN.mdのほかに色見本・文字・ボタン・カードの見た目をダークモード版も含めて確認できます。
使うときはAIに対象サイトのURLを渡し、「このサイトのDESIGN.mdを私のプロジェクトに導入して」と伝えればOKです。
利用するDESIGN.mdを日本語版で作り替える
awesome-design-mdのDESIGN.mdは、全て英語で書かれています。自分で読んで直せるように、AIに日本語へ翻訳させましょう。
フォントも差し替えが必要です。AppleのSF Proのように、日本語を含まないフォントが指定されているからです。
差し替え先には、Noto Sans JPなどの日本語フォントを使います。Google Fontsのフォントは全て無料で商用利用も可能です。
翻訳とフォント差し替えは、次の依頼文をAIにそのまま送ればOKです。
`DESIGN.md` を日本語に翻訳して。YAMLのキー名とトークン名は英語のまま残して。フォントはすべて Noto Sans JP に差し替えてDESIGN.mdをAIに読ませるための設定方法
作ったDESIGN.mdをAIが毎回読むようにするには、AIの指示ファイルに1行足します。
Claude Codeなら、CLAUDE.md に次の1行を書きます。
@DESIGN.md@ から始まるこの書き方は、Claude Codeの公式ドキュメントにあるimport構文です。指定したファイルが起動時に読み込まれます。
Codexは作業を始める前に AGENTS.md を読むので、AGENTS.md に次の一文を書きます。
UIは `DESIGN.md` に従うこれで、次からデザインに関わる作業をするとき、AIはDESIGN.mdに従うようになります。
上級編：DESIGN.mdは指針で強制ではない。Linterで守らせる
ここからは少し上級レベルの話です。
DESIGN.mdを作っても、それはAIが従うべき指針であって、強制ではありません。Claude Codeの公式ドキュメントも、指示ファイルは強制された設定ではなく文脈として扱われると明記しています。
AIがDESIGN.mdの指示を無視したり見落としたりすれば、ルールを守らない画面ができてしまいます。
それを防ぐのがLinterです。Linterとは、プログラムのコードを、あらかじめ定義したルールに従って機械的に検査するツール。ルール違反のコードがあったら、AIにその変更をコミットさせないこともできます。
Linterの仕組みはLinterとFormatterの解説記事で詳しく紹介しています。
Linterを使えば、DESIGN.mdで定義した色やフォント、余白のルールに、AIを強制的に従わせることが可能です。
以下の指示で、AIにDESIGN.mdを守らせるLinterの設定をさせることができます。
`DESIGN.md` で決めたトークン以外の色・角丸・影をコードに直接書いたら、Linterでエラーにして。既存コードにある例外は許可リストにまとめて、エラー文には `DESIGN.md` の該当する章名を入れて。lefthookでコミット前に実行するようにしてDESIGN.md自体もGoogle公式CLIで検査・変換できる
DESIGN.md自体も、Google公式のコマンドで検査・変換できます。Node.js（無料）があれば、インストール不要で次のコマンドが動きます。
npx @google/design.md lint DESIGN.mdこのコマンドは、DESIGN.mdを仕様に照らして検証します。壊れたトークン参照はエラー、文字色と背景色のコントラスト比がWebアクセシビリティ基準WCAG AAの最低値（4.5:1）を下回ると警告です。
結果はJSONで出力されるので、AIにそのまま読ませて直させることもできます。
また、export コマンドで、DESIGN.mdの色定義などを、プログラムで使うトークンの形式に変換できます。Tailwind CSS v4の @themeやW3C Design Tokens形式などに対応しています。
詳しくは公式リポジトリを見てみてください。
まとめの前に、お知らせを。
無料メルマガで実務で使えるAI活用を毎日配信中。1分で登録できます。
超実践AI論Substacktaichiaiworker.substack.com
ながら聞きで、AIを仕事に活かす方法がわかるポッドキャストをSpotifyでも配信しています。
超実践AI論Spotifyopen.spotify.com
まとめ：DESIGN.mdでAIにデザインセンスを与える
この記事の要点は次の4つです。
- AIのデザインがAIっぽくブレるのは、学習データの無難なデザインに収束するから。決まりごとを渡せば防げる
- DESIGN.mdはGoogle公式の規格。awesome-design-mdから有名企業の見本を借り、日本語化してフォントを差し替て使うのがラク
- CLAUDE.mdなら
@DESIGN.md、AGENTS.mdなら「UIはDESIGN.mdに従う」の1行で、AIが読むようになる - DESIGN.mdは指針で強制ではない。確実に守らせるならLinterで違反をエラーにし、コミット時に検査する
ぜひあなたも、自分のアプリやサイトにDESIGN.mdを導入して、AIのデザインセンスを磨いてみてください。
この記事をシェア
