複数の情報アイテムを縦に並べる最基本のUIパターン。単なる箇条書きから、クリッカブルなナビゲーションリスト・チェックボックス付き選択リスト・ドラッグ可能な並べ替えリストまで、バリエーションは幅広い。
この記事を読むと、Ordered/Unordered/Description listの使い分け・Action listとSelection listの区別・リストとTableの使い分け・アクセシブルなリストのマークアップが自分でできるようになります。
1. UI例（Preview / Live）
このリストは、デザインシステム GUNJO の List / ListItem 実装（variant unordered/ordered、marker dot/check/circle/number、divided など）です。用途別に切り替えて確認できます（右上 Code で編集可）。
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
2. 定義（Definition）
複数の情報アイテムを縦方向に並べるUIパターン。HTML の <ul>・<ol>・<dl> が基盤。単純な表示用リストから、クリックで操作するAction list・チェックボックスで複数選択するSelection listまで、目的に応じてバリアントが分かれる。
Tableとの違い：Tableは複数の属性を列で比較する表形式。Listは単一属性のアイテムを縦に並べるだけ。2列以上の比較が必要ならTable、1列ならList。
Cardとの違い：Cardは各アイテムが独立したコンテナ（画像・説明・アクションを含む）。Listのアイテムは行として連続している。
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- 同種のアイテムを縦に並べて見せる場合（タスク一覧・メッセージ一覧・設定項目など）
- 順序に意味がある手順を示す場合（Ordered list）
- 1列のデータを一覧表示する場合
3.2 When NOT to use
- 複数の属性を並べて比較したい場合 →
Tableを使う - アイテムが豊富なコンテンツ（画像・説明文・アクション）を持つ場合 →
Cardを使う - 選択肢が3〜5個で排他選択 →
Radio Buttonを使う
3.3 代替UI（Alternatives）
- 複数列での比較 →
Table - リッチなコンテンツ表示 →
Card - タブで切り替えるカテゴリ分け →
Tabs
4. 設計判断の核（Decision Principles）
リストの種類は「アイテムに順序があるか」「クリックして何かするか」「複数選択するか」の3問で決まる。
| 問 | Yes → | No → |
|---|---|---|
| 順序に意味がある？ | <ol> Ordered list | <ul> Unordered list |
| クリックして操作する？ | Action list（<button>） | 表示のみ（<li>） |
| 複数選択する？ | Selection list（<checkbox>） | Action list または 表示のみ |
- Action listとナビゲーションリストを区別する：クリックでページ遷移するなら
<a>、ページ内アクション（削除・編集）なら<button>を使う - セパレータでグループを区切る：7項目以上になるときはセパレータやグループ見出しで意味のまとまりを作る
- 空状態を設計する：リストが空になる状態（検索結果0件・タスク完了後）のEmpty Stateを必ず設計する
5. 状態設計（States）
5.1 必須状態（Required）
- Default：アイテムが並んだ通常状態
- Hover（Action list）：ホバーで背景色変化。クリッカブルを示す
- Focus：フォーカスリングを表示
- Empty：アイテムが0件の状態。空状態メッセージ or Empty Stateコンポーネントを表示
5.2 条件付き状態（Conditional）
- Selected（Selection list）：チェックボックスがONの行を強調（背景色変化など）
- Loading：データ取得中のスケルトンUIを表示
- Disabled item：選択・操作できないアイテムをグレーアウト表示
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| Default | ✅ | アイテムの一覧 |
| Hover | ✅ | このアイテムを操作できることを示す（Action list） |
| Focus | ✅ | キーボードフォーカスの現在地 |
| Empty | ✅ | アイテムがないことと次のアクション |
| Selected | — | 選択済みアイテムの数と内容（Selection list） |
| Loading | — | データ取得中であることを示す |
6. バリエーション設計（Variants）
リストのバリアントは「表示のみか操作するか」「順序の有無」で4つに分かれる。
| バリアント | 用途 | 主要要素 |
|---|---|---|
| Unordered list | 順序不問のアイテム表示 | <ul> + <li> |
| Ordered list | 手順・ランキングなど順序に意味がある場合 | <ol> + <li> |
| Action list | クリックで操作するリスト（設定メニュー・タスク一覧） | <button> or <a> |
| Selection list | チェックボックスで複数選択するリスト | <input type="checkbox"> + <label> |
禁止パターン：Action listに <div> のみ使い <button> や <a> を使わない → キーボード操作不可・スクリーンリーダー非対応になる。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- div リスト：
<div>を縦に並べてリストを擬似的に作り、スクリーンリーダーに構造が伝わらない - 空状態の未設計：リストが0件になった時に何も表示されず、ユーザーがバグと誤認する
- インタラクティブ要素の欠落：Action listのアイテムに
<button>を使わず、キーボードで操作できない
7.1 Bad（典型3つ）
<div onClick>でリストを実装し、キーボード操作もスクリーンリーダー対応もない- 検索結果0件の時に空白のままで、ユーザーが何も見つからなかったことを理解できない
- Selection listでチェックボックスと行全体のクリック領域が一致せず、ラベルをクリックしてもチェックが切り替わらない
7.2 Good（対になる3つ）
<ul>+<li>+<button>の適切なHTML要素を使い、キーボード操作とスクリーンリーダー対応を確保する- 0件時に「該当する結果がありません」＋アクション（検索条件をリセット / 新規追加）を表示する
<input type="checkbox" id="item-1">+<label for="item-1">で行全体をクリック領域にする
7.3 How to fix（手順）
<div>で作ったリストを<ul>+<li>に変換する- クリッカブルなアイテムに
<button>または<a>を使う - Selectionリストは
<label>でチェックボックスと行全体をラップする - 0件状態のEmpty StateコンポーネントをAPIレスポンス後に条件分岐で表示する
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Keyboard
- Action listの各アイテムは
Tabでフォーカスでき、Enter/Spaceで実行できること - Selection listは
Tabでチェックボックスにフォーカスでき、Spaceで切り替えられること
Focus
- フォーカスリングは背景色と4.5:1以上のコントラストを持つこと
Screen Reader
<ul>/<ol>を使うと「リスト・N項目」と読み上げられる- CSSで
list-style: noneにすると一部ブラウザがリスト認識を失うためrole="list"を明示する <dl>はキーと値のペアを持つDescription listに使う（定義・スペック表など）
<!-- Action list -->
<ul role="list">
<li>
<button type="button">タスクA <span>2026-03-01</span></button>
</li>
</ul>
<!-- Selection list -->
<ul role="list">
<li>
<label>
<input type="checkbox" name="task" value="1" />
タスクA
</label>
</li>
</ul>
Touch / Pointer
- 各アイテムの高さを44px以上確保する
- チェックボックスのタップ領域は行全体に広げる（
<label>でラップ）
Contrast / Readability
- テキストは背景色と4.5:1以上のコントラスト比を確保する
- Disabled項目は3:1以上のコントラストを維持する
10. 実装メモ（Implementation Notes）
- shadcn/ui では
<ul>/<li>をベースにしたシンプルなリストと、コマンドメニュー向けのCommandコンポーネントが提供されている - 大量データ（1000件以上）の場合は仮想スクロール（
react-virtualized/@tanstack/virtual）を導入してDOMノード数を削減する - Selection listで「全選択 / 全解除」を実装する場合、indeterminate状態（一部選択中）を
inputRef.current.indeterminate = trueで設定する
11. 関連リンク
- 関連するUIデザイン原則: チャンク化 (Chunking), スキャンしやすさ (Scannability), 視覚的階層 (Visual Hierarchy)
- 用語集（定義）: チャンキング (Chunking), 可読性 (Readability)
- 関連するUIコンポーネント（横）: Table（テーブル / 表）, Card（カード）, Checkbox（チェックボックス）, Badge（バッジ）
12. まとめ
Listの設計は「適切なHTML要素を使う」と「空状態を設計する」の2点が最低ラインです。迷ったら 4. 設計判断の核 の3問に戻り、Ordered/Unordered/Action/Selectionのどれかを選んでください。<div> でリストを作る誘惑に負けないこと——<ul> + <li> + <button> の組み合わせだけで、アクセシブルで操作しやすいリストが実現できます。
