ページ: ランディングページ
キャンペーンランディングページの構造、コンバージョンフロー、最適化をガイドします。主な用途: 有料広告 (PPC/SEM) — ランディングページは通常、有料トラフィックを受け取るために構築され、広告とページの一致はコンバージョンに不可欠です。有料広告を使用するタイミングと広告とページの一致の原則については、paid-ads-strategy を参照してください。アフィリエイト登録、製品ローンチ、リード獲得、ウェビナー登録など、単一目標のコンバージョンページにも適用されます。規模: 多数のランディングページ（都市別、製品別、インテグレーション別など）を構築する場合は、programmatic-seo (テンプレート + データ) とテンプレートデザインのための template-page-generator を使用してください。マルチパーパスのホームページやカタログの商品ページとは異なります。
呼び出し時: 初回使用時は、必要に応じて、このスキルがカバーする内容とその重要性を1～2文で説明してから、主要な出力を提供します。2回目以降、またはユーザーがスキップを希望する場合は、主要な出力に直接進みます。
有料広告: LP要件
LPが有料トラフィックを受け取る場合: ページ上で広告の約束をすぐに提示、モバイルファースト（CTAをファーストビューに配置、高速読み込み）、最小限のフォーム（項目数を減らす）、ファーストビューに信頼要素を配置。広告とページの一致および品質スコアの詳細については、paid-ads-strategy を参照してください。
初期評価
まずプロジェクトのコンテキストを確認: .claude/project-context.md または .cursor/project-context.md が存在する場合、製品、オーディエンス、バリュープロポジションについて読み取ります。
以下を特定:
- ページの目標: サインアップ、購入、リード獲得、ウェビナー、ダウンロード
- トラフィックソース: 有料広告、メール、アフィリエイト、オーガニック
- オーディエンス: コールド vs ウォーム; 既知の場合はセグメント
ランディングページ構造 (5ステップフロー)
| ステップ | 目的 | 要素 |
|---|---|---|
| 1. スクロールを止める | 約2.6秒で注意を引く | 見出し、小見出し、ヒーロー画像または動画 |
| 2. 信頼を得る | アクションを促す前に社会的証明を提示 | ロゴ、 testimonial、レビュー、顧客数 |
| 3. 価値を説明する | メリット、機能、ユースケース | 明確なコピー; 誰のためか、何をするか |
| 4. 疑念を払拭する | 反対意見への対応 | FAQ、保証、比較 |
| 5. 行動を促す | 単一のプライマリCTA | 1つの明確なアクション; 論理的なポイントで繰り返す |
すべての要素は、これら5つの機能のいずれかを果たすべきです。競合する複数のオファーがあるページは、約266%少ないリードを生み出します。
見出しの公式
[誰のためのものか] + [具体的な成果] + [期間/修飾語]
- 避ける: 抽象的な約束 (「可能性を解き放つ」「ビジネスを変革する」)
- 推奨: 具体的な表現 (「新しいソフトウェアなしで請求書処理時間を70%削減」)
CTAのベストプラクティス
- 1つのプライマリCTA: 競合するアクションは避ける; コンバージョンへの「一方通行」を作成
- モバイルでファーストビューに: 親指で届く位置; 約65%以上のトラフィックはモバイル
- 価値に焦点を当てたコピー: 「送信」ではなく「無料トライアルを開始」
- 信頼シグナルと組み合わせる: ボタンの横に顧客数、ロゴ、統計を配置
- ナビゲーションを削除または最小化: コンバージョンが2～28%向上する可能性
プログラマティックランディングページ (スケール)
多数のランディングページ (例: 都市別、製品別、インテグレーション別) が必要な場合は、programmatic-seo を使用: 1つのテンプレート + データ = 数百または数千のLP。ランディングページの構造 (5ステップフロー、CTA、信頼) をテンプレートに適用; テンプレートデザインについては template-page-generator を参照。例: 地域データ付きの「[製品名] for [都市名]」LP、または「[アプリA] + [アプリB]」インテグレーションサインアップページ。
ページタイプ
| タイプ | 用途 | CTAの送信先 |
|---|---|---|
| クリックスルー | オファーに送る前にウォームオーディエンスへ; SaaS、サブスクリプションに最適 | pricing-page, products-page, signup |
| リード獲得 | ナーチャリング用にメールを収集; フォームは5項目以下 (長いフォームは約81%の離脱率) | newsletter-signup, contact-page |
| 製品重視 | 機能とメリットを深掘り; 製品ローンチ | products-page, features-page |
| 比較 | X vs Y; 競合ブランドキーワード広告; 商談意図 | alternatives-page, features-page, pricing-page |
| ユースケース/ソリューション | ツールに分割しにくい統合製品向け | features-page, services-page |
| 無料ツール | スタンドアロンユーティリティ; リード獲得; 同一のICP; 製品の一部を抜粋 | tools-page-generator; ゲート付きの場合、ツールページをLPとして使用 |
| ブリッジ/ボーナス | あなたのリンク経由で購入する追加インセンティブ | pricing-page, products-page |
| ウェビナー/イベント | イベント登録; ライブ前にサインアップを収集 | resources-page (ウェビナーをリソースとして) |
ランディングページ ↔ ページタイプ (コンテンツとフロー)
コンテンツを取得する (ステップ2～4):
- customer-stories-page-generator: 社会的証明のための testimonial、ケーススタディ; 課題→解決策→結果のスニペット
- faq-page-generator: 反対意見対応のFAQセクション; コンバージョン関連のQ&Aを再利用
- features-page-generator: 「価値を説明する」ステップのためのメリット優先の機能コピー
- resources-page-generator: メールと交換するリードマグネット (ebook、テンプレート); リソースとしてのウェビナー
CTAの送信先:
- pricing-page-generator: クリックスルーLP → 価格; サインアップ、トライアル
- products-page-generator: 製品LP → 製品詳細またはカタログ
- services-page-generator: サービスLP → 問い合わせ、見積もり、予約
- contact-page-generator: リード獲得LP → お問い合わせフォーム; B2Bデモリクエスト
- affiliate-page-generator, creator-program: パートナーサインアップ = ランディングページタイプ
内部リンク:
- LPをホームページ (ブランドアンカー)、about-page (信頼)、privacy-page (フォームコンプライアンス) にリンク
- 孤立LPを避ける: サイトマップ、ナビゲーション、またはキャンペーンハブから少なくとも1つの内部リンクを確保
パフォーマンスとデザイン
- 読み込み時間: 2.5秒未満; 1秒の遅延ごとに約7%のコンバージョンが失われる可能性
- モバイルファースト: レスポンシブ; CTAがスクロールなしで表示可能
- ビジュアル: ヒーロー画像または動画は、コンバージョンを最大80%向上させる可能性
- フロントエンド美学: 特徴的なタイポグラフィ、モーション、空間構成、背景については、brand-visual-generator フロントエンド美学を参照
- 開示: 該当する場合、FTC準拠のアフィリエイト/有料開示
配信前チェックリスト
ランディングページを公開する前に、以下を確認:
| カテゴリー | チェック項目 |
|---|---|
| ビジュアル | 絵文字をアイコンとして使用しない (SVGを使用); 一貫したアイコンセット (Heroicons/Lucide) から使用; ホバー状態でレイアウトシフトが発生しない |
| インタラクション | すべてのクリック可能要素に cursor-pointer を設定; ホバー時に明確なフィードバックを提供; トランジションは150～300ms |
| アクセシビリティ | 画像にaltテキスト; フォーム入力にラベル; 色だけに依存しない情報伝達; prefers-reduced-motion に準拠 |
| レイアウト | モバイルで水平スクロールがない; コンテンツが固定ナビゲーションの後ろに隠れない; 375px、768px、1024pxでレスポンシブ |
| パフォーマンス | 読み込み時間2.5秒未満; LCPを最適化; 画像は適宜WebP/遅延読み込みを使用 |
| 画像 | altテキスト、フォーマット、レスポンシブ、遅延読み込みについては image-optimization を参照 |
出力形式
- 見出し と小見出し
- 構造 (5ステップフローセクション)
- 信頼シグナルの配置
- CTAのコピーと配置
- 反対意見対応 (FAQ、保証)
- 内部リンク (送信先ページ)
- SEOメタデータ (ページがインデックスされる場合)
関連スキル
- hero-generator: ヒーローセクション (ステップ1)
- grid, list: ヒーロー下のコンテンツレイアウト; セクション、機能、testimonial
- cta-generator: CTAボタンのデザインと配置
- image-optimization: Alt、WebP、LCP、レスポンシブ、遅延読み込み
- pricing-page-generator: クリックスルーLPの送信先; サインアップCTA
- faq-page-generator: 反対意見対応のFAQセクション
- howto-section-generator: FAQ/CTAの前にハウツーステップセクション (例: セットアップフロー)
- comparison-table-generator: 競合/従来vsモダンの比較テーブルセクション; 広告とのメッセージ一致
- homepage-generator: マルチパーパスのホームページと単一目標のランディングページ; 類似構造
- paid-ads-strategy: 広告とページの一致; 有料広告を使用するタイミング
- alternatives-page-generator: 競合ブランドキーワード広告 → 比較LP (ブログではない)
- programmatic-seo: テンプレート + データによるランディングページのスケーリング
- template-page-generator: プログラマティックLPのテンプレート構造
- title-tag, meta-description, page-metadata: ランディングページのメタデータ