リストレイアウトのプロンプト

リストレイアウトは実際のアプリのあらゆる場所で使われています。正確に記述する方法をマスターすれば、どんなデータ一覧に対しても、見やすくスキャンしやすいUIを生成できます。

---

良いリストレイアウトプロンプトの条件

テンプレートに入る前に、基本的なリストレイアウトプロンプトで指定すべき項目を確認しておきましょう。

• 左エリア — アバター、アイコン、または画像
• 中央エリア — 主要テキスト（名前、タイトル）と補足テキスト（役職、説明）
• 右エリア — アクションボタン、タイムスタンプ、シェブロン、またはトグル
• 状態の挙動 — ホバーエフェクト、アクティブ・選択状態
• 区切り線 — 行間の可視セパレーターか余白のみか

---

リストレイアウトのテンプレート

ユーザープロフィールリスト

Create a list of user profiles with circular avatar images on the left,
name and role information in the middle, and a chevron icon button on the right.
Add subtle hover effects on each row.

---

連絡先リスト

Create a contacts list with:
- User avatars on the left (circular, 40px)
- Name and job title in the center (name in bold, title in gray)
- Action buttons on the right: call icon and message icon
Use subtle hover effects for interactivity.

---

設定メニューリスト

Design a settings menu with:
- Left-aligned icons (24px, muted color) next to each setting name
- Toggle switches aligned to the right
- Section dividers between setting groups
- Subtle background highlight for the currently active setting

---

通知フィード

Create a notification feed with:
- Color-coded left borders (red for alerts, blue for info, green for success)
- Notification content and title
- Relative timestamps (e.g., "5 minutes ago") on the right
- An unread indicator dot on the left
- A dismiss (×) button on hover

---

商品リスト

Design a product list for an e-commerce app with:
- Product image on the left (48x48px, rounded corners)
- Product name and brief description in the center
- Price (bold) and rating stars below the name
- An add-to-cart button on the right
- Stock availability indicator (e.g., "In stock" in green)

---

リストプロンプトのベストプラクティス

要素	指定すべき内容
アイテムの高さ	モバイルのタッチターゲットとして最低44px
アバターサイズ	正確なピクセルサイズ（例: 「40px の円形アバター」）
区切り線	「1px border-bottom」または「余白のみ」
ホバー状態	色、背景、またはアンダーラインの変化
空の状態	リストが空のときに表示するメッセージ

---

リストと他のパターンの組み合わせ

リストレイアウトは検索バーやフィルターコントロールと自然に組み合わせられます。

Create a searchable contact list with:
1. A search input at the top that filters results in real time
2. An alphabetical section header (e.g., "A", "B") as each group starts
3. Each row: circular avatar, name, and phone number
4. A sticky header that shows the current letter as the user scrolls

---