landing-page-design

ランディングページのデザイン

始める前に：デザインコンテキストを読み込む

1. design-context スキルによって作成された .agents/design-context.md を読みます。存在しない場合は、tailwind.config.* または :root CSS 変数にトークンがないか確認します。何も存在しない場合は、デフォルト値（Primary #2563EB、Secondary #7C3AED、Accent #F59E0B、Tailwind のグレーニュートラル、見出しと本文には Inter、スタイルはミニマル）を使用し、デフォルト値を使用したことをユーザーに伝えます。design-context の実行を提案してください。
2. トークンを一度だけ CSS 変数に対応付け、以降は変数のみを使います。--color-primary、--color-primary-light、--color-primary-dark、--color-secondary、--color-accent、--color-neutral-50～--color-neutral-900、--color-success／-warning／-error、--font-heading、--font-body、--font-mono、--radius、および 4px を基準とした間隔スケールを使用してください。
3. Tailwind： 同じ変数を primary、primary-light、primary-dark、secondary、accent、neutral-*、font-heading、font-body として公開します（v3 では theme.extend、v4 では @theme）。以下の例にある indigo-*／gray-* クラスは、これらのトークンに置き換えるためのプレースホルダーです。
4. Figma： ユーザーから Figma の URL が提示された場合は、Figma MCP（get_design_context、get_screenshot）を使って取得し、そのデザインに合わせます。そのデザインでは、コンテキストファイルよりも Figma の内容を優先します。
5. 次の点を尋ねるか、推測します。製品は何か、対象ユーザーは誰か、そして求めるアクションは一つだけなら何か。コピーにはコンテキストのトーンを使い、ヒーローパターンとセクションの背景にはスタイルのアーキタイプを参考にしてください。

---

1. セクションの構成

コンバージョン率の高いランディングページは、すべてこの流れに従います。セクションの順番は入れ替えたり、省略したりできますが、これは実績のある構成です。

1. Hero          — Value prop + primary CTA (above the fold)
2. Social Proof  — Logos, stats, or trust badges
3. Features      — What it does (benefits, not features)
4. How It Works  — 3-step simplicity
5. Testimonials  — Real humans saying real things
6. Pricing       — Clear tiers with obvious recommendation
7. FAQ           — Overcome objections
8. Final CTA     — Repeat the primary action
9. Footer        — Links, legal, secondary nav

セクション間の余白

• 主要なセクションには py-20 md:py-28 lg:py-32 を使用します（余白スケールの全容はセクション 11 を参照）。
• 背景色は白と控えめなグレー（bg-gray-50）を交互に使用します。
• すべてのコンテンツに max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 コンテナを使用します。

---

2. ヒーローパターン

ヒーローはページの最初のセクションです。これがデフォルトです。分割、動画、ミニマルなタイポグラフィのバリエーション、背景の手法、LCP の詳細については、hero-section スキルを使用してください。

パターン A：中央揃えのヒーロー（SaaS に最適）

<section class="relative overflow-hidden bg-white pt-24 pb-20 sm:pt-32 sm:pb-28">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
    
    <div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-3 py-1 text-sm
      font-medium text-indigo-700 ring-1 ring-indigo-600/10 mb-8">
      <span class="h-1.5 w-1.5 rounded-full bg-indigo-600"></span>
      Now in public beta
    </div>

    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-gray-950
      max-w-4xl mx-auto leading-[1.1]">
      The faster way to build
      <span class="text-indigo-600">beautiful products</span>
    </h1>

    <p class="mt-6 text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
      Ship production-ready interfaces in minutes. Stop fighting CSS and start
      delighting your users.
    </p>

    <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
      <a href="#" class="w-full sm:w-auto bg-indigo-600 text-white px-8 py-3.5 rounded-xl
        font-semibold text-lg hover:bg-indigo-500 transition-colors shadow-lg
        shadow-indigo-600/25">
        Start free trial
      </a>
      <a href="#" class="w-full sm:w-auto text-gray-700 px-8 py-3.5 rounded-xl font-semibold
        text-lg hover:bg-gray-100 transition-colors flex items-center justify-center gap-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"></svg>
        Watch demo
      </a>
    </div>

    
    <p class="mt-8 text-sm text-gray-500">No credit card required. Free for up to 3 projects.</p>
  </div>
</section>

その他のヒーローパターン

分割（テキスト＋製品のビジュアル）、動画背景、アニメーション付きのヒーローについては、hero-section を参照してください。どのパターンでも、ヒーロー画像は LCP 要素です。loading="lazy" は決して使用せず、必ず fetchpriority="high" と width／height を指定してください。

---

3. ソーシャルプルーフセクション

ロゴバー

<section class="bg-gray-50 py-12 border-y border-gray-100">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <p class="text-center text-sm font-medium text-gray-500 mb-8">
      Trusted by 2,000+ teams worldwide
    </p>
    <div class="flex flex-wrap items-center justify-center gap-x-12 gap-y-6
      grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all">
      
      <img src="/logos/stripe.svg" alt="Stripe" width="112" height="28" class="h-7 w-auto" loading="lazy" />
      <img src="/logos/vercel.svg" alt="Vercel" width="112" height="28" class="h-7 w-auto" loading="lazy" />
      
    </div>
  </div>
</section>

統計カウンター

<div class="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center">
  <div>
    <div class="text-4xl font-extrabold text-gray-950">10K+</div>
    <div class="mt-1 text-sm text-gray-500">Active users</div>
  </div>
  <div>
    <div class="text-4xl font-extrabold text-gray-950">99.9%</div>
    <div class="mt-1 text-sm text-gray-500">Uptime SLA</div>
  </div>
  
</div>

---

4. 機能セクション

Bento グリッド（モダンで視覚的）

<section class="py-20 bg-white">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold text-gray-950">Everything you need</h2>
      <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
        A complete toolkit for modern teams.
      </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      
      <div class="md:col-span-2 bg-gradient-to-br from-indigo-600 to-purple-700
        rounded-2xl p-8 text-white min-h-[300px] flex flex-col justify-end">
        <h3 class="text-2xl font-bold">AI-powered insights</h3>
        <p class="mt-2 text-white/90">Automatically surface what matters most.</p>
      </div>
      
      <div class="bg-gray-50 rounded-2xl p-8 min-h-[300px] flex flex-col justify-end">
        <div class="w-10 h-10 rounded-lg bg-indigo-100 text-indigo-600 flex items-center
          justify-center mb-4" aria-hidden="true"></div>
        <h3 class="text-lg font-bold text-gray-950">Real-time sync</h3>
        <p class="mt-2 text-gray-600">Changes appear instantly across all devices.</p>
      </div>
    </div>
  </div>
</section>

交互に並べる行（定番で詳細）

• 奇数行：左にテキスト、右に画像。
• 偶数行：左に画像、右にテキスト。
• 各行で、見出し、説明、ビジュアルを使って一つの機能を紹介します。

アイコングリッド（シンプルで見やすい）

• アイコン＋見出し＋短い説明を、3 列または 4 列で配置します。
• アイコンのスタイル（アウトラインまたは塗りつぶし）は統一し、混在させないでください。

---

5. CTA のデザイン

プライマリー CTA のルール

• サイズ：高さは最低 48px、幅は 200px 以上。ページ内の他のどのボタンよりも大きくします。
• 色：ページ内で最もコントラストの高い要素にします。ブランドのプライマリーカラーを使用します。
• コピー：行動を促す動詞を使います。「無料トライアルを始める」は「送信」より、「始める」は「登録する」より効果的です。
• 緊急性：任意ですが、効果的です。「無料で始めましょう。クレジットカードは不要です。」
• 繰り返し：プライマリー CTA は少なくとも 3 回表示します。ヒーロー、中盤、最下部に配置してください。

モバイル向けスティッキー CTA

<div class="fixed bottom-0 inset-x-0 bg-white/90 backdrop-blur-lg border-t
  border-gray-200 px-4 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:hidden z-50">
  <a href="#" class="block w-full bg-indigo-600 text-white text-center py-3.5
    rounded-xl font-semibold text-lg">
    Start free trial
  </a>
</div>

セカンダリー CTA のパターン

• プライマリー CTA の横にゴーストボタン（アウトライン）を配置します。
• 矢印付きのテキストリンク：Learn more ->。
• 同じ強さの CTA を横に二つ並べることは避けてください。
• 遷移する CTA には <a> を、モーダルを開いたり送信したりする CTA には <button> を使用します。

---

6. 仕組み

3 ステップのパターン

<section class="py-20 bg-gray-50">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-bold text-center text-gray-950 mb-16">
      Get started in minutes
    </h2>
    <div class="grid md:grid-cols-3 gap-12">
      <div class="text-center">
        <div class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold
          text-lg flex items-center justify-center mx-auto">1</div>
        <h3 class="mt-4 text-lg font-semibold text-gray-950">Connect your data</h3>
        <p class="mt-2 text-gray-600">Import from 50+ sources with one click.</p>
      </div>
      
    </div>
  </div>
</section>

ステップは 3 つに抑えてください。手順がそれ以上ある場合は、簡略化するか、まとめてください。

---

7. お客様の声

カードグリッド

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
    <div class="flex gap-1 text-amber-400 mb-4" role="img" aria-label="Rated 5 out of 5">
      
    </div>
    <blockquote class="text-gray-700 leading-relaxed">
      "This completely changed how our team works. We shipped 3x faster in the
      first month."
    </blockquote>
    <div class="mt-4 flex items-center gap-3">
      <img src="/avatars/sarah.jpg" alt="" width="40" height="40" loading="lazy" class="w-10 h-10 rounded-full" />
      <div>
        <div class="font-semibold text-gray-950 text-sm">Sarah Chen</div>
        <div class="text-gray-500 text-sm">CTO, Acme Corp</div>
      </div>
    </div>
  </div>
</div>

ルール

• 実際の写真、実名、実在企業を使用します。
• 信頼性を示すため、役職／肩書きを含めます。
• 星評価で視覚的な信頼感を高めます。
• 「3倍高速」「週あたり20時間削減」など、具体的な成果を強調します。

---

8. 料金セクション

3段階のパターン

• 無料／ベーシック — 基準となる価格を示し、機能を制限します。
• プロ（おすすめ） — 枠線、バッジ、またはシャドウで強調します。最も多くの機能を利用できます。
• エンタープライズ — 「営業にお問い合わせください」と表示し、すべての機能を無制限で提供します。

デザインルール

• おすすめのプランは ring-2 ring-indigo-600 と lg:scale-105 で強調します（カードが縦に並んだときにオーバーフローするため、モバイルでは拡大しません）。
• 「最も人気」バッジを使用します。
• 年払い／月払いの切り替えには、割引の案内を添えます。スタイルを設定した <div> ではなく、実際の <button role="switch" aria-checked> またはラジオグループを使用します。
• 機能一覧では、利用可能な項目にチェックマーク、対象外の項目にダッシュまたは X を付けます。
• 価格は大きな数字で、期間は小さく表示します（例：$29／月）。

---

9. 信頼性を示す要素

以下の要素は1つのセクションだけでなく、ページ全体に配置します。

• セキュリティバッジ：SSL、SOC 2、GDPR
• 返金保証：「30日以内なら理由を問わず全額返金」
• サポート：「24時間年中無休のサポート」または「平均応答時間：2時間」
• ソーシャルプルーフ：CTA ボタンの近くに「10,000以上のチームに選ばれています」
• 報道機関のロゴ：「TechCrunch、Forbes などで紹介」

---

10. パフォーマンスの優先事項

ファーストビュー（LCP の最適化）

• ヒーロー画像／動画のポスターが LCP 要素になる可能性が高いため、fetchpriority="high" と明示的な width／height を設定し、loading="lazy" は使用しません。
• 画像の検出が遅れる場合（CSS の背景画像、JS によるレンダリング、<picture>）に限り、プリロードします。
• ヒーローセクションのクリティカル CSS をインライン化します。見出しを opacity: 0 からフェードインさせないでください。LCP が遅れます。
• 目標値（Core Web Vitals、第75パーセンタイル）：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1。

<link rel="preload" href="/hero-image.webp" as="image" fetchpriority="high" />

ファーストビューより下

• すべての画像を遅延読み込みします：loading="lazy"。
• レスポンシブ画像には srcset を使用します。
• 重要でない JS の実行を遅らせます。
• ページ下部のセクションには contain-intrinsic-size: auto 800px を指定した content-visibility: auto を使用します（サイズのヒントがないとスクロールバーが跳ねます）。
• レイアウトシフトを防ぐため、すべての画像に width／height（または aspect-ratio）を指定します。

<img
  src="/feature.webp"
  srcset="/feature-400.webp 400w, /feature-800.webp 800w, /feature-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  width="1200" height="800"
  loading="lazy"
  alt="Feature description"
  class="rounded-2xl"
/>

---

11. コンバージョンを重視した余白と流れ

視線の流れに関するルール

1. テキストの多いページでは Fパターン を使用します（視線は左上から右へ進み、次に左下へ移動します）。
2. シンプルなページでは Zパターン を使用します（視線がページ上をジグザグに移動します）。
3. 各セクションで1つの疑問に答え、次のセクションへ導きます。
4. 余白は機能の一つです。窮屈なページは信頼感を損ないます。

セクション間の余白

• 主要なセクション間：py-20 md:py-28 lg:py-32
• サブセクション間：py-12 lg:py-16
• 見出しとコンテンツの間：mb-12 lg:mb-16
• コンテンツ項目間：gap-6 lg:gap-8

---

確認：レンダリングしてチェックする

自分で確認していないコードを引き渡してはいけません。生成後、次の手順を実行します。

1. モバイルとデスクトップの幅でスクリーンショットを撮影します。例：npx playwright screenshot --full-page --viewport-size=390,844 file://$PWD/index.html mobile.png を実行し、続けて --viewport-size=1440,900 を指定します（または開発サーバーの URL を指定します）。
2. 2枚の画像を開いて確認します。横スクロールや、テキストのクリッピング／重なりがないこと、階層がひと目で分かること、ブランドトークンが適用されていること、画像が適切なアスペクト比で読み込まれることを確認します。
3. すべてのインタラクティブ要素に、論理的な順序で目に見えるフォーカスリングが表示されることを確認するため、Tab キーで一巡します。
4. 390px のスクリーンショットで、スクロールせずに見出しと主要な CTA が表示され、固定 CTA がコンテンツを覆っていないことを確認します。サーバーが稼働している場合は Lighthouse（npx lighthouse <url> --only-categories=performance,accessibility）を実行します。
5. 見つかった問題を修正し、完了を報告する前に再度スクリーンショットを撮影します。

---

ランディングページのチェックリスト

• 明確な CTA を 1 つに絞る（3 回以上繰り返す）
• ヒーロー画像（LCP 対象）に fetchpriority="high" を設定し、幅と高さを指定する。遅延読み込みはしない
• 最初のスクロール範囲内にソーシャルプルーフを配置する
• コピーでは機能よりもメリットを伝える
• モバイル向けに最適化する（固定 CTA、縦積みレイアウト）
• Core Web Vitals：LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1
• アニメーションは prefers-reduced-motion を尊重する。テキストのコントラスト比は 4.5:1 以上にする
• 390px と 1440px でレンダリングし、スクリーンショットを撮る（「Verify」を参照）
• ナビゲーションの競合を避ける（ランディングページではヘッダーを最小限にする）