「サイトの情報をスッキリ整理したいけれど、単調なカードが並ぶだけの画面から抜け出したい……」と感じたことはありませんか？
いま国内外のWebデザインやアプリUIで主流となっているのが、日本の弁当箱から着想を得た「Bentoグリッド（Bento UI / ベントーグリッド / 弁当UI）」です。
この記事では、デザインの引き出しになる秀逸な参考サイト事例から、Figmaで作る際の余白計算ルール、スマホで破綻させないレスポンシブ設計のコツまで、現場目線で分かりやすくお届けします。
1. Bentoグリッド（Bento UI）とは？ なぜ今選ばれるのか
日本のお弁当箱の仕切りのように、画面を大小さまざまな四角いカード（モジュール）で隙間なく区切り、多種多様な情報をパズルのように整理して伝えるレイアウト手法です。Appleの製品スペックページやLinear等のWebサイトで採用され、スマホでのレスポンシブ組み替えや認知的チャンキングに極めて優れています。
Bentoグリッドとは、大小さまざまな四角いカード（モジュール）をパズルのように隙間なく敷き詰めるレイアウト手法です。
従来の均等なグリッドレイアウトと比べ、主に以下の3つの強みがあります。
- 1. 情報の全体像が一瞬で掴める
異なる情報群を枠ごとに整理して見せる「認知的チャンキング」が働くため、読者が迷わず全体を把握できます。 - 2. 視覚的な優先順位（強弱）をつけやすい
最も見せたいメイン機能のカードを大きくし、サブ機能を小さく組むことで、自然に視線を誘導できます。 - 3. スマホ画面との親和性が高い
カード単位で完全に独立しているため、スマホ表示時に「1列の縦積み」へ美しく組み替えやすい構造です。
ただ四角を並べるだけではなく、「何を主役にして、何を脇役にするか」という情報の階層設計が自然と形になるのが、このレイアウトの優れた点だと感じています。
2. Bento UIの秀逸な参考サイト＆ギャラリー集
「実務でBento UIを組みたいけれど、どんなレイアウトパターンがあるのか参考にしたい」という方に向けて、世界中の秀逸な事例が集まる特化型ギャラリーサイトと、代表的な実プロダクトの活用例をご紹介します。
① Bento UI特化ギャラリーなら「BentoGrids」一択
国内外のBento UIレイアウトを体系的にインプットしたいなら、世界最大の特化型ギャラリーであるBentoGrids（bentogrids.com）をチェックするのが最もおすすめです。
- 「Web Design」「Graphic Design」「Animation」のカテゴリ絞り込み
WebサイトのUIにとどまらず、グラフィックデザインや動的なアニメーションを取り入れたBentoレイアウトなど、目的の表現に合わせてワンクリックで一覧表示できます。 - 「Dark」「Light」のカラースタイル切り替え
上部のトグルでダークモードとライトモードを瞬時に切り替えられるため、近年のSaaSに多いダークUIや、清潔感のあるライトUIの余白・コントラスト設計をピンポイントに観察できます。 - カード比率やガター設計のインスピレーションに最適
世界中の秀逸なBentoレイアウトだけが厳選されているため、カードの分割比率（2×1や1×1）や余白（Gap）の取り方を一覧で比較・インプットするのに役立ちます。
② 代表的な実プロダクトの活用事例
- Apple（製品スペック紹介）: Bentoグリッドを一躍世界的なトレンドへと押し上げた代表例。数値を極太タイポグラフィで強調しつつ、端末画像を枠からはみ出させることで平坦な四角にダイナミックな奥行きを生んでいます。
- Linear（プロジェクト管理ツール）: ダークモードを基調とした洗練されたSaaS UI。極細ボーダーと微細なグラデーションで仕切り、高密度の機能群をノイズなく整理しています。
3. Figmaで美しく作る「余白とグリッド」の計算ルール
Bentoグリッドを感覚だけで並べてしまうと、カード同士のラインが揃わずチグハグな印象を与えてしまいます。現場では「ベースユニット」と「ガター」の計算を徹底するのがおすすめです。
- ベースユニットとガターの比率
たとえば3列グリッドで「2マス分結合した大きなカード」を作る場合、横幅は単なる2倍ではなく「（1マスの幅 × 2）＋ ガターの幅」になります。この足し算を合わせないと、上下のカードの端が微妙にズレてしまいます。 - 余白（Gap）は8の倍数で固定
カード同士の隙間（ガター）やカード内のパディングは、16pxまたは24pxで統一します。角丸（Border Radius）も16pxや20pxなど同系統の比率に設定することで、全体の一体感が高まります。 - Auto Layoutの入れ子構造
Figmaで組む際は、縦並びと横並びのAuto Layoutフレームを柔軟にネストし、各カードの幅指定を「Fill container」に設定しておくと、レスポンシブの検証が非常にスムーズになります。
4. CSS Gridを使ったレスポンシブ実装コード
フロントエンドへの引き継ぎや実装時は、CSSの display: grid を使用するのが最もスマートです。
/* PC表示：3列のBentoグリッド */
.bento-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* メインカード：2列分を結合 */
.bento-card--featured {
grid-column: span 2;
}
/* スマホ表示：1列にスタック */
@media (max-width: 768px) {
.bento-container {
grid-template-columns: 1fr;
gap: 16px;
}
.bento-card--featured {
grid-column: span 1;
}
}スマホ表示時のポイントは、「HTMLのソースコード順で最も重要なカードを先頭に置いておくこと」です。画面幅が狭まって1列に並んだ際、一番伝えたい価値がファーストビューに自然と収まるようになります。
5. 実務で遭遇した失敗と「Grid Grazing（視線迷子）」の防ぎ方
魅力的なBentoグリッドですが、過去に自分がダッシュボードを設計した際、手痛い失敗をしたことがありました。
とにかく情報を四角い枠に敷き詰めたところ、ユーザーテストで「全部が目立っていて、どこから見ればいいのか分からない」という指摘を受けてしまったのです。
デザイン心理学では、カードの強弱がないために視線があちこち彷徨ってしまう現象を「Grid Grazing（グリッド放牧型スキャン）」と呼びます。
これを防ぐための対策は以下の2つです。
- 主役カードを「1枚だけ」決める
全体の25〜40%程度の面積を1つのキラーカードに割り当て、視線の最初の着地点（アイキャッチ）を作ります。 - 背景色や塗りにメリハリをつける
すべてのカードを同じ白やグレーにするのではなく、主役カードだけにアクセントカラーや淡いグラデーションを敷くことで、優先度を一瞬で直感させることができます。
6. まとめ：Bentoグリッドを使いこなす
Bentoグリッドは、単なるトレンドの四角形ではなく、「複雑な情報をわかりやすく届けるための強力なレイアウト手法」です。
- 参考にする: AppleやLinearのように、強弱とマイクロインタラクションを観察する。
- 計算する:
(ベースユニット × N) ＋ ガターの計算を守り、ラインのズレを防ぐ。 - 主役を作る: Grid Grazingを避けるため、全体の視線を誘導するメインカードを1つ決める。
「情報量が多くて画面が散らかりがち……」という場面に出会ったら、ぜひ今回のルールや事例を参考にBentoグリッドを取り入れてみてください。
次のステップ：あわせて深掘りしたい知見
Bentoグリッドの発展形や、UIの質感・触感表現をさらに学びたい方は、以下の記事もぜひ参考にしてみてください。
