ベントーグリッドレイアウトシステム
目的
ベントーグリッドレイアウトシステムは、多様なコンテンツ（主要業績評価指標、ビジュアルイラスト、インタラクティブウィジェット、引用、製品機能のティーザーなど）を統一的でモジュール化されたグリッドに整理するための方法論を提供します。日本の伝統的な弁当箱に着想を得て、さまざまなセルの高さと幅にわたって非対称なバランスを確立します。このシステムは、ダッシュボード、ランディングページ、ポートフォリオにおける視覚的な断片化というデザイン上の問題を、厳格なプロポーションルール、一貫した内部パディング、構造化されたタイポグラフィスケールを適用することで解決します。乱雑になりがちなレイアウトを、洗練されたスキャン可能でアクセシブルな視覚階層に変換します。
ユースケース
- SaaS機能紹介: 単一のランディングページセクションに、製品機能、パフォーマンス統計、システム統合、インタラクティブなUIプレビューを多様に組み合わせて提示します。
- データ＆メトリクスダッシュボード: 主要業績評価指標（KPI）、チャート、運用サマリーを高密度のビジュアルブロックにグループ化します。
- ポートフォリオとケーススタディ: クリエイティブ作品、プロジェクト画像、クライアントの声、デザインワークフローをダイナミックで非線形なプレゼンテーションで紹介します。
- ECコレクション: 注目製品、期間限定コレクション、プロモーションバナー、ソーシャルプルーフを、インパクトのあるエディトリアルレイアウトで強調表示します。
使用すべきでないケース
- 均一なコンテンツリスト: ページが同一の繰り返し要素（例：標準的なブログ記事リストや製品グリッド）で構成されている場合は、
card-ui-systemまたはresponsive-grid-systemを使用してください。 - 純粋な階層的ストーリーテリング: 線形的で順序立ったナラティブ（例：「ステップ1、ステップ2、ステップ3」）に依存するレイアウトの場合は、
step-progress-systemまたはsection-composition-systemを使用してください。 - 複雑で大量の表形式データ: ユーザーが正確な技術値を比較したり、英数字データの行を読む必要がある場合は、
data-table-ui-systemを使用してください。 - コンテンツ重視の記事: 中断のない流れるようなテキストに焦点を当てたエディトリアルページの場合は、
article-layout-systemを使用してください。
入力
- コンテンツインベントリと優先順位: ベントーグリッドに配置するアイテムのリスト。階層別に分類します（1つのコアヒーロー、2〜3のサポート、2〜4のアクセント）。
- ビジュアルアセットの分類: 各セル内のアセットのタイプ（静止画像、アニメーションイラスト、インタラクティブスライダー、プレーンテキスト、数値メトリクス）。
- ターゲットカラムとブレークポイント: デスクトップのカラムシステム（通常は4カラムマスターグリッド）、タブレットの適応（通常は2カラム）、モバイルのスタッキングルール。
- 流動的なスペーシングスケール: ガターと内部セルレイアウトのための流動的なマージンとパディングトークン（
fluid-spacing-systemより）。 - ブランドデザイントークン: タイポグラフィスケール、ボーダー半径、ボーダースタイル、背景塗りつぶしスケール、エレベーショントークン（
elevation-and-depth-systemおよびfluid-typography-systemより）。
出力
- ベントーグリッドジオメトリマップ: 各セルのカラムスパン（
grid-column: span X）とロウスパン（grid-row: span Y）を指定する比例的座標の設計図。 - 内部カード構造仕様: 異なるセルアスペクト比における構造的なスペーシング、コンテンツのネスト、配置のルール。
- DOM順序とアクセシビリティマップ: 不規則な視覚的位置を越えてアクセシビリティを維持する、HTMLソース構造の論理的なタブ順序を示すマップ。
- レスポンシブスタッキング計画: 非対称グリッドがタブレット画面とモバイル画面にどのように簡略化されるかを示す、正確なトランジション仕様。
ワークフロー
1. グリッドジオメトリとカラムを確立する
まず、基礎となる座標グリッドを定義します。
- マスターグリッド構造: デスクトップレイアウト（1200px以上）では4カラムCSSグリッドに標準化します。これにより、セルの幅（1/4、2/4、3/4、4/4）の数学的要素が優れたものになります。
- 非対称トラック高さ: 行の高さを明示的に設定するか、
grid-auto-rows: minmax(180px, auto)を使用して、正方形または横長の長方形のプロポーショナルベース（ユニットあたりアスペクト比 1:1 または 2:1）を確立します。 - 流動的なガター: グリッドギャップには流動的なスペーシングトークン（例：
gap: clamp(16px, 2vw, 24px)）を使用して、セルを視覚的に分離しつつも緊密に結合した状態に保ちます。
2. コンテンツを視覚的階層にマッピングし割り当てる
アイテムをランダムに散らばらせないでください。各セルを3つの構造的ティアのいずれかに分類します：
- コアヒーローセル（2x2 または 3x2 トラックスパン）: グリッドエリアの約40〜50%を占めます。最も重要なビジュアルアセット、ビデオ、メトリクスをホストします。セクション全体の視覚的なエントリーポイントを決定します。
- サポートセル（2x1 または 1x2 トラックスパン）: 中間的な機能や主要な統計を強調表示します。基本ブロックよりも高さまたは幅があり、グラフィックとともに構造化されたテキストを収容します。
- アクセントセル（1x1 トラックスパン）: 小さなビジュアル要素、単一値のシンプルなメトリクス、アイコン、バッジ用に予約されています。長方形のコンテナを維持するためにグリッドを補完します。
3. ベントーセルの内部構造を設計する
セルの一貫性を保つために厳格な内部スペーシング制約を適用します：
- 統一パディング: すべてのセルに一貫した内部パディングを適用します。通常は流動的なパディングトークン（例：
padding: var(--space-m)）を使用します。例外：アクセントセル（1x1）はよりタイトなパディング（--space-s）を使用できます。 - 内部配置モード: セル内でフレックスボックス（
display: flex; flex-direction: column; justify-content: space-between）を使用して、テキストブロックを上部に、ビジュアルアクセント（メトリクス、グラフィック）を下部に垂直方向に整列させます。 - 背景とボーダー: すべてのセルで統一されたボーダー半径（例：
border-radius: 16px〜24px）に標準化します。微妙な背景塗りつぶし（例：ニュートラルな色合い、半透明のグラスモーフィズム背景、低コントラストのカードサーフェス）を使用して、明確なカード境界を確立します。
4. キーボードとスクリーンリーダーのアクセシビリティのためにDOM順序を整理する
不規則なグリッドレイアウトは、視覚的な読み順序と物理的なDOM順序の間に不一致を引き起こす可能性があります。
- 自然な読み流れ: HTMLドキュメント内の要素を、読み手が読むであろう論理的な左から右、上から下の順序で並べます。
- 順序の変更を避ける: CSSで
orderを使用したり、フォーカス可能な要素をスキップする方法でセルを恣意的に配置したりしないでください。セル1が左上、セル2が右上にある場合、CSSグリッドレイアウトがそれらを異なる方法でスパンしていても、DOM内でその順序で表示される必要があります。 - 意味論的な見出し: コンテンツの多い各セルに、明確で説明的な見出しタグ（通常は
<h3>または<h4>）を付け、親セクションの<h2>のアウトラインと一致させます。
5. レスポンシブスタッキングとブレークポイントを定義する
ビューポートのスケーリングをグリッドが適切に処理できるようにします：
- デスクトップ（1200px以上）: 4カラムレイアウト。非対称なカラムとロウのスパン。
- タブレット（768px〜1199px）: 2カラムグリッドに移行します。スパンを再マッピングし、1x1だったセルは1カラム、2x1のセルは両方のカラム（2カラム全幅）にスパンするようにします。
- モバイル（767px以下）: グリッドを完全に1カラムの垂直スタック（
grid-template-columns: 1fr）に折りたたみます。明示的な行の高さ（grid-auto-rows: auto）を削除し、要素を自然に流し、高さは内部パディングとコンテンツサイズによって決定されるようにします。
決定ルール
カラムと行のスパン条件
| アイテムコンテンツタイプ | スパン決定ルール | 推奨デスクトップジオメトリ |
|---|---|---|
| インパクトの高いメトリクス / メイン機能 | カラムと行の両方をスパンしてフォーカルセンターを作成する。 | grid-column: span 2; grid-row: span 2; |
| ワイドビジュアル / タイムライン / チャート | カラムを水平方向にスパンし、高さは1行に維持して視線を水平方向に誘導する。 | grid-column: span 2; grid-row: span 1; |
| 長いテキストリスト / 縦長の画像 | 行を垂直方向にスパンし、幅は1カラムに維持して視線を下方向に誘導する。 | grid-column: span 1; grid-row: span 2; |
| 単一メトリクス / バッジ / アイコン | スパンしない。標準の正方形ブロックとして維持する。 | grid-column: span 1; grid-row: span 1; |
ベントーセル内のタイポグラフィスケーリング
- 適応サイズ設定: すべてのカードに同じタイポグラフィサイズを使用しないでください。タイポグラフィスケールをカードサイズに比例させてください。
- ヒーローカード: 見出しには
font-size: clamp(1.5rem, 4cqi, 2.25rem)（可能であればコンテナクエリユニットcqiを使用）を使用します。 - アクセントカード（1x1）: 見出しは
font-size: clamp(1rem, 2.5cqi, 1.25rem)に制限し、説明は簡潔に（最大2行）するか、アイコンとメトリクスのために説明を完全に省略します。
コンテンツの収容 vs. はみ出し
- 収容レイアウト: コンテンツをカードパディング内に完全に配置し、テキストとボーダーの間に最低
16pxの余白を確保します。テキストが多い情報カードに最適です。 - はみ出しレイアウト: ビジュアル要素（製品スクリーンショット、詳細な3Dモックアップ、複雑なチャート）をカードの下部および/または右端まで（セルで
overflow: hiddenをマスク）はみ出させます。テキストは上部にパディングされ読みやすい状態を保ちます。コアヒーローおよびサポートビジュアルカードにこれを使用します。
制約
- フォーカスの可視性（WCAG 2.2 SC 2.4.11 / 2.4.13）: セルがフォーカス可能（例：大きなリンクカードとして機能する）な場合、明確で高コントラストな
:focus-visibleアウトラインが必要です。フォーカスインジケーターが親グリッドのコンテナやカード境界によってクリップされてはなりません。 - タッチターゲット（WCAG 2.2 SC 2.5.8）: ベントーセル内のすべてのインタラクティブ要素（ボタン、展開トグル、スライダー）は、最低ターゲットサイズ
24x24pxで、周囲に十分なスペースを確保し、モバイルでは44x44pxを推奨します。 - 読み上げ順序の整合性（WCAG 2.1 SC 1.3.2）: スクリーンリーダーが解析するコンテンツの順序は、ベントーグリッドの意味論的な意味および視覚的な順序と一致している必要があります。左上のセルは、ソースDOM内で常に右下のセルより前に配置される必要があります。
- コントラスト比（WCAG AA）: ベントーカード内のすべてのテキストは、カードの背景に対して最低
4.5:1のコントラストを満たす必要があります。色付きのカード内の説明文に低コントラストの微妙なグレーを使用しないでください。
よくある失敗パターン
- 「視覚的なガラクタ引き出し」効果: 単に収まるという理由だけで、任意の要素をベントーグリッドに詰め込むこと。すべてのセルは、親ページに対して一貫性のあるストーリーテリングの目的を果たさなければなりません。
- DOMと視覚の不一致: カードをある順序で視覚的にレイアウトしながら、HTML内ではまったく異なるシーケンスのままにすること。スクリーンリーダーとキーボードタブナビゲーションがグリッド内を無秩序にジャンプします。
- モバイルレイアウトの爆発: モバイル画面でハードコードされたカラムスパンを維持し、カードが縮小してテキストがオーバーフローし、完全に読めなくなること。
- 過剰なボーダー半径の衝突: カードに巨大なボーダー半径を使用しながら、小さく鋭いマージンを維持する、または、外側のカードの同心円状のコーナーカーブと一致しないボーダー半径を持つ内部要素をネストすること。
- フォーカルアンカーの欠如: すべてのセルがまったく同じサイズ（例：すべて1x1またはすべて2x1）であるグリッドを作成し、レイアウトのエントリーポイントを排除し、スキャン疲れを引き起こすこと。
検証基準
- 統一ジオメトリ: グリッドは、基礎となる一貫した座標フレームワーク（デスクトップでは理想的には4カラムレイアウト）と均一なガターを使用しています。
- 明確な階層: 単一の「ヒーロー」ブロックが視覚的に支配的であり、明確なレイアウトエントリーポイントを確立しています。
- 自然なタブ順序: グリッド要素のタブ移動は、視覚的なレイアウトと一致して、予測可能な左から右、上から下の順序で移動します。
- モバイルスタック可能性: レイアウトは、モバイルビューポート（< 768px）で水平オーバーフローなしに、1カラムスタックにクリーンに移行します。
- 内部スペーシングの一貫性: セルのパディングは、すべての類似カードで同一であり、要素の垂直方向の配置が統一されています。
- コントラストAA準拠: すべてのカード内のすべてのテキストブロックとステータスインジケーターのコントラスト比が、少なくともWCAG AA標準の4.5:1を満たしています。
- インタラクティブセーフティ: ベントーカード内のすべてのウィジェットのタップターゲットが、WCAG 2.2の24x24pxの下限を満たしています。