Bento Gridレイアウトの作り方と活用事例【CSS Grid実装ガイド】

この記事の対象: Bento Gridを自サイトに取り入れたいWebデザイナー・フロントエンドエンジニア
読了時間: 約7分

Bento Grid（弁当グリッド）は、Appleが製品紹介ページで採用したことで注目を集めたレイアウト手法です。お弁当箱のように異なるサイズのカードをグリッド状に配置するデザインで、情報を視覚的にわかりやすく整理できます。

2026年現在、多くのWebサイトで採用されており、CSS Gridを使えば比較的シンプルに実装可能です。この記事では、Bento Gridの特徴、活用事例、CSS Gridでの実装方法を解説します。

Bento Gridとは

Bento Gridは、均一なグリッドではなく異なるサイズのセルを組み合わせた不均一なグリッドレイアウトです。名前の由来は日本の「お弁当箱」。仕切りで区切られた弁当箱のように、大小さまざまなコンテンツを美しく配置します。

Bento Gridの特徴:
– 大きいセルで重要な情報を強調できる
– 小さいセルで補助的な情報をコンパクトに表示
– 視覚的なリズムが生まれ、単調さを回避できる
– モジュラー構成のため、コンテンツの入れ替えが容易

なぜ2026年のトレンドなのか: Appleが2023年のiPhone発表ページで大々的に採用して以降、テック企業を中心に普及。2026年現在では業種を問わず採用されています。デザイントレンドの全体像は「Webデザイントレンド2026」をご覧ください。

Bento Gridの参考サイト事例5選

事例1: テックプロダクトの機能紹介

活用パターン: 大きいセルにメイン機能のビジュアル、小さいセルにスペック情報を配置。
効果: 一画面で製品の全体像が把握できる。スクロールせずに情報を伝えられる。

事例2: SaaSのダッシュボード紹介

活用パターン: ダッシュボードのUI要素をBento Grid風に配置し、機能の多様さを表現。
効果: 複数の機能を一目で俯瞰でき、プロダクトの価値が直感的に伝わる。

事例3: ポートフォリオサイト

活用パターン: 代表作を大きいセル、その他の作品を小さいセルに配置。
効果: 作品の優先度を視覚的に示しつつ、作品数の多さもアピールできる。

事例4: コーポレートサイトのサービス紹介

活用パターン: メインサービスを大セル、関連サービスを小セルに配置。
効果: サービスの全体像を1セクションで伝えられる。

事例5: イベント・カンファレンスのLP

活用パターン: 登壇者、タイムテーブル、会場情報をBento Grid内に配置。
効果: 複数の情報カテゴリを視覚的に整理し、LPの情報密度を高められる。

デザインの参考はSoreiine!!で探せます。

CSS Gridで作るBento Gridレイアウト

基本のHTML/CSS構造

<div class="bento-grid">
  <div class="bento-item bento-large">メイン</div>
  <div class="bento-item">サブ1</div>
  <div class="bento-item">サブ2</div>
  <div class="bento-item bento-wide">横長</div>
  <div class="bento-item">サブ3</div>
  <div class="bento-item">サブ4</div>
</div>

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
}

.bento-large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-wide {
  grid-column: span 2;
}

grid-template-areasの活用

名前付きエリアを使うと、レイアウトの意図がコードから読み取りやすくなります。

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 200px 200px;
  grid-template-areas:
    "main main sub1 sub2"
    "main main wide wide"
    "sub3 sub4 wide wide";
  gap: 16px;
}

.bento-main  { grid-area: main; }
.bento-sub1  { grid-area: sub1; }
.bento-sub2  { grid-area: sub2; }
.bento-wide  { grid-area: wide; }
.bento-sub3  { grid-area: sub3; }
.bento-sub4  { grid-area: sub4; }

レスポンシブ対応のブレイクポイント設計

Bento Gridはレスポンシブ対応が重要です。画面幅に応じてカラム数を変えましょう。

/* デスクトップ: 4カラム */
.bento-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* タブレット: 2カラム */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-large {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* スマホ: 1カラム */
@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-large,
  .bento-wide {
    grid-column: span 1;
  }
}

ポイント: スマホではBento Grid特有の不均一レイアウトが成立しにくいため、1カラムの縦積みに切り替えるのが一般的です。重要なセルを先頭に配置するソース順に注意しましょう。

Bento Gridが向いているケース・向かないケース

向いているケース

向かないケース

実装時の注意点

• コンテンツ量の不均一に注意: 大セルと小セルでコンテンツ量に差がありすぎると、余白が目立つ
• アクセシビリティ: キーボードナビゲーションでのフォーカス順序がDOM順と一致しているか確認
• パフォーマンス: 各セルに重い画像を入れすぎると表示速度に影響。lazy loadを活用
• CSSのsubgridを活用: ネストされたBento Grid内で整列させる場合、subgridが便利（2026年は主要ブラウザ対応済み）

まとめ

Bento Gridレイアウトのポイントをまとめます。

• 特徴: 異なるサイズのセルを組み合わせた不均一グリッド
• 実装方法: CSS Gridのgrid-column: spanやgrid-template-areasで実現
• レスポンシブ: スマホでは1カラム縦積みに切り替え
• 向いている用途: サービス紹介、ポートフォリオ、ダッシュボード的表示
• 向かない用途: 長文コンテンツ、ニュースサイト、ECの商品一覧

Bento Gridは、情報を視覚的に整理しながらデザインに動きを与える効果的な手法です。CSS Gridの基本を理解していれば実装のハードルは高くありません。