「サイトの情報をスッキリ整理したいけれど、単調なカードが並ぶだけの画面から抜け出したい……」と感じたことはありませんか？
いま国内外のWebデザインやアプリUIで主流となっているのが、日本の弁当箱から着想を得た「Bentoグリッド（Bento UI / ベントーグリッド / 弁当UI）」です。
この記事では、デザインの引き出しになる秀逸な参考サイト事例から、Figmaで作る際の余白計算ルール、スマホで破綻させないレスポンシブ設計のコツまで、現場目線で分かりやすくお届けします。
1. Bentoグリッド（Bento UI）とは？ なぜ今選ばれるのか
Bentoグリッド（Bento UI / 弁当UI）とは？
日本のお弁当箱の仕切りのように、画面を大小さまざまな四角いカード（モジュール）で隙間なく区切り、多種多様な情報をパズルのように整理して伝えるレイアウト手法です。Appleの製品スペックページやLinear等のWebサイトで採用され、スマホでのレスポンシブ組み替えや認知的チャンキングに極めて優れています。
Bentoグリッドの魅力は、「異なる種類の情報を、1つの画面で美しく共存させられること」です。
- 認知的チャンキング: 関連する情報をカード単位でひとまとめにすることで、ユーザーの脳の処理負荷を劇的に減らします。
- 視覚的ヒエラルキー（優先度）の明示: 大きなカードと小さなカードを組み合わせることで、「まずここを見てほしい」という主役が一目で伝わります。
- スマホでの組み替えやすさ: 複雑なレイアウトも、モバイル表示では縦1列にシンプルにスタックできるため、レスポンシブ対応と非常に相性が良いのが特徴です。
2. デザインの引き出しを広げる！秀逸なBento UI参考事例
Bentoグリッドを取り入れる際は、世界的なトッププロダクトの構成を研究するのが一番の近道です。
Apple：製品スペックを直感させる「視覚的メリハリ」
Bentoグリッドブームの火付け役とも言えるのがAppleのプロモーションページです。チップの処理速度、バッテリー持ち、カメラ性能といった無機質になりがちなスペック情報を、グラフ、立体的な3Dレンダリング、タイポグラフィを散りばめたカードで構成しています。「一番推したい機能」のカードだけを2倍のサイズにし、視線を自然に誘導する設計はまさに教科書と言えます。
Linear：ツールバーやキーボードショートカットの「機能美」
プロジェクト管理ツール「Linear」の公式サイトは、ダークモードを基調としたミニマルなBentoグリッドの最高峰です。カードの中に実際のUIパーツ（コンポーネント）やキーボードのキートップをそのまま配置し、機能の使い心地を直感的に想起させる工夫が施されています。
3. Figmaで美しく組むためのグリッド設計と余白ルール
Bentoグリッドを作るときに一番やってはいけないのが、「適当なサイズの四角形を目分量で並べること」です。カードの隙間や高さが1pxでもズレると、途端に散らかった印象になってしまいます。
Figmaで設計する際は、以下の「ベースユニット計算式」を必ず守りましょう。
- 8ptグリッドを基準にする
カード間の余白（ガター）は16pxまたは24pxに統一します。 - カードのサイズ計算式
複数列にまたがるカードの幅や高さは、必ず以下の式で算出します。幅 = (基本カード幅 × 列数) ＋ (ガター × (列数 - 1))
このルールを守ることで、どんな組み合わせでも外側のラインがピタリと揃います。 - 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の質感・触感表現をさらに学びたい方は、以下の記事もぜひ参考にしてみてください。
