DESIGN.md作成ツールを作った理由 10問でデザインのズレを減らす

DESIGN.md は、デザイン修正を減らすための入口です。
サイトの見た目を変えるたびに何度も説明し直しているなら、先に判断基準を文章にしたほうが速いです。

今回は、そのための DESIGN.md 生成ツール を作りました。
10個の質問に答えるだけで、DESIGN.md と UI生成用のプロンプトをまとめて作れる仕組みです。

DESIGN.mdは何をするファイルか

DESIGN.md は、AIと人が同じ見た目ルールを読むためのファイルです。
Google Stitch は README.md が「何のプロジェクトか」、AGENTS.md が「どう作るか」、DESIGN.md が「どう見せるか」を担う考え方を出しています。
How many designs の記事でも、DESIGN.md は「AI のためのデザイン説明書」と整理されていました。
また、Zenn の導入記事では、AI と人が同じ判断基準で UI を実装するための入口ドキュメントとして説明されています。

要するに、センスを揃えるための紙ではありません。
判断基準を揃えるための紙です。

サイト改修で起きやすい悩み

DESIGN.md がないと、次のズレが起きやすいです。

• 毎回「もう少し落ち着いた感じで」と言い直す
• 1回で終わらず、修正依頼が何往復も続く
• どこが違和感なのか言葉にしにくい
• ページごとに余白やボタンの雰囲気が少しずつずれる
• AIに作らせるたびに別の見た目になる

特に厄介なのは、大きな失敗より小さなズレです。
Zenn の記事でも、余白、角丸、フォーム密度のばらつきが少しずつ積み重なることが問題として挙げられていました。

DESIGN.mdがあると何が変わるか

DESIGN.md があると、最初に共有するべきことが先に固まります。

• 何を優先するかが決まる
• どう見せたいかが短い言葉で残る
• 避けたい雰囲気も先に明文化できる
• AIに毎回同じ説明をしなくて済む
• 修正依頼が「感覚」ではなく「差分」になる

つまり、修正ゼロになるわけではありません。
でも、修正の中身がかなり変わります。
「なんか違う」ではなく、「ここは余白を広めに保つ」「CTAはもっと目立たせる」のように直せます。

作る前に必要なのは10個の答え

ここで詰まりやすいのが、DESIGN.md に何を書けばいいかです。
いきなり Markdown を開いても、普通は止まります。

そこで、先に答えるべき質問を10個に絞りました。

この10個があると、かなり整理できます。
なぜなら、デザインのズレは多くの場合、配色の前に「目的」「誰向けか」「何を避けるか」が曖昧なところから始まるからです。

10問に答えるとDESIGN.mdが生成される

今回作ったツールは、上の10問に答えると DESIGN.md をその場で生成します。
さらに、その DESIGN.md をもとにした UI生成プロンプトも同時に出します。

流れはこれだけです。

1. 質問に答える
2. 回答を構造化する
3. DESIGN.md を出す
4. UI生成用プロンプトを出す

つまり、感覚のまま話していた内容を、AIに渡せる形へ変換しています。

このツールで出している内容

生成される DESIGN.md には、少なくとも次の要素が入ります。

• PURPOSE
• TARGET
• TONE
• NG
• PRIORITY
• REFERENCE
• VISUAL
• MEDIA POLICY
• CURRENT ISSUES / IMPROVE
• KEEP / CHANGE

さらに、回答内容からキーワードを拾って、構造ルールも補います。
たとえば「静か」「余白広め」「信頼感」のような回答が入ると、広めのレイアウト、落ち着いたトーン、読みやすさ重視といった方向が STRUCTURE RULES に反映されます。

これで、ただのメモではなく、次の生成に使える DESIGN.md になります。

いちばん大きいのは修正依頼が減ること

この仕組みの価値は、Markdown を作ること自体ではありません。
修正依頼を減らせることです。

今までは、

• まず作る
• 何か違う
• また説明する
• もう一回作る

となりがちでした。

DESIGN.md があると、

• 先に意図を言葉にする
• その意図をファイルで残す
• AIも人も同じ前提を見る
• 直すときも同じ前提に戻れる

という流れに変わります。

これが、時間短縮より先に効きます。
結果として、やり取りも減ります。

DESIGN.mdは完成品ではなく入口

ここは大事です。
DESIGN.md は、最初から完璧である必要はありません。

Google Stitch は、プロンプト、URLや画像、手書きの3通りで DESIGN.md を作れる形を出しています。
Zenn の記事も、巨大な全部入り文書ではなく、正本、対応関係、検証方法へつなぐ軽い入口として扱うほうが運用しやすいと整理していました。

なので、まずは軽く作れば十分です。
1回目の生成で全部決めるより、実際に画面を見てから追記したほうが現実的です。

ここでもうひとつ大事なのは、細かくしすぎないことです。
DESIGN.md は細かく育てることもできます。
ただ、やりすぎると更新に時間がかかります。AIに渡すトークンも増えます。
だからこそ、必要な差分だけを適切に足していく運用がちょうどいいです。

まずは質問に答えればいい

もし DESIGN.md を作りたいけれど、何から始めればいいかわからないなら、まずは10問に答えるところからで十分です。
目的、誰向けか、どんな印象を持ってほしいか。そこが固まるだけで、デザインの会話はかなり前に進みます。

今回のツールは、その最初の壁を下げるために作りました。
質問に答える。
DESIGN.md が出る。
そのまま AI に貼る。
まずはここまでできれば十分です。

参考

• What is DESIGN.md? | Stitch Docs
• Webデザイナー必読！ DESIGN.md とは？ AIデザインツール Google Stitch で DESIGN.md を使ってみる。〖Web Design Talk〗 | note / How many designs
• DESIGN.md 導入ガイド: AI実装のための入口・契約・検証をどう整えるか | Zenn
• Google StitchのDESIGN.mdとは？ AIに見た目のルールを渡せるのが便利