Bento は「弁当箱」をメタファーに UI を組み立てます。モジュール式グリッドがコンテンツを大小さまざまなカードブロックに切り分け、ブロック間は統一された間隔と角丸で保たれ、情報はコンパクトなマス目の中にそれぞれ収まります。グレーブルー（#80A1C1）を冷静なメインカラーとし、階層は装飾ではなくサイズと余白で区別します。プロダクト機能の一覧、ダッシュボード、個人ページなど「ひと目で全体を把握する」レイアウトが求められるシーンに適しています。
Bentoレイアウトと構造
プロンプトテンプレート
基本テンプレート
Design a Bento-inspired interface. Colors: #80A1C1, #16A34A, #D97706, #DC2626 with #80A1C1 accent. Typography: #FAD4C0.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Bento aesthetics. Use Bento color identity with #80A1C1 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Bento style. Use Bento color identity with #80A1C1 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Bento design language. Use Bento color identity with #80A1C1 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Bento visual identity. Use Bento color identity with #80A1C1 accents. Compelling, conversion-focused.
使用例
Bento アプリ
WebBuild a web app with Bento design language and #80A1C1 color system.
Bento ダッシュボード
ダッシュボードCreate a dashboard using Bento style with data visualization and #FAD4C0 typography.
✅ 適した用途
- レイアウトのデモ
- プロダクト機能の一覧ページ
- 個人ページとポートフォリオ
❌ 適さない用途
- 長文を読むページ
- 没入型の動画再生ページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。