凝ったデザインのLPを
Claude Codeで作るコツ

「凝ったデザイン」と聞くと、派手な装飾や複雑なレイアウトを思い浮かべるかもしれません。 しかし、洗練されたLPの多くはむしろ逆で、要素を削り、余白を活かし、細部を整えることで完成しています。 つまり見栄えの良さは特別なセンスではなく、いくつかの「型」を押さえているかどうかで決まります。

見栄えを最も手軽に引き上げるのが「余白」です。要素と要素の間、文字のまわり、セクションの上下に十分な空間があるだけで、ページは一気に上質に見えます。 逆に、情報を詰め込みすぎると素人っぽさが出てしまいます。まずは「伝えることを絞る」「絞った要素に余白を与える」の2点を意識しましょう。

LPの印象は、実は「文字の扱い」で大きく変わります。見出しと本文のサイズ差（ジャンプ率）をはっきりさせ、行間を広めにとり、フォントを適切に選ぶだけで、同じ内容でも見違えます。 専門用語を知らなくても、Claude Codeに具体的な指示を出せば整えられます。

LPの見出しと本文のタイポグラフィを整えてください。

・見出しは今より大きく、太字にして、本文とのサイズ差（ジャンプ率）をはっきりつける
・本文は少し小さめ・グレー寄りの色にして、行間はゆったり（読みやすさ重視）
・日本語見出しには細めのゴシック系、英字ラベルには字間を広げた明朝以外の書体を想定
・各セクションの上に、小さな英語のラベル（例: ABOUT / FEATURES）を薄いグレーで添える

高級感と読みやすさを両立させたいです。

初心者がやりがちなのが「色の使いすぎ」です。色数が多いほど散らかって見え、安っぽくなります。 洗練されたLPは、ベース色・メイン色・アクセント色の3色程度に絞られているのが定石です。まずは色数を絞ることを指示しましょう。

LP全体の配色を整理してください。

・使う色は「ベース＝白（#FFFFFF）」「メイン＝ほぼ黒（#0A0A0A）」「アクセント＝1色だけ」の3色に絞る
・アクセント色は問い合わせボタンと重要な強調部分だけに使い、それ以外では使わない
・グレーは文字の濃淡調整用に2〜3段階だけ用意する
・全体に統一感が出るよう、既存のカラフルな装飾は削って構いません

落ち着いた・信頼感のある印象にしたいです。

スクロールに合わせて要素がふわっと現れる。ボタンにマウスを乗せると色がゆっくり変わる。 こうした控えめな動きは、LPを一段プロっぽく見せます。ポイントは「控えめ・少数・ゆっくり」。動きすぎは逆効果なので、上品さを保つ指示を添えるのがコツです。

LPに控えめなアニメーションを追加してください。

・各セクションの要素は、スクロールで画面に入ったタイミングで「下から少しだけ上がりながらフェードイン」させる
・動きの時間は0.4〜0.6秒程度、イージングはゆっくり終わる自然な動きに
・一度に大量に動かさず、上から順に少し遅延をつけて現れる程度に抑える
・ボタンはホバー時に0.3秒かけて色が変わる程度の控えめな反応に

派手さより、上品で落ち着いた印象を優先してください。

• 動きは「気づくかどうか」くらい控えめにする
• 同じ画面で複数の要素を激しく動かさない
• アニメーションの速度はゆっくりめ（0.4秒前後）に統一する
• 動きが苦手な人向けに、過剰な動きは避ける配慮も伝える

「こんな雰囲気にしたい」という参考サイトがあるなら、それを的確に伝えるのが最短ルートです。 ただしURLを貼るだけでは、AIはどこを真似してほしいのか分かりません。「どの要素が好きか」を言葉にして渡すことで、丸ごとコピーではなく、良い部分だけを取り込めます。

参考にしたいサイトの雰囲気を伝えます。次の3点を取り入れてください。

1. 余白の広さ：セクションの上下がゆったりしていて、ひとつひとつの要素が主役に見える感じ
2. 文字の扱い：見出しが大きく細身で、本文はグレーで控えめ。全体に静かな印象
3. 動き：スクロールで要素がゆっくり現れる、上品なフェードイン

ただし配色と文言は当社のブランド（アクセントは緑）に合わせてください。丸ごとのコピーは避け、上記の「良い部分」だけを取り込むイメージです。

凝ろうとするほど、要素・色・動きを「足したく」なります。しかし洗練の要は引き算。足しすぎたと感じたら、思い切って削る勇気が仕上がりを決めます。 公開前に、次の視点でLPを見直してみましょう。

凝ったデザインのLPは、特別な才能ではなく「余白・文字・色・動き」という型を押さえ、Claude Codeに具体的な言葉で伝えることで作れます。 迷ったら足すのではなく引く。要素を減らし、残ったものを丁寧に整えることが、洗練への一番の近道です。まずは1つ、余白と色を見直すところから始めてみてください。