クロード向け設計書の始め方完全版。迷わず作れる実践手順7つ

「見た目を整えて」と頼んだのに、前回と今回でボタンの色も角丸も余白も違う。そんな状態が続くと、生成は速いのに、最後は人の手で直す時間ばかり増えていく。とくに初心者ほど、どこまで指示を書けば揃うのか、どのファイルに置けば読まれるのかで止まりやすい。
必要なのは、毎回うまく言い直すことではない。AIが毎回見る設計ルールを一枚のMarkdownに固定することだ。そこが決まると、画面づくりは一気に楽になる。

クロード向け設計書とは何か

クロード向け設計書は、色、文字、余白、部品の見た目をAIに固定して伝えるためのMarkdownファイルだ。たとえば「カードは白背景、角丸は中くらい、影は薄く、見出しは太字、本文は細め」というルールを先に書いておく。すると、その後に「会員カードを作って」「設定画面を作って」と頼んでも、毎回ゼロから解釈させずに済む。
いまは、見た目の指示をその場の会話だけで済ませるより、設計書を別ファイルで持たせる運用がかなり強い。2026年4月17日にはAnthropicがClaudeDesignを公開し、デザイン、プロトタイプ、スライド、ワンペーパーのような視覚成果物をClaudeと一緒に作る流れが前に出てきた。さらに2026年4月21日時点では、Google側でもStitch由来のDESIGN.md形式をオープンソースとして広げる動きが見えている。いま作っておく価値は高い。Anthropic+2Claude API Docs+2
ここで大事なのは、難しく考えすぎないことだ。最初から完璧なデザインシステムは要らない。まずは五つだけ決める。主色、補助色、文字色、背景色、角丸。この五つがあるだけでも、出力の揺れはかなり減る。

最初に作るなら、この最小構成で十分

初心者が最初につまずくのは、「何を書けばいいのか多すぎて分からない」という点だ。そこで、最初は次の四項目だけで始めると失敗しにくい。

色は名前と用途まで書く

色コードだけ書くと、AIは「どこに使う色か」を誤解しやすい。たとえば青が二つあると、ボタンにもリンクにも見出しにも勝手に混ざる。そこで、色名、色コード、用途を一行でセットにする。
「Primary:#2563EB。主要ボタンとアクティブ状態」
「TextPrimary:#111827。本文と見出し」
「Surface:#FFFFFF。カード背景」
この書き方なら、AIが「この青は見出し用か、ボタン用か」で迷いにくい。

文字はサイズより役割で書く

「16px」「20px」だけでは、画面によってばらつくことがある。そこで「ページ見出し」「セクション見出し」「本文」「補足」のように、役割名で定義する。すると、新しい画面でも役割ベースで当てはめやすい。

部品は見た目より禁止事項が効く

初心者が見落としやすいのがここだ。「こうしてほしい」より、こうしないでほしいが効く。たとえば、
「強いグラデーションは使わない」
「影は深くしない」
「角丸は大きくしすぎない」
「1画面で主色を使いすぎない」
この一文があるだけで、派手すぎる見た目をかなり防げる。

余白は数字を一つの刻みに揃える

8、12、16、24のように、使う余白の刻みを決めておく。これを決めずに生成すると、11や13のような中途半端な値が混ざり、見た目が散らばる。余白の刻みは四つ程度で十分だ。

今日から使える作成手順

実際に手を動かすなら、この順番がいちばん迷いにくい。途中で凝り始めると止まりやすいので、まずは一周作り切ることを優先したい。

この流れのよいところは、最初の一回で完成を目指さないことだ。生成してみると、「入力欄の枠線が濃すぎる」「カードの余白が狭い」など、直したい点が見える。その見えた点だけを追加すればいい。ゼロから全部考えるより、ずっと速い。

クロードとCursorでの置き方と使い分け

クロード系の作業では、設計書を独立ファイルにしておくと管理しやすい。会話のたびに長い見た目の説明を貼り直すより、ルートにDESIGN.mdを置き、通常の指示ファイルから参照させるほうが崩れにくい。ClaudeCodeまわりでは、ルールを一枚に詰め込みすぎず、意思決定に関わるものだけを残し、細かい決まりは分離する運用が相性がよい。
Cursorでは、設計書そのものと、参照させるためのルールを分けると分かりやすい。.cursor/rules配下にルールファイルを置き、「UI生成時はDESIGN.mdを優先して読む」と書く形だ。とくに複数案件を同時に開いているときは、ルートの広域ルールが混ざると事故が起きやすい。複数ワークスペースではルール汚染を避ける意識が必要なので、案件ごとに閉じた場所へ置くのが安全だ。Cursor – Community Forum+1

初心者がよくやる失敗と、その直し方

色コードだけ並べてしまう

この状態だと、AIは色の役割を推測するしかない。結果、主要ボタンと警告表示が近い色になることがある。直し方は簡単で、用途を一行追加するだけだ。

「Notionっぽく」のような雰囲気指示だけで終える

雰囲気の言葉は便利だが、人によって受け取り方が違う。AIでも同じだ。こういう言い方をするときは、その直後に「白背景中心」「影は薄い」「境界線は淡い灰色」「角丸は控えめ」のように、画面で確認できる条件へ落とす。すると再現しやすい。

コンポーネントを書きすぎる

最初から全部の部品を書くと、読む量が増えて更新も面倒になる。まずはボタン、カード、入力欄だけでよい。たいていの管理画面もLPも、この三つで最初の一歩は作れる。

禁止事項を書かない

「こうしてほしい」だけでは、余計な装飾が混ざる。見た目が安っぽく感じるときは、たいてい禁止事項が弱い。困ったら、まずDoNotを見直すと解決しやすい。

クロード向け設計書の疑問解決

検索している段階では、「結局これは必要なのか」「最初はどこまで書けば十分なのか」が気になりやすい。判断に迷ったら、次の三つだけ覚えておくと動きやすい。

とくに大事なのは、設計書は完成品ではなく、育てる運用物だということだ。最初の版が短くても問題ない。実際、短いルールから始めて、AIが間違えた箇所だけ追加していくほうが、実務では強い。

初心者が最初につまずく落とし穴

ファイルを作ったのに、見た目がまったく変わらない

ClaudeCodeやCursorを開いて、プロジェクトの一番上の階層に置いたつもりで設計ファイルを作り、「会員登録画面を作って」と入力したのに、前と同じように色も余白もバラバラな画面が出る。これが最初のつまずきとしてかなり多い。
原因はシンプルで、AIが見る場所にファイルが置かれていないか、ファイル名がズレていることがほとんどだ。初心者はエディタの左側に見えているフォルダを見て「ここが一番上」と思いやすいが、実際には一つ下のフォルダを開いていることがある。
こうすれば一発で解決する。

この場面では、「ファイルを置いた」だけで安心しないことが大事だ。置いたあとに、1回だけ明示的に読ませると、動き始める確率が一気に上がる。

何を書けばいいか分からず、30分止まる

新しいファイルを開いたのに、最初の1行が書けない。色も余白も言葉にしようとすると曖昧になり、「ちゃんとした設計書にしないとダメかも」と感じて手が止まる。これはかなり自然な反応だ。
なぜそうなるかというと、初心者は完成版を書こうとしてしまうからだ。実際には、最初の目的は立派な設計書を作ることではなく、AIの出力を1回揃えることだ。
こうすれば一発で解決する。

このやり方だと、最初の作業は10分以内で終わる。初心者が前に進めるかどうかは、質よりも最初の1枚を出せるかで決まる。

読まれているのに、毎回少しずつズレる

同じ「会員カードを作って」という依頼でも、1回目は落ち着いた画面、2回目は少し派手、3回目は角丸が大きすぎる。読まれていないわけではないのに、安定しない。この状態で悩む人はかなり多い。
原因は、ルールが「希望」になっていて「条件」になっていないからだ。たとえば「シンプルに」「上品に」「今っぽく」は、人間には伝わってもAIには幅が広すぎる。
こうすれば一発で解決する。

初心者は全部を一気に安定させようとしがちだが、実際はズレる場所を1個ずつ潰すほうが圧倒的に速い。

「知っている」と「できる」の差を埋める実践ロードマップ

7日間で「なんとなく知っている」から「1枚の画面なら自力で揃えられる」まで持っていく流れを、かなり現実寄りにまとめる。1日15〜30分で十分だ。大事なのは、毎日少しだけでも画面を出すこと。読むだけの日を作らないこと。

1日目。作業場所を整える日

その日にやる作業は、エディタを開いて、実際に作業するプロジェクトを1つ決めることだ。新規でも既存でもいい。左側のファイル一覧でプロジェクトの最上位を確認し、その階層にDESIGN.mdを作る。
所要時間の目安は15分。
完了の判断基準は、左側のファイル一覧にDESIGN.mdが見えていて、クリックすると空ファイルが開くこと。ここで「作れた」で終わらせず、最低1行は入力する。たとえば「Primary:青。主要ボタンに使う」でよい。1文字も入っていない状態は未完了と考える。

2日目。最小ルールを書く日

DESIGN.mdを開いて、Colors、Typography、Components、DoNotの4区画を作る。各区画に2行ずつ入れる。たとえばColorsなら3色、Typographyなら見出しと本文、Componentsならボタンとカード、DoNotなら禁止事項2つだ。
所要時間の目安は20分。
完了の判断基準は、画面を下までスクロールしたときに、空白の章が1つもないこと。内容が完璧かどうかではなく、4区画すべてに文字が入っているかで判断する。

3日目。最初の1画面を出す日

AIの入力欄で「DESIGN.mdに従って、ログイン画面を1枚作成」と入力する。このとき、余計な説明は足さなくていい。まずは設計ファイルだけでどこまで出るかを見る日だ。
所要時間の目安は20分。
完了の判断基準は、画面にボタン、入力欄、見出しが表示されること。さらに、主色が1か所以上反映されていたらOK。まったく反映されない場合は、設計ファイルの場所か名前を見直す。

4日目。違和感を3個だけ直す日

昨日出した画面を見て、「ちょっと変だな」と感じる場所を3つだけ選ぶ。たとえば「ボタンが丸すぎる」「入力欄の枠が濃い」「余白が詰まり気味」など。この3つをDESIGN.mdに1行ずつ追加する。
所要時間の目安は15分。
完了の判断基準は、修正後に同じログイン画面をもう一度出したとき、昨日より違和感が減っていること。3つ全部直らなくてもよいが、最低1つは改善していれば前進している。

5日目。別の画面で再現する日

同じ設計ファイルのまま、「会員一覧カードを3枚作成」または「設定画面を作成」と入力する。ここで初めて別画面に広げる。
所要時間の目安は25分。
完了の判断基準は、ログイン画面と新しい画面で、ボタンの色、角丸、文字の雰囲気が大きくズレていないこと。別画面でも揃うようになれば、設計書として機能し始めている。

6日目。部品を1つ固定する日

今日はボタンだけ、またはカードだけに集中する。たとえばボタンなら、「背景色」「文字色」「角丸」「高さ」「影の有無」の5項目を1行ずつ入れる。
所要時間の目安は20分。
完了の判断基準は、別の画面を2回出しても、ボタンの見た目がほぼ同じこと。ここで初めて「揃った感じ」が出始める。

7日目。自分用の型にする日

この1週間で追加した内容を見直し、不要な重複を削る。似た意味の行が2つあれば1つにまとめる。最後にAIへ「この設計で、トップページ、ログイン画面、カード一覧の3種類を作成」と入力する。
所要時間の目安は30分。
完了の判断基準は、3種類の画面を並べて見たときに、「同じサービスの画面だ」と感じられること。100点でなくていい。70点で揃って見えるなら十分合格だ。

現実でよくある「あるある失敗」と専門家の対処法

失敗その1。最初からブランドガイド並みに作ろうとして、結局使わない

ありがちなのは、DESIGN.mdを開いた瞬間に「色は8色必要かな」「ボタンは主ボタン、副ボタン、危険ボタン、アウトラインも書くべきかな」と考え始めて、気づけば45分経っているパターンだ。中身は増えたのに、まだ1画面も出していない。
根本的な原因は、設計書を成果物だと思っていることだ。実際には、設計書は画面を安定して出すための道具だ。道具づくりに時間をかけすぎると、本来やりたいことに進めない。
専門家ならこう対処する。まず、タイマーを15分にセットする。次に「色3つ、文字2つ、部品2つ、禁止2つ」までしか書かないと決める。その状態で強制的に1画面出す。出したあとに不足を足す。順番は必ず、書く→出す→足すだ。
予防策は簡単で、作業前に「今日は1画面出すのがゴール」と紙に書くことだ。設計ファイルを整えることではなく、画面を1枚出すことを基準にすると、作り込みすぎを防げる。

失敗その2。毎回プロンプト（AIへの指示文）で細かく言い足してしまい、設計書が育たない

「もう少し薄い影で」「角丸を減らして」「見出しを強くして」と、その場の会話で修正を重ねる。すると、その場では直るが、次の日に別画面を作るとまた同じズレが起きる。初心者が最も消耗しやすい失敗だ。
根本的な原因は、修正内容を設計ファイルへ戻していないことだ。つまり、毎回口頭で伝えているだけで、AIにとっての共通ルールが増えていない。
専門家ならこう対処する。会話で2回以上言った修正は、その時点でDESIGN.mdに追記する。たとえば「影を薄くして」を2回使ったら、DoNotかComponentsに「影はごく薄くする」または「カードの影は使わない」を追加する。そして再度同じ画面を生成し、会話だけで直した時との差を確認する。
予防策としては、作業中にメモ欄を1つ作り、「今日2回言った修正」をその都度1行メモしておくことだ。作業の最後にそのメモを見て、設計ファイルに移せば、翌日からラクになる。

失敗その3。複数の画面を一気に作らせて、どこが悪いのか分からなくなる

「ホーム画面、会員一覧、詳細画面、設定画面を全部作って」と一度に頼んでしまい、出力されたものを見て「なんか違う」と感じる。でも、どこを直せばいいか分からない。結果として、設計ファイルではなくプロンプトの言い直しに戻ってしまう。
根本的な原因は、検証対象が多すぎることだ。初心者の段階では、画面数が増えるほど観察ポイントも増え、原因の切り分けができなくなる。
専門家ならこう対処する。最初は1画面だけにする。次に、同じ部品が多い画面を選ぶ。ログイン画面、会員カード、設定フォームの順で進めると、ボタン、入力欄、カードの確認がしやすい。1画面で整ったら、2画面目へ進む。このとき「前の画面とどこがズレたか」を1つだけ見る。
予防策は、最初の7回の生成では「1回につき1画面」と決めることだ。7回もやれば十分に傾向が見える。逆に最初から4画面同時に出すと、学習より混乱が勝ちやすい。

ぶっちゃけこうした方がいい！

正直に言うと、初心者が最短で結果を出したいなら、最初はおしゃれさを追わないほうがいい。ぶっちゃけ「洗練された世界観」みたいなものは、最初の段階では優先度が低い。そこに時間を使うより、同じボタンが毎回同じ見た目で出るところまで持っていくほうが100倍価値がある。
ぶっちゃけ、最初は色も3つでいい。主色、文字色、背景色。この3つで足りる。補助色も警告色も成功色も、最初はやらなくていい。必要になった画面で追加すれば十分だ。最初から7色決めても、ほぼ確実に持て余す。
ぶっちゃけ、最初の1週間は1画面しか作れなくても問題ない。むしろ、1画面を3回出して、3回とも似た見た目になるほうが大事だ。初心者の場面で、10画面作れても見た目が毎回バラバラなら、あとで全部直すことになる。だったら、最初に1画面を固めたほうが圧倒的にコスパがいい。
ぶっちゃけ、プロンプトで毎回細かく言い直すのは、その場しのぎになりやすい。ラクに見えるけど、あとで確実にしんどくなる。修正を2回言ったらファイルに戻す。このルールだけは最初から守ったほうがいい。ここをサボると、1か月後に「毎回説明してるのに全然楽にならない」という状態になる。
ぶっちゃけ、最初の目標は「理想のデザイン」じゃなくて、修正回数を半分にすることでいい。たとえば前は1画面で8回言い直していたなら、4回に減れば大成功だ。数字で見たほうが、自分の前進が分かりやすいし、続けやすい。
いちばん近道なのは、次の流れに固定することだ。DESIGN.mdを開く。4区画だけ書く。ログイン画面を出す。違和感を3つだけ直す。翌日にカード画面を出す。これだけでいい。この順番なら、初心者でも3日目には「前より揃う」が実感できる。
最後にひとつだけ、本音で言う。最初はセンスより順番だ。順番が合っていれば、センスがなくても揃う。順番がバラバラだと、センスがあっても安定しない。だからまずは、1画面、3色、2部品、2禁止事項。この小さい型だけ守って始めるのがいちばん強い。

よくある質問

英語で書かないと効きにくい？

日本語でも十分に機能する。大事なのは言語より、一文ごとの意味が具体的かだ。「落ち着いた色」より「主色は青、主要ボタンに使用」のほうが通る。チーム全体で使うなら、見出しだけ英語、本文は日本語にすると管理しやすい。

既存サイトがあるなら、何を先に写せばいい？

まずは画面を見て、主色、文字色、背景色、カード、ボタンの五つを抜く。それだけで十分に似る。いきなり全ページの細部を写そうとすると止まる。

一つの案件で複数のデザインを使い分けられる？

使い分けられる。管理画面用と顧客向け画面用で別々に持てばよい。ただし、最初は一つで始めたほうが混乱しにくい。二つ目は、ひとつ目が安定してから増やすと運用しやすい。

どのくらいの頻度で直せばいい？

画面を一つ生成して、明らかなズレが出た時点で直すのがよい。毎回大改修する必要はない。一回の修正は一項目ずつにすると、何が効いたのか分かりやすい。

まとめ

クロード向け設計書は、見た目のセンスを言葉で競うためのものではない。AIが迷わず再現できる条件を、短く、具体的に、繰り返し使える形で置いておくためのものだ。
最初の一歩は難しくない。プロジェクトのルートにDESIGN.mdを置く。色、文字、部品、禁止事項を書く。ログイン画面かカード一覧を一つ作らせる。ズレた点だけ追記する。この順番なら、今日から始めても止まりにくい。
毎回の指示で消耗するより、最初に一枚作って、あとは育てる。そのほうが、画面づくりは確実に楽になる。