こんにちは！
UIデザイナーのYunyです。
先日、大好きな映画の一つであるスター・ウォーズを見返していた際、コックピットの計器類が機能ごとに四角く整理されているのが目に留まりました。
複雑な操作を誤らせないための「情報の仕切り」。Webデザインのレイアウトも全く同じですよね〜、
ところで、最近よく見かける、四角いカードを美しく並べた「Bentoグリッド（Bento UI）」。
真似して箱を並べてみたものの、なぜかごちゃごちゃして見えてしまうことはありませんか？
すっきり整ったBento UIを作るには、人間の認知心理に基づいたルールが必要です。今回は、その基本と美しい作り方を実務の視点から簡潔に解説します。
- 1. Bentoグリッド（Bento UI）とは？名前の由来と背景
- 2. BentoグリッドがもたらすUIデザインの3つのメリット
- ① 認知的チャンキングによる情報整理
- ② 視覚的な優先順位の明確化
- ③ 優れたレスポンシブ対応
- 3. Bentoグリッドを美しく作る計算ルールと余白
- ベースユニットとガターの計算
- カード内の余白（インナーマージン）
- 4. FigmaでBentoグリッドを作る際の実践ポイント
- ① Auto Layout（オートレイアウト）を活用する
- ② 角丸（Border Radius）の数値を揃える
- ③ 背景色とコントラストでメリハリをつける
- 5. CSS Gridを使ったBentoグリッドの実装例
- 6. Bentoグリッドの優れた参考サイト事例
- Apple（製品ページ）
- bento.me
- Linear
- 7. 実務での体験談：ダッシュボードデザインでの失敗と気づき
- 8. Bentoグリッドの弱点「Grid Grazing」と注意点
- 9. Bentoグリッドに関するよくある質問（FAQ）
- Q. Bentoグリッドと通常のカードレイアウトの違いは何ですか？
- Q. スマホ（モバイル）表示での注意点は？
- 10. まとめ：Bentoグリッドを使いこなす
- この記事も読まれています
1. Bentoグリッド（Bento UI）とは？名前の由来と背景
Bentoグリッド（Bento UI）とは、日本のお弁当箱の「仕切り」のように、画面を四角いカードで区切って情報を配置するレイアウト手法のことです。
昔からグリッドシステム自体は存在していましたが、近年になって世界的に注目を集めるようになった大きなきっかけは、Appleが製品の紹介ページ（iPhoneやMac、Apple Watchのスペック一覧など）でBentoグリッドを全面的に採用したことです。
限られたスペースの中に、解像度やプロセッサの性能、バッテリー持続時間といった多種多様な情報をすっきりと詰め込むこの手法は、モダンなWebデザインの表現方法として定着しました。
PCやスマートフォン、タブレットなど、デバイスの画面サイズが変わってもカードの配置を組み替えるだけで美しくレスポンシブに対応できる点も、現在の開発環境にマッチしています。
2. BentoグリッドがもたらすUIデザインの3つのメリット
なぜ多くのWebサイトでBentoグリッドが採用されているのでしょうか。その主な理由は以下の3点にあります。
① 認知的チャンキングによる情報整理
人間が一度に処理できる情報量には限界があります。Bentoグリッドは、情報を明確な四角い枠（カード）でグループ分けするため、ユーザーは長い文章を読まなくても一目で全体像を把握できます。
心理学では、複数の情報を意味のあるグループにまとめることを「チャンキング」と呼びます。Bento UIは、このチャンキングを視覚的に直接表現したレイアウトと言えます。
② 視覚的な優先順位の明確化
すべてが同じ大きさで並ぶリスト表示とは異なり、Bentoグリッドはカードの面積に「強弱」をつけます。
一番大きなカードに最も見せたい要素（ヒーローコンテンツやKPI）を配置し、小さなカードには補足的な情報を入れることで、ユーザーの視線を意図した通りに誘導できます。
③ 優れたレスポンシブ対応
画面の幅に応じて、グリッドの列数を3列から2列、さらにスマートフォンでは1列へと柔軟に組み替えることができます。
カード単位でコーディングが独立しているため、レスポンシブ対応時のレイアウトの崩れが少なく、マルチデバイスでの一貫性を保ちやすいメリットがあります。
3. Bentoグリッドを美しく作る計算ルールと余白
Bentoグリッドをデザインする際、感覚でカードを並べると、ラインがズレてしまったり窮屈な印象を与えたりします。美しく仕上げるには「数学的なルール」を意識する必要があります。
ベースユニットとガターの計算
グリッドの最小単位となる「ベースユニット（仮想的な1マスの幅）」と、カード同士の間隔である「ガター（余白）」を事前に計算しておきます。
たとえば、3マスの横幅を結合して大きなカードを作る場合、その幅は単に「ベースユニットの幅 × 3」ではなく、「（ベースユニットの幅 × 3）＋（ガターの幅 × 2）」となります。このルールを厳密に守ることで、全体のラインが美しく揃います。
カード内の余白（インナーマージン）
カードとカードの隙間だけでなく、カードの内側の余白（パディング）も極めて重要です。
余白が狭すぎると情報が詰まって見え、広すぎると情報同士の関連性が薄れて見えます。
文字のサイズや画像の大きさに対して、息苦しくない程度のホワイトスペースを意識的に確保することが、洗練されたデザインにするための鉄則です。
4. FigmaでBentoグリッドを作る際の実践ポイント
実際にFigmaなどのデザインツールでBentoグリッドを組み立てる際は、以下の3つのポイントを意識するとクオリティが飛躍的に上がります。
① Auto Layout（オートレイアウト）を活用する
Figmaの強力な機能である「Auto Layout」を使用し、カード間の隙間（Gap）を統一します。
余白のルールとして「8の倍数ルール（8ptグリッドシステム）」を採用し、ガターやパディングを16px、24px、32pxなどの数値で統一することで、全体の視覚的なリズムが整います。
② 角丸（Border Radius）の数値を揃える
カードの角の丸みは、Bento UIの柔らかさやモダンな印象を形作る重要なディテールです。
親コンテナと内側の子要素の角丸を同じ数値にしてしまうと、内側の角が詰まって見え、不自然な見た目になります。美しく見せるためのコツは、ネストされた角丸の計算ルールを使うことです。
計算式：親の角丸 ＝ 子の角丸 ＋ 隙間（Padding）
たとえば、カード内のパディングが16pxで、内側の子要素（画像など）の角丸が8pxの場合、外枠であるカード本体の角丸は「8 + 16 ＝ 24px」に設定します。これによって、外側と内側のカーブが同心円状に揃い、非常に美しい角丸が表現できます。
③ 背景色とコントラストでメリハリをつける
すべてのカードを同じ背景色にする必要はありません。最も見せたい情報のカードだけを少し明るい色にするか、アクセントカラーを適用します。
また、枠線（ボーダー）を細く入れるか、ごく薄いシャドウを落とすことで、境界がすっきりとしてスマートな印象になります。
5. CSS Gridを使ったBentoグリッドの実装例
デザインをコーディングで再現する際は、CSSの display: grid を使用するのが最もスマートです。以下は、レスポンシブに対応したBentoグリッドの標準的なコード例です。
/* コンテナの設定 */
.bento-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列の均等グリッド */
gap: 24px; /* カード間の余白（ガター） */
}
/* カードの基本設定 */
.bento-card {
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 24px;
padding: 24px;
}
/* 最も強調したい大きなカード */
.bento-card-large {
grid-column: span 2; /* 2列分の幅を使用 */
grid-row: span 2; /* 2行分の高さを使用 */
}
/* タブレット用のレスポンシブ対応 */
@media (max-width: 1024px) {
.bento-container {
grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
}
}
/* スマートフォン用のレスポンシブ対応 */
@media (max-width: 768px) {
.bento-container {
grid-template-columns: 1fr; /* 1列（縦積み）に変更 */
}
.bento-card-large {
grid-column: span 1; /* 幅を1列分に戻す */
grid-row: span 1; /* 高さを1行分に戻す */
}
}このように、CSS Gridの span を利用することで、HTMLの記述順を変えることなく、画面幅に合わせたレイアウト調整が容易に行えます。
6. Bentoグリッドの優れた参考サイト事例
Bentoグリッドのデザインを学ぶ上で、非常に参考になる実例を3つピックアップしました。
Apple（製品ページ）
Bentoグリッドブームの火付け役です。スペックの数字を大きく見せるタイポグラフィの美しさに加え、カード内で動画を自動再生させたり、デバイスの写真をカードの枠からはみ出すように配置したりと、平面的なグリッドに奥行きを持たせる工夫が凝らされています。
bento.me
クリエイター向けのリンク集プロフィール作成ツールです（※2026年初頭にサービス終了）。サービス名にもある通り、自分のSNSリンクやポートフォリオをBentoグリッドのカードとしてカスタマイズして配置できる設計でした。無駄な装飾を削ぎ落とし、カードの組み合わせだけで個性を表現するそのミニマルなUIは、Bento UIの歴史的お手本として今なお高く評価されています。
Linear
モダンなプロジェクト管理ツールです。ダークテーマを基調としたWebデザインの中で、Bentoグリッドを採用しています。半透明のガラスのようなカード（グラスモフィズム）や、細いグロー（発光）エフェクトをあしらった境界線など、先進的なスタイルの作り込みが非常に秀逸です。
7. 実務での体験談：ダッシュボードデザインでの失敗と気づき
私も以前、クライアント向けの業務管理ダッシュボードをデザインした際に、このBentoグリッドを採用した経験があります。
最初は、とにかく情報を整理しようと、四角いカードにタスクや進行状況、最近のデータを均等に敷き詰めてプロトタイプを作成しました。しかし、ユーザーテストを行ったところ「どれも同じように見えて、ダッシュボードを開いた瞬間にどこから情報を読み取ればいいのか迷ってしまう」というフィードバックを受けてしまったのです。
そこで、ダッシュボードの主目的である「本日のタスク件数」と「警告アラート」のカードだけ面積を大きくし、背景に淡いアクセントカラーを配しました。これによって、ユーザーはまず左上の大きなカードに目を向け、そこから流れるように他のカードのデータを巡回するようになりました。
この経験から、「単に四角を綺麗に並べるだけではBentoグリッドは機能しない」と強く実感しました。全体のバランスを見ながら、どこに主役を作るかという意図を持った面積比の設計がデザインの成否を分けます。
8. Bentoグリッドの弱点「Grid Grazing」と注意点
非常に魅力的なレイアウト手法ですが、Bentoグリッドには明確な弱点もあります。それが「Grid Grazing（グリッド放牧型スキャン）」と呼ばれる現象です。
通常のWebサイトは、ユーザーの視線が上から下、あるいは「F」や「Z」の形に沿って動くように設計されます。しかし、サイズや色の異なるカードがランダムに並ぶBentoグリッドでは、視線が特定の順序に従わず、あちこちに散らばりやすくなります。
そのため、「1から順番に情報を読み進めてもらい、最後にアクションを起こさせる」といったストーリー性が重視されるLP（ランディングページ）や、順序立てた説明が必要なサービス紹介などには不向きです。
情報を並列に見せたい「ダッシュボード」や「製品スペック紹介」「ポートフォリオ」には適していますが、ストーリーを読ませたい場合は、従来の上から下への直線的なスクロールレイアウトを採用するべきでしょう。
9. Bentoグリッドに関するよくある質問（FAQ）
Q. Bentoグリッドと通常のカードレイアウトの違いは何ですか？
通常のカードレイアウトは、同じサイズと形式のカードが均等に（リピートして）並びます。主にブログ記事の一覧などに使われます。一方、Bentoグリッドはカードのサイズ（縦幅や横幅）が異なり、テトリスのように大小のカードを組み合わせて1つの大きなグリッドを構築する点が異なります。
Q. スマホ（モバイル）表示での注意点は？
スマホ表示では横幅が極端に狭くなるため、原則としてすべて1列の縦積みレイアウトに変換します。その際、最も伝えたい重要なカードが最上部に配置されるよう、HTMLの記述順をあらかじめ考慮して設計することが重要です。
10. まとめ：Bentoグリッドを使いこなす
Bentoグリッド（Bento UI）は、大量の情報を整理し、一目で全体を把握させるために非常に有効なレイアウトです。
- Bentoグリッドが活きる場面：ダッシュボード、ポートフォリオ、多機能な製品のスペック紹介
- Bentoグリッドを避けるべき場面：ストーリー重視のLP、順序に沿った解説が必要なコンテンツ
トレンドのデザインをただ取り入れるのではなく、「なぜこのレイアウトを選択するのか」という目的とユーザーの認知プロセスを考慮した設計を行いましょう。
この記事も読まれています
みなさんもぜひ、今後のデザインワークに役立ててみてください。
それでは良いデザインライフを！
