Googleが配ったDESIGN.mdが想像以上だった話のアイキャッチ画像
やってみた

Googleが配ったDESIGN.mdが想像以上だった話

「AIに作らせると毎回違うサイトが出てくる問題」への答え

AIにLP作らせるたび、雰囲気が毎回違う。月曜は青系、火曜は緑系、水曜は急に丸ゴシック。地味にストレス。「ブランドって何?」状態。

そんなとき、Claude Codeに相談したら、Googleが新しい仕様を公開したと教えてくれた。DESIGN.md。2026年4月21日、Apache 2.0で完全オープンソース。読んだ瞬間、「これ、私の問題、構造ごと解決する系」と思った。

DESIGN.mdって何?Claudeに3行で聞いた答え

Markdownファイル1枚に、ブランドの「見た目のルール」を書く。AIに読み込ませると、勝手にブランドどおりに作ってくれる。たった、それだけ。

ファイルの中身は二層構造。上半分はYAMLっていう機械が読む形式で、メインカラーは#2563EB、見出しはNoto Sansみたいに正確な値を書く。下半分は人間も読める普通の文章で、「この青は信頼感を表現するため」と理由(why)を書く。

Claudeいわく「色」だけじゃなく「意図」までAIに伝わるのが革命的、らしい。図にしてもらった。

DESIGN.md の二層構造
機械が読む値 + 人間が読む意図
YAML機械可読パートAIが正確な値を取得
— フロントマター — primary: “#2563EB” heading_font: “Noto Sans JP” spacing: “8px / 16px / 32px” radius: “8px”
Markdown人間可読パートAIが意図を理解
プライマリの青は信頼感を表現するため。広い面積では使わず、CTAボタンとリンクのみに限定。背景に使うとうるさくなるので避ける。
AIエージェントがブランドどおりに自動生成
Claude Code / Cursor / Gemini CLI / Antigravity 対応

対応AIエージェントが豪華すぎる

Claude Code、Cursor、Gemini CLI、Antigravity。主要どころが全部対応。

GitHubでは公開から72時間で5,200スターを獲得。普通は数百行けば話題作。これは事件レベル。

しかも npx @google/design.md lint コマンド一発で、色のコントラスト比(WCAG準拠)まで自動チェックしてくれる。「目に優しいデザインかどうか」を機械が判定。コード分からない私にもありがたい仕組み。

で、これ私の何が変わるの?

Claude Codeに「蒼井詠ブログでの活用方法」も聞いてみた。返ってきた答え、3つ。

1つ目、投稿用バナー画像が毎回ブレる問題が消える。配色・フォント・余白が固定される。

2つ目、LPやWordPressテーマの拡張がノーコードで一貫して進む。「詠っぽい雰囲気」が定量化される。

3つ目、複数キャラに展開するときの「ブランド分離」が一発でできる。第2キャラを作っても、世界観が混ざらない。

要するに、ブランドの再現性を仕組み化できるということ。私が一番好きなやつ。

注意点:まだalpha版

ただし現状はalpha版。仕様変更の可能性あり。本番のクライアント案件で全面採用するのは、まだ早い。

まずは自分のプロジェクトで試して、感触を掴むフェーズ。蒼井詠プロジェクト用のDESIGN.mdは近日中に書く予定。書いたら、結果も全部シェアする。

今日の結論

ブランドが揺れる、それは戦略の不在。

DESIGN.md、書いてないの?それ、AIに毎回ゼロから説明してるってこと。

非効率は罪よ。

で、あなたはやってみた?