hero-section

ヒーローセクションのデザイン

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

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. 製品と主要な CTA を質問するか、推測します。スタイルの類型に合わせてパターンを選びます：ミニマル／コーポレート → 中央揃えまたは分割、ボールド／遊び心のあるスタイル → グラデーション背景、ラグジュアリー → ダークな表面にミニマルなタイポグラフィ。

---

1. 見出しの階層

すべてのヒーローは、上から下へ次の構成にします：

[Optional: Badge / Announcement]
[Headline: Value Proposition]
[Subheadline: Supporting Detail]
[CTA Button(s)]
[Trust Signals]
[Visual: Image, Mockup, or Illustration]

見出しのルール

• 1 文にします。最大 10 語です。
• 機能ではなく、メリットを伝えます。「より速くリリースする」＞「CI/CD パイプラインツール」。
• text-4xl sm:text-5xl lg:text-6xl のスケールを使用します。
• インパクトを出すには font-extrabold tracking-tight leading-[1.1] を使用します。

サブ見出しのルール

• 見出しを補足する 1〜2 文にします。
• text-lg sm:text-xl text-gray-600 max-w-2xl。
• 「これは何で、なぜ気にかけるべきなのか？」に答えます。

---

2. ヒーローパターン：グラデーション背景と中央揃え

最も汎用性の高いヒーローです。SaaS、ツール、プラットフォームに適しています。

<section class="relative isolate overflow-hidden bg-white">
  
  <div class="absolute inset-0 -z-10">
    <div class="absolute inset-0 bg-gradient-to-b from-indigo-50/80 via-white to-white"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/4
      w-[800px] h-[600px] rounded-full
      bg-gradient-to-br from-indigo-200/40 via-purple-200/30 to-pink-100/20
      blur-3xl"></div>
  </div>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-24 pb-16 sm:pt-32 sm:pb-24
    text-center">
    
    <a href="#" class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-4 py-1.5
      text-sm font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/10
      hover:bg-indigo-100 transition-colors mb-8">
      <span class="h-1.5 w-1.5 rounded-full bg-indigo-600 motion-safe:animate-pulse" aria-hidden="true"></span>
      Announcing our Series A
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M9 5l7 7-7 7"/>
      </svg>
    </a>

    
    <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]">
      Build products that
      <span class="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text
        text-transparent">users love</span>
    </h1>

    
    <p class="mt-6 text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
      The design-to-code platform that turns your ideas into production-ready
      interfaces in minutes, not weeks.
    </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 inline-flex items-center justify-center
        bg-indigo-600 text-white px-8 py-3.5 rounded-xl font-semibold text-lg
        hover:bg-indigo-500 shadow-lg shadow-indigo-600/25
        hover:shadow-xl hover:shadow-indigo-600/30
        hover:-translate-y-0.5 active:translate-y-0
        transition-all duration-200">
        Start building free
      </a>
      <a href="#" class="w-full sm:w-auto inline-flex items-center justify-center gap-2
        text-gray-700 px-8 py-3.5 rounded-xl font-semibold text-lg
        hover:bg-gray-100 transition-colors">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M6.3 2.84A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.27l9.344-5.891a1.5 1.5 0 000-2.538L6.3 2.841z"/>
        </svg>
        Watch demo
      </a>
    </div>

    
    <div class="mt-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-2
      text-sm text-gray-500">
      <span class="flex items-center gap-1.5">
        <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
        </svg>
        No credit card required
      </span>
      <span class="flex items-center gap-1.5">
        <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
        </svg>
        Free for individuals
      </span>
      <span class="flex items-center gap-1.5">
        <svg class="w-4 h-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
        </svg>
        Setup in 2 minutes
      </span>
    </div>

    
    <div class="mt-16 relative">
      <div class="rounded-2xl border border-gray-200/60 shadow-2xl shadow-gray-900/10
        overflow-hidden bg-white">
        <img src="/dashboard-preview.webp" alt="Product dashboard showing weekly revenue"
          width="1280" height="800" class="w-full h-auto" fetchpriority="high" />
      </div>
      
      <div class="absolute -inset-4 -z-10 bg-gradient-to-b from-indigo-100/50
        to-transparent rounded-3xl blur-2xl"></div>
    </div>
  </div>
</section>

---

3. ヒーローパターン：分割（左にテキスト、右に画像）

アプリのスクリーンショットやモックアップなど、ビジュアルが際立つ製品に最適です。

<section class="relative overflow-hidden bg-white">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-32">
    <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
      
      <div class="max-w-xl">
        <div class="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-3 py-1
          text-sm font-medium text-emerald-700 ring-1 ring-emerald-600/10 mb-6">
          New: AI assistant is here
        </div>
        <h1 class="text-4xl lg:text-5xl xl:text-6xl font-extrabold tracking-tight
          text-gray-950 leading-[1.1]">
          Your finances, finally simple
        </h1>
        <p class="mt-6 text-lg text-gray-600 leading-relaxed">
          Track spending, set budgets, and reach your goals with an app that
          actually makes sense. No jargon, no complexity.
        </p>
        <div class="mt-8 flex flex-wrap gap-4">
          <a href="#" class="bg-gray-950 text-white px-6 py-3 rounded-xl font-semibold
            hover:bg-gray-800 transition-colors">
            Download the app
          </a>
          <a href="#" class="text-gray-700 px-6 py-3 rounded-xl font-semibold
            hover:bg-gray-100 transition-colors flex items-center gap-2">
            See how it works
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
          </a>
        </div>
        
        <div class="mt-8 flex items-center gap-4">
          <div class="flex -space-x-2">
            <img src="/avatar-1.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
            <img src="/avatar-2.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
            <img src="/avatar-3.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
            <img src="/avatar-4.jpg" class="w-8 h-8 rounded-full ring-2 ring-white" alt="" />
          </div>
          <div class="text-sm text-gray-600">
            <span class="font-semibold text-gray-900">4,000+</span> happy users
          </div>
        </div>
      </div>

      
      <div class="relative lg:ml-auto">
        <div class="relative z-10">
          <img src="/app-mockup.webp" alt="App home screen with monthly budget overview"
            width="448" height="896"
            class="w-full h-auto max-w-md mx-auto rounded-3xl shadow-2xl"
            fetchpriority="high" />
        </div>
        
        <div class="absolute -inset-8 bg-gradient-to-tr from-indigo-100 via-purple-50
          to-pink-50 rounded-[2rem] -z-10 blur-sm"></div>
      </div>
    </div>
  </div>
</section>

---

4. ヒーローパターン：動画／アニメーション背景

<section class="relative h-svh min-h-[600px] max-h-[900px] flex items-center overflow-hidden">
  
  <video
    autoplay muted loop playsinline aria-hidden="true"
    poster="/hero-poster.jpg"
    class="absolute inset-0 w-full h-full object-cover"
  >
    <source src="/hero-bg.webm" type="video/webm" />
    <source src="/hero-bg.mp4" type="video/mp4" />
  </video>

  
  <div class="absolute inset-0 bg-gray-950/60"></div>

  
  <div class="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-7xl font-extrabold tracking-tight
      text-white leading-[1.1]">
      Experience the future
    </h1>
    <p class="mt-6 text-lg sm:text-xl text-white/80 max-w-2xl mx-auto">
      Immersive technology that transforms how you create.
    </p>
    <div class="mt-10">
      <a href="#" class="inline-flex items-center bg-white text-gray-950 px-8 py-4
        rounded-xl font-semibold text-lg hover:bg-gray-100 transition-colors">
        Get early access
      </a>
    </div>
  </div>

  
  <button type="button" class="absolute bottom-6 right-6 z-10 rounded-full bg-black/50
    px-4 py-2 text-sm text-white focus-visible:outline focus-visible:outline-2
    focus-visible:outline-white">Pause background video</button>
  

  
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 motion-safe:animate-bounce" aria-hidden="true">
    <svg class="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
    </svg>
  </div>
</section>

動画ヒーローのルール

• 動画は 5〜15 秒の長さにし、ループ再生します。
• ファイルサイズは 5MB 未満にします。互換性のため WebM と MP4 を使用します。
• 必ず poster 画像を指定します。LCP の候補となるため、fetchpriority="high" を指定してプリロードします。
• iOS では playsinline を使用します。
• 一時停止ボタンを用意し、prefers-reduced-motion: reduce の場合は自動再生せず、ポスター画像のみを表示します（matchMedia('(prefers-reduced-motion: reduce)').matches の場合は video.pause() を実行します）。
• オーバーレイに対して十分なコントラストを確保します。

---

5. ヒーローパターン：ミニマルなタイポグラフィ

高級ブランド、エージェンシー、ポートフォリオ向けです。

<section class="min-h-svh flex items-center bg-gray-950">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-32">
    <h1 class="text-5xl sm:text-7xl lg:text-9xl font-extrabold text-white
      tracking-tighter leading-[0.9]">
      We design<br />
      <span class="text-gray-500">digital</span><br />
      experiences
    </h1>
    <div class="mt-12 flex items-center gap-6">
      <a href="#" class="text-white border border-white/20 px-6 py-3 rounded-full
        hover:bg-white hover:text-gray-950 transition-all font-medium">
        View our work
      </a>
      <a href="#" class="text-gray-400 hover:text-white transition-colors font-medium">
        Contact us
      </a>
    </div>
  </div>
</section>

---

6. 背景の手法

メッシュグラデーション

.mesh-gradient {
  background-color: oklch(97% 0.01 265);
  background-image:
    radial-gradient(at 20% 20%, oklch(90% 0.12 280 / 0.4) 0px, transparent 50%),
    radial-gradient(at 80% 10%, oklch(90% 0.10 320 / 0.3) 0px, transparent 50%),
    radial-gradient(at 50% 80%, oklch(90% 0.12 200 / 0.3) 0px, transparent 50%);
}

アニメーション付きグラデーション

.animated-gradient {
  /* Build the stops from brand tokens, not arbitrary colors */
  background: linear-gradient(-45deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary-light));
  background-size: 400% 400%;
}
@media (prefers-reduced-motion: no-preference) {
  .animated-gradient { animation: gradient-shift 15s ease infinite; }
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

ドットグリッドパターン

.dot-grid {
  background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
  background-size: 24px 24px;
}

ノイズテクスチャ

.noise {
  position: relative;
}
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

---

7. レスポンシブなヒーローの方針

ブレークポイントの調整

Mobile (< 640px):
  - h1: text-3xl to text-4xl
  - Stack CTAs vertically (flex-col)
  - Hide decorative elements
  - Full-width buttons
  - Product image below text

Tablet (640–1024px):
  - h1: text-4xl to text-5xl
  - Horizontal CTAs (flex-row)
  - Product image scales down

Desktop (1024px+):
  - h1: text-5xl to text-6xl
  - Split layout becomes side-by-side
  - Full decorative elements visible

画像の扱い

<picture>
  <source media="(min-width: 1024px)" srcset="/hero-desktop.webp" />
  <source media="(min-width: 640px)" srcset="/hero-tablet.webp" />
  <img src="/hero-mobile.webp" alt="Product preview" width="640" height="480"
    class="w-full h-auto rounded-2xl" fetchpriority="high" />
</picture>

---

8. LCP のパフォーマンス

ヒーローはほとんどの場合、Largest Contentful Paint の要素です。最適化しましょう。

ルール

1. ヒーローの <img> に fetchpriority="high" を指定し、width／height を設定します（CLS を防止します）。
2. ヒーロー画像を遅延読み込みしないでください（loading="lazy" は LCP を遅らせます）。
3. 後から検出される画像のみをプリロードします。対象は CSS 背景、JS で描画されるヒーロー、動画ポスター、<picture> のアートディレクションです。HTML 内にすでにある <img> はプリロードする必要がありません。
4. ヒーローセクションのクリティカル CSS をインライン化します。見出しを opacity: 0 からアニメーション表示しないでください。LCP が遅れます。
5. フォールバックを用意して WebP／AVIF 形式を使用します。
6. 適切なサイズを使用します。幅 1200px のコンテナに 4000px の画像を配信せず、srcset／sizes を使用します。

<head>
  <link rel="preload" href="/hero.webp" as="image" fetchpriority="high"
    imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
    imagesizes="100vw" />
</head>

---

検証：レンダリングと確認

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

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 が表示されていること、LCP 画像が遅延読み込みされていないことを確認します（サーバーが稼働している場合は、Lighthouse の「LCP 要素」監査を実施します）。
5. 問題を修正し、完了を報告する前にもう一度スクリーンショットを撮影します。

---

ヒーローセクションのチェックリスト

• 見出しが 10 語未満で、メリットを明示している
• サブ見出しが 1～2 文で価値を詳しく説明している
• 主要な CTA が大きく、コントラストが高く、行動を促す表現になっている
• 副次的な CTA が視覚的に控えめになっている
• 信頼性を示す要素が CTA の近くにある
• ヒーロー画像に fetchpriority="high" と width／height が設定され、loading="lazy" が指定されていない
• 装飾用 SVG に aria-hidden が設定されている。画像／動画上のテキストは 4.5:1 以上のコントラスト比を満たしている
• 390px と 1440px でレンダリングし、スクリーンショットを撮影している（「検証」を参照）
• レスポンシブ対応：テキストのサイズが変化し、レイアウトが適応し、画像が切り替わる
• 背景がコンテンツと競合せず、視覚的な魅力を加えている
• アニメーションが prefers-reduced-motion に対応している。背景動画には一時停止コントロールがある
• ファーストビューが 2.5 秒以内に読み込まれる（LCP の目標）