Bento Gridデザイン：2026年版UIレイアウトプレイブック

3列構成のフィーチャー行はもはや時代遅れです。2年も前から廃れており、多くのデザイナーは未だに本文を移動させていません。

ご存知でしょう。3つの同じ長さの列に、それぞれアイコン、見出し、段落が配置され、モバイル端末では縦に積み重ねられたあのレイアウトです。2018年から2023年の間に構築されたSaaSサイトは、ほぼすべてこのレイアウトを採用していました。これは、製品が3つの機能から成り、それぞれがユーザーの注目を33%ずつ集める価値があるという、たった一つの嘘を売り込んでいました。しかし、ユーザーの注目は決して均等ではありません。そして、TikTokが「密度こそが欠点ではなく利点だ」と教えたのと同じ年に、読者はこれらのセクションを読まなくなりました。

弁当グリッドが勝利したのは、フィーチャー行が決して認めなかったこと、つまり、要素の大きさに差があり、読者はそれを一目で理解できるべきだということを認めたからです。その背後にあるより深いパターンについては、視覚的階層構造をご覧ください。AppleのMac版ページは、このレイアウトが実際にどのように機能するかを示す最も分かりやすい例です。

弁当グリッドとは

弁当グリッド 弁当グリッドとは、セクションを不均等な長方形のセルに分割し、各セルに異なるコンテンツを配置することで、グリッド全体が統一された構成に見えるレイアウトパターンです。

この名前は日本の弁当箱に由来します。大きさの異なる仕切りにそれぞれ異なる内容物が詰められ、全体として視覚的にバランスが取れるように配置されています。同じ大きさの列が並んでいるわけでも、物語形式のセクションが積み重ねられているわけでもありません。意図的な内部階層構造を持つ、単一の構成です。

このパターンには3つの重要な特徴があります。第一に、セルのサイズが不均等であること。通常は3列または4列のグリッドで構成され、一部のセルは複数の列または行にまたがります。第二に、各セルに多様なコンテンツが配置されていること（あるセルにはグラフ、別のセルにはイラスト、さらに別のセルには指標、さらに別のセルにはお客様の声など）。第三に、背景の統一性、境界線の半径の一貫性、そして控えめな色使いによって、全体を通して視覚的な一貫性が保たれていることです。

これは、CSS Gridのデモではありません。メイソンリーレイアウトでもありません。Pinterestのフィードでもありません。カードをランダムに配置したものでもありません。Bentoは構成重視であり、アルゴリズムに基づいたものではありません。

Bentoグリッドは圧縮です。フィーチャーロウはナレーションです。ほとんどの製品は圧縮を必要とします。

フィーチャーロウに取って代わった理由

理由は3つあります。2つは明白です。1つは、このパターンが定着した理由です。

理由1：滞在時間。 Appleのマーケティングページにおける社内テストでは、Bentoセクションは同等のフィーチャーロウよりも訪問者の滞在時間が約47%長いことが示されました。理由は謎ではありません。読者はBentoグリッドをざっと眺めることができるからです。読む順番は決まっていません。読者はページにアクセスし、興味のあるセルを選び、そこに留まります。

理由2：テキストの壁なしで密度を高める。 適切に設計されたBentoグリッドは、従来のレイアウトで3つの情報しか伝えられないスペースで、6～8つの情報を伝えることができます。セルには様々な種類のコンテンツ（画像、統計データ、テキスト、お客様の声など）が含まれているため、読者は情報量の多さを感じません。

理由3（本当の理由）：現代の製品の販売方法に合致している。 2026年のSaaS製品のほとんどは、3つの機能だけで構成されているわけではありません。1つの主要機能、3～5つの補助機能、1つの統合事例、1つの実証ポイント、そして場合によっては個別に紹介する価値のある特定の機能を備えたプラットフォームです。このような構成は3列の行には適していません。弁当のようなレイアウトが適しています。レイアウトはコンテンツに合わせて最適化されています。

| パターン | このストーリーに合致 | このストーリーに合致しない |

|---------|-----------------|------------------|

| 3列の機能行 | 3つの同等の機能、ストーリー性のある製品 | 機能の比重が不均等なプラットフォーム |

| 機能スタック（全幅行） | 詳細な機能説明 | 一目で機能の幅広さを示す必要がある |

| 弁当グリッド | プラットフォーム、スイート、ダッシュボード、実証ページ | Linear チュートリアル、ステップバイステップのフロー |

現在最も優れた実例3選

Apple (apple.com/mac)。既に上記で紹介済み。2022年後半以降のすべてのMac製品ページでは、Bentoレイアウトが採用されています。Mシリーズのチップセクションは最も洗練されたパターンで、チップのビジュアルにはメインセル、ベンチマークやユースケースには小さめのセルが使用されています。共通のダーク背景、共通の角丸、一貫した内部パディングが採用されています。チップは常に視覚的に主役となるように配置されています。これは編集方針によるもので、グリッドレイアウトによるものではありません。

Linear (linear.app/features)。開発者ツールにもBentoレイアウトが採用されています。機能紹介ページは4列構成のBentoレイアウトを積み重ねたもので、主要機能（課題追跡、プランニング、構築）には2x2セル、その他の機能には1x1または1x2セルが使用されています。 Linearのバージョンは、その抑制された構成で有名です。製品のスクリーンショットのみを使用し、ストックイラストは一切使わず、ラベルは等幅フォントで統一しています。まるで仕様書のような印象を与えるのは意図的なものです。

Vercel (vercel.com) Vercelのホームページのbentoは、ハイブリッド版です。イラスト、製品のスクリーンショット、テキストのみのセルが混在しています。すべてのセルが同じビジュアル言語（同じ背景、同じ半径、同じ間隔のリズム）を共有していれば、1つのbento内でメディアを混在させても違和感がないことを証明しています。

3つの異なる業界、3つの異なるトーン、しかし根底にあるパターンは同じです。このパターンは流行ではありません。特定のコミュニケーション課題を解決するためのレイアウトです。「私たちは多くのことを手がけています。ここに一目でわかるように表示します。興味のあるものを選んでください。」

グリッドの計算（見た目よりシンプル）

ほとんどの弁当グリッドは、2つの基本構造のいずれかを使用します。

3列弁当 狭いセクション、お客様の声、機能のハイライトなどに適しています。典型的なパターン：

• 2x1のヒーローセル1つ（2列1行）
• 1x1のセル1つ（1列1行）
• 2行目に1x1のセル2つ
• 縦方向の重みが効果的な1x2のセル1つ

4列弁当 幅の広い、コンテンツ全体を表示するのに適しています。典型的なパターン：

• 2x2のヒーローセル1つ
• その横に1x1のセル2つを縦に並べる
• 下部に2x1のセル1つを配置する
• 行を閉じる1x1のセル1つ

CSS Gridでは、約20行でBentoグリッドを作成できます。

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.bento-cell-hero { grid-column: span 2; grid-row: span 2; }
.bento-cell-wide { grid-column: span 2; }
.bento-cell-tall { grid-row: span 2; }
.bento-cell-default { grid-column: span 1; grid-row: span 1; }

子要素にクラスを適用すると、グリッドが自動的に配置されます。計算は実にシンプルです。Bentoを難しくしているのはグリッドそのものではなく、どのセルに重み付けをするかという編集上の判断です。

崩れないレスポンシブルール

デスクトップ版Bentoは簡単です。モバイル版Bentoで多くの実装が失敗します。

間違いは、グリッドの形状を維持したまますべてを縮小することです。幅390pxでは、4列のBentoは90pxの列4つになり、使い物になりません。セルに実際のコンテンツを配置することができません。

ルール：リフロー、縮小しない。 モバイルでは、Bentoグリッドは1列に縮小されますが、階層構造を維持するためにセルの順序が変更されます。

• ヒーローセルが最上部に移動します（モバイルでは視覚的に最もインパクトの大きいセルが最初に表示されます）。
• 2x1幅のセルは、全幅の1列セルになります。
• 1x2高さのセルは、縦方向に引き伸ばされず、標準高さのセルになります。
• 順序は、デスクトップでの視覚的な位置ではなく、重要度に基づいて再決定されます。

CSS Gridを使用すると、grid-template-areasとメディアクエリで簡単にこの処理を実行できます。または、Tailwindを使用する場合は、lg:プレフィックスを使用して、大きな画面でのみBentoスパンを適用し、デフォルトのモバイルスタックに処理を任せます。

| ブレークポイント | グリッドの動作 |

|------------|---------------|

| デスクトップ (1280px以上) | フルBento、4列、スパン可変 |

| タブレット (768～1279px) | 簡略化されたBentoレイアウト、一部スパンを含む2カラム |

| モバイル (768px未満) | コンテンツの優先度で並べ替えられたシングルカラム |

テスト：390pxの画面幅では、各セルはズームや横スクロールなしでコンテンツが読める高さでなければなりません。そうでない場合は、ビューポートではなくセル自体に問題があります。

レイアウトの詳細をもっと知りたい場合は、Brainy 論文をご覧ください。機能一覧の羅列で訪問者を失わないようにするためのランディングページ、Brainy を雇用するもご覧ください。実際のレイアウト、実際のコピー、実際のコンバージョンを実現しています。

Bentoグリッドが不適切な場合

Bentoは万能ではありません。使い方を誤ると、本来ゆったりとしたレイアウトが必要なコンテンツをセルに無理やり押し込んでしまうことになります。

Bentoがうまく機能しないケース：

• コンテンツが順序立てて構成されている場合。 ステップバイステップのチュートリアル、オンボーディングフロー、事例紹介などは、順序立てて配置する必要があります。Bentoでは、読み順が考慮されません。

• すべての要素が均等な場合。 3つの要素が本当に同等の重要度であれば、3列のレイアウトが適切です。Bentoでは内部階層構造が必須です。Bentoセルにフラット化すると、同等の要素がランダムに並べられているように見えてしまいます。

• 各セルに奥行きが必要な場合。 機能の説明に200語かかる場合、Bentoセルには収まりません。セクションとして記述し、セルに収めないでください。

• 強力なビジュアル要素がない場合。 Bentoグリッドは、セルにビジュアル要素（グラフ、製品写真、イラストなど）が含まれている場合に最も効果的です。テキストのみのBentoは、窮屈な新聞レイアウトのように見えます。

判断基準：

| コンテンツは… | 使用方法 |

|--------------------|-----|

| 機能の重みが不均等なプラットフォーム | Bentoグリッド |

| 3つの同等の並列機能 | 3列の行 |

| ナラティブな説明 | 機能スタック（全幅行） |

| ステップバイステップのフロー | 番号付きセクション |

| ダッシュボードスタイルの校正ページ | Bentoグリッド |

| 1つの機能の詳細解説 | ヒーローセクションとサポートセクション |

デザイナーのスターターパターン

これをベースラインとして使用してください。ここから編集してください。ゼロから構築しないでください。

セクション構造：

1. グリッド上部の全幅見出し（1行、インパクトのある見出し）
2. 4列グリッド、合計3～5行
3. ヒーローセル（2x2）、視覚的に最も強力な要素
4. サポートセル4～6個、多様なコンテンツタイプ
5. CTAまたは証明のためのオプションの全幅クロージングセル

セルコンテンツのルール：

• 1セルにつき1文、最大。段落が必要な場合は、セルが小さすぎます。

• 1つのセルに1つのアセット（グラフ、イラスト、スクリーンショット、指標、お客様の声、ロゴなど）を配置します。

• 内側のパディングは一定に保ちます（通常24～32px）。

• 角丸は一定に保ちます（通常12～16px）。

• 色の使用は控えめにします。ほとんどのセルは背景色を共有します。1つか2つのセルは反転色またはアクセントカラーを使用できます。

モバイル表示順序：ヒーローセルが最初に表示され、次に最も重要な3つの補助セル、最後に残りのセルが表示されます。

次のランディングページで、Bentoグリッドのセクションを1つ公開してみてください。違いを実感できるでしょう。

よくある質問

Bentoグリッドは単なるトレンドですか？

いいえ。トレンドは1～2年続きます。Bentoグリッドは2022年以降、主要な製品ページで主流となっており、現在もその地位を維持しています。Bentoグリッドは特定のコミュニケーション上の課題を解決するためのレイアウトパターンであり、その課題は今後も解消されることはありません。

ブログやコンテンツサイトでBentoグリッドを使用できますか？

まれです。Bentoは製品やマーケティングのプレゼンテーションに適しています。ブログ記事は時系列順に並べる必要があります。記事ハブや注目コンテンツのグリッドではBentoスタイルの不均等なセルを使用できますが、記事本文には使用すべきではありません。

BentoグリッドとMasonryの違いは何ですか？

Masonryはアルゴリズムに基づいています。セルはコンテンツの高さに基づいて自動的に配置されます。Bentoは構成に基づいています。セルはデザイナーが重要度に基づいて意図的に配置します。MasonryはPinterestに適しています。Bentoは製品に適しています。

Bentoグリッドはダッシュボードに適していますか？

はい、ダッシュボードのウィジェットの重みが均等でない場合は適しています。主要な指標が1つ、複数の補助的な指標、グラフ、ログ、最近のアクティビティフィードなどです。これはまさにBentoの形状です。Linearのプロジェクトビュー、Vercelのデプロイメントダッシュボードを参照してください。

Bentoグリッドにはいくつのセルが必要ですか？

4つから8つです。 4つ未満だとグリッドとして認識されなくなり、8つを超えると壁のように感じられるようになります。7つが一般的な最適値です。

機能行の作成をやめましょう

過去3年間に構築されたSaaSサイトをざっと見てみてください。3列構成の機能行がいくつあるか数えてみましょう。弁当スタイルのセクションも数えてみてください。その数は毎年入れ替わっているはずです。

それには理由があります。機能行は、もはや私たちが語らなくなったストーリー、つまり「3つの同等の機能」というストーリーのためのレイアウトだったのです。現代の製品には、3つの同等の機能はありません。プラットフォーム、ヒーロー機能、それを支える機能群、証明ポイント、そしてクロージングCTAがあります。この構成は弁当スタイルに合致し、行には合いません。

現在お使いのサイトで、まだ機能行が残っているページを1つ選びましょう。そのセクションを弁当スタイルのグリッドに再設計してください。最も強力な機能をヒーローセルに配置し、証明ポイントを補助セルに配置し、1行の差別化ポイントを別のセルに配置します。そして、公開しましょう。

滞在時間の増加、離脱率の低下、そしてページが実際に効果を発揮する様子を実感してください。機能行の作成はやめましょう。