LP（ランディングページ）制作
LPは「1つの目的」に特化したページ。購入、登録、お問い合わせなど、訪問者に行動を起こしてもらうことがゴールです。
LPの基本構成
1
ファーストビュー
キャッチコピー、サブコピー、CTA
2
問題提起
「こんなお悩みありませんか？」
3
解決策の提示
商品・サービスの紹介
4
特徴・メリット
選ばれる理由、他との違い
5
お客様の声・実績
社会的証明で信頼性アップ
6
よくある質問
不安を解消
7
CTA（行動喚起）
申し込みボタン、フォーム
事前準備
まず、LP用のプロジェクトフォルダを作成し、Claude Codeを起動しましょう。
mkdir lp-site && cd lp-site
フォルダに移動したら、Claude Codeを起動します。
claude
ポイント：LPは1ファイル（index.html）で完結させるのが基本です。複数ページに分ける必要はありません。
Step 1：LPを一括作成
Claude Codeに以下のプロンプトを入力して、LP全体を一括で作成してもらいましょう。
Claude Codeへの指示
オンライン英会話サービス「Global English」のLPを作成します。index.htmlとして1ページ完結のLPを作成してください。Tailwind CSS CDN使用。以下のセクション全てを含めてください：ファーストビュー、お悩みセクション、サービス紹介、3つの特徴、料金プラン、お客様の声、よくある質問、CTA
ポイント：Claude Codeはこのプロンプトだけで、すべてのセクションを含んだ完全なLPをindex.htmlとして自動生成してくれます。ファイルの作成・保存もClaude Codeが行います。
生成されるコード（完成イメージ）
Claude Codeが以下のようなコードを生成します。内容を確認してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global English - 3ヶ月で英語が話せる</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html { scroll-behavior: smooth; }
</style>
</head>
<body class="bg-white text-gray-800">
<!-- ファーストビュー -->
<section class="bg-gradient-to-br from-blue-600 to-indigo-800 text-white py-24">
<div class="container mx-auto px-6 text-center">
<p class="text-blue-200 text-lg mb-4">オンライン英会話サービス</p>
<h1 class="text-4xl md:text-6xl font-bold mb-6">3ヶ月で英語が話せる</h1>
<p class="text-xl md:text-2xl mb-8 text-blue-100">ビジネス英語に特化したマンツーマンレッスン</p>
<a href="#cta" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-10 rounded-full text-lg transition">
無料体験を始める
</a>
<p class="mt-6 text-blue-200">受講者数 <span class="text-white font-bold text-2xl">30,000人</span> 突破</p>
</div>
</section>
<!-- お悩みセクション -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6 max-w-3xl">
<h2 class="text-3xl font-bold text-center mb-12">こんなお悩みありませんか？</h2>
<div class="space-y-4">
<div class="flex items-center bg-white p-5 rounded-lg shadow">
<span class="text-red-500 text-2xl mr-4">✓</span>
<p class="text-lg">英語の会議で発言できない...</p>
</div>
<div class="flex items-center bg-white p-5 rounded-lg shadow">
<span class="text-red-500 text-2xl mr-4">✓</span>
<p class="text-lg">海外出張が不安で仕方ない...</p>
</div>
<div class="flex items-center bg-white p-5 rounded-lg shadow">
<span class="text-red-500 text-2xl mr-4">✓</span>
<p class="text-lg">昇進にTOEICスコアが必要...</p>
</div>
<div class="flex items-center bg-white p-5 rounded-lg shadow">
<span class="text-red-500 text-2xl mr-4">✓</span>
<p class="text-lg">過去に英会話で挫折した経験がある...</p>
</div>
</div>
</div>
</section>
<!-- サービス紹介 -->
<section class="py-20">
<div class="container mx-auto px-6 text-center max-w-3xl">
<p class="text-blue-600 font-bold text-lg mb-2">その悩み、Global Englishが解決します</p>
<h2 class="text-3xl font-bold mb-6">Global English</h2>
<p class="text-lg text-gray-600 mb-8">
Global Englishは、ビジネスシーンで使える実践的な英語力を最短3ヶ月で身につける
オンライン英会話サービスです。あなた専用のカリキュラムで、確実に成果を出します。
</p>
<img src="https://placehold.co/800x400/e0e7ff/4f46e5?text=Global+English" alt="サービスイメージ" class="rounded-lg shadow-lg mx-auto">
</div>
</section>
<!-- 3つの特徴 -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">選ばれる3つの理由</h2>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white p-8 rounded-lg shadow text-center">
<div class="text-4xl mb-4">🕐</div>
<h3 class="text-xl font-bold mb-3">24時間予約可能</h3>
<p class="text-gray-600">早朝5時から深夜1時まで。忙しいビジネスパーソンでも自分のペースで続けられます。</p>
</div>
<div class="bg-white p-8 rounded-lg shadow text-center">
<div class="text-4xl mb-4">🌐</div>
<h3 class="text-xl font-bold mb-3">ネイティブ講師</h3>
<p class="text-gray-600">アメリカ・イギリス出身のネイティブ講師が500名以上在籍。本物の発音が身につきます。</p>
</div>
<div class="bg-white p-8 rounded-lg shadow text-center">
<div class="text-4xl mb-4">💼</div>
<h3 class="text-xl font-bold mb-3">ビジネス特化</h3>
<p class="text-gray-600">会議・プレゼン・メールなどビジネスシーンに特化。すぐに仕事で使える英語を学べます。</p>
</div>
</div>
</div>
</section>
<!-- 料金プラン -->
<section class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">料金プラン</h2>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white border-2 border-gray-200 rounded-lg p-8 text-center">
<h3 class="text-xl font-bold mb-2">ライト</h3>
<p class="text-gray-500 mb-4">月4回レッスン</p>
<p class="text-4xl font-bold text-blue-600 mb-2">¥4,980</p>
<p class="text-gray-400 text-sm mb-6">/月（税込）</p>
<ul class="text-left text-sm space-y-2 mb-8">
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>1回25分のレッスン</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>教材使い放題</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>レッスン録画</li>
</ul>
<a href="#cta" class="block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 rounded-lg transition">選択する</a>
</div>
<div class="bg-white border-2 border-blue-600 rounded-lg p-8 text-center relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-blue-600 text-white px-4 py-1 rounded-full text-sm font-bold">人気No.1</div>
<h3 class="text-xl font-bold mb-2">スタンダード</h3>
<p class="text-gray-500 mb-4">月8回レッスン</p>
<p class="text-4xl font-bold text-blue-600 mb-2">¥9,800</p>
<p class="text-gray-400 text-sm mb-6">/月（税込）</p>
<ul class="text-left text-sm space-y-2 mb-8">
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>1回25分のレッスン</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>教材使い放題</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>レッスン録画</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>学習プラン作成</li>
</ul>
<a href="#cta" class="block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition">選択する</a>
</div>
<div class="bg-white border-2 border-gray-200 rounded-lg p-8 text-center">
<h3 class="text-xl font-bold mb-2">プレミアム</h3>
<p class="text-gray-500 mb-4">毎日レッスン</p>
<p class="text-4xl font-bold text-blue-600 mb-2">¥19,800</p>
<p class="text-gray-400 text-sm mb-6">/月（税込）</p>
<ul class="text-left text-sm space-y-2 mb-8">
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>1回25分のレッスン</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>教材使い放題</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>レッスン録画</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>学習プラン作成</li>
<li class="flex items-center"><span class="text-green-500 mr-2">✓</span>専属コーチ付き</li>
</ul>
<a href="#cta" class="block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 rounded-lg transition">選択する</a>
</div>
</div>
</div>
</section>
<!-- お客様の声 -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">お客様の声</h2>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex items-center mb-4">
<img src="https://placehold.co/60x60/dbeafe/3b82f6?text=A" alt="受講者" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-bold">田中さん（30代・IT企業）</p>
<p class="text-yellow-400 text-sm">★★★★★</p>
</div>
</div>
<p class="text-gray-600 text-sm">3ヶ月で海外クライアントとの会議に自信を持って参加できるようになりました。ビジネス特化の教材が本当に役立ちます。</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex items-center mb-4">
<img src="https://placehold.co/60x60/dbeafe/3b82f6?text=B" alt="受講者" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-bold">佐藤さん（40代・商社）</p>
<p class="text-yellow-400 text-sm">★★★★★</p>
</div>
</div>
<p class="text-gray-600 text-sm">早朝の時間を活用して毎日レッスン。TOEICスコアが200点アップしました。講師の質が非常に高いです。</p>
</div>
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex items-center mb-4">
<img src="https://placehold.co/60x60/dbeafe/3b82f6?text=C" alt="受講者" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-bold">鈴木さん（20代・メーカー）</p>
<p class="text-yellow-400 text-sm">★★★★☆</p>
</div>
</div>
<p class="text-gray-600 text-sm">過去に2回挫折しましたが、専属コーチのおかげで続けられています。海外出張も怖くなくなりました！</p>
</div>
</div>
</div>
</section>
<!-- よくある質問 -->
<section class="py-20">
<div class="container mx-auto px-6 max-w-3xl">
<h2 class="text-3xl font-bold text-center mb-12">よくある質問</h2>
<div class="space-y-4">
<div class="border rounded-lg">
<button onclick="this.nextElementSibling.classList.toggle('hidden')" class="w-full text-left p-5 font-bold flex justify-between items-center hover:bg-gray-50">
<span>Q. 全くの英語初心者でも大丈夫ですか？</span>
<span class="text-gray-400">+</span>
</button>
<div class="hidden px-5 pb-5 text-gray-600">
はい、初心者向けのカリキュラムも充実しています。レベルチェックテストで最適なプランをご提案します。
</div>
</div>
<div class="border rounded-lg">
<button onclick="this.nextElementSibling.classList.toggle('hidden')" class="w-full text-left p-5 font-bold flex justify-between items-center hover:bg-gray-50">
<span>Q. 1回のレッスンは何分ですか？</span>
<span class="text-gray-400">+</span>
</button>
<div class="hidden px-5 pb-5 text-gray-600">
1回25分です。集中力が続く最適な時間設定で、効率よく学習できます。
</div>
</div>
<div class="border rounded-lg">
<button onclick="this.nextElementSibling.classList.toggle('hidden')" class="w-full text-left p-5 font-bold flex justify-between items-center hover:bg-gray-50">
<span>Q. 途中でプラン変更はできますか？</span>
<span class="text-gray-400">+</span>
</button>
<div class="hidden px-5 pb-5 text-gray-600">
はい、毎月プラン変更が可能です。マイページからいつでも変更手続きができます。
</div>
</div>
<div class="border rounded-lg">
<button onclick="this.nextElementSibling.classList.toggle('hidden')" class="w-full text-left p-5 font-bold flex justify-between items-center hover:bg-gray-50">
<span>Q. 無料体験の内容を教えてください</span>
<span class="text-gray-400">+</span>
</button>
<div class="hidden px-5 pb-5 text-gray-600">
25分の体験レッスン1回と、レベルチェック&学習プランの提案を無料で受けられます。
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="cta" class="py-20 bg-gradient-to-br from-blue-600 to-indigo-800 text-white">
<div class="container mx-auto px-6 text-center max-w-2xl">
<h2 class="text-3xl font-bold mb-4">まずは無料で体験してみませんか？</h2>
<p class="text-blue-200 mb-8">25分の無料体験レッスン実施中。入会金0円キャンペーン中！</p>
<a href="#" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-12 rounded-full text-xl transition">
無料体験に申し込む
</a>
<p class="mt-4 text-blue-200 text-sm">※ クレジットカード不要。1分で登録完了。</p>
</div>
</section>
<!-- フッター -->
<footer class="bg-gray-900 text-gray-400 py-8 text-center">
<p>© 2024 Global English. All rights reserved.</p>
</footer>
</body>
</html>
解説：このコードには以下の要素が含まれています。
- スムーススクロール -
html { scroll-behavior: smooth; }でCTAボタンクリック時になめらかにスクロール - グラデーション背景 - ファーストビューとCTAに青系グラデーションで統一感
- プレースホルダー画像 -
placehold.coを使用（後で実際の画像に差し替え） - アコーディオンFAQ - JavaScriptの
onclickで開閉するトグル式 - 料金プランの強調 - 「人気No.1」バッジでおすすめプランを目立たせる
ブラウザで確認
確認チェックリスト
ファイルをブラウザで開いて、以下の点を確認しましょう。
index.htmlをブラウザで開く（ファイルをダブルクリック、またはブラウザにドラッグ&ドロップ）
- □ ファーストビューのキャッチコピーとCTAボタンが目立っているか
- □ CTAボタン（「無料体験を始める」「選択する」）をクリックして、下部のCTAセクションにスムーススクロールするか
- □ よくある質問のアコーディオンが開閉するか（クリックして確認）
- □ ブラウザの幅を狭くして、スマホ表示でもレイアウトが崩れないか
- □ 料金プランが3カラムで並んでいるか（スマホでは縦並びになるか）
カスタマイズ
サンプルのLPが完成したら、あなた自身のサービスに合わせてカスタマイズしましょう。Claude Codeに以下のように指示します。
自分のサービスに変更する
このLPを以下のサービスに変更してください。 【サービス名】（あなたのサービス名） 【サービス内容】（サービスの説明） 【ターゲット】（想定するお客様） 【料金】（プラン名と価格） 【カラー】メインカラーを緑系に変更
カスタマイズのポイント
カラーを変更
Tailwindのカラー名を変更するだけ。blue-600 を green-600 に変えるなど。
コピーを変更
キャッチコピーはサービスの一番の強みを短く伝える文に。数字を入れると効果的。
料金を変更
プラン数は2〜3が適切。おすすめプランを目立たせましょう。
画像を差し替え
placehold.coのURLを実際の画像パスに。お客様の顔写真があると信頼度アップ。
よくあるエラー
トラブルシューティング
「アコーディオンが動かない」
FAQの開閉が動作しない場合は、JavaScriptの onclick 属性が正しく書かれているか確認してください。button タグに onclick="this.nextElementSibling.classList.toggle('hidden')" が設定されている必要があります。Claude Codeに「FAQのアコーディオンが動きません。修正してください」と伝えましょう。
「スムーススクロールが効かない」
CTAボタンをクリックしても一瞬で移動してしまう場合は、<style>タグ内に html { scroll-behavior: smooth; } があるか確認してください。また、リンク先の href="#cta" と対応する id="cta" が一致しているかもチェックしましょう。
「料金プランが横並びにならない」
PC画面で料金プランが縦に並んでしまう場合は、grid md:grid-cols-3 のクラスが正しく設定されているか確認してください。ブラウザの幅が768px以上あることも確認しましょう。
LPのコツ
1ページ1目的
複数の目的を混ぜない。リンクも最小限に
CTAは複数回
スクロールに応じてCTAを配置
社会的証明
お客様の声、導入実績、メディア掲載
緊急性・限定性
「今だけ」「限定◯名」で行動を促す
まとめ
- ✓ LPは1つの目的に特化したページ
- ✓ 問題提起→解決策→証拠→CTAの流れ
- ✓ Claude Codeで全セクションを一括生成できる
- ✓ CTAは複数配置、社会的証明で信頼性アップ
- ✓ サービス名・カラー・料金を変えるだけで自分のLPになる