Claude CodeにLPを作らせると、1回目はいい感じに出ます。問題は2回目です。同じように頼んだのに、角丸の大きさが変わり、カードの顔が揃い、CTAがふわっと光り、気づくと「AIが作ったな」と一目で分かるものが出てくる。結論から言えば、これは指示の言い方の問題ではありません。毎回口で言っているから再現しないのであって、固定すべきものをファイルに置き、守れているかを機械で落とす工程がないのが原因です。
この記事の要点
- 品質がブレる原因はプロンプトではなく、1回目の判断がファイルに残っていないこと
- AIが放っておくと必ず出す癖は4つ（角丸16〜20px／全カード同じ顔／フラット単色面／バッジが枠内）
- 角丸を4〜6pxに落とし、ピルだけ999pxで残すとメリハリが出る
- コントラストのように数値で測れるものは目視せず機械で0件にしてから見せる
この記事では、実際にLPを納品している制作フローから、AIが放っておくと必ず出す癖を名指しし、それを固定する型と、目視でなく機械で落とす検査を書きます。プロンプトの例文集ではありません。
なぜClaude CodeのLPは2回目から品質が落ちるのか
理由は単純で、1回目にうまくいったときの判断がどこにも残っていないからです。「もう少し角を小さく」「そのグレーは薄い」と口頭で直した内容は、セッションが変われば消えます。次に同じ指示を出しても、モデルは自分のデフォルトに戻ります。
そしてこのデフォルトが厄介で、単体で見ると悪くないのに、並べると全部同じ顔になるという性質を持っています。角丸長方形に単色の枠線、上部にキャップ帯、中央にテキスト。これを全カードで反復する。1枚ずつ見れば整っていますが、5枚並ぶと「テンプレを機械で並べた」以外の何物でもなくなります。
だから直すべきは指示の言い回しではなく、何を固定し、何を検査するかです。
AIが放っておくと必ず出す4つの癖
まず名指しします。この4つは、放っておけばほぼ確実に出ます。逆に言えば、この4つを潰すだけで見た目は大きく変わります。
1. 角丸が16〜20pxになる
これがAIテンプレ感の主犯です。カードもボタンも一律に大きく丸められ、全体が柔らかく、そして安く見えます。
2. 全カードが同じ顔になる
枠線・キャップ帯・中央テキストの組み合わせが3枚でも6枚でも反復されます。情報量も均一に配られ、どれが主役か分からなくなります。
3. 面がフラットな単色になる
色を置くだけで、重ねも質感もありません。フラットな単色面は、それだけで安っぽく見えます。
4. バッジやラベルが枠内にお行儀よく収まる
「point 01」のような番号やラベルが、きれいにカードの内側に配置されます。整ってはいますが、レイヤーの立体感が出ません。
カードは「全部同じ顔」をやめる
4つの癖のうち、角丸の次に差が出るのがこれです。3枚並ぶカードを、全部同じ構造で作らせない。
具体的には沈む・中間・立つの3段に振ります。真ん中の1枚だけ濃い色地にして少し大きく、両脇は白地で控えめにする。これだけで「意図して組んだ」に見えます。均一に並べると、情報が同じ重みで入ってきて、どれを見ればいいか分からなくなります。
もう1つは1カード1主役を極大化することです。料金なら金額、実績なら件数。その値だけを40〜56pxまで上げて、他の要素を従わせます。AIは放っておくと全部を同じ文字サイズで並べるので、ここは明示的に指示が要ります。
バッジやラベルはカードの縁に半分乗せます。overflow: visible にして、番号やラベルを辺の外に出す。全部が枠内にきれいに収まっているとレイヤー感が出ません。
.card{ overflow: visible; position: relative; }
.card .badge{
position: absolute; top: -12px; left: 16px; /* 上辺を跨がせる */
border-radius: 999px; padding: 6px 14px;
}やってはいけないカードの作り方
次のどれかに当てはまったら、作り直しの合図です。
- 全カードが「枠線＋上部キャップ帯＋中央テキスト」で同じ顔になっている
- バッジやラベルが全部きれいに枠内に収まっている
- フラットな単色ボックスが並んでいる
- 情報量が均一で、どれが主役か分からない
- 角丸を揃えただけで、中身は文字の羅列になっている
- 左の1辺だけ色を付けたカードになっている
- 淡い色2色のパステルで通知ボックスを作っている
最後の2つは特に出やすく、そして一目で「AIが作った」と分かる要素です。ガイドラインに禁止として書いておきます。
角丸を4〜6pxにするだけでAI感が消える理由
最初にやるべきはこれです。カードとボタンの角丸を4〜6pxのクリスプに落とす。16〜20pxのままだと、他をどれだけ作り込んでもテンプレ感が残ります。
ただし全部を角ばらせると硬くなるので、ピル（タグやチップ）だけは999pxで残します。ここでメリハリが出ます。カードは四角く、小さなラベルだけ丸い、という差が「意図して作った」という印象を生みます。
支給されたFVの中にバッジがある場合は、たいていクリスプ角です。そこに合わせると全体が揃います。
:root{
--r-card: 5px; /* カード・ボタン＝クリスプ */
--r-pill: 999px; /* タグ・チップだけ丸く */
}
.card, .btn { border-radius: var(--r-card); }
.tag, .chip { border-radius: var(--r-pill); }変数にしておくと、あとから一括で詰められます。個別に border-radius を書かせると必ずバラつきます。
CTAは「グロー」をやめて「鏡面」にする
AIが作るCTAは、外側にふわっとした光を回します。拡散シャドウで浮かせる形です。これをやめて、鏡面にします。
具体的にはこうです。上を明るく下を濃くしたグラデーションを敷き、上半分にツヤを入れ、斜めの光条を横切らせる。そして下エッジを濃色でカチッと定義します。box-shadow: 0 4px 0 濃色 を当てて、拡散シャドウは消します。押すと沈む見た目になります。
.cta{
background: linear-gradient(180deg, #ff8a3d 0%, #f2600f 100%);
box-shadow: 0 4px 0 #b8460a; /* 下エッジをカチッと定義 */
border-radius: 5px;
position: relative;
overflow: hidden;
}
.cta::before{ /* 上半分のツヤ */
content:""; position:absolute; inset:0 0 50% 0;
background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
}
.cta:active{ transform: translateY(3px); box-shadow: 0 1px 0 #b8460a; }拡散した光で浮かせるのと、エッジを定義して沈ませるのとでは、同じボタンでも印象が変わります。前者は「AIが付けた影」に見え、後者は「押せるもの」に見えます。
あわせて、CTAの中に矢印「→」を入れないようにします。矢印を足すより、ボタンの上に一行のマイクロコピー（「1分で入力できます」など）を置くほうが押されます。
面はフラットにしない
色を置いただけのフラットな単色面は、それだけで安く見えます。色面には質感を足します。
足すのは4つです。上半分に白の薄いグラデーションを重ねる（上光沢）、業種に合う線画を薄くウォーターマークとして敷く、影を1枚でなく多層にする、内側の上辺に1pxの白いハイライトを入れる。
.panel{
background: linear-gradient(180deg, #16356e 0%, #0f2a5c 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18), /* 上辺の白ハイライト */
0 1px 2px rgba(0,0,0,.10),
0 8px 24px rgba(0,0,0,.14); /* 多層の影 */
}ここでいうグラデーションは、ブランド色や濃色で主張のあるものです。淡い色2色のパステルグラデは別物で、これは禁止側に入ります。同じ「グラデーション」でも方向が逆なので、ガイドラインでは分けて書きます。
色は3つ決めて固定する
色は毎回決め直さず、案件ごとに固定します。そして守るべき禁止事項が1つあります。
🔴背景と文字を同系色にしない。淡い地に同系の濃い文字は、それだけで読みにくくなります。色地には白文字、淡い地には黒寄りの文字、この2択だけにします。
| 地の色 | 置いてよい文字 | 禁止 |
|---|---|---|
| 濃い色地（ブランド色・濃紺など） | 白 | 地と同系の中間色 |
| 淡い地（白・オフホワイト） | 黒寄りの濃色 | 淡い同系色・金・薄グレー |
| 写真の上 | 白＋スクリム必須 | 画像に直乗せ |
特に再発しやすいのが濃紺の上に青系フォントです。何度直しても戻ってきます。濃紺面でテキストを強調したいときは、色を変えるのではなく白文字＋淡青のアンダーラインにします。淡い青は線の装飾にだけ使い、テキスト色には使いません。
口頭指示をやめてファイルに固定する
ここが再現性の本体です。上に書いた判断を、案件ごとのデザインガイドラインとしてファイルに書き、作業のたびに参照させます。
書くのは抽象的な方針ではなく、具体的な値です。角丸は何px、ピルだけ999px、色は何と何と何のhex、CTAは鏡面でエッジは何色、禁止する装飾は何か。この粒度で書いてはじめて、次のセッションでも同じものが出ます。
たとえばこう書きます。
# DESIGN-GUIDELINE（案件名）
## 角丸
- カード・ボタン: 5px
- タグ・チップ: 999px
- 画像: カード端まで（角丸カードの中に角丸画像を入れ子にしない）
## 色（この3つ以外を使わない）
- ベース #ffffff / 主役 #0f2a5c / アクセント #fb6a18
- 濃色地の文字は白のみ。淡い地は #1a1a1a
- 淡青はアンダーラインなど線の装飾だけ。テキスト色に使わない
## CTA
- 鏡面（上明→下濃グラデ＋上半分ツヤ＋下エッジ box-shadow: 0 4px 0）
- 拡散シャドウ禁止 / 「→」禁止 / 上に1行マイクロコピー
## 禁止
- 左borderだけ色を付けたカード
- 同系色パステルの通知ボックス
- 絵文字アイコン / 手描きSVG逆に「モダンで洗練された感じ」のような書き方は機能しません。読み手が変わるたびに解釈が変わるからです。
見た目は機械で落とす
そして最後に、守れているかを目視で確認しないことです。目視は疲れるうえに漏れます。
コントラストは数値で判定できます。情報として読ませる文字はコントラスト比4.5:1以上。白地に #999 より薄いグレーは使わない。濃い地に rgba(255,255,255,.5) 未満の白は使わない。薄い文字を許すのは補助ラベルだけです。これはスクリプトで全数チェックして0件にしてから見せます。
画像の上に文字を置くときは、必ずスクリム（黒から透明へのグラデーションオーバーレイ、または文字プレート）を敷きます。画像に直接乗せません。
あわせて機械で見るべきものが2つあります。横方向のはみ出しと日本語の改行崩れです。どちらも実機幅で確認します。スマートフォンは375px・390px・430pxの3幅で見ると、たいていどれかで崩れます。
簡易的な確認方法もあります。スクリーンショットをグレースケールにして読めるかを見る。色を抜いて読めなければ、色があっても読みにくいページです。
アイコンを1案件1セットに縛る
見落とされがちですが、アイコンは仕上がりを大きく左右します。絵文字も手描きのSVGも使わず、アイコンライブラリから取ります。
重要なのは1案件で1セットに固定することです。線の太さと角の丸みが揃っていないと、それだけでAI感が出ます。複数のセットから好きなものを選ぶと、必ず混ざります。
線幅が統一されたセットを1つ決め、その中だけで選ぶ。塗り系が必要ならそれも1セットに決める。この縛りがないと、他をどれだけ作り込んでも細部で崩れます。
ファーストビューだけは別扱いにする
ここまでは全体の話ですが、ファーストビューだけは検査を1つ足します。スマートフォンで、CTAが1画面目に入っているかです。
縦横比でいうと9:16の中に、見出し・サブ・CTAが収まっている必要があります。AIに任せると見出しを大きく取りすぎて、CTAが画面の外に出ます。見た目は立派でも、押す場所が見えていないLPは機能しません。
確認は実機幅で行います。375px・390px・430pxの3幅でスクリーンショットを撮り、CTAが写っているかを見る。1幅だけで判断すると、他の幅で落ちます。
入らない場合に削るのは、たいていサブコピーです。見出しを縮めるとインパクトが落ちるので、説明文のほうを削ります。
画像の扱いで崩れやすい2点
画像まわりは指示が抜けやすく、ここで質感が落ちます。
1つ目は角丸カードの中に角丸画像を入れ子にしないことです。カードに5px、中の画像にも8px、と二重に角丸が付くと、輪郭がぼやけて安く見えます。画像はカードの端まで届かせて、角丸はカード側だけに持たせます。
2つ目は縦長画像を使わないことです。素材サイトから取るときは横位置で絞ります。縦長を無理に横幅へ収めると、被写体が切れるか、上下に余白が出ます。
そして画像の上に文字を置くときは、前述のとおり必ずスクリムを敷きます。写真の明るさは差し替えのたびに変わるので、直乗せは一度うまくいっても次で崩れます。
よくある質問
プロンプトを長く書けば再現しますか？
しません。長いプロンプトは毎回書き直しになり、書き漏らした項目からデフォルトに戻ります。値をファイルに置いて参照させるほうが短く、確実です。
デザインのセンスがなくても使えますか？
この記事の内容は好みの問題ではなく、角丸のpx・コントラスト比・禁止する装飾という判定できる項目だけで構成しています。センスの前に、判定できるものを潰すほうが確実です。
Figmaのカンプがある場合も同じですか？
カンプがあるならそちらが正です。ただしカンプに無い部分（ホバー、押した時、狭い幅での折り返し）はAIが埋めるので、そこでこの記事の固定が役に立ちます。
角丸を4〜6pxにすると硬くなりませんか？
カードとボタンだけクリスプにして、タグやチップを999pxで残すと硬くなりません。全部を角ばらせるのではなく、差を作るのが目的です。
1回目からうまく出す方法はありますか？
過去案件のガイドラインを流用するのが最短です。角丸・色の扱い・CTAの作り・禁止装飾は案件をまたいで共通なので、色のhexだけ差し替えれば1回目から使えます。
まとめ：再現性は「言い方」でなく「固定と検査」で作る
Claude CodeでLPの品質がブレるのは、プロンプトが下手だからではありません。1回目にうまくいった判断が残っておらず、守れているかを確認する工程がないからです。
やることは2つです。角丸・色・CTA・禁止装飾といった判断を具体的な値でファイルに固定すること。そしてコントラストのように数値で測れるものは機械で落とすこと。
この2つを入れると、指示が短くなります。毎回「もう少し角を小さく」と言わなくてよくなり、代わりに中身の議論に時間を使えます。
固定する値を実在プロダクトから持ってきたいなら、DESIGN.mdでUIのAI感を消す方法もあわせて読むと、この型に流し込む素材が手早く用意できます。