ランディングページ は何をしますか？
ランディングページの仕事はただ一つ：特定の訪問者を一つのアクションに導くことです。 各セクションは、そのアクションを取る理由を構築するか、取らない理由を取り除くかのどちらかです。 最初にアクションを決めてから、デザインします。
1. 構築する前に決める
JSXに触れる前に、これらを（アプリにDESIGN.mdがあればそこに）書き留めてください：
- 対象者: 誰がこのページに来るのか、そして彼らは何を既に知っているのか。
- 主要アクション: 一つの動詞（「無料トライアルを開始」「テーブルを予約」「見積もりを取得」）。 各ページには正確に一つの主要CTAラベルがあります。それを繰り返し、変えないでください。
- 二次アクション: オプションで、より低いコミットメントのもの（「価格を見る」「デモを見る」）。
- 実際に存在する証拠: 実際の数字、顧客名、引用、評価。 決して testimonial、ロゴ、ユーザー数、価格をでっち上げないでください。所有者がそれらを提供していない場合は、セクションを省略するか、コンテンツデータ内に明確にマークされたTODOを使用し、可視コピーには使わないでください。
2. セクションの順序（デフォルト）
| # | セクション | 目的 | ブロック |
|---|---|---|---|
| 1 | ヘッダー | ブランド、3〜5つのナビリンク、主要CTA | SiteHeader |
| 2 | ヒーロー | 約束 + ファーストビューの主要CTA | Hero |
| 3 | 証拠ストリップ | ロゴ、評価、または1つの確かな数字 | LogoMarquee またはインライン統計 |
| 4 | 問題/成果 | 現状がなぜ有害か、何が変わるか | Section + SectionHeader |
| 5 | 機能 | 3〜6のメリット、それぞれが成果に紐づく | FeatureGrid または BentoGrid |
| 6 | 仕組み | プロセスが馴染みのない場合の3〜4ステップ | StepList |
| 7 | お客様の声 | 名前と役職付きの実際の引用 | Testimonials |
| 8 | 価格 | プラン、または「～から」の価格と含まれるもの | PricingTable |
| 9 | FAQ | 異論に平易に答える | Faq |
| 10 | 最終CTA | 約束の再表明 + 同じ主要CTA | CtaBand |
| 11 | フッター | 連絡先、法的情報、二次リンク | SiteFooter |
実際のコンテンツがないセクションは削除してください。短く誠実なページは、長く水増しされたページに勝ります。最低でもセクション1、2、5、10は残してください。
3. ヒーローのルール
- ページ内に
<h1>は正確に一つ、ヒーローの中に配置します。Heroは既にそのtitleをh1としてレンダリングします。他の場所に別のh1を追加しないでください。セクションのタイトルはh2です。 - 見出しは、対象者に対する成果を10語未満で述べます。サブヘッド（一文か二文、25語未満）は、どのように、誰のために、または何が他と違うのかを述べます。
- 主要CTAは、375x667および1280x800でスクロールせずに表示される必要があります。
Heroのactionsプロパティに配置し、実際の遷移先（ルート、mailto:、tel:、フォームアンカー）にリンクさせ、決してhref="#"にしないでください。 - メディア：実際の製品スクリーンショット、写真、または成果を示すイラスト。画像に明示的な
width/heightを設定し、ヒーロー画像は遅延ロードしないでください（通常、LCP要素です）。 - オプションの信頼ラインをCTAの下に：「クレジットカード不要」「1200件のレビューで4.8/5」。
4. コピーの階層
- 見出し (h1): 成果。 2. サブヘッド: 仕組みまたは対象者。 3. CTA: 動詞 + 目的語。
- セクションタイトル (h2): ラベルではなく、メリットのステートメント（「機能」ではなく「1日で帳簿を締める」）。
- 本文: 短い段落、1行あたり約80文字以下（
max-w-proseまたはmax-w-xl）。
アプリの言語で、具体的でプレーンなコピーを書いてください。Lorem ipsum、画一的な「ワークフローを革命的に変える」、「機能1」などは使わないでください。references/copy-formulas.md を参照してください。
5. レイアウトと視覚的なリズム
- 意味論的なトークン（
bg-background、bg-secondary、text-muted-foreground）を使用し、生のパレットクラスは決して使わないでください。ボーダーやシャドウをあちこちに追加する代わりに、Section tone="muted"を交互に使用してブロックを分離してください。 - セクションの形状を変えてください：グリッド、分割画像/テキスト、全幅の引用。同一のカードグリッドを積み重ねただけのページは避けてください。
- ページごとに一つの大胆な要素（ヒーロービジュアルまたはタイプ処理）。残りは落ち着かせてください。
- コンテンツグループを
<Reveal>でラップし、delay={index * 80}でずらしてください。BentoGrid、Testimonials、PricingTableは既にそれ自体で表示を制御します。 - モバイルファースト：
md未満ではシングルカラム、CTAボタンはスマートフォンで全幅（w-full sm:w-auto）、タップターゲットは最低44px。
6. コンバージョンの詳細
- 機能または価格の後、および最終の
CtaBandで主要CTAを繰り返してください。 - アンカーナビゲーション：セクションに
idを付け（<Section id="pricing">）、#pricingにリンクします。固定ヘッダーが見出しを覆わないようにscroll-mt-20を追加します。 - ページ上のフォーム：最小限の情報（メール、または名前＋電話番号）を尋ねてください。インラインバリデーションと明確な成功状態を表示します（forms-validationスキルを参照）。
- 価格：通貨と請求期間を表示し、一つのプランを強調表示し、クリック後に何が起こるか（トライアル期間、キャンセル）を明記します。
- アクセシビリティ：可視フォーカス、意味のある画像にaltテキスト、コントラスト4.5:1、ボタンはその機能を説明するものにします。
7. 完了チェックリスト
- ページ内に一つのh1、ヒーロー内に配置。セクションタイトルはh2で順序通り。
- 主要CTAがモバイルとデスクトップのファーストビューにあり、実際のターゲットを指している。
- すべての主張、数字、ロゴ、引用が本物であるか、またはセクションが削除されている。
- ヒーロー画像にwidth/heightがあり、遅延ロードされていない。他の画像は遅延ロードされている。
- ページタイトルとメタディスクリプションが設定されている（seo-metadataスキルを参照）。
- 375px、768px、1280pxの幅でスクリーンショットを確認した。
-
audit_landing_sectionsを実行し、失敗を修正した。
スクリプト
audit_landing_sections は、ページファイルとそれがインポートするローカルコンポーネントを読み取ります。引数（すべてオプション）：{ "file": "src/pages/Index.tsx" }。file がない場合、src/pages/Index.tsx、app/page.tsx、src/app/page.tsx、pages/index.tsx、src/pages/index.tsx を試します。checks（pass、warn、またはfail）、検出された sections、および placeholders を返します。これはヒューリスティックです：コードを読んで失敗を確認してから変更してください。