2-3 Claude Code で LP デザイン調整

「動く LP」から「魅力的な LP」へ

2-2 で生成された LP は、おそらく「形にはなっているけど、なんとなく地味」「ありがちな見た目」「すごく印象には残らない」状態のはずです。これは Claude Code が悪いわけではなく、最初の生成は 無難で破綻のないデザイン を選ぶ傾向があるからです。

ここから先は、対話を重ねてデザインを磨いていく工程です。プロのデザイナーがいなくても、あなたが「ここをこうしたい」と伝えられれば、Claude Code がコードを書き換えてくれます。

このレッスンでは、デザインの磨き方を 7 つの観点から学びます。色、フォント、余白、ボタン、背景、アニメーション、細部の仕上げです。1 つずつ確認しながら進めましょう。

1. 色を整える

色は LP の印象の 6 割を決めます。最初の生成では、ジェネリックな青や緑になっていることが多いので、ブランドカラーに置き換えましょう。

業種ごとに「合う色の傾向」がある程度決まっています。たとえば下記の通りです。

• カフェ・飲食 — 茶系、ベージュ、ボルドー、深緑など落ち着いた色
• 医療・クリニック — 清潔感のある青、青緑、白を基調にして安心感を出す
• 子ども向け・教育 — 明るいオレンジ、黄色、水色などポップな色
• 金融・士業 — 紺、グレー、ゴールドなど信頼感のある色
• 美容・サロン — ピンク、パープル、くすみ系のトーン
• テック・SaaS — 青、紫、黒のグラデーションでモダンな印象

HEX コード（#3E2723 のような 6 桁の英数字）で具体的に指定すると、意図通りの色が出やすくなります。

> ヒーローの背景色をダークブラウン（#3E2723）にして。
> アクセントカラーをオレンジ（#FF6F00）に統一して。
> ボタンの色も同じオレンジで揃えて。

色を選ぶときは、参考にできるカラーシステムがいくつかあります。Material Design のカラーパレット、Tailwind CSS のデフォルトカラー、Adobe Color などが代表例です。これらは色の組み合わせがバランス良く設計されているので、適当な色を選ぶより圧倒的にきれいになります。

> Tailwind の amber-600 をアクセントカラーに使って。
> 背景は stone-900 で統一して。

もう 1 つ大事なのが コントラスト比 です。背景と文字の色が近すぎると読めません。たとえば薄いベージュの上に薄いグレーの文字を載せると、画面では見えていても、明るい屋外のスマホでは読めないということが起きます。Web アクセシビリティの基準では、本文と背景のコントラスト比は 4.5

色の数も絞り込みましょう。プロのデザインは メインカラー 1 色 + アクセントカラー 1 色 + ベース（白・黒・グレー） の 3〜5 色で構成されているのが基本です。色を 10 色使うと、それだけで素人っぽくなります。

> 全体の色をメイン（茶）、アクセント（オレンジ）、ベース（白・黒）の
> 3 色構成に絞り込んで。それ以外の色は使わないで。

2. フォントを選ぶ

最初の生成では、システムデフォルトのフォントが使われていることが多いです。これだけで一気に印象が変わるので、必ず差し替えましょう。

日本語 LP の場合、Google Fonts の中から選ぶのがおすすめです。商用利用無料で、種類も豊富、Web フォントとして簡単に使えます。代表的な選択肢は下記の通りです。

• Noto Sans JP — 万能。迷ったらこれ。ゴシック体で可読性が高い
• Noto Serif JP — 高級感、和の雰囲気を出したいとき
• M PLUS Rounded 1c — 丸ゴシック。親しみやすさ、子ども向け
• Zen Maru Gothic — 丸ゴシックの上品版
• Shippori Mincho — 明朝体、和菓子屋や旅館などに合う

> フォントは Google Fonts の Noto Sans JP を使って。
> 見出しだけは Noto Serif JP にして高級感を出して。

フォントは サイズの階層 も大事です。見出し、サブ見出し、本文、注釈で、はっきりサイズを変えると視覚的に整理されて読みやすくなります。

> 見出しは 48px、サブ見出しは 24px、本文は 16px に調整して。
> モバイルではそれぞれ 32px / 20px / 14px にして。

サイズ階層を作るときの参考比率は「1

> タイプスケールを 1.25 倍ルールで設計し直して。
> 本文 16px、見出し 1 を 40px、見出し 2 を 32px、見出し 3 を 24px に。

さらに、見出しは 太く（font-weight 700 以上）、本文は 細めに（400〜500） 差をつけると、視覚的な階層がもっと明確になります。日本語の場合、太字にしすぎると詰まって見えるので、見出しは font-weight: 600 あたりが上品です。

3. 余白とリズム

初心者のデザインがどこか「素人っぽい」と感じる最大の原因は、余白の不足 です。要素同士がぎゅっと詰まっていると、窮屈で読みづらくなります。逆に、思い切って余白を取ると、それだけで一気にプロっぽくなります。

> 各セクションの上下 padding を 80px に増やして。
> 見出しと本文の間に 24px の余白を入れて。
> ボタンの上下 padding を 16px、左右を 32px にして。

行間（line-height）も読みやすさを大きく左右します。本文の行間は 1.6 から 1.8 あたりがおすすめです。

> 本文の line-height を 1.75 に変更して。
> 段落と段落の間に 16px の余白を追加して。

「8 の倍数ルール」を使うと、余白に統一感が出ます。8px, 16px, 24px, 32px, 48px, 64px, 80px, 120px のように 8 の倍数 だけを使うと、要素の位置関係がきれいに揃って見えます。これは Material Design や Apple のヒューマンインターフェースガイドラインでも採用されている考え方です。

> 全要素の余白を 8 の倍数（8/16/24/32/48/64/80px）に統一して。
> 半端な数値（13px や 22px など）は使わないで。

4. ボタンと CTA を目立たせる

LP の目的はコンバージョン（予約、問い合わせ、購入）です。だから CTA ボタン が一番目立つべきです。ありがちな失敗は、ボタンが他の要素に埋もれて気づかれないパターンです。

> 「ご予約はこちら」ボタンを目立たせて。
> 色はオレンジ、サイズは大きめ、影をつけて。
> ホバー時に少し浮き上がるアニメーションも追加して。

良いボタンの条件は下記の通りです。

1. 色のコントラスト が周囲と明確に違う
2. サイズ が十分大きい（最低 44px の高さ）
3. 文言 が具体的（「送信」ではなく「無料で相談する」）
4. ホバー効果 がある（PC で訪問者が「押せる」と分かる）
5. 角丸 や 影 で立体感を出す

> ボタンの角丸を 8px に。
> ホバー時に background を少し明るく、影を強くして。
> アイコン（矢印）をボタンの右側に追加して。

5. ヒーローセクションの背景

ヒーロー（最上部の大きなビジュアル）は LP の顔です。ここの印象が弱いと、訪問者はすぐに離脱します。背景の選択肢は下記の通りです。

• 単色 — シンプルで読みやすい。テキストが主役のとき
• グラデーション — おしゃれ感を簡単に出せる。SaaS 系 LP で定番
• 画像 — 雰囲気重視。料理、旅行、ライフスタイル系
• 動画 — 没入感が出るが、読み込みが重くなる
• パターン — 控えめな模様で質感を出す

> ヒーローの背景を、ダークブラウンから黒へのグラデーションにして。
> その上に料理写真を半透明で重ねて、文字が読みやすいように
> オーバーレイ（黒 50%）をかけて。

画像を使う場合は、自分で撮った写真があるならそれを使う、なければ Unsplash や Pexels などの無料素材サイトから探すと良いです。Claude Code に「Unsplash から〜の画像を探してきて」と頼めば、URL を提案してくれることもあります。

6. アニメーション

控えめなアニメーションは、デザインに「動き」と「楽しさ」を与えます。ただし、やりすぎると逆効果なので注意しましょう。

おすすめは下記の通りです。

• フェードイン — スクロールに合わせて要素がふわっと現れる
• ホバー効果 — ボタンや画像にカーソルを合わせると少し動く
• スムーズスクロール — リンククリック時にスッと移動する

> 各セクションをスクロールしたタイミングで
> fade-in アニメーションで表示されるようにして。
> 過剰にならないよう、duration は 0.6 秒で。

避けたほうがいいのは下記の通りです。

• 全要素が一斉にバウンドする派手なアニメ
• 自動再生されるカルーセル（読みづらい）
• 点滅・ちらつき（目に悪い、不快感）
• 5 秒以上待たされるイントロアニメ

7. 細部を磨く

ここまで整えたら、最後に細部を磨きます。プロっぽさは、この 細部の積み重ね で決まります。

> カードの角丸を 12px に統一して。
> 画像にも同じ角丸を当てて。
> 影を box-shadow: 0 4px 12px rgba(0,0,0,0.1) に統一して。
> 区切り線（border）は薄いグレー（#E5E5E5）で 1px に揃えて。

統一感を出すコツは、下記の通りです。

• 角丸の半径を 1〜2 種類 に絞る（8px と 16px だけ、など）
• 影の濃さも 2〜3 種類 に絞る
• 色のパレットを 5 色以内 に収める
• フォントも 2 種類 に限定する

セクションの追加・変更

デザインを磨きながら、構成自体も調整したくなることがあります。そんなときも、自然言語で依頼できます。

> メニューセクションと特徴セクションの間に
> 「お客様の声」セクションを追加して。
> 3件のダミーレビューを入れて。
> レビューカードは画像（丸いアバター）、名前、星評価、コメントの構成で。

逆に、不要なセクションを削除することもできます。

> 「ニュース」セクションは要らないので削除して。
> その分、メニューセクションを少し大きくして。

レスポンシブの微調整

LP の訪問者の 6 割以上がスマホから 来ます。だからスマホ表示の確認は必須です。

> スマホ表示でメニューが横並びだと窮屈なので
> 縦並びにして。
> フッターの文字サイズも少し小さくして。
> ヒーローの見出しもスマホでは 32px に縮小して。

理想は PC、タブレット、スマホの 3 デバイス で確認することです。Chrome の DevTools の「デバイスモード」で簡単に切り替えられます。

デバイスごとの確認の進め方

スマホでの確認は、画面サイズだけでなく タップしやすさ も大事です。下記の点を確認しましょう。

• ボタンの高さが 44px 以上 あるか（指でタップしやすい最小サイズ）
• ボタン同士の間隔が 8px 以上 空いているか
• 文字サイズが 14px 以上 あるか（小さすぎると読めない）
• ヘッダーメニューはハンバーガーメニュー（横三本線）に切り替わっているか
• 横スクロールが発生していないか

タブレット（768px〜1024px 程度）は、PC とスマホの中間です。2 カラムレイアウトが映えるサイズなので、PC のレイアウトをそのままで縮小すると、間延びして見えることがあります。

> タブレットサイズ（768px〜1024px）で確認したら、
> ヒーローの見出しが大きすぎて 2 行に折り返してる。
> サイズを少し小さく、文字数も詰めて。

PC は デザインの自由度が一番高い ので、つい凝りすぎてしまいがちです。ただし「最終的にスマホで見る人が大半」という事実を忘れず、スマホ最優先で設計するのが今の主流です。

デザインの参考を集める

「どんなデザインにしたいのか」が自分でもよく分からないときは、参考デザインを集めましょう。下記のサイトがおすすめです。

• Awwwards — 世界トップクラスの Web デザインが集まる
• Dribbble — デザイナーがデザイン案を投稿するコミュニティ
• Land-book — LP に特化したギャラリーサイト
• One Page Love — シングルページサイトのギャラリー
• 競合の LP — 同じ業種の他社サイトを 5〜10 個見る

気に入ったサイトを見つけたら、Claude Code に「このサイト（URL）のヒーロー部分の雰囲気を真似て」と頼むこともできます。

> https://example.com のヒーローセクションの構成を参考に、
> 似た雰囲気でうちの LP のヒーローを作り直して。

曖昧な指示でも伝わる

Claude Code は「もう少し」「なんとなく」のような曖昧な指示も理解してくれます。

> なんかヒーローが地味だから、もう少し華やかにして。
> ボタンが目立たないから、もっと押したくなる感じに。
> 全体的に余白が足りない気がする。

ただし、具体的な指示のほうが意図通りに仕上がる確率は高いです。「華やかに」よりも「グラデーション背景にして、見出しを大きく、CTA ボタンに影をつけて」と伝えるほうが精度は上がります。

クイズで確認

<Quiz question="LP のデザインを磨くとき、最初に手をつけるべきポイントとして最も適切なのはどれでしょう？" options={["アニメーションを派手にする","色とフォントをブランドに合わせる","セクションを 10 個以上に増やす","動画を背景に入れる"]} correctIndex={1} explanation="色とフォントは LP の印象の大半を決める要素です。ここを整えるだけで一気にプロっぽくなります。アニメーションや動画は最後の磨き込みフェーズで考えましょう。" />

<Quiz question="CTA ボタンを目立たせる工夫として、適切でないものはどれでしょう？" options={["周囲とコントラストの強い色を使う","ホバー時に少し浮き上がる効果を加える","ボタンに具体的な文言を入れる（例「無料で相談する」）","ボタンを点滅させて目立たせる"]} correctIndex={3} explanation="点滅は訪問者に不快感を与え、信頼性も下がります。コントラスト、ホバー効果、具体的な文言、十分なサイズで自然に目立たせるのが王道です。" />

デザイン完成チェックリスト

LP のデザインを公開する前に、下記のチェック項目を全部クリアしているか確認しましょう。

<Checklist items={["ブランドカラーが LP 全体で統一されている","フォントは Google Fonts などの読みやすいものを使っている","見出し・本文・注釈のサイズ階層が明確に分かれている","各セクション間に十分な余白がある","CTA ボタンが一目で分かるくらい目立っている","ボタンにホバー効果がある","スマホ表示でも崩れず、読みやすい","ヒーローセクションが印象的（背景・見出し・サブコピー）","コントラスト比が十分で、屋外でも読める","アニメーションが控えめで邪魔にならない","角丸・影・線の太さが LP 全体で統一されている","競合 LP と比べても見劣りしない"]} />

ここまでクリアできたら、2 章のゴール「魅力的な LP を自分の手で作る」は達成です。次は 3 章で、この LP を実際にインターネット上に公開する方法を学びます。

次のステップ

• 3-1: ホームページのページ構成設計 — 次章の入口。LP の次は複数ページのサイト構成に拡張します
• 4-1: Web サイト公開先の選び方 — 「LP を世に出したい」が最優先なら、ホスティング選定を先に押さえるのもおすすめです
• 2-2: LP を AI で自動生成する — LP デザインの調整に行き詰まったら、生成プロンプトを見直す視点に戻れます