自分の事業LPが、なんとなく素人臭い。

イメージ画像も無いし、ヒーローは白背景で寂しい。具体的にどう直せばいいのかは、自分では言語化できない。

Claude Code に「批評させる」やり方で突破した話。

ロールを明示するだけで批評の解像度が変わる

普通に「LP批評して」と頼んでも、当たり障りのない「読みやすいですね」みたいな反応が返ってくる。

そこで、こう書いた。

あなたは、世界トップクラスのWebデザイナー兼UI/UX設計者兼B2B向けWebマーケターです。

ロールを3つ重ねて先頭で名乗らせる。

これだけで返ってくる批評の粒度が一段細かくなった。

「ヒーローの白背景は信頼性に寄与しない」「セクション順が逆」「スマホモックの画像が破綻している」など、具体的な指摘が並ぶ。

指摘1：ヒーローを白から濃緑に変えろ

最初のLPは、ヒーローセクションが白背景に黒文字、コーポレートカラーは右上のロゴだけ。

ブランド色を一番見える場所に置かないのは機会損失。ヒーロー全面をブランド色にするほうが「この会社はこれです」が一瞬で伝わる。

言われてみれば、その通り。

濃緑（#1a4d3a）に変えた。文字は白に反転。それだけで「ブランドの主張」が立った。

「素人感が抜けない」の正体の半分は、ブランド色を遠慮していたことだった。

指摘2：セクション順を入れ替えろ

元の構成は「私について → 困りごと → サービス内容」の順だった。

B2B向けLPで自己紹介を先に置くのは順序が逆。読者の困りごとに最初に触れて『これ自分の話だ』と思わせてから、解決者として自分が登場する。

これも、その通り。

「困りごと → 私について → サービス」に並び替えた。

冒頭で「あなたのHP、放置されてないですか」と問いかけてから、「だからやってます」と続く流れになった。

指摘3：スマホモックが破綻している

ヒーロー右側に「LPのスマホ表示イメージ」を置きたかった。

最初は、別の制作事例の横長サムネイル画像を、無理やりスマホ枠（縦長）に押し込んでいた。当然、画面の中身が変な位置で切られる。

スマホモックには「実機サイズで撮ったキャプチャ」を入れる。サムネを縮めても綺麗にならない。

言われてみれば、そりゃそうだ。

Chrome を --window-size=390,850（iPhoneサイズ）でヘッドレス起動して、別の制作事例LPを実機サイズで撮影。それをスマホモックの中に入れた。

枠とコンテンツのサイズが噛み合うので、破綻しない。

「素人っぽさ」は具体に分解できる

「なんとなく素人臭い」は、抽象的な感想だ。

これをそのまま放置すると、何も直せない。直し方が分からないから。

Claude Code に世界トップ級のロールで批評させると、「素人っぽさ」が3つの具体に分解される。

• ブランド色を遠慮している
• 自己紹介を先に置きすぎ
• 画像のサイズが合っていない

直せる粒度に降りてくれば、あとは手を動かすだけ。

ロール明示プロンプトの注意点

万能ではない。

批評者ロールが強すぎると、過剰に厳しい指摘や、要らない直しまで提案してくる。

「世界トップ級」と名乗らせた以上、向こうも本気で粗を探す。「ロゴの余白がもう少し」みたいな、99点を100点にする提案までセットで来る。

99点の話は採用せず、致命的な3点だけ採用するのが効率的。

判断は人間側に残しておく。

まとめ

• LP批評は「世界トップクラスの〜」とロールを3つ重ねて頼むと粒度が変わる
• 「素人っぽさ」が具体3点に分解された：ブランド色・セクション順・スマホモック
• 直し方が分かれば手を動かすだけ
• 批評者が出してくる99点台の指摘は捨てる

自分のLPの粗を自分で言語化するのは難しい。役割を貸してくれる相手がいれば、突破できる。