awwwards-sections

Awwwards級のランディングページセクション

このスキルの対象は、ヒーローセクションより下のすべてです。ヒーローセクション（その場合は awwwards-hero を使用）や、アニメーション／マイクロインタラクション（その場合は awwwards-motion を使用）は対象外です。ユーザーがランディングページ全体、追加セクション、機能ブロック、料金、推薦文、フッター、またはスクロールしないと見えないコンテンツを求めた場合に適用されます。

組み合わせのルール： ランディングページ全体を作る場合は、ヒーローに awwwards-hero を適用してから、その下の各セクションにこのスキルを適用してください。モーションが求められている場合は、両方に awwwards-motion を重ねて適用してください。

---

パイプライン

┌──────────────────────────────────────────────────────────────────────────┐
│                                                                          │
│   BRIEF IN ──→ Phase 1: Page Read ──→ Phase 2: Section Sequence         │
│                  (extract page goals,    (pick sections, order them,     │
│                   audience, conversion    assign architectures)          │
│                   intent)                                                │
│                                                                          │
│                              ──→ Phase 3: Build Section by Section       │
│                                   (typography, layout, content,          │
│                                    transitions between sections)         │
│                                                                          │
│                              ──→ Phase 4: Page Composition Diff          │
│                                   (rhythm, variety, conversion flow,     │
│                                    anti-slop audit)                      │
│                                                                          │
│   Each phase has a ✓ Quality Gate. Failing a gate blocks the next.       │
│                                                                          │
└──────────────────────────────────────────────────────────────────────────┘

---

フェーズ 1：ページの把握

セクションを選ぶ前に、ページ全体を把握してください。ランディングページは、関連のないブロックを積み重ねたものではなく、訪問者を説得するための一連の流れです。

→ 次のページのシグナルを抽出する

シグナル	確認する内容
コンバージョン目標	このページで訪問者にしてほしいことは何ですか？（登録、通話の予約、購入、ダウンロード、ポートフォリオの閲覧）
訪問者の知識レベル	仕様を必要とする技術系の購入者ですか？感情に訴えかける必要がある消費者ですか？実績を知りたい投資家ですか？
懸念事項の順序	コンバージョンを妨げるものは何ですか？（信頼性、価格、複雑さ、「本当に信頼できるのか？」「自分にも使えるのか？」）
コンテンツの密度	製品／サービスの機能は 3 つですか、それとも 30 個ですか？シンプルな価値提案ですか、それとも複雑なプラットフォームですか？
利用できるビジュアル素材	製品のスクリーンショット、事例画像、チーム写真、クライアントのロゴ、動画はありますか？それともテキストのみですか？
ヒーローからの引き継ぎ	ヒーローで何を確立しましたか？（雰囲気、配色、タイポグラフィ、フォーカル要素）- セクションではこれを引き継ぎ、最初からやり直してはいけません

→ セクションを選ぶ前にページの把握結果を出力する

「ページの把握：技術系プロジェクトマネージャー向けの SaaS ランディングページ。コンバージョン目標：無料トライアルの開始。懸念事項の順序：（1）『具体的に何をするのか？』→ 機能の紹介が必要、（2）『ほかに誰が使っているのか？』→ ソーシャルプルーフが必要、（3）『料金はいくらか？』→ 料金の提示が必要、（4）『このチームは信頼できるのか？』→ 簡潔な会社紹介が必要。ヒーローで確立した要素：ダークモード、Geist タイポグラフィ、落ち着いたインディゴのアクセント、映画のような中央の建築表現。各セクションでは、この配色とタイポグラフィの体系を引き継ぐ必要があります。」

✓ 品質ゲート：ページの把握

フェーズ 2 に進む前に、次の点を確認してください。

• コンバージョン目標を把握している
• 訪問者の主な懸念事項を、上位 3 つまで順番に特定している
• ヒーローですでに確立された要素（配色、タイポグラフィ、雰囲気）を理解している
• ファーストビューより下でデザイン言語をリセットしない

---

フェーズ 2：セクションの順序

セクションを選び、順序を決めてください。個々のセクションの品質より、順序のほうが重要です。ページは物語であり、パーツの寄せ集めではありません。

→ 説得の流れのフレームワーク

ランディングページは、コンバージョン心理に基づく順序に沿って構成します。すべてのページにすべてのセクションが必要なわけではありませんが、順序は必ず守ってください。

HERO (handled by awwwards-hero)
  ↓
1. WHAT - Feature/Value showcase (answer "what does this do?")
  ↓
2. PROOF - Social proof, logos, testimonials (answer "who else trusts this?")
  ↓
3. HOW - Process/How-it-works (answer "how does it actually work?")
  ↓
4. RESULTS - Case studies, stats, metrics (answer "what results does it get?")
  ↓
5. PRICING - Tiers, plans, comparison (answer "what does it cost?")
  ↓
6. OBJECTION KILLER - FAQ, comparison vs alternatives (answer remaining doubts)
  ↓
7. FINAL CTA - Conversion banner (last push before they leave)
  ↓
8. FOOTER - Navigation, legal, social links

→ セクション選択のルール

ページの種類	最低限必要なセクション	推奨
SaaS ランディングページ	機能 + 実績 + 料金 + CTA + フッター	+ 仕組み + 統計
エージェンシー／スタジオ	機能（ポートフォリオ）+ 実績 + プロセス + CTA + フッター	+ 導入事例 + 料金
個人ポートフォリオ	作品紹介 + 自己紹介 + CTA + フッター	+ 推薦文 + プロセス
製品ローンチ	機能 + 実績 + CTA + フッター	+ 統計 + 料金
イベント／カンファレンス	登壇者 + スケジュール + CTA + フッター	+ 実績 + FAQ

→ ビジュアルのリズムに関するルール

各セクションが同じように見える「単調さ」を防ぐためのルールです。

ルール	理由
レイアウトの方向を交互に変える	セクションAが「左にコンテンツ／右にビジュアル」なら、セクションBで同じ配置を繰り返してはいけません。左右を入れ替える、中央に配置する、または全幅を使います
2～3セクションごとに背景のトーンを変える	暗色 → 少し明るい暗色 → 暗色。または明色 → ごく控えめな色合い → 明色。同じ背景のセクションが5つ以上続かないようにします
ページごとに「ビジュアルの変化」を1つ設ける	全幅画像、大きな統計数値を1つだけ配置する、または横スクロールの帯などで、グリッドのパターンに変化をつけます
タイポグラフィのサイズに変化をつける	特徴を紹介する見出しにはtext-4xlを使う場合があります。次のセクションの見出しは、異なるウェイトでtext-2xlにします。その後、CTAバナーではtext-5xlに戻します。サイズが単調だと、ページ全体も単調になります
グリッドベースのセクションは最大2つまで連続させる	特徴の紹介に3列グリッドを使った場合、次のセクションでは同じ3列グリッドを使ってはいけません。非対称の分割、全幅、または中央配置の1列を使います

✓ 品質チェック：構成

フェーズ3に進む前に、以下を確認します。

• セクションが説得の流れに沿った順序になっている
• 隣接するセクションで同じレイアウトパターンを使っていない
• 背景のトーンに適切な変化がある
• ページ内にビジュアルの変化が少なくとも1つある
• セクション数がコンテンツの密度に合っている（シンプルな製品に12セクションも設けない）

---

フェーズ3：構築 - セクションのアーキテクチャ

以下の各セクションタイプには、名前付きのアーキテクチャがあります。各セクションにアーキテクチャを1つ選びます。組み合わせてはいけません。

---

セクションタイプ：特徴／価値の紹介

製品やサービスが何をするのかを紹介します。ヒーローの直下に置く最初のセクションです。訪問者の最大の疑問にすぐ答える必要があります。

---

特徴のアーキテクチャA：ベントーグリッド

最適な対象：重要度が異なる4～6個の特徴を持つ製品

主要な特徴に2倍のスペースを割り当てる非対称グリッドです。均一なグリッドではありません。1つのセルが目立ち、ほかのセルがそれを補います。

[section container: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [section eyebrow: small mono label, muted]
  [section heading: text-4xl lg:text-5xl, max-w-3xl, mb-16]
  [bento grid: grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6]
    [primary cell: col-span-2, row-span-2, rounded-2xl, p-8-12, bg-subtle]
      [feature visual: product screenshot or illustration, 60% of cell]
      [feature text: heading + 1-2 line description below]
    [secondary cell: rounded-2xl, p-6-8, bg-subtle]
      [icon or small visual]
      [heading + description]
    [secondary cell: ...]
    [accent cell: different bg tone or bordered, same structure]

/* BLUEPRINT: Bento grid
   WHY: auto-rows with minmax prevents cells from collapsing.
   The primary cell uses col-span-2 to dominate without explicit px widths.
   gap-4 is tight enough to feel connected, loose enough to breathe. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1rem;
}
.bento-primary {
  grid-column: span 2;
  grid-row: span 2;
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-primary {
    grid-column: span 1;
    grid-row: span 1;
  }
}

⚠ デザインの逸脱に関する警告： すべてのセルが同じサイズで、同じパディングを使い、同じアイコン・見出し・テキストのパターンになっていると、ベントーグリッドはうまく機能しません。1つのセルを必ず目立たせます。セルの高さに変化をつけます。異なる種類のコンテンツを使います（1つにはビジュアル、別のものには統計数値、3つ目にはお客様の声を配置します）。

---

特徴のアーキテクチャB：積み重ね型の紹介

最適な対象：それぞれに専用のスペースを割く価値のある主要な特徴が2～3個ある製品

各特徴に、交互にレイアウト方向を変えた全幅の行を割り当てます。左・右、右・左、左・右の順にします。各行は、一方に大きなビジュアル、もう一方にテキストを配置した小さな分割レイアウトです。

[section container: py-24 lg:py-32, space-y-24 lg:space-y-32]
  [feature row 1: grid grid-cols-1 lg:grid-cols-2 gap-12 items-center]
    [text side: heading + description + optional bullet points]
    [visual side: product screenshot, rounded-2xl, shadow-xl]
  [feature row 2: grid grid-cols-1 lg:grid-cols-2 gap-12 items-center]
    [visual side: product screenshot] ← ORDER REVERSED
    [text side: heading + description]
  [feature row 3: repeat pattern]

⚠ デザインの逸脱に関する警告： 配置の交互切り替えは、CSS上の順序だけでなく、見た目にも反映する必要があります。デスクトップでは、画像を反対側に実際に配置します。DOMの順序とは独立してビジュアル上の配置を制御するために、lg:order-1／lg:order-2を使います（アクセシビリティのため、DOMの順序はテキストを先にします）。

---

特徴のアーキテクチャC：単一のスポットライト

最適な対象：製品を象徴する1つの主要機能、または製品デモ／動画のセクション

製品のスクリーンショット、動画の埋め込み、インタラクティブなデモなど、圧倒的なビジュアルを1つだけ中央に配置し、その上にテキストを最小限に添えます。ビジュアルそのものがセクションの主役です。

[section container: py-24 lg:py-32, max-w-6xl mx-auto px-6, text-center]
  [eyebrow: mono label]
  [heading: text-3xl lg:text-4xl, max-w-2xl mx-auto, mb-4]
  [subtext: text-lg, muted, max-w-xl mx-auto, mb-12]
  [visual: rounded-2xl overflow-hidden, shadow-2xl, border border-white/10]
    [product screenshot or video, full-width within container]
  [optional floating detail cards: absolute positioned, showing UI details]

---

セクションタイプ：ソーシャルプルーフ

「ほかに誰が信頼しているのか？」という疑問に答えます。ヒーローの次に、コンバージョンに最も大きな影響を与える要素です。

---

プルーフのアーキテクチャA：ロゴの帯

最適な対象：知名度のあるクライアントのロゴを掲載できるB2B SaaS

クライアントのロゴを、少し異なる背景のトーンに、グレースケールに落として1列の横並びで配置します。大きな文字で「信頼されています」といった見出しは付けません。ロゴ自体が物語ります。

[section: py-12 lg:py-16, border-y border-white/5 (dark) or border-black/5 (light)]
  [optional small label: "Trusted by teams at" - text-xs, muted, uppercase, tracking-wide, mb-6, text-center]
  [logo row: flex items-center justify-center gap-12 lg:gap-16, flex-wrap]
    [each logo: h-6 lg:h-8, opacity-40 hover:opacity-80, transition, grayscale]

/* BLUEPRINT: Logo strip
   WHY: Grayscale + low opacity prevents logos from competing with 
   the page's own brand colors. Hover reveals the real logo color, 
   adding a subtle interactive layer. The strip sits in a band 
   (border-y) to visually separate it without heavy background changes. */
.logo-strip img {
  height: 2rem;
  filter: grayscale(100%);
  opacity: 0.4;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo-strip img:hover {
  filter: grayscale(0%);
  opacity: 0.8;
}

---

Proof Architecture B: お客様の声のカスケード

最適な用途：サービス業、代理店、消費者向け製品 — 人の声が訴求力になる場合

2〜3枚の大きな推薦コメントカードを、非対称のレイアウトで配置します。均一なグリッドにはしません。1枚は大きく目立たせます。実名、実際の肩書き、実際の写真（または高品質なアバター）を含めます。

[section container: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [section heading: left-aligned or centered, mb-16]
  [testimonial grid: grid grid-cols-1 lg:grid-cols-3 gap-6]
    [featured card: lg:col-span-2, bg-subtle, rounded-2xl, p-8-10]
      [large quote: text-xl lg:text-2xl, font-medium, leading-relaxed, mb-6]
      [author row: flex items-center gap-4]
        [avatar: w-12 h-12 rounded-full]
        [name + title: text-sm]
    [secondary card: bg-subtle, rounded-2xl, p-8]
      [quote: text-base, mb-6]
      [author row]
    [secondary card: bg-subtle, rounded-2xl, p-8]
      [quote: text-base, mb-6]
      [author row]

⚠ デザインの逸脱に注意： 余白、文字サイズ、中央揃えがすべて同じで、見た目も同一の推薦コメントカードは、実績セクションで最もよく見られる AI 生成の粗雑なパターンです。カードを1枚、視覚的に際立たせる必要があります。サイズに変化をつけましょう。力強い一文を取り上げ、グリッドの上に大きな引用として配置することも検討してください。

---

Proof Architecture C: 数値バー

最適な用途：ユーザー数、処理した売上、稼働時間、速度など、印象的な数値を持つ製品

横一列に3〜4個の大きな数値を配置し、それぞれの下に短いラベルを添えます。数値は、ヒーロー見出し以外でページ内最大の文字にします。数値の周囲にはゆとりを持たせましょう。

[section: py-16 lg:py-24, border-y border-white/5]
  [metrics row: grid grid-cols-2 lg:grid-cols-4 gap-8, max-w-5xl mx-auto, text-center]
    [metric]
      [number: text-4xl lg:text-5xl, font-semibold, tracking-tight]
      [label: text-sm, muted, mt-2]
    [metric]
      [number] [label]
    ...

/* BLUEPRINT: Metric counter
   WHY: Tabular figures prevent layout shift during count-up animations.
   The numbers should feel monumental - they are social proof encoded 
   as typography. */
.metric-number {
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

---

セクションの種類：プロセス／仕組み

「実際にはどのような仕組みなのか」という疑問に答え、複雑さの印象を和らげます。

---

Process Architecture A：番号付きステップ

最適な用途：3〜5段階のプロセス、オンボーディングのフロー、サービス提供のタイムライン

大きなステップ番号を付けて縦に並べ、控えめな縦線でつなぎます。各ステップには見出しと1〜2行の説明を付けます。必要に応じて、各ステップに合わせて切り替わるビジュアルを横に配置します。

[section container: py-24 lg:py-32, max-w-5xl mx-auto px-6]
  [section heading + subtext, centered, mb-16]
  [steps: relative, space-y-16]
    [vertical line: absolute left-6 top-0 bottom-0 w-px bg-white/10 (dark)]
    [step: flex gap-8 items-start]
      [number circle: w-12 h-12 rounded-full border-2, flex items-center justify-center, relative z-10, bg-background]
        [number: text-lg font-semibold]
      [content]
        [heading: text-xl font-medium, mb-2]
        [description: text-base muted, max-w-lg]

---

Process Architecture B：横方向のフロー

最適な用途：シンプルな3段階のプロセス、視覚的な情報を好むユーザー、SaaS のオンボーディング

3つのステップを横一列に並べ、矢印や線でつなぎます。各ステップにはアイコンまたは小さなビジュアル、見出し、短い説明を付けます。

[section: py-24 lg:py-32]
  [heading, centered, mb-16]
  [flow: grid grid-cols-1 md:grid-cols-3 gap-0, max-w-5xl mx-auto]
    [step: px-8, relative]
      [icon or visual: w-12 h-12, mb-4]
      [heading: text-lg font-medium, mb-2]
      [description: text-sm muted]
      [connector arrow: hidden on mobile, absolute right-0 top-1/4] ← between steps only

⚠ デザインの逸脱に注意： これは AI 生成の粗雑なデザインになりやすい、最もリスクの高い構成です。アイコン付きの同一ボックスを3つ並べるのは、デフォルトで出力されがちな悪いパターンです。本当にシンプルな3段階のフローに限って使用してください。ステップが3つを超える場合や、複雑なステップがある場合は、代わりに Architecture A を使用してください。

---

セクションの種類：事例／成果

「実際にどのような成果が得られるのか」という疑問に、詳しい実績で答えます。

---

Case Study Architecture A：カードギャラリー

最適な用途：代理店、スタジオ、ビジュアル作品を掲載するポートフォリオ

大きな画像カードを、非対称の2カラムグリッドに配置します。1枚を高くして、視覚的な緊張感を生み出します。各カードにはプロジェクトの画像を載せ、クライアント名と1行の成果を画像上または下に表示します。

[section: py-24 lg:py-32, max-w-7xl mx-auto px-6]
  [heading + subtext, mb-16]
  [gallery: grid grid-cols-1 lg:grid-cols-2 gap-6]
    [card: group, rounded-2xl, overflow-hidden, aspect-[4/3] or aspect-[3/4] - VARY]
      [image: w-full h-full object-cover, transition group-hover:scale-105]
      [overlay: absolute bottom-0 inset-x-0, p-6, bg-gradient-to-t from-black/60 to-transparent]
        [client name: text-lg font-semibold, text-white]
        [result line: text-sm text-white/70]

---

Case Study Architecture B：単一事例の詳細紹介

最適な用途：ストーリーを伝える代表的な事例を1つ掲載する場合

単一のクライアント事例に特化した、全幅のセクションです。事例の大きなヒーロー画像に続けて、2カラムのレイアウトを配置します。一方に課題、もう一方に成果（指標を含む）を示します。

[section: py-24 lg:py-32]
  [case study image: full-width, max-h-[60vh], object-cover, rounded-2xl mx-6]
  [content: grid grid-cols-1 lg:grid-cols-2 gap-12, max-w-6xl mx-auto, px-6, mt-12]
    [left: challenge]
      [label: "THE CHALLENGE", mono, muted, mb-4]
      [text: leading-relaxed]
    [right: results]
      [label: "THE RESULTS", mono, muted, mb-4]
      [metrics: 2-3 large numbers with labels]
      [text: brief summary]

---

セクションの種類：料金

「料金はいくらか」という疑問に答えます。圧迫感を与えず、透明性を感じられるものにします。

---

Pricing Architecture A：わかりやすいプラン

最適な用途：プランが2〜3種類ある SaaS

2〜3枚の料金カードを横に並べます。おすすめのプランは、背景を変える、控えめな光彩の枠線を付ける、「人気」バッジを付けるなどして、視覚的に際立たせます。カードの高さをすべて同じにする必要はありません。人気のプランは少し高くしてもかまいません。

[section: py-24 lg:py-32, max-w-5xl mx-auto px-6]
  [heading + subtext, centered, mb-4]
  [optional billing toggle: monthly/annual, centered, mb-12]
  [pricing grid: grid grid-cols-1 md:grid-cols-3 gap-6 items-start]
    [plan card: rounded-2xl, border, p-8]
      [plan name: text-lg font-medium, mb-2]
      [plan description: text-sm muted, mb-6]
      [price: text-4xl font-semibold + period label, mb-8]
      [feature list: space-y-3, text-sm]
        [feature: flex items-center gap-3, check icon + text]
      [CTA button: w-full, mt-8]
    [popular plan: same structure but - bg-accent/5, border-accent/20, ring-1 ring-accent/10]
      [badge: "Most popular" - absolute or inline, small pill]

⚠ デザインの逸脱に注意： 15項目以上の機能を小さな文字で列挙した料金カードは、読みにくくなります。カードごとの機能は最大6〜8項目にします。すべてのプランに共通する機能ではなく、プランごとの違いがわかる機能を先に示しましょう。

---

Pricing Architecture B：比較表

最適な用途：差別化機能が多い複雑な製品

シンプルなプランカードの下に、完全な比較表を配置します。カードには料金と CTA のみを表示します。下の表で、チェックマークを使って機能を詳しく比較します。

[plan summary: grid grid-cols-3, each card minimal - name + price + CTA]
[comparison table: mt-12, w-full]
  [table head: plan names as columns]
  [table body: feature categories as groups]
    [category heading: font-semibold, bg-subtle, full-width]
    [feature rows: text-sm, check/x/dash per plan]

---

セクションの種類：FAQ

残る疑問や懸念を解消します。最後の CTA の前に設ける最後の防御線です。

---

FAQ Architecture A：アコーディオン

最適な用途：よくある質問が5〜8件ある場合

1カラムのアコーディオンを、滑らかな展開・折りたたみアニメーションとともに配置します。質問は左揃えにし、回答は自然な高さのアニメーションで下に展開します。シェブロン／プラスアイコンには、控えめな回転を加えます。

[section: py-24 lg:py-32, max-w-3xl mx-auto px-6]
  [heading, centered or left, mb-12]
  [accordion: divide-y divide-white/10]
    [item: py-5]
      [trigger: flex justify-between items-center, cursor-pointer, w-full]
        [question: text-base font-medium, text-left]
        [icon: w-5 h-5, transition rotate, text-muted]
      [answer panel: overflow-hidden, transition max-height]
        [answer text: text-sm muted, pt-4, leading-relaxed, max-w-2xl]

/* BLUEPRINT: Accordion animation
   WHY: max-height transition is the simplest pure-CSS accordion.
   grid-template-rows: 0fr → 1fr is smoother but requires 
   wrapping content in an inner div with overflow:hidden.
   The cubic-bezier gives a snappy open, gentle close. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-answer[data-open="true"] {
  grid-template-rows: 1fr;
}
.faq-answer > div {
  overflow: hidden;
}

---

セクションタイプ：最後のCTAバナー

最後のコンバージョン促進です。このセクションは、クリックを獲得することだけを目的としています。

---

CTAの構成A：全幅バナー

最適な用途：あらゆるページ — 万能な締めくくりです

コントラストのある背景色（ページが暗い場合は、少し明るい暗色や控えめなグラデーションを検討してください）を使った全幅の帯です。大きな見出し、短い補足文、目立つCTAボタンを1つ配置します。

[section: py-20 lg:py-28, text-center]
  [optional subtle background: bg-gradient or slightly shifted tone]
  [heading: text-3xl lg:text-5xl, font-semibold, tracking-tight, mb-4]
  [subtext: text-lg muted, max-w-xl mx-auto, mb-8]
  [CTA button: large pill, px-10 py-4, font-medium]

⚠ 注意： CTAバナーにボタンが3つ、フォーム、ソーシャルリンク、そして長い文章を詰め込むのはアンチパターンです。見出しは1つ。ボタンは1つ。それだけです。シンプルさが説得力を生みます。

---

CTAの構成B：分割CTA

最適な用途：最後のひと押しと一緒にビジュアルを見せたいページ

2カラムに分割し、一方に印象的なビジュアル（製品画像、イラスト、抽象的なビジュアルなど）、もう一方に見出しとCTAを配置します。ビジュアルで価値提案を最後にもう一度補強します。

[section: py-24 lg:py-32, grid grid-cols-1 lg:grid-cols-2 gap-12 items-center, max-w-6xl mx-auto px-6]
  [visual side: rounded-2xl, overflow-hidden]
  [text side]
    [heading: text-3xl lg:text-4xl, font-semibold, mb-4]
    [subtext: muted, mb-8]
    [CTA button]

---

セクションタイプ：フッター

後回しにしてはいけません。訪問者がコンバージョンせずにページ最下部までスクロールした場合、最後に目にするのがフッターです。

---

フッターの構成A：ミニマルな帯

最適な用途：ランディングページ、製品ローンチなど、コンバージョン目標が1つのページ

1行で構成します。左にロゴ、中央に必須リンク、右にソーシャルアイコンを配置します。複数カラムの巨大なフッターは使いません。

[footer: border-t border-white/10, py-8 lg:py-12, px-6]
  [inner: max-w-7xl mx-auto, flex flex-col lg:flex-row items-center justify-between gap-6]
    [logo: h-6 or text-lg font-semibold]
    [links: flex gap-6, text-sm, muted, hover:text-white transition]
    [right: flex items-center gap-4]
      [social icons: w-5 h-5 each, muted, hover:text-white]
  [copyright: text-center lg:text-left, text-xs, muted, mt-8 lg:mt-0]

---

フッターの構成B：構造化されたフッター

最適な用途：複数ページのサイト、SaaS製品、エージェンシーなど、ナビゲーションが重要な場合

リンクカテゴリを複数カラムのグリッドで配置します。左端にロゴとタグライン、リンクのカラムを3〜4列、右端にニュースレターの登録フォームを配置します。

[footer: border-t border-white/10, py-16 lg:py-20, px-6]
  [inner: max-w-7xl mx-auto, grid grid-cols-2 lg:grid-cols-5 gap-8]
    [brand col: lg:col-span-1]
      [logo]
      [tagline: text-sm muted, mt-3, max-w-xs]
    [link col: space-y-3]
      [column heading: text-sm font-semibold, mb-4]
      [link: text-sm muted hover:text-white]
      ...
    [link col] [link col]
    [newsletter col: lg:col-span-1]
      [heading: text-sm font-semibold, mb-4]
      [email input + submit button: flex]
  [bottom bar: mt-12 pt-8 border-t border-white/5, flex justify-between, text-xs muted]
    [copyright]
    [legal links: privacy, terms]

---

セクションタイプ：ビジュアルブレイク

ページ全体が同じような見た目になるのを防ぎ、ひと息つける間を作ります。

---

ブレイクの構成A：全幅画像

テキストを重ねず、雰囲気のある画像を1枚、全幅で配置します。コンテンツが多いセクションの合間に、視覚的な変化をもたらします。

[section: py-0, -mx-6 or full-bleed via 100vw trick]
  [image: w-full, h-[40vh] lg:h-[60vh], object-cover]

---

ブレイクの構成B：大きな統計値

ゆったりとした縦方向の余白の中央に、巨大な数字またはメッセージを1つ配置します。それ以外は何も置きません。

[section: py-24 lg:py-40, text-center]
  [stat: text-6xl lg:text-8xl, font-semibold, tracking-tight]
  [label: text-sm muted, mt-4]

---

ブレイクの構成C：横方向のマーキー

テキスト、ロゴ、タグなどが連続してスクロールする帯です。CSSのみで実装でき、JSは不要です。

[section: py-6, overflow-hidden, border-y border-white/5]
  [marquee track: flex gap-8, animate-scroll]
    [items repeated 2x for seamless loop]

/* BLUEPRINT: CSS marquee
   WHY: Translating the full width then resetting creates a seamless loop.
   Duplicating the content ensures no gaps during the loop.
   30s is slow enough to be ambient. */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee-scroll 30s linear infinite;
  width: max-content;
}

---

✓ 品質チェック：構築

フェーズ4に進む前に、各セクションについて次の項目を確認してください。

• 構成が混在することなく、設計どおりに実装されている
• コンテンツが現実的である（「Lorem ipsum」や「[Feature Name]」のようなプレースホルダーがない）
• セクションの見出しの文字サイズが、直前のセクションの見出しと異なる
• 背景色のトーンが隣接するセクションと同一ではない
• Awwwards SOTDのノミネート作品にふさわしい、単独でも成立するセクションである

---

フェーズ4：ページ構成の差分チェック

すべてのセクションを構築したら、構成全体としてページ全体を監査します。セクションを積み重ねたときに初めて現れる問題を見つけるためのチェックです。

視覚的リズムの差分チェック

チェック項目	合格／不合格
隣接するセクション同士でレイアウトの方向が重複していない（どちらも左揃え、どちらも中央揃えなど）
隣接するセクション同士で背景色が同一ではない
ページ内のどこかに、ビジュアルブレイクのセクションが少なくとも1つある
セクションの見出しの文字サイズに変化がある（すべてがtext-4xlではない）
グリッド形式のセクションが、グリッド形式ではないセクションによって区切られている

コンテンツ品質の差分チェック

チェック項目	合格／不合格
プレースホルダーテキスト（「Lorem ipsum」、「[Feature Name]」、「Description goes here」）がない
AIでよく使われる決まり文句（「Elevate」、「Seamless」、「Unleash」、「Next-Gen」、「Revolutionize」）がない
機能の説明が具体的で、一般的な表現ではない（「処理速度が非常に速い」ではなく「1秒あたり10k件のAPI呼び出しを処理」）
お客様の声が企業的ではなく、人間らしい口調になっている
統計値に丸めた数字ではなく、具体的な数値を使っている（「10,000+チーム」ではなく「12,847チーム」）

コンバージョンフローの差分

チェック項目	合格／不合格
説得の順序が維持されている（WHAT → PROOF → HOW → RESULTS → PRICE → OBJECTIONS → CTA）
CTAがページ全体で最大2～3回繰り返されている（ヒーローのCTA＋最後のCTA＋必要に応じてページ中盤に1つ）
最後のCTAセクションがあり、フッターではない
ヒーローのCTAから次のCTAの機会までにあるセクションが3つを超えていない

使い古されたデザインの防止に関する差分

チェック項目	合格／不合格
アイコン＋見出し＋段落を3列に並べた同一パターンを使うセクションがない（AIで最もよく使われるデフォルトパターン）
汎用的なストック写真を使っていない（製品のスクリーンショット、イラスト、または picsum.photos/seed/{keyword}/{w}/{h} を使用する）
AI風の紫／青のグラデーション背景がない
「グラデーションメッシュの blob」背景がない
カードの中にカードを入れ、さらにその中にカードを入れる入れ子構造がない
競合するCTAが3つを超えるセクションがない
フィーチャーカードがすべて同じ高さ、同じパディング、同じ構成になっていない

モバイル構成の差分

チェック項目	合格／不合格
すべての複数列レイアウトが、768px未満では1列に切り替わる
モバイルではセクションの間隔が比例して小さくなる（py-24 → py-16）
どのセクションにも横方向のはみ出しがない
画像が適切に拡大縮小されるか、非表示になる
タッチターゲットが最小44pxである

---

セクション間の移行パターン

セクション同士のつなげ方は、各セクション自体と同じくらい重要です。同じパディングのセクションをただ積み重ねないでください。

→ 背景の移行

パターン	使用する場面
控えめなトーンの変化	bg-[#0a0a0a] → bg-[#111111] → bg-[#0a0a0a]。移行の90％で使用します。ほとんど気づかない程度の変化ですが、単調さを防ぎます
ボーダーによる区切り	セクション間に border-t border-white/5 を使用します。すっきりとした、編集的な印象になります
グラデーションのにじみ	セクションAの背景グラデーションをセクションBの上端までにじませます。流れを生み出します
強いコントラスト	暗いセクションから明るいセクション、またはその逆へ切り替えます。劇的な効果を狙い、控えめに使用します（1ページにつき最大1回）

→ 間隔のリズム

セクションの種類	垂直方向のパディング
コンテンツが多いセクション（機能、料金、FAQ）	py-24 lg:py-32
ビジュアルによる区切り（画像、統計、マーキー）	py-8 lg:py-16 または py-0
実績を示すロゴの帯	py-12 lg:py-16
CTAバナー	py-20 lg:py-28
フッター	py-12 lg:py-20

---

基本原則（セクション）

これらは構成にかかわらず、すべてのセクションに当てはまります。

セクションは孤立した島ではありません。 すべてのセクションは、ヒーローと同じページの一部だと感じられる必要があります。同じ配色、同じタイポグラフィの仕組み、同じビジュアル表現を使用します。どのランディングページにもそのまま置けるようなセクションは、ありきたりです。

説明するより、見せましょう。 機能の箇条書きより製品のスクリーンショットが効果的です。形容詞より実際の数値が効果的です。「何千人ものユーザーに信頼されています」と言うより、顧客のロゴを見せましょう。文章で主張するより、視覚的な証拠のほうが高いコンバージョンにつながります。

リズムに変化をつけましょう。 すべてのセクションが「py-32、中央揃えの見出し、3列のグリッド」の繰り返しでは、ページが壁のように感じられます。密度、レイアウトの方向、背景のトーン、コンテンツの種類に変化をつけましょう。

3枚目のカードはやめましょう。 同じページで3回目の、同じサイズのカードを3つ並べたグリッドを作ろうとしていることに気づいたら、手を止めましょう。別の構成を使ってください。3枚のカードを並べるグリッドは、ウェブデザインで最も使い古されたパターンです。

1つのセクションに1つの役割を持たせましょう。 各セクションは、訪問者の質問に1つだけ答えるようにします。機能の紹介、推薦文の表示、料金の提示を1つのセクションで行おうとしている場合は、別々のセクションに分けましょう。