ランディングページビルダー は何をしますか？
公式: 独自の構造 × 競合のベストプラクティス、リファレンス標準に準拠して構築。
各ページはニッチに固有です。 ゼロからのデザインは、トピックと競合（フェーズ2～3）から生まれ、以前のページやテンプレートからは決して来ません。ページ間で引き継がれるのは品質レベルであり、見た目ではありません。
- すべてのブロックに明確な階層: アイブロー → 見出し → リード → 実際のメディア → マイクロコピー付きCTA。
- 適切なフレーム内の実際のプロダクトメディア。不足している場合は、空白のラベル付きフレームを配置。
- ニッチに合わせて選ばれた1組のタイプと1つのアクセントカラー。
- リズムを作るための1つのコントラストセクション。
- 結果を1つずつキャプション付きで表示。
- 価格の前に要約。
- 事実に基づいたFAQとクロージングCTA。
- スクリーンショットQA。
承認済みのVidpeakリデザイン（references/examples.md §D）がそのレベルを示しています。その仕上がりに合わせ、見た目は決して真似しないでください。
- 独自の構造は、ページが果たすべきジョブとその割合（5つのブロック、重み、基本ルール）を決定します。これはすべてのニッチで同じです。
- 競合は、このニッチで各ジョブがどのように実行されるかを決定します: ヒーローフォーミュラ、証明の種類、プロダクトの表示方法、価格設定の形式、異議、ビジュアルシステム。これはニッチごとに変わります。
- ギャップ — 競合がうまく言ったり示したりしないこと — が私たちの差別化ポイントになります。
- リファレンス標準（
references/reference-standard.md）は、品質基準を設定します。オーナーが選んだ4つのランディングページです。そのブロックパターン、コピー技術、ビジュアル技術が「うまくできている」ということの定義です。ニッチが見た目を決定し、リファレンスがどれだけうまく作られているかを決定します。
フレームワークだけで構築したり（汎用的なページ）、1つの競合をクローンしたり（模倣ページ）してはいけません。
2つのモード — 最初に1つを選択
| モード | 使用時 | ワークフロー |
|---|---|---|
| A. ゼロから構築 | ページがまだない場合、またはオーナーが新しいページを希望する場合 | 以下（フェーズ1～6） |
| B. デザインを改善 | 既存のページがある場合（URL / リポジトリファイル / スクリーンショット）で、オーナーが見た目や機能を向上させたい場合 | references/redesign.md |
Bモードのシグナル: 「より良く/より美しくする」、「リデザイン」、「デザインを改善」、「これが私のランディングページです」、ライブページへのリンク。不明な場合 → 「新しいページですか、それともこのデザインを改善しますか？」と1つ質問してください。両方のモードで同じハウス構造、基本ルール、リファレンス標準を使用します。
ワークフロー — モードA（ゼロから）
順序に従ってください。フェーズ2～3はこのスキルの中核です。時間を節約するためにスキップしないでください。
| # | フェーズ | 成果物 | リファレンス |
|---|---|---|---|
| 1 | ブリーフ — プロダクト、アバター、ベネフィット、CTAタイプ、価格、言語、アセット | 10行のブリーフ | references/brief.md |
| 2 | 競合調査 — 3～5社の競合を見つけ、そのランディングページを開き、すべてのセクションをキャプチャ | research/ スクリーンショット + 生のメモ | references/competitor-research.md |
| 3 | 分解と合成 — ブロックごとのパターン、市場ベースライン、ベストプラクティス、ギャップ、ビジュアルロック | research/teardown.md | references/competitor-research.md |
| 4 | ページ計画 — 5つのブロックそれぞれに、選択したプラクティス + リファレンス標準のパターン + 独自コンテンツを記入 | 計画表 → オーナーとのチェックポイント | references/framework.md、references/reference-standard.md |
| 5 | ビルド — スタック、コピー、メディア、CTA、このニッチに固有のビジュアルシステム | ページ | references/build.md、references/visual-system.md |
| 6 | QA — ブラウザ（デスクトップ＋モバイル）で、計画、競合、リファレンス標準に照らして確認 | 修正済みページ + 引き継ぎ | references/build.md §QA |
| 7 | SEO & GEO — ページ公開前（またはリクエスト時）: 1つのアドレス、robots/sitemap/llms.txt、metaとog、JSON-LD、速度、AIボットアクセス、Search Console | AI検索でインデックス可能で引用可能なライブページ | references/seo-geo.md |
チェックポイント（フェーズ4後）。 オーナーに簡潔に提示: 市場ベースライン、採用する3～5のプラクティス、攻めるギャップ、ビジュアルロック、計画表。「OK」を得てから構築します。オーナーがスピードを求めた場合は、計画を述べて同じターンで構築します。
止まらないでください。 何か不足している場合（プロダクトURL、スクリーンショット、価格）、TODO をマークして進め続けてください。CTAタイプや言語を妨げるものだけを質問してください。
ハウス構造（常に）
5つのジョブ。1つのジョブが複数のセクションにまたがる場合があります（例: オファー = 要約 + 価格設定 + FAQ + 最終CTA）。重みはページの長さ/注意の割合であり、目標の形状であって、法則ではありません。
| # | ジョブ | 重み | 必ず達成すること |
|---|---|---|---|
| 1 | ファーストスクリーン | 5% | それが何か、またはベネフィット、誰のためか、1つのプライマリCTA（プレプロダクトの場合はなし） |
| 2 | ペイン＆状況 | 15% | 競合がペインブロックを使用している場合のみ。 その場合: 問題を、実際の事実のみで鋭く。それ以外はスキップ — その割合はベネフィット＋プロダクトに回る |
| 3 | ベネフィット（преимущества） | 20% | 読者が得られるもの。各利点をビジュアルまたは証明で裏付ける |
| 4 | プロダクト | 40% | それが何か＋どのように機能するか、1画面で把握可能 |
| 5 | オファー＆CTA | 20% | ベネフィットの要約、クリック後の流れ、価格＋リスクリバーサル、異議、CTA |
ベネフィット＋プロダクト ≈ ページ全体の60%。既存のLPがある場合は、そのセクション順序を維持し、ジョブをマッピングしてください。
競合と独自の構造の組み合わせ方
- 各競合セクションを5つのジョブのいずれかにマッピング（お客様の声 → ベネフィットの証明、FAQ → オファーの異議対応、ロゴバー → ファーストスクリーンの証明、統合 → プロダクト...）。これにより、市場のジョブごとのビューが得られます。
- 市場ベースライン = ほとんどの競合が使用するパターン。購入者はこれらを期待します — 含めてください（ロゴバー、無料トライアル、比較表、ビフォー/アフターなど、このニッチで標準とされるもの）。
- ベストプラクティス = (a) カテゴリーリーダーまたは2社以上の競合が使用している、または有料広告を出稿しているページで使用されているパターンで、かつ (b) そのブロックのジョブに役立つもの。それを採用しますが、独自の言葉で表現します。
- ギャップ = 誰も答えていない異議、誰も証明していないベネフィット、誰も名指ししていないセグメント、誰も使用していないフォーマット（例: 実際の成果物を誰も見せていない）。1～2のギャップを前面に押し出します — それがポジショニングです。
- 競合。 ハウスルールがデフォルトで優先されます。競合をチェックポイントでフラグし、オーナーに決定させてください。典型的な例: 競合がリード/クイズフォームを使用 → プライマリアクションを1つに維持（基本ルール参照）。
- ビジュアルシステムは競合セット（通常はリーダー）から導き出します: パレットの役割、タイプ、密度、メディアフォーマット、CTAの形状。システムをコピーし、コピー、数字、ロゴ、アセットは決してコピーしないでください。
基本ルール（任意のニッチ）
- 強力なファーストスクリーン: 簡潔な説明 または フックとなるベネフィット、さらにアバター。
- すべてのCTAは具体的なベネフィットと組み合わせ、次に何が起こるかを述べる。
- プロダクトの仕組みを実際のインターフェースで示す — すべてのハウイットワークスのステップを実際のスクリーンショット/録画とペアにするか、競合が許可している場合は使用させてください。準備ができていない場合 → 空白の、適切なサイズのフレームを残し、何が入るかをラベル付けする。インターフェースをテキストリスト、アイコン、またはでっち上げのUIに置き換えないでください。
- 1つのプライマリアクション、CTAタイプは2つだけ: プロダクトへ（開始 / 試す / ダウンロード / サインアップ）または 通話予約（理想的には埋め込み型スケジューラー）。リードフォームやクイズフォームをページに配置しないでください。許可されるもの: プロダクトの使用を開始するプロダクト入力（リンクを貼る、ファイルをアップロードする、アドレスを入力する） — 競合がそれを試用方法としている場合。
- 証明、価格、統計、お客様の声、ロゴを決してでっち上げないでください。空のスロット → 可視の
TODO。 - 実際のプロダクトメディアのみ — プロダクトメディアがあるべき場所に偽のUIやストックフォトを使用しないでください。
- 市場の慣行が不明瞭またはリスクがある場合、推測する代わりにオーナーに質問してください。
ファイル
references/reference-standard.md— 4つのリファレンスランディング: 品質基準、ジョブごとのパターンライブラリ、コピー技術、ビジュアル技術。両方のモードで読んでください。references/redesign.md— モードB: 既存ページを監査し、デザインを向上させます。references/brief.md— カードファーストのブリーフ、カード行 → ブロックマッピング、言語、CTAタイプ。references/competitor-research.md— 競合の見つけ方、どのページか、キャプチャ、分解テンプレート、合成ルール。このスキルの中核。references/framework.md— 5つのジョブの詳細、ブロックごとのルール、市場成熟度、計画表。references/visual-system.md— 競合からビジュアルシステムを導き出し固定する（任意のニッチ）。references/build.md— スタック、コピー、メディア、CTA配線、オファー/価格設定、QA、引き継ぎ。references/seo-geo.md— 公開前: SEOおよびGEO（AI検索）技術チェックリスト、ドメインからSearch Consoleまで。references/examples.md— 実例（異なるニッチ）。例であり、ルールではありません。scripts/capture.mjs— 競合URLのスクリーンショット＋構造/ビジュアル抽出。templates/teardown.md— 記入する分解ファイル。