リストビュー
アバター＋主・副テキスト＋右端メタ／シェブロンで構成する定番のデータ一覧。行をタップすると選択状態になり、区切り線とホバーで視認性を保ちます。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- メンバー・会話・ファイルなどの一覧
- 行を選んで詳細を右や下に出す 2 ペイン構成
- アバター＋主副テキスト＋メタが定番の一覧
- 避ける場面
- 列の比較が要るデータ（テーブルが向く）
- 複数選択が主目的の一覧
- 構成要素
- アバター
- 主テキスト
- 副テキスト
- メタ
- シェブロン
- 選択バー
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab で各行（button）へ、Enter／Space で選択・解除。↑↓ で前後の行へ、Home／End で先頭・末尾へ移動
- 支援技術
ul は素のリスト＋aria-label（listbox に button を入れ子にしない）。行 button は aria-pressed で選択を伝え focus-visible あり。選択は左の藍バーと背景で示す。reduced-motion で遷移停止
- 動き
行の背景 150ms
デザインの要点
- 行の高さは 44px 以上を確保し、行全体を 1 つの button にする。文字だけ押せる一覧は指で外す
- 主テキスト 13px・副 11px・メタ 11px の 3 段で強弱を付ける。全部同じ太さだと走査できない
- 選択は左端 3px の藍バー＋薄い背景の 2 つで示す。背景だけだとホバーと区別が付かない
- listbox＋option の中に button を入れ子にしない。素のリストにして button の aria-pressed で選択を伝える
コード（コピーして使えます）
<div class="lv-wrap">
<ul class="lv-list" aria-label="メンバー一覧">
<li>
<button class="lv-row" type="button" aria-pressed="false">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#2b50c7,#7fa4ff)" aria-hidden="true">佐</span>
<span class="lv-body">
<span class="lv-primary">佐藤 花子</span>
<span class="lv-secondary">プロダクトデザイナー</span>
</span>
<span class="lv-meta">3分前</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
<li>
<button class="lv-row" type="button" aria-pressed="false">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#2a7a45,#7fc79a)" aria-hidden="true">鈴</span>
<span class="lv-body">
<span class="lv-primary">鈴木 一郎</span>
<span class="lv-secondary">フロントエンド開発</span>
</span>
<span class="lv-meta">1時間前</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
<li>
<button class="lv-row" type="button" aria-pressed="false">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#b8860b,#e0b64a)" aria-hidden="true">田</span>
<span class="lv-body">
<span class="lv-primary">田中 美咲</span>
<span class="lv-secondary">カスタマーサクセス</span>
</span>
<span class="lv-meta">昨日</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
<li>
<button class="lv-row" type="button" aria-pressed="false">
<span class="lv-avatar" style="--g:linear-gradient(135deg,#6b5bd0,#b3a3f0)" aria-hidden="true">高</span>
<span class="lv-body">
<span class="lv-primary">高橋 健</span>
<span class="lv-secondary">マーケティング</span>
</span>
<span class="lv-meta">3日前</span>
<svg class="lv-chevron" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<polyline points="5,3 9,7 5,11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</li>
</ul>
</div>