{"id":"bento-grid","no":52,"name":"Bento Grid","ja":"ベントーグリッド","era":"2020s","family":"情報設計","kind":"レイアウト","collection":"Personal expansion 01","source":{"title":"Apple Developer — MosaicLayout","url":"https://developer.apple.com/documentation/uikit/customizing-collection-view-layouts"},"addedAt":"2026-08-16","essence":"異なる種類の情報を独立した箱へ分け、ひと目で全体像をつかませる。","cues":["大小のカード","整列した隙間","一画面の要約","モジュール"],"intents":["信頼","親密","技術"],"works":["複数機能を一つの物語として紹介する","情報量を保ちながら親しみやすく見せる"],"recipe":{"type":"素直なサンセリフ。数字や短見出しを大きく","layout":"4〜6列に大小カードを敷き詰める","material":"面ごとに役割を変え、装飾はカード内に限定"},"avoid":"すべて同じカードにしない。重要度で面積と密度を変える。","colors":["#e8e7e1","#8dd5ba","#20211e"],"motif":"bento","pair":["swiss","glassmorphism"],"study":["modular dashboard layouts","product storytelling grids"],"reference":{"status":"verified","pageUrl":"https://developer.apple.com/documentation/uikit/customizing-collection-view-layouts","credit":"Apple Developer, MosaicLayout sample","gallery":[{"imageUrl":"/quotes/bento-grid.jpg","pageUrl":"https://bentogrids.com/","credit":"ベントーグリッドの実例集（bentogrids.comより引用）"}]},"en":{"essence":"Divides different kinds of information into independent boxes, giving the whole picture at a glance.","cues":["Cards large and small","Aligned gutters","One-screen summary","Modules"],"works":["Presenting many features as one story","Staying friendly while keeping density"],"recipe":{"type":"A plain sans; oversize the numbers and short headings","layout":"Tile large and small cards on four to six columns","material":"Vary each card's role; keep decoration inside the cards"},"avoid":"Not every card equal. Vary area and density by importance."}}