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

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

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

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つのキラーカードに割り当て、視線の最初の着地点（アイキャッチ）を作ります。
• 背景色や塗りにメリハリをつける
  すべてのカードを同じ白やグレーにするのではなく、主役カードだけにアクセントカラーや淡いグラデーションを敷くことで、優先度を一瞬で直感させることができます。

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

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

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

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

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

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

情報を詰め込みすぎず、余白を活かしてすっきりと整理するレイアウトの基本を学びたい方は、以下の書籍も手元に置いておくと役立ちます。

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

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

【2026年最新】ブループリントデザイン（Blueprint Design）とは？設計図風UIの特徴・作り方と活用事例

こんにちは！UIデザイナーのYunyです。 最近、SNSでスキのないピカピカのグラフィックを見て「綺麗だけれど、なんだか息苦しい」と感じたことはありませんか？AIが完璧な画像を瞬時に作れる今、私たちはツルッとしたデザイン …
続きを読む “【2026年最新】ブループリントデザイン（Blueprint Design）とは？設計図風UIの特徴・作り方と活用事例”

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

今回は、UIデザインの質を劇的にアップさせる「グリッドシステム」の本質と実践的な活用法について紹介します。

実は私自身、デザイナーとして駆け出しの頃は「なんとなく綺麗に見えるから」という感覚だけでレイアウトをしていました。

その結果どうなったかというと……

先輩デザイナーから「画面ごとに余白がバラバラ」「なぜここにこのボタンを置いたの？意図が伝わらない」と、真っ赤な修正指示を山のように返される毎日でした。

何度もやり直しになり、深夜まで残業しては「私にはデザインのセンスがないのかも……」と落ち込むほどのドン底を味わった苦い経験があります。

そんな「デザインがなんだかバラバラに見える…」「どこに何を置けばいいのか、自分の感覚だけで決めていて不安！」という過去の私と同じような悩みを抱えている方に向けて、当時の私が「もっと早く知っておきたかった！」と痛感したグリッドシステムの考え方やテクニックをまとめました。

この記事を読めば、明日からすぐに使えるレイアウトの基礎が身につき、迷いのないデザインができるようになるはずです！

1. グリッドシステムとは何か？──デザインの「骨格」を作る思考法

グリッドシステムとは、「事前にグリッド（格子上）の構図ルールを決めておいて運用するもの」です。

デザインツール上で格子状のガイドラインを引き、それを「骨格」として画像や見出しなどの要素を配置していくことで、ページ全体に一貫性と美しさを生み出します。

歴史と現代のUIにおける重要性

グリッドシステムの歴史は古く、1950年代の「スイス・スタイル」から生まれたと言われています。

グラフィックデザインの世界で体系化されたこの手法は、現代のWebサイトやスマートフォンアプリのデザインにおいても、レイアウトの根幹を担う必要不可欠なルールとなっています。

私が初めてグリッドシステムを本格的に導入したのは、ある大手企業のコーポレートサイト案件でした。

それまで「目分量」で作っていた私は、この「見えない骨格」に沿って要素を配置しただけで、画面全体がカチッと整うのを見て大きな衝撃を受けました。

それまでバラバラだった要素が、ルールに沿うだけで見違えるように綺麗にまとまったのを今でも覚えています。

2. なぜグリッドシステムが必要なのか？──「なんとなく」を卒業する理由

「目分量でなんとなく配置する」デザインから卒業すると、実務において以下のような絶大なメリットがあります。

3. グリッドシステムの基本──3つの基本型

実務で使い分けることが多い、代表的な3つの型を紹介します。

1. 2カラム8ブロック（初級）: シンプルなランディングページ（LP）や、スマートフォン向けのレイアウトによく使います。情報が少ない分、ダイナミックな見せ方が可能です。

2. 3カラム18ブロック（中級）: 一般的なコーポレートサイトやメディアサイトで最もよく使われる構成です。私も新規サイトを立ち上げる際は、まずこのあたりから骨組みを考え始めます。

3. 4カラム32ブロック（上級）: SaaSの管理画面や、情報量が多い複雑なダッシュボードで活躍します。細かい情報整理が必要な案件では、12カラムで細かく分割し、要素によって「4カラム分使う」「8カラム分使う」と柔軟に組み合わせる手法をよく採ります。

カラム数（分割数）が少ないほどシンプルで大胆な表現に向いており、多いほど緻密な情報整理に向いています。

4. 実践：実務で使えるグリッドの作り方

いきなり複雑なグリッドを組むと混乱してしまうため、まずは「12カラム」をベースに設定してみるのが、現在のWebデザインの主流でありおすすめです。

私がよくやる基本の手順

1. 画面サイズとマージンを決める：例えばPC向けなら横幅を1440pxなどに設定し、左右の余白（マージン）をしっかり確保します。

2. カラムとガター（溝）を設定する：デザインツール（Figmaなど）のレイアウトグリッド機能を使い、12カラムに分割します。カラムとカラムの間にある余白（ガター）は、24pxや32pxなど、8の倍数で設定することが多いです。

3. 要素を配置する：「メインコンテンツは8カラム分」「サイドバーは4カラム分」というように、グリッドに合わせてブロックを配置していきます。

お恥ずかしい話ですが、初心者の頃の私は「カラム」だけを意識して「ガター（要素間の余白）」を完全に無視していました。

その結果、要素同士がギチギチにくっついた、窮屈で素人っぽいデザインになってしまったんです。

先輩に「ガターの幅を一定（例えば24px）に保ってみて」とアドバイスされ、その通りに直した瞬間、画面にしっかりとした余白が生まれ、一気にプロが作ったような洗練されたレイアウトに変わりました。

5. 最近のトレンド：弁当グリッド（Bento Grid）

最近、Appleの製品ページなどでよく見かける、大きさの異なる四角い「箱」を綺麗に敷き詰めたようなデザイン。それが「弁当グリッド（Bento Grid）」です。日本の「お弁当箱」の仕切りからインスピレーションを得たと言われています。

実際に案件で取り入れて感じたメリット

6. よくある失敗と対処法──「グリッドの罠」に気をつけよう

グリッドは強力な味方ですが、ルールに縛られすぎると陥る罠もあります。

デザインが退屈になる

グリッドの便利さに感動した私が次に陥ったのは、「ルール絶対主義」という罠でした。すべてをグリッドの中にきっちり収めようとするあまり、どこか事務的で単調なデザインになってしまったんです。そんな時は、あえて画像をグリッドから少しはみ出させて配置したり、背景のあしらいでリズムを作ったりして意図的な「崩し」を入れます。

まずは基本を守ってから崩す

ただし、最初からグリッドを無視して感覚で配置するのはNGです。「一度ルールの通りに完璧に作ってから、意図的に崩す」のがプロのテクニックです。

まとめ

今回紹介したグリッドシステムは、UIデザインのクオリティと作業効率を同時に底上げしてくれる、一生モノのスキルです。

かつての私のように「なんだかデザインが垢抜けない」「レイアウトに時間がかかりすぎる」と悩んで、自分のセンスを疑ってしまっている方は、ぜひ「12カラムのグリッドを引く」ところから始めてみてください。

配置の迷いがなくなることで、本来デザイナーが一番時間をかけるべき「ユーザー体験（UX）の向上」や「魅力的なビジュアル作り」に集中できるようになりますよ！

終わりに

この記事が、過去の私と同じようにレイアウトで悩む方々のスキルアップに少しでも役立てば幸いです。

それでは、良いデザインライフを！

The post “なんとなく”を卒業する──グリッドシステムが教える、UIデザインの基本 first appeared on デザペディア.