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

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

第 6 章のスタートを切るこのレッスンは、ランディングページ（LP）を Claude Code でゼロから組み立てる ためのレッスンです。前章までで身につけた「指示の出し方」「CLAUDE.md の作法」「ファイル編集の感覚」を、はじめて 1 つの公開物 にぶつけていきます。

所要時間 — 約 60 分（実機で手を動かす場合） 難易度 — ★★☆☆☆（第 5 章までを終えていれば余裕）

このレッスンは、いきなり HTML を書き始めません。最初に 「なぜ LP は 7 要素か」 を腹落ちさせてから、コードを書きます。Claude Code の真価は 「正しい問いを投げられる人」 がいて初めて爆発するからです。構成要素を知らないまま「LP 作って」と投げる と、それっぽい何かが出てきて、なぜか申し込みが取れない LP が量産されます。

LP（ランディングページ）とは何の道具か

LP は、見た目はただの 1 ページの Web ページですが、役割は「ただ 1 つの行動を取らせるためのセールスマン」 です。コーポレートサイトは網羅性が大事、ブログは読み物としての豊かさが大事、ですが LP は違います。LP の評価軸は CVR（コンバージョン率） の 1 つだけ。訪問者 100 人のうち何人が 「申し込み・購入・問い合わせ・メルマガ登録」 に進んだか を測ります。

LP とコーポレートサイトの違い

寿命が短い というのが大事。LP は使い捨ての販促物なので、コストをかけすぎないことそのものが価値 になります。30 分で作って 1 ヶ月で捨てる、これが Claude Code 時代の LP の使い方です。

LP の 3 つの典型シナリオ

• キャンペーン LP — 期間限定セール、新商品ローンチ、イベント告知。寿命最短
• SaaS / ツール LP — ソフトウェアやサービスの紹介。機能・料金・導入実績が必須
• 個人ブランド LP — 講座、コーチング、コース販売。著者の人柄と実績で売る

この 3 タイプはあとで「プロンプトテンプレート 3 つ」のセクションで具体プロンプトを用意します。

LP に必要な要素 7 つ

ここから、LP の 7 つの必須構成要素 を解説します。これが頭に入っていれば、Claude Code への指示が一気に的確になります。「LP 作って」の代わりに「7 要素を全部含めた LP を作って」と書くだけで、出力品質が 2 段階くらい上がります。

1. ヒーロー — 3 秒で「これ何？」を伝える

ファーストビュー、つまりスクロールせずに見える最初の画面。離脱されたら全部終わりなので、LP で一番重要なエリアです。入れる要素は キャッチコピー（H1、15 字以内） / サブコピー（2〜3 行） / ビジュアル / CTA ボタン（1 つだけ） / 信頼バッジ（任意）の 5 つ。

良いコピーには共通点があります。誰の・どんな課題が・どう変わるか の 3 点が 1 行に入っていることです。Claude Code にコピーを書かせるときは、「ターゲットの職種・抱えている不満・期待する変化」 の 3 つを明示すると、急に的を射た文章が出てきます。

2. 課題提起 — 「自分のことだ」と思わせる

ヒーローでスクロールを許してもらえたら、次は 共感ゾーン。「こういう悩み、ありませんか？」というブロックを置いて、訪問者に「あ、これ自分の話だ」と思わせます。重要なのは、解決策を急がない こと。すぐに「だから当社の◯◯！」と言うと、売り込まれている感が出て離脱されます。

Before / After 2 列レイアウト（左に課題、右に解決後） にすると直感的になります。Claude Code に「2 列レイアウトで、左に悩み 3 つ、右に解決後の状態 3 つ」と書けば、それっぽいセクションが出てきます。

3. 解決策 — このサービスで何がどう変わるか

機能を並べるのはこの段階ではない というのがコツです。「機能」は次のセクションに譲って、ここでは 「使うとどうなるか」（Outcome） だけを語ります。

機能ベースはエンジニアには響きますが、決裁者は「で、結局どうなるの？」しか聞いていない。Outcome ベースで書きます。

4. 機能 / 特徴 — 3 つに絞る

機能を 10 個並べるのは禁物。3 つの大きな特徴 に絞って、それぞれにアイコンと簡単な説明をつけるのが定番です。「アイコン + 見出し + 1〜2 行説明」を 3 つ並べるレイアウトが視覚的に安定。4 つ以上は情報過多。

5. 実績 / 社会的証明 — 数字には単位と桁

「他の人も使っている」「数字で結果が出ている」「メディアに紹介された」の 3 種類。顧客ロゴ / お客様の声 / 数字の実績 / メディア掲載 を組み合わせます。「多くの企業に導入」より「500 社に導入」のほうが 5 倍信頼されます。

6. 料金 — 隠さず明示

料金を隠す LP は信頼を失います。おすすめは 3 プランの段組 で、真ん中の Pro プランを 「おすすめ」 バッジで強調。中央バイアスで真ん中が選ばれやすくなります。

7. CTA — 1 つだけの行動

CTA は 1 種類だけ。「申し込み」と「資料請求」と「メルマガ」を全部置くと、決められなくて何もしない ようになります（選択のパラドックス）。アクション動詞 + 時間（「今すぐ無料で始める」「30 秒で見積もりを取る」）で書き、ヒーロー / 中盤 / 最後の 3 箇所 に同じ CTA を置きます。

技術スタックの選択 — 5 つの選択肢

LP の中身が決まったら、次は 何で作るか。Claude Code は何でも書けるので、「どれが最適か」を人間が決めなければなりません。

一旦の結論

このレッスンでは HTML 単体 をメインに、Tailwind 静的サイト を中級版として扱います。

初めての LP — シンプル HTML（30 分版）

ここから手を動かします。1 ファイル完結の HTML で LP を作る最速ルート。

Step 1 — 要件を 1 行にまとめる

何を作るかを 1 行 で言語化します。これをやらずにいきなり Claude Code に投げる人が多いですが、1 行で言えないものは Claude Code でもまとまりません。

誰向け: フリーランスのエンジニア
何を売る: 月額制の請求書 SaaS「InvoiceFast」
どんな価値: 30 秒で見積書 → 請求書 → 入金確認まで完結

「誰向け」「何を売る」「どんな価値」 の 3 つは、LP の全要素に通底する基本パラメータです。

Step 2 — Claude Code に最初のプロンプト

> InvoiceFast という SaaS の LP を 1 ファイルの HTML で作って。
>
> ターゲット: フリーランスのエンジニア
> 価値提案: 30 秒で見積書 → 請求書 → 入金確認まで完結
>
> 必須セクション（この順番で）:
> 1. ヒーロー — H1 / サブコピー / CTA ボタン
> 2. 課題提起 — Before/After 2 列で 3 項目ずつ
> 3. 解決策 — Outcome ベースで 3 行
> 4. 機能 — 3 つのカード（アイコン + 見出し + 説明）
> 5. 実績 — 数字バッジ 3 つ
> 6. 料金 — 3 プラン段組、Pro におすすめバッジ
> 7. CTA — フッター直前に再配置
>
> 制約:
> - Tailwind は CDN で読み込み
> - レスポンシブ必須（モバイル 1 列、PC 3 列）
> - 配色は青基調（#0AA5D4 をアクセント）
> - title / description / OGP メタタグ入り

この粒度のプロンプトを最初から書ける人 は、Claude Code で 30 分 LP が現実になります。

Step 3 — 出力を確認する

Claude Code が invoice-fast.html を生成します。ファイルをブラウザにドラッグ&ドロップ すれば即プレビュー。確認するポイントは ファーストビューに H1 / サブコピー / CTA が入っているか / 7 要素が順番通りか / スマホサイズで崩れないか / CTA が目立つか の 4 点。

Step 4 — 微調整プロンプト

> ヒーローの H1 を「明日の請求、もう手書きで作らない」に変えて。
> サブコピーを 2 行にして、「30 秒で見積〜請求〜入金確認」を強調して。
> CTA は「無料で 14 日試す」、色は #F59E0B（オレンジ）に。
>
> 課題セクションの左列を「✗」、右列を「✓」のチェックアイコンで装飾して。
>
> 料金カードの Pro に "おすすめ" バッジを左上に追加。
> Pro のボタンだけ #0AA5D4 で塗りつぶし、他は枠線のみに。

1 つの指示につき変更点は 3〜5 個まで。それ以上一気にお願いすると、Claude Code が手を抜くポイントが出てきます。

Step 5 — 仕上げ

> 次の仕上げを加えて。
> - <title> を「InvoiceFast｜30 秒で完了する請求 SaaS」
> - <meta name="description"> を 120 字以内で
> - OGP メタタグ一式（og:title / og:description / og:image / og:url）
> - twitter:card は summary_large_image
> - JSON-LD で SoftwareApplication 構造化データ

ここまでで 30〜45 分 で 1 つの LP が完成します。慣れれば 20 分を切ります。

中級 — Tailwind 静的サイト（複数ファイル）

1 ファイルで収まらなくなってきたら、複数ファイル構成に移行します。

my-lp/
├── index.html          ← HTML 本体
├── styles/custom.css   ← Tailwind では書きづらい一部
├── scripts/analytics.js ← Plausible / GA / PostHog
├── images/             ← hero.webp, og-image.png 等
└── README.md           ← Claude Code 用の指示書

README.md に「この LP の目的と更新ルール」を書いておく と、後から Claude Code に「ここのコピー変えて」と頼んだとき、文脈を保ってくれます。これが CLAUDE.md 文化を LP にも持ち込む発想です。

> 既存の InvoiceFast LP を、複数ファイル構成にリファクタしてください。
> 追加機能:
> - スクロール時にヘッダーが追従（sticky）
> - CTA ボタンをクリックしたら平滑スクロールで料金セクションへ
> README.md に「セクション順 / 配色 / フォント」を記載して、
> 次回の修正でも Claude Code が迷わないようにして。

Alt 属性まで書く癖 をつけると、SEO とアクセシビリティが同時に上がります。Claude Code には「画像 placeholder は alt 含めて書いて、後で実画像に差し替える前提」と指示すると親切な構造になります。

プロンプトテンプレート 3 つ

コピペで使える業種別プロンプト です。ターゲットと数字だけ差し替えて使ってください。

テンプレート 1 — 個人ブランド（コーチング / コンサル）

> 個人ブランドの LP を作って。
> プロフィール:
> - 名前: 山田太郎
> - 肩書: 元上場企業 CMO / 現マーケティングコンサル
> - 実績: 担当した SaaS の MRR を 12 ヶ月で 10 倍
> サービス:
> - 名称: 「90 日 MRR 倍増プログラム」
> - 価格: 月 ¥250,000（3 ヶ月コース、税別）
> - 限定: 月 5 社まで
>
> 構成: ヒーロー → プロフィール詳細 → 課題提起 → プログラム内容
>     → 受講者の声（顔写真付き 3 名）→ 料金 → CTA「無料相談を予約」
> デザイン: ネイビーとゴールド基調、Serif 系見出し、余白広め
> 1 ファイル HTML、Tailwind CDN、レスポンシブ必須。

テンプレート 2 — SaaS（無料トライアル誘導）

> SaaS の LP を作って。
> プロダクト:
> - 名称: TimeFlow（AI 工数管理ツール）
> - 価格: Starter 無料 / Pro $29/月 / Enterprise 要問合せ
> ターゲット: 10〜100 人規模のスタートアップ CTO
>
> 構成: ヒーロー → 課題提起 → 解決策 → 機能（AI 自動分類 / Slack 連携 /
>     レポート）→ 実績（ロゴ 8 個 + 数字バッジ 3）→ 料金 3 プラン
>     → FAQ 5 問 → CTA「14 日無料で試す」を再配置
> デザイン: 白とブルーグレー基調 (#1E293B アクセント)、Inter フォント、
>     ファーストビューに CSS アニメで grid が滑り込む動き
> 1 ファイル HTML、Tailwind CDN、SEO メタ完備。

テンプレート 3 — オンラインコース販売

> オンラインコースの LP を作って。
> コース:
> - タイトル: Claude Code 入門 30 レッスン
> - 価格: ¥29,800（買い切り）
> - 形式: 動画 + テキスト + Slack コミュニティ
> ターゲット: AI に置いていかれる不安を感じる中堅エンジニア
>
> 構成: ヒーロー → Before/After → カリキュラム（10 章のアコーディオン）
>     → 講師紹介 → 受講者の声 3 名 → 料金（30 日返金保証バッジ強調）
>     → FAQ 7 問 → CTA「今すぐ受講を始める」
> デザイン: ダークブルー基調、動画埋め込み風 placeholder
> 1 ファイル HTML、Tailwind CDN、構造化データ Course 入り。

Claude Code に「これをベースに、◯◯業界向けに書き換えて」 と頼むのが一番速いやり方です。

デザイン指示のコツ

「綺麗にして」と言っても綺麗になりません。デザインは具体的な数字とキーワードで指示する ものです。

配色 — 3 色ルール

LP の配色は 3 色まで。多色は素人っぽく見える最大の原因です。

• プライマリ — メイン色。CTA ボタンに使う。1 色のみ
• セカンダリ — 補助色。バッジや見出しのアクセント
• ニュートラル — 背景 / 本文 / 余白、グレー〜オフホワイト

色は HEX で直接指定。「青っぽく」ではなく「==#0AA5D4==」と書くこと。

フォント — 2 種類まで

Heavy weight（700〜900）は見出しに、本文は 400 が読みやすい鉄板です。

余白 — 4px ステップで

Tailwind のスペーシングは 4px ステップ。LP では ==セクション間に最低 py-16（64px） 取ると、息ができる余裕が出ます。余白がデザインの 8 割を決めます==。色やフォントより余白に時間をかけたほうが、出来上がりの印象が劇的に変わります。

影 / 角丸 / 線 — 抑えめに

• 影は ==shadow-sm か shadow-md== まで。shadow-2xl は古臭く見える
• 角丸は ==rounded-lg（8px）== が万能
• 線は ==border border-slate-200== くらいの薄さで十分

モバイル優先

95% のユーザーがスマホから来る 前提で組みます。

> モバイルから設計して。
> - ベース: モバイル（375px）想定
> - md: 768px から 2 列、lg: 1024px から 3 列
> - 文字サイズはモバイル 16px / PC 18px
> - CTA ボタンはモバイルで横幅いっぱい (w-full)、最小 44x44px 確保

写真の扱い

画像は LP の生命線。Claude Code は画像そのものは生成できませんが、Placeholder の指示はちゃんとできます。

• 解像度 — 横幅 1200px 以上 / 2x Retina 対応なら 2400px
• 形式 — WebP が第一選択、フォールバックで JPG
• ファイルサイズ — ヒーロー画像は 100KB 以下 に圧縮

> 画像は <picture> で WebP + JPG フォールバック。
> loading="lazy" を hero 以外につけて、
> 各 img に width / height 属性も明記してレイアウトシフトを防ぐ。

失敗パターン

実戦で踏みやすい 地雷地帯 を 8 つ。失敗パターン を先に知っておくと、夜中まで戻れなくなる事態を回避できます。

失敗 1 — テキスト多すぎ

「あれもこれも伝えたい」で文章を詰め込むと、誰も読みません。1 ページのテキストは A4 用紙 1 枚分まで。Claude Code に「テキストを 30% 削って、密度を上げて」と頼むだけで、見違えます。

失敗 2 — CTA 不明確

「お問い合わせ」「メールはこちら」「資料請求」「無料体験」を全部置く LP は 必ず失敗。CTA は 1 種類だけ。

失敗 3 — モバイル崩れ

必ず Chrome DevTools のモバイル表示で確認。代表的なバグは 画像が横にはみ出す（max-w-full h-auto を全 img に）、文字が小さすぎる（最低 16px）、ボタンが押しづらい（最小 44x44px）、グリッドが 3 列のまま潰れる（grid-cols-1 md:grid-cols-3）。

失敗 4 — 画像なし

テキストだけの LP は離脱率が高い。最低限ヒーロー画像 1 枚、機能カードに 3 枚 は欲しい。Unsplash や Pexels のフリー素材で十分です。

失敗 5 — 速度遅い

LP は Core Web Vitals で評価されます。LCP が 2.5 秒以下 じゃないと検索順位が落ちます。ヒーロー画像を <link rel="preload"> で先読み、画像は WebP、width height を明記、フォントは font-display: swap。

失敗 6 — SEO 設定なし

title / description / OGP なしで公開する人が後を絶ちません。後述の SEO セクションで詳しく扱います。

失敗 7 — A/B テスト前提なし

LP は 1 回作って終わり、ではない。最初から「後で A/B テストする前提」で組むと、後の運用が楽になります。

失敗 8 — 計測タグなし

Plausible / Google Analytics / PostHog のどれか 1 つは入れる。計測しない LP は改善できません。

SEO 基本 — title / description / OGP / 構造化データ

LP も検索結果に出ます。最低限の SEO は 1 ファイルで完結する ので、必ず入れましょう。

title — SEO の 1 等地

50〜60 字以内、ターゲットキーワード + ブランド名。

<title>InvoiceFast｜30 秒で完了する請求 SaaS</title>

meta description

検索結果の説明文に表示されます。120 字前後、ベネフィット + 行動文言。

<meta name="description" content="InvoiceFast は、見積から請求、入金確認まで 30 秒で完結する SaaS。フリーランスエンジニアの月末作業を最大 95% 削減。今なら 14 日無料。">

OGP — SNS シェアの見た目

==og

<meta property="og:type" content="website">
<meta property="og:title" content="InvoiceFast｜30 秒で完了する請求 SaaS">
<meta property="og:description" content="フリーランスエンジニアの月末作業を最大 95% 削減。">
<meta property="og:image" content="https://invoicefast.example.com/og-image.png">
<meta property="og:url" content="https://invoicefast.example.com">
<meta name="twitter:card" content="summary_large_image">

構造化データ（JSON-LD）

SaaS なら SoftwareApplication、コースなら Course、人物なら Person。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "InvoiceFast",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web",
  "offers": { "@type": "Offer", "price": "29", "priceCurrency": "USD" }
}
</script>

これで Google 検索でリッチリザルト の対象になります。

Claude Code への一括指示

> SEO の仕上げを全部一気に入れて。
> - <title> / <meta description> / <link rel="canonical">
> - OGP メタタグ一式 + Twitter Card
> - JSON-LD 構造化データ（SoftwareApplication）
> - <html lang="ja"> / favicon.ico の link
> - sitemap.xml と robots.txt の雛形も別ファイルで作って

公開準備 — 次のレッスンへの導線

ここまでで LP のファイルは完成しました。次のレッスン以降では Vercel への公開 を扱いますが、今のうちに公開準備の チェックリスト を通しておきます。

<Checklist items={["title / description / OGP / canonical が全部入っている","7 要素（ヒーロー〜CTA）が順番通りに並んでいる","CTA は 1 種類だけ、3 箇所に再配置されている","モバイルで崩れない（DevTools で 375px 確認）","Lighthouse スコア 90 点以上（Performance / Accessibility / Best Practices / SEO）","Plausible / GA / PostHog のいずれかが入っている","favicon.ico が設定されている","Unsplash 等のフリー素材で画像が埋まっている","all img タグに alt 属性がある"]} />

このチェックリストを ==README.md に貼って Claude Code に渡す と、抜けている項目を 1 つずつ埋めてくれます。Claude Code に「自分の出した成果物を、自分のチェックリストで採点しなおして」 と頼むのは、非常に有効なテクニックです（自己採点ループ==）。

公開先の選択肢

BlueAI 社内では Vercel と Cloudflare Pages の 2 択。次のレッスン以降で Vercel デプロイを詳しく扱います。

このレッスンのまとめ

1. LP は CVR 1 点突破のセールスマン。コーポレートサイトとは目的が違う
2. 必須 7 要素は ヒーロー / 共感 / 解決 / 機能 / 実績 / 料金 / CTA。順番が肝
3. 技術スタックは HTML 単体（30 分） が初手。Astro は SEO 重視時、Next.js はオーバーキル
4. 30 分版 LP は 要件 1 行 → 初回プロンプト → 微調整 → SEO 仕上げ の 5 ステップ
5. 業種別プロンプトテンプレート（個人 / SaaS / コース）を CLAUDE.md にストック
6. デザインは 配色 3 色 / フォント 2 種 / 余白を 4px ステップ の三原則
7. 失敗パターンの 8 つ（テキスト多すぎ / CTA 不明確 / モバイル崩れ / 画像なし / 速度 / SEO / A/B / 計測）は事前に潰す
8. 公開前に チェックリストで自己採点 を Claude Code にやらせる

<Quiz question="LP に必須の 7 要素を正しい順序で並べたものはどれ？" options={["ヒーロー → 課題提起 → 解決策 → 機能 → 実績 → 料金 → CTA","機能 → 実績 → 料金 → ヒーロー → 課題提起 → 解決策 → CTA","ヒーロー → 料金 → 機能 → 実績 → 課題提起 → 解決策 → CTA"]} answer={0} />

<Quiz question="LP の CTA ボタンに関する正しい原則はどれ？" options={["種類は 1 つに絞り、ページ内で 3 箇所に同じ CTA を再配置する","問い合わせ / 資料請求 / 無料体験 / メルマガを全部置くべき","CTA は最後のフッターに 1 箇所だけ置けば十分"]} answer={0} />

<Quiz question="「30 分版 LP」で最初に Claude Code に渡すべき情報は？" options={["誰向け / 何を売る / どんな価値 の 3 行","Tailwind CSS の最新バージョン番号","競合 LP のスクリーンショット 10 枚"]} answer={0} />

次のレッスン 6-2: 社内ツールプロトタイプ では、LP と同じ手法で 社内向け Web ツール（見積書ジェネレーター） を作ります。見せる ための LP の次は、使ってもらう ための社内ツール。レイヤーが変わると Claude Code への指示の出し方もまた違ってきます。