ベントレイアウトのプロンプト

ベントレイアウトは日本のお弁当箱にちなんで名付けられ、コンテンツをサイズの異なるグリッドセルに配置します。構造を明確に保ちながら視覚的な面白さを生み出します。セルのスパンと視覚的な階層を正確に記述することで、このモダンなレイアウトパターンを精密にコントロールできます。

---

ベントレイアウトの定義

ベントレイアウトは、セルが異なるサイズを持つグリッドです。重要なコンテンツにより多くのスペースを与えるために、一部のセルが複数のカラムまたは行にまたがります。指定すべき主要要素は以下の通りです。

• グリッドの基礎 — 例: 4×4 または 3×3 グリッド
• セルのスパンサイズ — どのアイテムが 2×2、1×1、2×1 などか
• セルごとのコンテンツ — 画像、テキスト、統計値、チャート、またはアクション
• ギャップサイズ — すべてのセル間で一貫した間隔
• モバイルでの折りたたみ方 — 小さい画面でのスタック順序

---

ベントレイアウトのテンプレート

ポートフォリオホームページのベント

Design a bento grid layout for a portfolio homepage with a 4-column foundation:
- Featured project card (2×2): full project image with overlay title and brief description
- About me card (1×1): circular profile photo and 2-line bio
- Skills card (1×2): icon list of expertise areas
- Three smaller project cards (1×1 each): thumbnail with hover overlay showing project details
- Contact/social card (1×1): icon links to GitHub, Twitter, and email
Use 16px gaps between all cells and 12px border-radius throughout.
On mobile, collapse to a single column stacked in this order:
featured project → about me → skills → projects → contact.

---

メトリクスダッシュボードのベント

Create a metrics dashboard with a bento layout:
- Top row: 4 small KPI cards (1×1 each) — one for revenue, users, orders, and conversion rate
- Middle: 1 large line chart (2×2) and 1 bar chart (2×1) side by side
- Bottom right: scrollable activity feed (2×1)
Use consistent card styling: white background, 1px light gray border, 8px radius, 16px padding.

---

コンテンツショーケースのベント

Design a content showcase bento with:
- Featured article (2×2): full cover image with overlay headline and excerpt
- Newsletter signup sidebar (1×3): email input and subscribe button
- Two smaller article cards (1×1 each): thumbnail, title, and category tag
Gap: 12px. Cards: rounded corners (8px), subtle shadow.

---

プロダクトフィーチャーのベント

Create a product features showcase with a 4-column bento grid:
- Top banner (4×1): headline, brief description, and illustration side by side
- Four feature cards (1×1 each) below: icon at top, feature title, 2-line description
Use a consistent color accent on each feature icon. Gap: 16px.

---

メディアギャラリーのベント

Design a media gallery bento with a 4-column grid:
- Main large image (3×2, top-left)
- Wide accent image (3×1, top-right stacked below main, spanning 3 columns)
- Two smaller images filling remaining cells (2×1 and 1×1)
On hover, each image shows an overlay with the image title and photographer name.

---

ベントデザインの原則

原則	プロンプトへの適用方法
視覚的階層	最も重要なアイテムに最大のセル（2×2以上）を割り当てる
一貫した間隔	すべてのセル間で使用する単一のギャップ値を指定する
関連アイテムのグループ化	関連コンテンツを隣接するセルに配置する
モバイルフォールバック	モバイルでのスタック順序を必ず指定する
バランスの取れた構成	サイズが異なっていても、全体のレイアウトがバランス良く見えるようにする

---

ベント向けTailwind CSS

Use CSS grid with Tailwind:
- grid grid-cols-4 gap-4 for the base layout
- col-span-2 row-span-2 for the featured cell
- col-span-1 for standard cells
- On mobile: grid-cols-1 with appropriate stacking order

---