いま国内外のWebデザインやアプリUIで主流となっているのが、日本の弁当箱から着想を得た「Bentoグリッド（Bento UI / ベントーグリッド / 弁当UI）」です。

この記事では、デザインの引き出しになる秀逸な参考サイト事例から、Figmaで作る際の余白計算ルール、スマホで破綻させないレスポンシブ設計のコツまで、現場目線で分かりやすくお届けします。

1. Bentoグリッド（Bento UI）とは？ なぜ今選ばれるのか

Bentoグリッドとは、大小さまざまな四角いカード（モジュール）をパズルのように隙間なく敷き詰めるレイアウト手法です。

従来の均等なグリッドレイアウトと比べ、主に以下の3つの強みがあります。

• 1. 情報の全体像が一瞬で掴める

異なる情報群を枠ごとに整理して見せる「認知的チャンキング」が働くため、読者が迷わず全体を把握できます。

• 2. 視覚的な優先順位（強弱）をつけやすい

最も見せたいメイン機能のカードを大きくし、サブ機能を小さく組むことで、自然に視線を誘導できます。

• 3. スマホ画面との親和性が高い

カード単位で完全に独立しているため、スマホ表示時に「1列の縦積み」へ美しく組み替えやすい構造です。

ただ四角を並べるだけではなく、「何を主役にして、何を脇役にするか」という情報の階層設計が自然と形になるのが、このレイアウトの優れた点だと感じています。

2. 秀逸なBento UI参考サイト事例3選

実務でレイアウトを組む際、まずチェックしておきたい代表的な参考サイトをご紹介します。

• Apple（製品紹介ページ）

Bentoグリッドを一躍世界的なトレンドへと押し上げた代表例です。スペック数値を強調しつつ、端末のビジュアルをカード枠からはみ出させることで、ダイナミックな奥行きを作っています。

• Linear（プロジェクト管理ツール）

ダークモードを基調とした洗練されたBento UIの代表例です。極細ボーダーと微細なグラデーションで仕切り、密度の高い機能群を破綻なく1画面に収めています。

• Raycast（ランチャーアプリ）

拡張機能の豊富さを伝えるためにBentoグリッドを活用しています。カードごとに異なるマイクロインタラクションが仕込まれており、「触って試したくなる体験」をWeb上で成立させています。

【2026年最新】UIデザイン参考サイト10選！国内アプリ・Webの定番ギャラリーまとめ

現役UIデザイナーが実務で愛用している国内外の優れた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グリッド */\n.bento-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 24px;\n}\n\n/* メインカード：2列分を結合 */\n.bento-card--featured {\n  grid-column: span 2;\n}\n\n/* スマホ表示：1列にスタック */\n@media (max-width: 768px) {\n  .bento-container {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n  \n  .bento-card--featured {\n    grid-column: span 1;\n  }\n}

スマホ表示時のポイントは、「HTMLのソースコード順で最も重要なカードを先頭に置いておくこと」です。画面幅が狭まって1列に並んだ際、一番伝えたい価値がファーストビューに自然と収まるようになります。

5. 実務で遭遇した失敗と「Grid Grazing（視線迷子）」の防ぎ方

魅力的なBentoグリッドですが、過去に自分がダッシュボードを設計した際、手痛い失敗をしたことがありました。

とにかく情報を四角い枠に敷き詰めたところ、ユーザーテストで「全部が目立っていて、どこから見ればいいのか分からない」という指摘を受けてしまったのです。

デザイン心理学では、カードの強弱がないために視線があちこち彷徨ってしまう現象を「Grid Grazing（グリッド放牧型スキャン）」と呼びます。

これを防ぐための対策は以下の2つです。

• 主役カードを「1枚だけ」決める

全体の25〜40%程度の面積を1つのキラーカードに割り当て、視線の最初の着地点（アイキャッチ）を作ります。

• 背景色や塗りにメリハリをつける

すべてのカードを同じ白やグレーにするのではなく、主役カードだけにアクセントカラーや淡いグラデーションを敷くことで、優先度を一瞬で直感させることができます。

グラデーションカラーがダサい原因は？Figmaで濁らない配色ルール【2026】

Bentoグリッドの主役カードを際立たせる「ソフトグロー」や、濁らない美しいグラデーションの作り方を解説します。

6. まとめ：Bentoグリッドを使いこなす

Bentoグリッドは、単なるトレンドの四角形ではなく、「複雑な情報をわかりやすく届けるための強力なレイアウト手法」です。

• 参考にする: AppleやLinearのように、強弱とマイクロインタラクションを観察する。
• 計算する: (ベースユニット × N) ＋ ガター の計算を守り、ラインのズレを防ぐ。
• 主役を作る: Grid Grazingを避けるため、全体の視線を誘導するメインカードを1つ決める。

「情報量が多くて画面が散らかりがち……」という場面に出会ったら、ぜひ今回のルールや事例を参考にBentoグリッドを取り入れてみてください。

次のステップ：あわせて深掘りしたい知見

Bentoグリッドの発展形や、UIの質感・触感表現をさらに学びたい方は、以下の記事もぜひ参考にしてみてください。

2026年版 Bento Grid 2.0の全貌。ただの「四角形」を脱却するUX/UI設計の戦略と実践

単なる四角形の配置から一歩進んだ、次世代のBento Grid 2.0の設計パターンと実践手法を徹底解説します。

The post Bentoグリッド（Bento UI）とは？参考サイト事例とFigmaでの作り方 first appeared on デザペディア.