セクション構成システム

セクション構成システム は何をしますか？

目的

セクション構成システムは、ページの「中間部」、つまりグローバルヘッダーとフッターの間に位置するセクションのシーケンスを設計するための方法論を提供します。カードやボタンなどのアトミックコンポーネントはセクション内部に配置されますが、このシステムはセクション間の空間リズム、レイアウトパターン、トランジションに焦点を当てます。これにより、コンテンツが論理的にグループ化され、レイアウトのバリエーションによって視覚的疲労が最小限に抑えられ、ユーザーが一貫したナラティブまたはタスクフローに導かれます。

ユースケース

• 複数の機能セクションとベネフィットセクションを含む長尺ランディングページの設計。
• 技術仕様、ソーシャルプルーフ、使用ガイドを必要とする商品詳細ページ（PDP）の構造化。
• 「会社概要」や「仕組み」ページを、読みやすいコンテンツブロックに整理する。
• 複数ページのWebサイト全体で一貫した「ページ本文」のリズムを確立する。
• 垂直方向のスペーシングと背景の変化を管理し、トピックや優先度の変化を示す。

使用すべきでない場合

• 単一セクションビュー: 体験全体がヒーローセクションまたは単一のビューポートに収まる場合（例：シンプルなログインページやスプラッシュ画面）。
• グローバルナビゲーション/フッター: 永続的なサイトフレームには site-navigation-system または site-footer-system を使用する。
• マイクロインタラクション: セクション内の個々の要素の動作には interactive-state-system を使用する。
• 純粋なデータ表示: コンテンツが均一なアイテムの連続ストリームである場合（例：大規模なデータテーブルや無限フィード）。

入力

1. コンテンツシーケンス: ページセクションの優先順位付きリスト（情報アーキテクチャから）。
2. セクション優先度: 「高インパクト」（ベネフィット重視）か「補助的」（技術仕様/ソーシャルプルーフ）か。
3. ブランドパレット: 背景の交互パターンを定義するため。
4. 流動的スペーシングシステム: 一貫した垂直マージンとセクションパディングを実現するため。
5. レスポンシブグリッドシステム: 最大コンテンツ幅とカラム動作を定義するため。

出力

1. セクションシーケンスマップ: 各セクションの順序とレイアウトパターンを示す設計図。
2. トランジション戦略: 背景の変化（例：明るい→暗い→明るい）と垂直スペーシングの定義されたルール。
3. レイアウト設計図: 一般的なセクションパターン（ジグザグ、グリッド、50/50分割）の注釈付きワイヤーフレーム。
4. レスポンシブスタッキングルール: 複雑なセクションレイアウトがモバイルでどのように折りたたまれるか。

ワークフロー

1. ナラティブフローのマッピング

ユーザーの意図に基づいてコンテンツを論理的な順序で配置します。一般的なランディングページのフローは次のとおりです。

• 認知: ヒーロー/問題提起。
• 教育: 仕組み/コア機能。
• 検証: ソーシャルプルーフ/ケーススタディ。
• 詳細: セカンダリ機能/価格/FAQ。
• コンバージョン: 最終CTA。

2. セクションレイアウトパターンの選択

レイアウトパターンを交互に切り替えて繰り返しを避けます。

• スプリット（50/50）: 片側にコンテンツ、反対側にビジュアル。高インパクトなベネフィットに最適。
• ジグザグ: 「スプリット」パターンを交互に配置（例：左にビジュアル、次に右にビジュアル）。ストーリーテリングとスキャン疲労の軽減に最適。
• フィーチャーグリッド: 3または4カラムのカード/アイコン。セカンダリ機能やサービスに最適。
• センタードスタック: すべてのコンテンツを垂直および水平方向に中央揃え。インパクトのあるステートメントや最終CTAに最適。

3. トランジションシステムの設計

トピックの変化を知らせる視覚的な手がかりを使用します。

• 背景の交互: 白色、薄いグレー、ブランドカラーを切り替えてセクションを「グループ化」します。セクションごとに個別のグレーやティントを手動で選ぶ代わりに、単一のブランドトークンから color-mix() を使用してティント背景を導き出します（例：color-mix(in oklch, var(--brand) 6%, white)）。これにより、ブランドカラーが変わってもパレットの一貫性が保たれます。
• 垂直スペーシング: fluid-spacing-system から一貫した上下パディングを使用します。理想的には clamp() を使用することで、セクションパディングがブレークポイントで急に変化するのではなく、モバイルとデスクトップの間で滑らかに拡大縮小します。
• 区切り線: 微妙な線や角度の付いたSVGトランジションを使用して、よりモダンまたはダイナミックな印象を与えます。

4. コンテンツ「ブレーク」の確立

ユーザーが速くスクロールしすぎるのを防ぐために、「ブレーカーセクション」を導入します。

• 引用/推薦の言葉: 大きなテキストを中央に配置したセクション。
• 全幅画像: 没入感のあるビジュアルで精神的なリセットを提供します。
• 統計/インパクト: 大きな数字と高いコントラストを持つブロック。

5. レスポンシブスタッキングの定義

セクションがどのように折りたたまれるかを計画します。

• ナチュラルスタック: スプリットレイアウトは通常、ビジュアルが上または下にスタックします（通常はコンテキストのために上）。
• ジグザグ反転: ジグザグレイアウトでは、「メディア」がモバイルで連続してスタックしないようにします（例：テキスト-メディア-メディア-テキスト）。順序を調整して一貫性を保ちます（例：メディア-テキスト-メディア-テキスト）。

決定ルール

• 「疲労」ルール: 同じレイアウトパターンを3セクション連続で使用しないでください。スプリット、グリッド、センタードレイアウトを交互に切り替えます。
• 「ビジュアルアンカー」ルール: すべての高インパクトセクションには、テキストを補完するビジュアルアンカー（画像、動画、またはアイコン）が必要です。
• フォーカスのためのコントラスト: 最も重要なメッセージまたは最終CTAには、暗い背景のセクションを使用して、ページの他の部分との高いコントラストを生み出します。
• テキスト幅の制約: テキストブロックの幅を制限して（通常は max-width: 60ch）、セクションコンテナがより広くても読みやすさを確保します。

制約事項

• アクセシビリティ: 背景色の変更は、そのセクション内のすべてのテキストに対してWCAG AAのコントラスト比を維持する必要があります。
• 見出し階層: 主要な各セクションは、論理的なドキュメントアウトラインに従った <h2-h6> で始める必要があります。
• レスポンシブ性: セクションパディングはモバイルで縮小する必要があります（例：デスクトップで --space-3xl だったものがモバイルで --space-xl になる）。個別のブレークポイントオーバーライドよりも clamp() 式を推奨します。
• スペーシングの一貫性: セクション間のスペースは、トピックの変更によりより大きな「ブレーク」が必要な場合を除き、一貫している必要があります。

一般的な失敗パターン

• 「テキストの壁」: コピーが多すぎて、視覚的なブレークや小見出しがないセクション。
• パターンの繰り返し: 5つのセクションで同じ50/50スプリットレイアウトを使用し、ページが単調になる。
• 「モバイルサンドイッチ」: ジグザグレイアウトで、モバイルでのスタック順序の調整に失敗し、2つの画像または2つのテキストブロックが互いに直接重なる。
• 空白の不足: セクションを十分な垂直パディングなしで詰め込み、コンテンツが窮屈に感じられる。
• 配置の不整合: 同じシーケンス内で、中央揃えの見出しと左揃えの見出しを明確な論理なく混在させる。

検証基準

• ページレイアウトが少なくとも2つの異なるパターン（例：スプリットとグリッド）を交互に使用している。
• セクションのトランジション（背景の変化）を使用して、関連するコンテンツをグループ化している。
• 垂直スペーシング（パディング）が類似したセクションタイプ間で一貫している。
• すべてのセクションが正しい見出し階層（主要セクションには h2）に従っている。
• ジグザグレイアウトのモバイルスタック順序が論理的に定義されている。
• テキストの多いセクションが読みやすい行長（max-width: 60-80ch）を維持している。
• 背景色のあるセクションのコントラスト比がWCAG AAを満たしている。