6-1 Claude Code で LP（ランディングページ）を作る

このレッスンでわかること

第6章では、いよいよ「Webアプリ」の世界に足を踏み入れます。最初のテーマは LP（ランディングページ）です。LP とは、商品やサービス、イベントなどを1枚で紹介する Web ページのこと。広告をクリックした先に表示される、縦に長いあのページです。

「Web ページを作る」と聞くと、デザイナーやエンジニアの仕事だと感じるかもしれません。しかし Claude Code を使えば、HTML を一度も書いたことがない人でも、要件を日本語で伝えるだけで見栄えのする LP を作れます。

このレッスンで身につくのは次の3点です。

• LP の要件を Claude Code に伝えるための「4点セット」（誰向け・目的・セクション構成・トーン＆カラー）
• 参考サイトの「雰囲気」を言葉で伝えるコツ
• ブラウザで開いて確認し、対話で修正していくサイクルの回し方

レッスン3-2で学んだ「HTML ファイルを作らせる」の発展編として、今回は人に見せられるレベルの1ページを完成させます。

LP 作りの主役はあなたの「言葉」

Claude Code に LP を作らせるとき、あなたがやることはコードを書くことではありません。「どんなページにしたいか」を言葉で設計することです。

逆に言えば、言葉にできていない部分は Claude Code が想像で埋めます。想像で埋められた部分は、あなたのイメージと食い違いがちです。そこで、最初の指示に必ず入れたい「4点セット」を覚えてください。

1. 誰向けか：ページを見るのはどんな人か（例: 中小企業の経営者、子育て中の主婦、新卒の就活生）
2. 目的（ゴール）：見た人に何をしてほしいか（例: 問い合わせフォームへの入力、セミナー申し込み、資料ダウンロード）
3. セクション構成：上から順にどんな内容を並べるか
4. トーン＆カラー：全体の雰囲気と色（例: 誠実で落ち着いた印象、白ベースにネイビー）

このうち特に効くのが「誰向けか」と「目的」です。同じ「英会話スクールの LP」でも、ビジネスパーソン向けの「昇進のための英語」と、シニア向けの「趣味の英会話」では、言葉選びも色も写真の雰囲気もまったく変わります。Claude Code はこの2点が伝わると、文章のトーンまで合わせて書き分けてくれます。

まずは作らせてみる：指示の実例

実際の指示文を見てみましょう。架空の「オンライン経理代行サービス」の LP を作る例です。

オンライン経理代行サービスの LP を lp.html として作ってください。

- 誰向け: 経理担当を雇う余裕がない、従業員10名以下の小さな会社の社長
- 目的: 「無料相談を申し込む」ボタンを押してもらうこと
- セクション構成（上から順に）:
  1. キャッチコピーと申し込みボタン（ファーストビュー）
  2. こんなお悩みありませんか（よくある悩みを3つ）
  3. サービスの特徴（3つ、アイコン付きで横並び）
  4. 料金プラン（月額3万円〜、表形式）
  5. お客様の声（架空でよいので2件）
  6. よくある質問（3問）
  7. 最後にもう一度申し込みボタン
- トーン＆カラー: 誠実で安心感のある雰囲気。白ベースに濃いブルー、
  ボタンはオレンジで目立たせる
- 制約: 画像は使わず、HTML ファイル1つで完結させる（CSS も中に書く）。
  スマホで見ても崩れないようにする

長く見えますが、書いているのは「内容の設計」だけです。HTML や CSS の知識は一切使っていません。

いくつか補足します。

• セクション構成は番号付きで上から順に書くと、そのままページの設計図になります。「悩み → 特徴 → 料金 → 声 → FAQ → ボタン」は LP の定番の流れなので、迷ったらこの並びを使ってください。
• **「HTML ファイル1つで完結」**は、レッスン3-2でも登場した便利な制約です。デザイン情報（CSS）がファイル内に収まるので、ダブルクリックするだけで誰のパソコンでも同じ見た目で開けます。
• **「スマホで見ても崩れないように」**も忘れずに。LP を見る人の多くはスマホからアクセスします。

画像については、最初は「使わない」指定がおすすめです。手元に画像素材がなくても完成まで進められますし、後から差し替える方法はこのレッスンの後半で扱います。

参考サイトの「雰囲気」を言葉で伝えるコツ

「あのサイトみたいな感じにしたい」というイメージがあるとき、どう伝えればよいでしょうか。URL を貼って「これと同じに」と頼むのは、デザインの著作権の観点でも、再現精度の観点でもおすすめしません。代わりに、そのサイトの何が好きなのかを分解して言葉にするのがコツです。

分解の観点は次の4つです。

• 余白：詰まっている／ゆったりしている
• 色数：カラフル／2〜3色に絞られている
• 文字：大きく太い見出しでぐいぐい押す／細めの文字で上品にまとめる
• 形：角が丸くやわらかい／直線的でかっちりしている

Bad例：イメージを丸投げする伝え方。

おしゃれな感じでお願いします。Apple のサイトみたいに

「おしゃれ」の中身は人によって違うので、Claude Code の解釈とズレやすい頼み方です。

Good例：好きな要素を分解して伝える。

デザインの方向性:
- 余白をたっぷり取って、1画面に詰め込みすぎない
- 色は白・黒・アクセント1色（深い緑）の3色だけに絞る
- 見出しは大きく太く、本文は小さめで上品に
- 角丸は使わず、直線的でミニマルな印象に

このように伝えると、参考サイトの名前を出さなくても「ああいう感じ」がかなりの精度で再現されます。最初から完璧に言語化できなくても大丈夫です。一度作らせてから「もっと余白を増やして」「色をもう1色減らして」と調整していけます。

確認・修正サイクル：ブラウザと対話を行き来する

ファイルができたら、必ずブラウザで開いて自分の目で確認します。lp.html をダブルクリックするか、Claude Code に「lp.html をブラウザで開くコマンドを実行して」と頼んでも構いません。

ここからが LP 作りの本番です。**「開いて見る → 気になる点を言葉で伝える → 直してもらう → また開いて見る」**のサイクルを回します。ブラウザで開いたままにしておき、修正のたびに再読み込み（Windows は F5、Mac は Cmd+R）すれば、変更がすぐ反映されます。

修正依頼のコツは、レッスン3-2と同じく**「どこが・どう」を具体的に**伝えることです。

3点直してください。
1. ファーストビューのキャッチコピーをもっと大きく、画面の主役にする
2. 料金表の「月額3万円」の数字を強調する
3. お客様の声のセクションの背景に薄いグレーを敷いて、前後と区切る

場所の伝え方に迷ったら、「上から2番目のセクション」「『よくある質問』の見出しの下」のように、画面で見えている言葉を使って指せば伝わります。1回のやり取りに修正点を2〜3個まとめると効率的です。

最初の生成で60点、2〜3往復で90点を目指す、くらいの気持ちでいるとちょうどよいペースになります。

テキストと画像の差し替え

骨格ができたら、中身を本物に差し替えていきます。

テキストの差し替えは、変更前と変更後をセットで伝えるのが確実です。

キャッチコピーを差し替えてください。
変更前: 「経理のお悩み、まるごとお任せ」
変更後: 「社長の時間を、経理から取り戻す」

**画像の差し替え（追加）**は、画像ファイルを LP と同じフォルダに置いてから、ファイル名と入れたい場所を伝えます。

同じフォルダに hero.jpg という写真を置きました。
ファーストビューの背景として使ってください。
文字が読みにくくならないよう、写真の上に半透明の黒を重ねてください

「写真の上に半透明の黒を重ねる」のような表現も、専門用語を知らなくてもそのまま伝えれば Claude Code が適切な CSS に変換してくれます。やりたいことを日常の言葉で言う、が一貫したコツです。

なお、Web で拾った画像には著作権があります。LP に使うのは、自分で撮った写真か、商用利用可のフリー素材にしてください。

やってみよう

演習1（4点セットで作る）：自分の仕事に関係するテーマ（自社サービス、社内イベント、架空の商品なんでも可）で、「誰向け・目的・セクション構成・トーン＆カラー」の4点セットを書き出し、LP を my-lp.html として作らせてみましょう。

演習2（修正サイクル）：演習1の LP をブラウザで開き、気になる点を3つ探して、1回の指示にまとめて修正を依頼してみましょう。再読み込みして直ったかを確認するところまでがワンセットです。

演習3（雰囲気の言語化）：普段「いいな」と思っている Web サイトをひとつ思い浮かべ、「余白・色数・文字・形」の4観点で言葉にしてみてください。その言葉だけを使って演習1の LP のデザインを変えさせ、イメージに近づくか試してみましょう。

まとめ

• LP 作りであなたが担うのはコードではなく「内容の設計」。要件は日本語で伝えればよい
• 最初の指示には「誰向け・目的・セクション構成・トーン＆カラー」の4点セットを入れる
• セクション構成は「悩み → 特徴 → 料金 → 声 → FAQ → ボタン」が定番の流れ
• 参考サイトの雰囲気は「余白・色数・文字・形」に分解して言葉で伝える
• ブラウザで開いて確認 → 具体的に修正依頼 → 再読み込み、のサイクルで2〜3往復して仕上げる
• 画像は商用利用可のものだけを使い、ファイルを同じフォルダに置いてファイル名で指示する

理解度チェック

Q1. LP を作らせる最初の指示に含めるべき「4点セット」として、正しい組み合わせはどれでしょう？

1. ページの行数・ファイルサイズ・文字コード・拡張子
2. 誰向けか・目的・セクション構成・トーン＆カラー
3. 使用する HTML タグ・CSS のクラス名・フォント名・画像形式
4. 公開日・担当者・予算・納期

解答を見る

正解: 2

LP の指示で大切なのは内容の設計です。「誰向けか」と「目的」が伝わると文章のトーンまで適切になり、「セクション構成」がそのままページの設計図になり、「トーン＆カラー」で見た目の方向性が決まります。HTML タグや CSS の知識（選択肢3）は、指示する側には不要です。

Q2. 参考サイトの雰囲気を伝える方法として、もっとも良いものはどれでしょう？

1. 「おしゃれな感じで」とだけ伝えて、あとはセンスに任せる
2. 参考サイトの HTML をコピーして渡し、そのまま使ってもらう
3. 「余白・色数・文字・形」の観点で、好きな要素を分解して言葉で伝える
4. 雰囲気は伝えず、完成後に全部作り直させる

解答を見る

正解: 3

「おしゃれ」のような抽象的な言葉は人によって中身が違うため、解釈がズレやすくなります。余白・色数・文字・形に分解して伝えると、サイト名を出さなくても狙った雰囲気に近づきます。他サイトの HTML をそのまま使う方法（選択肢2）は著作権の問題があるため避けてください。