高コンバージョン型ランディングページを生成する
実際のページを出荷します：動作するTSXコンポーネント、実際のコピー構成、測定済みパフォーマンス。
リポジトリの既存のフレームワーク、スタイリング、コンポーネント規約に準拠し、依存関係は既存のもののみを使用します。
新しい依存関係のインストールは行いません（安全性フックがブロックします）。
スタックが未選択のグリーンフィールドでのブートストラップでは、デフォルトでNext.js + Tailwindを使用します。
それ以外の場合、ページが本当に欠落している依存関係を必要とするときは、mark_ticket_blocked を呼び出してその名前を指定します。
目標（Core Web Vitals「良好」、フィールドp75）：LCP ≤ 2.5秒、INP ≤ 200ミリ秒、CLS ≤ 0.1。 またWCAG 2.2 AAを満たすこと：文字コントラスト ≥ 4.5:1、可視のフォーカスリング、ラベル付き入力フィールド、キーボード操作可能なページ。
コピーフレームワーク（ページごとに1つ選択）
| フレームワーク | 構成 | 最適な用途 |
|---|---|---|
| PAS | 問題 → かき立て → 解決 | 問題を認識しているトラフィック |
| AIDA | 注意 → 興味 → 欲求 → 行動 | コールドトラフィック、新しいカテゴリ |
| BAB | 前 → 後 → 橋渡し | 成果/変革の提供 |
テンプレートと5つの反論FAQは references/copy-frameworks.md にあります。
copywriting スキルが見出しとCTAの作成をカバーしています。
セクション設計図
- ヒーロー：成果を表す見出し（約10ワード以内）、その方法を説明する1文のサブ見出し、1つのプライマリCTA、および証明シグナル（数字、ロゴ、評価）。カルーセルは使用しない。
- 問題：現状のコストを、顧客の言葉で。
- 解決策 / ベネフィット：3～6個のベネフィット。それぞれ1行の説明と、オプションでビジュアル。
- 社会的証明：名前、役職、会社、結果を含む testimonial（顧客の声）、ロゴ。
- 価格（該当する場合）：2～4のティア。推奨するものをハイライト。
- FAQ：5つの反論。ネイティブの
<details>/<summary>またはアクセシブルなアコーディオンを使用。FAQPageマークアップはオプション（GoogleがFAQリッチ結果を表示しなくなったため）。 - フッターCTA：最小限の摩擦でプライマリアクションを繰り返す（例：メールアドレスのみ）。
ステップ
-
入力を収集する。 プロダクト名、オーディエンス、主な課題、主な成果、プライマリCTAとその遷移先、利用可能な証明、スタイルの方向性。まずチケット、
BRAND.md/トークン、既存のページを読む。無人モードでは、質問のために停止せず：既存のものを使用し、ギャップをコピー内で[TODO: …]としてマークする。 testimonial、ロゴ、顧客数、評価を決して捏造しない。 -
フレームワークを選択する。 トラフィックソースと認知度レベルに基づいて。レイアウトの前にコピーを書く。5つの見出しをドラフトし、最も明確なものを残す。
-
セクションを構築する。 リポジトリのコンポーネントディレクトリ内に個別のコンポーネントとして。コピーはpropsまたはコンテンツオブジェクトに配置し、JSXに散在させない。ページは基本的にサーバーサイドレンダリングとし、クライアントコンポーネントはインタラクションが必要な場合のみ使用する。
-
SEOメタデータ。 一意の
<title>、メタディスクリプション、正規URL、Open GraphおよびTwitterタグ、1つの<h1>を設定する。Next.js App Routerでは、metadataエクスポートを使用する。 -
パフォーマンス。
- ヒーロー/LCP画像は
fetchpriority="high"で eager に読み込む。Next.js 16+ では<Image preload>（またはloading="eager"+fetchPriority="high"）を使用；priorityはNext.js ≤ 15 の形式で、16では非推奨。決して遅延読み込みしない。 - フォールドより下の画像は遅延読み込み。
- すべての画像に明示的な
width/heightとAVIF/WebPを設定。 - フォントには
font-display: swap（またはnext/font）を使用し、必要なウェイトのみ含める。 - フォールドより上にサードパーティスクリプトを配置しない。
- ヒーロー/LCP画像は
-
フォーム（リード獲得）。適切な
typeとautocompleteを持つラベル付き入力、インライン検証、ユーザーが入力した内容を保持するエラーサマリーを実装。成功状態を表示し、二重送信を防止し、チケットで指定された実際のエンドポイントにPOSTする。 -
検証する。 各チェックを実行し記録する：
- 型チェック（
npx --no -- tsc --noEmit、ダウンロードせずに失敗する）とリポジトリのlint； - リポジトリのビルドスクリプト（例：
npm run build）； - ページをレンダリングし、h1、プライマリCTAのhref、フォームの成功状態とエラー状態をアサートするコンポーネントテスト；
- Lighthouse（モバイル）をラボチェックとして実行し、LCP、CLS、TBT、アクセシビリティスコアを記録。ただし、すでにインストールされている場合のみ（
npx --no -- lighthouse）； - 375px、768px、1440pxでのビューポートチェック（オーバーフローと、CTAがフォールドより上にあるか）。リポジトリにブラウザテストランナーがあればそれを使用する。
チェックを実行するためにツールをインストールまたは取得してはならない。実行できなかったチェックは、実行したと主張する代わりに証拠に明記する。
- 型チェック（
完了条件
- ページがビルド、型チェック、コンポーネントテストに合格する。
- ヒーローが成果を述べ、プライマリCTAが375pxと1440pxでフォールドより上にある（ビューポートテストで確認するか、未確認として明記）。
- Lighthouseまたはaxeが利用可能な場合、ラボ実行でモバイルでのLCP ≤ 2.5秒、CLS ≤ 0.1、自動アクセシビリティ違反がないことを示す。そうでない場合、証拠はこれらが測定されなかったことを示す。
- 捏造された証明がない。すべてのギャップは
[TODO]としてマークされ、レポートにリストされる。
アンチパターン
- 遅延読み込みされたヒーロー画像、またはサイズ指定されていないメディアや遅延フォントによるレイアウトシフト。
- 同等の重みを持つ複数のCTA、または有料キャンペーンページでの完全なサイトナビゲーション。
- Lorem ipsumや汎用的なフィラーコピーがビルドに残る。許可されるプレースホルダーは、レポートにリストされる明示的な
[TODO: …]ギャップのみ。 - ヒーロー内のカルーセルと自動再生動画。