Bento Grid（弁当グリッド）とは？特徴・配色・Webデザインへの活用を解説

Bento Grid（弁当グリッド）は、2023年頃からデザインコミュニティで広く話題になったUIおよびWebデザインのレイアウト手法です。その名称は日本の「弁当箱（Bento Box）」に由来します。弁当箱の仕切りがさまざまなサイズのおかずを美しく整理するように、1つのグリッドコンテナの中に大きさの異なる角丸のカード（セル）を組み合わせることで、情報を視覚的に豊かかつ整然と配置できることがこのスタイルの本質です。

デザインコミュニティで広く知られるようになったきっかけのひとつは、Appleの製品発表イベントにおけるスライドデザインです。iPhone 15 Proなどの製品サマリーで複数の角丸カードに情報を分割して一覧化する手法が「Bento Grid」としてデザイナーの間で話題になり、広く参照されるようになりました。CSS GridやFlexboxとの親和性が高く、マルチデバイス対応が求められる現代のWebフロントエンドでも実装しやすい点も、このスタイルが注目を集めた理由のひとつとして挙げられます。SaaSの機能紹介からポートフォリオ・ダッシュボードUIまで、現在もWebデザインのトレンドとして広く参照されています。

• 色背景とカードの間に明確なコントラストをもたせるのが基本。ダークモード（漆黒の背景に濃いグレーカード）やミニマルな白背景×淡いグレーの組み合わせが主流
• 形大きなborder-radiusで角丸処理された四角形セルの集合体。正方形・横長・縦長など、異なるアスペクト比のカードを組み合わせる
• 構図非対称でありながら全体のプロポーションが整ったグリッドレイアウト。カード間の隙間（Gap/Gutter）が均一に保たれている
• 書体クリーンな幾何学的サンセリフ体やネオ・グロテスク体。カード内で数値や短いコピーを大きく強調するタイポグラフィが特徴的
• テクスチャフラット仕上げ、またはごく控えめなドロップシャドウによる階層表現。一部のカードにグラスモーフィズムやグラデーションを薄く取り入れることもある
• 構造1カード1メッセージの原則。各カードが独立したコンポーネント（マイクロレイアウト）として機能し、情報の断片をダッシュボードのように一覧化する

Responsive Dashboard | Bento Style

Link Bento Grid w/Subgrid

• ブランドApple — 製品発表イベントのプレゼンテーションにおいて、スペックや機能を複数の角丸カードで一覧化する手法が「Bento Grid」のフォーマットとして広く語られることになった
• WebLinear（リニア） — 公式サイトの機能紹介セクションがBento Gridの例としてしばしば言及される
• WebNothing（ナッシング） — 公式製品ページやNothing OSのUIで、カード的な情報整理が見られる
• WebBento.me — リンク集・プロフィールページ作成サービス。サービス名にもあらわれているように、bento風のレイアウトを用いるプロダクトとして知られる

このスタイルのビジュアルをAIで生成するためのプロンプトです。英語版はMidjourney・Stable Diffusion向け、日本語版はGemini・Adobe Fireflyで使いやすい形式になっています。そのままコピーしてお使いください。

英語プロンプト

日本語プロンプト

SaaS製品の機能紹介ページやポートフォリオ、ダッシュボードUIと相性が抜群のスタイルです。すべてのカードを同じ視覚的強度でデザインすると情報の優先順位が失われ、ユーザーの視線が迷う「認知負荷」を招くため、重要なカードを大きく取りジャンプ率をしっかり確保することが大切です。スマートフォン表示では縦一列に並ぶと単調になりがちなので、カードの高さや内容にバリエーションをもたせましょう。組み合わせるならグラスモーフィズムやミニマリズムとの親和性が高く、よりリッチでシャープな仕上がりになります。