今回は、こんな疑問にお答えします。
- Claude Codeで作ると、なぜデザインが同じ顔になる？
- どう指示すれば、デザインは良くなる？
- 人はどこまで見ればいい？
こんにちは、Claude Codeで自社サイトを作り直して、維持費をドメイン代だけにしたマサトです。
正直に言うと、デザインをうまく出せるようになるまで、約1ヶ月はAIでゴミを大量に作っていました。途中まで作ったサイトを捨てて、0から作り直したことも何度かあります。
そこでやり方を変えました。感想ではなく理由を返して、指摘をメモにためて、色は目でなく測って確かめるようにしたんです。
それでは、効いた順番に見ていきましょう。
この記事の要点
- デザインの採点役とは
- デザインの採点役とは、自分の指摘や好みをためたメモをAIに読ませて、デザインや設計図に点数を付けさせる使い方のことです。自社サイトでは3回まわして28点が41点になりました。
目次
Claude Codeのデザインは、感想ではなく理由を返すと変わります
一番効いたのは、気に入らない所の理由を言葉で返すことです。
なぜなら「なんか違う」とだけ返すと、同じようなものがまた返ってくるからです。AIには、何が違うのかが伝わっていないんですよね。
自社サイトのトップページでは、「3パターン出す→気に入らない所と理由を伝える→また3パターン」を繰り返しました。合計で約50パターンです。
ここが一番AIとのやり取りが多い工程でした。だから、1回で決めようとせず、理由を返す回数で質を上げてください。
最初に、デザインの根っこを文章で決めておきます
作り始める前に、色味・ボタンの置き方・表したい方向性を文章で決めます。この定義文が、あとの指示の土台になるからです。
順番も大事です。僕はトップページのデザインが決まってから、サイトマップを作りました。トップが決まっていれば、下層のページはそれを参照させるだけで作れます。
自分の好みは、メモにためて採点役にします
AIの出すデザインに自分の好みを乗せたいなら、指摘をメモにためて、そのメモで採点させてください。
理由は、同じ指摘を毎回言わなくて済むからです。自社サイトの作り直しでは、見る目を3つに分けて、トップの設計図を3回採点しました。
おもしろいことに、1回目でいちばん厳しかったのは僕のメモの目でした。自分で言ったことを、自分の設計図が守れていなかったんです。
設計図は4つの区画を一度に消す案になっていて、「引き算は1つずつ」という僕の指摘に反していました。そこで1手ずつ入れる案に変えたら、点が上がっています。
色は目で見ず、測って確かめます
色の読みやすさは、見た目で判断しないでください。作った直後は目が慣れていて、自分で置いた色ほど疑わないからです。
僕も、LINEの緑とオレンジのボタンに白い文字をのせて、まったく気づきませんでした。Claude Codeに測らせると、文字と背景の明るさの差は2.1〜3.8:1です。
W3Cの公式の基準（WCAG）では、ふつうの文字で4.5:1以上が目安です（2026年11月に確認）。つまり、全部足りていませんでした。
だから今は、パソコンの幅（1440）とスマホの幅（390）の2つで、色を測ってから出しています。
細かい調整は、まだWebflowのほうが早い場面があります
Claude Codeの弱いところも書いておきます。「ここだけ少し広げて」のような微調整は、全体の調整に広がりがちです。
全体を見直すぶん、きれいにはなります。ただ、力技で直していたWebflowのころのほうが早い場面も、まだありますね。
全部AIに任せると、どのサイトも同じ顔になります
「AIに任せれば、きれいなデザインが出るんでしょ」違います。100%任せて公開すると、どのサイトも同じ顔になって、ブランドの価値を下げてしまいます。
手を動かすのはAI、良し悪しを決めるのは人です。僕が特に見ているのは、余白の取り方と要素の間隔、スクロールしたときの流れです。
これまでの制作はJTB Americas や医療法人いぶきクリニックなどの実績で見られます。作り方の全体はClaude Codeでホームページ作成をした5工程の記事に書きました。
頼む場合の金額はClaude Codeのサイト制作費用の記事にあります。
デザインの続きはメルマガで先に書いています。
制作実績
よくある質問
Claude Codeで作ると、なぜ同じようなデザインになりますか？
理由を伝えずに任せると、AIの平均的な形が出るからです。100%任せて公開すると、どのサイトも同じ顔になります。気に入らない理由を言葉で返してください。
デザインの指示はどう出せばいいですか？
最初に色味・ボタンの置き方・方向性を文章で決めます。そのあと「3パターン出す→理由を伝える→また3パターン」を繰り返します。自社のトップは約50パターン往復しました。
どれくらいでデザインが安定しますか？
僕の場合は約1ヶ月かかりました。その間に、途中まで作ったサイトを捨てて0から作り直したことも何度かあります。
文字の色の読みやすさはどう確かめますか？
Claude Codeにコントラスト比を測らせます。WCAGの目安はふつうの文字で4.5:1以上です。パソコンの幅とスマホの幅の2つで確かめています。
細かい調整は得意ですか？
苦手です。「ここだけ少し広げて」が全体の調整に広がりがちで、Webflowのほうが早い場面もあります。
