# Bento Grid (ベントーグリッド)

> Divides different kinds of information into independent boxes, giving the whole picture at a glance.

> JA: 異なる種類の情報を独立した箱へ分け、ひと目で全体像をつかませる。

- 分類: 情報設計 / 種類: レイアウト / 時代: 2020s
- 辞典: https://indexstyle.org/styles/bento-grid（IndexStyle No.52）

## 視覚的特徴

- 大小のカード
- 整列した隙間
- 一画面の要約
- モジュール

## 意図

信頼 / 親密 / 技術

## 向いている用途

- 複数機能を一つの物語として紹介する
- 情報量を保ちながら親しみやすく見せる

## レシピ

- 文字: 素直なサンセリフ。数字や短見出しを大きく
- 構成: 4〜6列に大小カードを敷き詰める
- 素材: 面ごとに役割を変え、装飾はカード内に限定
- 色の手がかり: #e8e7e1 / #8dd5ba / #20211e

## 注意（表層模倣を避ける）

すべて同じカードにしない。重要度で面積と密度を変える。

## 関連

- Swiss（スイス・スタイル）: https://indexstyle.org/styles/swiss
- Glassmorphism（グラスモーフィズム）: https://indexstyle.org/styles/glassmorphism
- 研究対象: modular dashboard layouts / product storytelling grids

## 出典

- 情報源: Apple Developer — MosaicLayout — https://developer.apple.com/documentation/uikit/customizing-collection-view-layouts
- ベントーグリッドの実例集（bentogrids.comより引用） — https://bentogrids.com/

JSON: https://indexstyle.org/api/styles/bento-grid