2-1 Claude Code 用 LP 構成の作り方

このレッスンで身につくこと

このレッスンは、第 2 章「LP を作る」の入り口です。次のレッスン 2-2 で実際にコードを生成し、2-3 でデザインを磨きますが、その前に 設計図づくり をやっておく必要があります。家を建てるときに図面なしでいきなり柱を立てる人はいません。LP も同じです。

所要時間 — 約 15 分（読みながら手元のメモ帳に設計図を書く想定） 実機操作 — まだ不要（次の 2-2 でターミナルを叩きます）

LP とは何か — 1 ページ完結型の Web

LP は ランディングページ の略で、訪問者が「着地」する 1 ページ完結のサイトを指します。コーポレートサイトのようにメニューから複数ページへ遷移していくのではなく、1 枚の縦長ページで完結 するのが特徴です。

コーポレートサイトと LP の違いは下記の通りです。

LP が選ばれる理由はシンプルで、訪問者に余計な選択肢を与えず、1 つの行動に集中させられる からです。サービス紹介・商品販売・イベント告知・資料請求など、ゴールが明確な場面 ではコーポレートサイトより LP の方が成果が出ます。

LP の典型構成 — 7 つの要素

世の中の LP の 9 割は、次の 7 要素を上から順に並べた構造です。順番にも意味があるので、まず 役割と並び順 を頭に入れてください。

1. Hero（ヒーローセクション）

ページを開いた瞬間に表示される、いちばん上の領域です。キャッチコピー + メインビジュアル + CTA ボタン の 3 つで構成されます。訪問者は最初の 3 秒 で「自分に関係あるか」を判断するので、Hero で勝負が決まります。

2. Pain（悩み・課題の提示）

訪問者が抱えている悩みを言語化するセクションです。「こんなことで困っていませんか？」と問いかけ、訪問者に「これ、自分のことだ」と感じてもらいます。Pain が刺さらないと、その下のメリットも刺さりません。

3. Benefit（ベネフィット・解決策）

「この LP のサービスを使うと、その悩みがこう解決される」を示すセクションです。機能ではなく結果 を書くのがコツです。「24 時間サポート」ではなく「夜中に困っても 5 分以内に返信が来る」と書きます。

4. Feature（特徴・機能）

サービスの具体的な機能や特徴を 3〜6 個並べます。Benefit が「どんな良いことが起きるか」だとすると、Feature は「どうやってそれを実現するか」です。アイコン + 見出し + 1 文の説明、というカードレイアウトが定番です。

5. Testimonial（お客様の声・実績）

社会的証明（Social Proof） とも呼ばれる、信頼を獲得するセクションです。実際の利用者の声、導入企業ロゴ、メディア掲載歴、数値実績（「導入 1,000 社」「満足度 98%」など）を並べます。訪問者は「自分以外の誰かが使っている」と知ると、一気に警戒心が下がります。

6. FAQ（よくある質問）

申し込み直前の訪問者が抱く疑問を 先回りして潰す セクションです。「料金は？」「途中解約できる？」「他社との違いは？」など、問い合わせフォームで聞かれる前に書いておくことで、申込率が上がります。

7. CTA（行動喚起）

Call To Action の略で、「申し込む」「問い合わせる」「資料請求」など、訪問者にやってほしい行動を指示するボタンや FORM です。LP の中で 最重要セクション なので、Hero と最下部に最低 2 箇所、長い LP なら 3〜4 箇所配置します。

業種別 LP の構成差

7 要素はあくまで基本テンプレートで、業種によって どこに比重を置くか が変わります。代表的な 4 パターンを紹介します。

サービス紹介型（コンサル・SaaS・士業）

Pain と Benefit を厚く。訪問者は「自分の悩みを本当に理解しているか」を見ています。導入事例（Testimonial）も最重要で、業界・規模が近い事例があると刺さります。

商品販売型（EC・物販）

商品ビジュアルと価格。Hero に商品写真を大きく置き、価格・送料・在庫を上部に明示します。Feature よりも「素材」「サイズ」「使用シーン」のような 商品スペック をしっかり載せます。レビューも大量に並べます。

イベント告知型（セミナー・展示会）

日時・場所・登壇者 が最優先。Hero のすぐ下に開催情報をどんと置きます。Benefit は「この日参加すると何が得られるか」、Feature は「タイムテーブル」、Testimonial は「過去回の参加者の声」になります。

資料請求・リード獲得型（BtoB）

Form がページの主役。Hero と最下部、さらに途中にも入力フォームを配置します。Pain は短めに、「資料を読めば全部わかります」というトーンで Form への誘導を急ぎます。

キャッチコピーの作り方 — 3 つの軸

Hero の中でも、キャッチコピー は LP 全体の運命を握ります。良いキャッチコピーには次の 3 つの軸が含まれます。

軸 1 — 数字を入れる

「短期間で英語が話せる」より「3 ヶ月 で英語が話せる」。「コストを削減」より「コストを 42% 削減」。数字が入ると、抽象的な表現が一気に具体的になり、信ぴょう性が上がります。

軸 2 — ベネフィット（結果）を書く

機能ではなく、訪問者が 手に入れる未来 を書きます。「クラウド型 CRM」ではなく「営業の数字が、毎朝コーヒー片手に把握できる」。「動画編集ソフト」ではなく「結婚式のムービーが、3 時間で完成する」。

軸 3 — 誰向けかを明示する

絞ると刺さります。「みんなのための英会話」より「30 代から始める 英会話」。「働く人の腰痛対策」より「1 日 8 時間 PC の前に座る人のための 腰痛対策」。ターゲットが狭く見えますが、その分その人にはド直球で刺さります。

3 軸を組み合わせた例は下記の通りです。

• 30 代未経験者 が、たった 90 日 で、自社の Web サイトを自分で作れるようになる コース
• コーディング不要。1 時間 で、自分の名前で URL を持った LP を公開する

このパターンで、自分の作りたい LP のキャッチコピーを 1 行書き出してみてください。

Claude Code への指示テンプレート — 5 項目

ここからがこのレッスンのメインです。2-2 で実際に Claude Code を叩く ときに、何を伝えれば高品質な LP が出てくるか。経験的に、次の 5 項目 を埋めて伝えると失敗しません。

項目 1 — 目的

その LP で訪問者に取ってほしい 1 つの行動 です。「無料相談を申し込んでほしい」「資料をダウンロードしてほしい」「商品を買ってほしい」。1 つだけ 書くのが大事です。複数書くとフォーカスがぼやけます。

項目 2 — 対象（ペルソナ）

訪問者の属性を 1 文で 書きます。「東京近郊に住む 30 代女性、英語学習に挫折経験あり、TOEIC 600 点」のように。年齢・性別・職業・悩みのレベル感がわかるだけで、Claude のトーンが大きく変わります。

項目 3 — 構成

7 要素のうち どれを使うか、その順番で書き出します。全部入れる必要はなく、Pain を省く LP もあれば、Testimonial を冒頭に持ってくる LP もあります。

項目 4 — トーン

文体の方向性です。「丁寧でフォーマル（金融・士業向け）」「親しみやすく口語的（個人向けサービス）」「専門的で硬め（BtoB SaaS）」「楽しくポップ（イベント・カフェ）」のように指定します。

項目 5 — 制約

技術的・コンテンツ的な制約です。「Tailwind CSS を CDN で読み込み」「画像はダミーで OK」「1 ファイル完結（index.html のみ）」「外部 API は使わない」「英語混在 OK / 全部日本語」など。

良い指示と悪い指示の比較

同じ「カフェの LP を作って」でも、伝え方で出力が天と地ほど変わります。

> カフェの LP 作って

> 渋谷の小さなスペシャルティコーヒー専門カフェ「CAFE BLUE」の LP を作ってください。

目的 — 訪問者にお店の場所を覚えてもらい、Google Maps で経路を開いてもらう
対象 — 渋谷で働く 20〜30 代、スタバよりも静かで集中できる場所を探している人
構成 — Hero / こだわりの豆 3 種 / 店内写真 / アクセス（地図埋め込み）/ 営業時間
トーン — 落ち着いた大人っぽい雰囲気、写真を主役にした余白多めのデザイン
制約 — Tailwind CSS を CDN で。画像はダミー URL で OK。index.html 1 ファイル完結

良い指示と悪い指示の差は、文字数ではなく「5 項目が埋まっているか」 です。長文を書く必要はなく、5 項目を箇条書きするだけで十分です。

ペルソナとカスタマージャーニー

「対象」を 1 文で書くと言いましたが、もう少し深掘りすると ペルソナ という概念になります。架空の代表的な訪問者を 1 人作り、その人の生活・悩み・1 日の流れを想像します。

例えば「英会話 LP のペルソナ」を作るとこうなります。

名前      — 佐藤美咲（仮名）
年齢      — 32 歳
職業      — IT 企業マーケター
悩み      — 海外出張が増えそうで、英語が話せないとキャリアが頭打ち
過去      — 中学英語で止まっている。アプリは 3 つ挫折
予算感    — 月 1〜3 万円ならアリ
行動パターン — 通勤電車で Instagram、寝る前に YouTube

ここまで具体的に描くと、LP の文言が自然と決まってきます。「英会話、始めませんか？」より「アプリで挫折した 30 代に 」のほうが、佐藤さんに刺さります。

訪問者が LP に着く前後の流れを カスタマージャーニー と呼びます。下記の通り 3 つのタイミングを意識します。

1. 流入前 — どこで LP を知った？（Instagram 広告 / Google 検索 / 知人紹介）
2. LP 滞在中 — どこまで読んで離脱した？スクロール深度はどこまで？
3. 離脱後 — フォーム送信した？再訪した？SNS でシェアした？

この 3 タイミングを意識して LP を組むと、どこに何を配置すべきか が自動的に決まります。Instagram 広告から来た人なら、広告のキャッチコピーと Hero が連動している必要があります。Google 検索から来た人なら、検索したキーワードが本文に含まれている必要があります。

競合 LP のリサーチ方法

ゼロから設計するより、似たサービスの LP を 3〜5 個眺めてから 設計したほうが早いです。リサーチ手順は次の通り 3 ステップです。

ステップ 1 — 検索して 5 サイト集める

Google で「{業種名} LP」「{業種名} ランディングページ」「{サービス名} 申込」と検索し、上位の 5 サイトをブラウザのタブに開きます。広告枠に出てくる LP は お金をかけている ので特に参考になります。

ステップ 2 — スクショと構造メモを取る

各サイトを上から下まで 1 枚の縦長スクショ にして保存します（Mac なら Cmd + Shift + 4、Chrome 拡張なら GoFullPage）。同時に、上から順に「Hero / Pain / 特徴 3 つ / 事例 / 料金 / FAQ / CTA」のように 構成だけメモ します。

ステップ 3 — Claude Code に要約させる

集めたスクショと構成メモを Claude Code に投げて、共通点と差分を要約してもらいます。

> 同じ業界の LP を 5 つ調べました。共通する構成と、差別化されているポイントを
> 教えてください。私の LP では、競合とどう差別化すべきですか？

これだけで、業界のお作法と、自分が攻めるべきポジションが見えてきます。1 から考える時間が 90% 短縮 されます。

CTA（行動喚起）の設計

LP の中で訪問者の 行動を引き出す のが CTA です。CTA を雑に作ると、どんなに本文が良くても申し込みは増えません。設計のコツは 3 つです。

コツ 1 — ボタン文言は「自分が手に入れるもの」を書く

「送信する」「申し込む」 のような システム視点 のボタンは弱いです。「30 分無料相談を予約する」「資料を 1 分でダウンロード」のように、訪問者視点 で「自分が次に何を手に入れるか」が書かれているボタンほどクリックされます。

コツ 2 — 配置は最低 3 箇所

CTA は Hero / 中盤 / 最下部 の最低 3 箇所に配置します。訪問者は熱量が上がったタイミングで申し込むので、どのタイミングでも押せる状態にしておきます。「ずっと右下にフローティング表示」というパターンもよく使われます。

コツ 3 — 複数 CTA の役割を分ける

メインの CTA（「申し込む」）に踏み切れない訪問者向けに、サブ CTA（「資料請求」「LINE で質問」）を用意します。サブ CTA はハードルが低いぶん、まずリードが取れます。サブ CTA を踏んだ人にあとからメインの CTA をオファーする、という 2 段階構造 がリード獲得型 LP の定番です。

設計図を書き出す — 6 ステップ

ここまでの話を実際に手を動かして設計図に落とし込みます。自分が作る LP の設計図 を、次の 6 ステップで紙またはメモアプリに書き出してください。

この 6 ステップが終わると、Claude Code への指示文がそのままできあがり ます。2-2 のレッスンでは、ここで作った設計図をベースにして、最初のプロンプトを書きます。

クイズで理解度チェック

<Quiz question="次のうち、Claude Code に LP 生成を依頼するときに『悪い指示』なのはどれですか？" options={["目的・対象・構成・トーン・制約の 5 項目を箇条書きで伝える","ペルソナを 1 文で添える（年齢・職業・悩み）","「いい感じのカフェの LP を作って」と一言だけ伝える","競合 LP を 3 つ調べて、その構成を参考に依頼する"]} answer={2} />

<Quiz question="LP のキャッチコピーに含めるべき『3 つの軸』として、正しい組み合わせはどれですか？" options={["文字数 / 改行位置 / フォントサイズ","数字 / ベネフィット / 誰向けか","色 / 余白 / アニメーション","SEO キーワード / ハッシュタグ / 絵文字"]} answer={1} />

設計図チェックリスト

次のレッスン 2-2 に進む前に、自分の設計図が 完成しているか をチェックしてください。1 つでも空欄があると、生成される LP の精度が落ちます。

<Checklist items={["LP の目的を 1 文で書き出した（複数書いていない）","ペルソナを 1 段落で描いた（年齢・職業・悩みが含まれている）","キャッチコピー案を 3 つ以上書き出した","使う 7 要素を選び、上から順に並べた","メイン CTA とサブ CTA の文言を決めた","トーンと技術制約を 1 文でまとめた","競合 LP を 3 つ以上見て、業界の標準構成を把握した"]} />

まとめ

このレッスンで押さえたポイントは下記の 6 つです。

1. LP は 1 ページ完結 + 1 つの目的 のサイト。コーポレートサイトとは構造も目的も違う
2. 典型構成は Hero / Pain / Benefit / Feature / Testimonial / FAQ / CTA の 7 要素
3. キャッチコピーは 数字 / ベネフィット / 誰向けか の 3 軸を組み合わせる
4. Claude Code への指示は 目的 / 対象 / 構成 / トーン / 制約 の 5 項目を埋める
5. 競合 LP を 3〜5 個 見てから設計すると、業界のお作法を踏まえた構成になる
6. CTA は 訪問者視点の文言 で、最低 3 箇所 に配置する

次のレッスン 2-2: LP を生成する では、ここで作った設計図を実際に Claude Code に渡して、1 ページの LP を一発生成 します。設計図ができていれば、所要時間 20 分で動く LP が手元に出てきます。