こんにちは！
UIデザイナーのYunyです。
突然ですが、こんな経験はありませんか。
最近、Webサイトやスマホの画面で、四角いカードがきれいに並んだデザインをよく目にしませんか？
「お弁当箱みたいで可愛い！」と思って、自分でも真似してFigmaやブログのレイアウトで四角い箱を並べてみたものの、「なぜかごちゃごちゃして素人っぽく見える…」と悩んだ経験はありませんか？
「余白のサイズもバラバラだし、なんだかスッキリしないな…」と、何度も並べ直してはため息をついてしまったりして。
実は、あのすっきり整って見えるデザインの裏側には、単なる「四角を並べる」だけではない、緻密なルールと人間心理が隠されているのです。
このレイアウトは、その見た目の通り「Bento（弁当）グリッド」（またはBento UI）と呼ばれています。
今回は、Bentoグリッドの歴史や計算ルール、そして私たちの日常の片付けにも応用できる「すっきり整理する知恵」を、等身大の視点でお届けします！
1. 名前の由来はお弁当箱？Bentoグリッドが広まった背景
Bentoグリッドの歴史を少し見ていきましょう。
Bentoグリッドという名前は、その名の通り日本のお弁当箱の「仕切り」から着想を得て名付けられました。しかしその技術的なルーツをたどると、実は初期のウェブの表示制限から始まったものだったのです。
初期のウェブデザインでは、今のように自由なレイアウトを作ることができませんでした。
そのため、テーブル（表組み）タグを使って「すべての情報を四角い箱に配置する」しかありませんでした。技術的な制限から生まれた、ごく自然な構造だったわけですね。
そこから現代のグリッドシステムへとつながる大きな転換期となったのは、2010年のことでした。
マイクロソフトがモバイル専用OS「Windows Phone 7」で取り入れた「Metroデザイン」です。
単色の四角いパネル（ライブタイル）を敷き詰めたこのデザインは、デジタルならではの整理された美しい見せ方を提示しました。
その後、2010年代半ばには画像共有サービスのPinterest（ピンタレスト）が、高さの異なるカードを並べる「メーソンリーグリッド」を普及させ、カード型の見せ方が一般的になります。
そして2020年代初頭、Appleが製品のスペック紹介や環境への取り組みページでこのレイアウトを大きく採用したことで、デザインの標準手法として一気に広がりました。
なぜここまで普及したのでしょうか。
それは、スマートフォンやスマートウォッチ、さらにはApple Vision Proなどの新しい端末に至るまで、画面のサイズが変わっても「四角い箱を並べ替えるだけ」で美しく崩れずに表示できる、高いレスポンシブ（適応性）があったからですね。
2. なぜ私たちは「四角い仕切り」に心地よさを感じるのか？
では、なぜ私たちはこの四角い仕切りを見ると、気持ちがいいと感じるのでしょうか。
ここには、人間の脳の仕組みが関係しています。
私たちの脳は、たくさんの情報が一度にバラバラに散らばっていると、どれを見ていいか迷ってストレスを感じてしまいます。
これは、脳が一度に処理できる情報の量に限界があるためです。
Bentoグリッドは、情報を明確な四角い枠で囲んで「区切って配置」します。
これによって、無意識のうちに情報がグループ分けされて脳に届くため、スクロールして長文を読まなくても、一目で全体を把握できます。これを認知心理学で「認知的チャンキング」と呼びます。
また、均一なリストとは違い、Bentoグリッドはカードの大きさ（面積）で情報の優先順位を決めます。
人間は「一番大きな面積の箱」に自然と視線が向くため、つくり手が最も見せたい部分に優先して注目を集めることができるのです。
日常の中のBentoグリッド
これは、仕事のデスクの上で「文房具のトレイ」を使うようなものですね。
ペン、クリップ、付箋をそれぞれのトレイに分けて入れるだけで、散らかって見えなくなり、必要なものがすぐに見つかります。
この「物理的な境界線」が、私たちの脳にすっきりした印象と安心感を与えてくれるのではないでしょうか。
3. 美しさを支える「数学」と、窮屈さを感じさせない「余白」
Bentoグリッドが美しく見えるのは、感覚で作られているのではなく、裏側で「基準となる寸法」と「カード同士の隙間」があらかじめ計算されているからです。
例えば、単純に「2つのマスを並べる」だけでも、それぞれのマスの幅の合計に、間の隙間のサイズをぴったり足し合わせるような計算が必要になります。この計算ルールが守られているからこそ、全体のラインがきれいに揃い、すっきりと整って見えるのですね。
また、1つのカードの中身も、主役となる写真などのビジュアルを約60〜70%、短いタイトルを20〜30%、説明文を10〜20%といったように、配置の比率が整理されています。
カードの中に「十分な余白」を残すことで、どれだけ情報が多くても窮屈さを感じさせないデザインに仕上がります。
4. 弱点から学ぶ「使い分け」の知恵
しかし、Bentoグリッドはすべてのデザインに適しているわけではありません。
Bentoグリッドには明確な弱点もあります。
それは、視線が四方八方のカードに散らばる**「Grid Grazing（グリッド放牧型スキャン）」**という現象が起きることです。読者に「1から順番に読ませる」ストーリー構築には向いていません。
そのため、商品の良さを順番に伝えて購入を促すランディングページや、複雑な説明が必要な高額な商品ページでBentoグリッドを使いすぎると、かえって読む順番が分からなくなり、成約率を下げてしまう原因になります。
社内システムでの苦い思い出
実は私も以前、社内でみんなが使う業務管理システムの画面UIを、このBentoグリッドを使ってリニューアルしたことがあります。それまでは古いリスト形式の味気ない画面だったのですが、情報ごとに四角いカードで区切ってすっきりと整理したところ、メンバーからは「見やすくなった！」「今っぽくて仕事のテンションが上がる！」と大好評でした。
ところが、実際に業務の処理速度や使いやすさのアンケート結果などを見てみると、数値としては実はそこまで向上していなかったのです。むしろ、画面をあちこち見回す必要が出てきて、一部からは「前のほうが一方向に視線を動かすだけで良かったから楽だったかも」という声さえありました。
そこで、以下のような「使い分け」が大切になります。
Bento UIが効果的な場面：
機能の一覧、ダッシュボード、プロフィール（bento.meなど）、スペックの紹介など、「一目でたくさんの特徴をパラパラと見せたい」とき。
非対称（アシメトリック）レイアウトが効果的な場面：
ストーリーに沿ってユーザーを説得したいとき、プレミアムなブランド価値をしっかりと伝えたいとき。
まとめ：日常の引き出しに、小さなお弁当箱を作ってみる
今回ご紹介した「Bentoグリッド」のポイントを振り返ってみましょう。
Bentoグリッドは合理的な整理手法：「認知的チャンキング」を利用して情報を整理する。
美しさを支える数学的ルール：ベースユニットとガターの関係式に沿ってサイズを厳密に決める。
使いどころの見極め：一目の分かりやすさに優れる反面、順番に読ませるストーリーテリングには向かない。
Bentoグリッドは、単に画面を飾るトレンドではなく、情報が増えすぎたときに整理するためのとても便利な仕組みです。
もし、毎日の生活が少し慌ただしく感じたり、仕事のタスクが頭の中で散らかっていると感じたら、身の回りに小さな「Bentoグリッド」を作ってみてはいかがでしょうか。
デスクの引き出しに小さな仕切りトレイを置いてみるのもいいですし、今日やるべき仕事を「午前・午後・隙間時間」という3つの箱に分けて考えてみるのもおすすめです。
実は私も、1日のタスクをこの3つの箱にざっくりと分けて、無理に詰め込みすぎないようにしています。それだけで、時間に追われる感覚が減り、心にすっきりとした余白が生まれるようになりました。
枠を決めて、そこに心地よい余白を残して収めること。それだけで、情報も、暮らしも、驚くほどすっきりと整って心地よくなるはずですよ。
終わりに
最後までお読みいただき、ありがとうございます！
「きれいだな」と感じるデザインの裏側には、それを支える数学や人間の行動心理といったきちんとした理由があります。
デザインの理由を理解することで、普段見ているサイトや、身の回りの空間が少し違って見えてくるのではないでしょうか。
これからも、生活やデザインの中に隠された心地よい仕組みの発見を一緒に楽しんでいきましょう。
それでは、良いデザインライフを！
