一覧
複数のオブジェクトを素早くスキャンし、見つけ、操作するための画面パターン。先生Webで最も多い画面タイプ。
目的と設計思想
一覧画面の目的は「全体を俯瞰し、目的のオブジェクトを最短で見つけること」。先生は教室・生徒・テストなど多数のオブジェクトを管理するが、毎回全件を読むわけではない。検索・フィルタ・ソートで素早く絞り込み、1クリックで詳細に遷移できることが重要。
画面構成の原則
┌ ページタイトル + アクションボタン（右寄せ）
├ 検索バー + フィルター
├ 一括操作バー（選択時のみ表示）
├ テーブル
│ ├ ヘッダー（ソート可能列にインジケータ）
│ └ 行（hover フィードバック、クリッカブル）
└ ページネーション
この上から下への順序は固定。先生が画面を開いたとき「何の一覧か」「何ができるか」「どうやって探すか」「データはどこか」が自然に目に入る。
情報の優先順位（カラム設計）
テーブルのカラムは「先生が最も気にする情報」を左から順に並べる。推奨カラム数は5〜7列。それ以上は情報過多。
- 識別カラム: 名前やIDなど、オブジェクトを一意に特定するもの。左寄せで最初に配置。
- 状態カラム: ステータスバッジで視覚的に判別できるもの。中央付近。
- 数値カラム: 件数や進捗など。右寄せで比較しやすく。
- 日時カラム: 更新日・作成日。右側に配置。
- アクションカラム: More メニュー。最右端。
検索バーの配置
テーブルの直上、左寄せ。入力即時でフィルタリング（Enter不要）。プレースホルダーで検索対象を明示する（例: 「名前・IDで検索」）。
フィルターの配置
検索バーの右隣にドロップダウンで配置。フィルタが3つ以上あるときは「フィルタ」ボタンにまとめてポップオーバーで展開する。
ソートの原則
デフォルトのソートは「先生が最も気にする順序」にする。多くの場合は更新日降順（最近変更したものが上）。ソート可能な列にはヘッダーにインジケータを表示し、クリックで昇順/降順を切り替える。すべての列をソート可能にする必要はない。名前・日付・ステータスなど、実際に並べ替えて意味がある列だけにする。
行のインタラクション
行をホバーすると背景色が変わり、クリック可能であることを示す。行クリックで詳細画面に遷移する。名前列をリンクスタイル（下線付き）にするか、行全体をクリッカブルにするかは統一する。先生Webでは行全体クリッカブルを推奨（クリックターゲットが大きい方が操作しやすい）。
ページネーション vs 無限スクロール
先生Webではページネーションを使う。理由: (1) データ件数が数十〜数百件で無限スクロールが必要なほど多くない (2) 「3ページ目にあったあのデータ」と位置で記憶する先生がいる (3) CSV出力時に全件取得の概念と整合する。1ページあたりの表示件数は20〜50件。
一括操作
チェックボックスで複数行を選択できる。選択するとテーブル上部に一括操作バーが表示される。一括操作は「削除」「ステータス変更」など破壊的な操作が多いため、実行前に確認ダイアログを必ず挟む。ヘッダーのチェックボックスは「現在のページの全行」を選択する（全ページではない）。
Do / Don't
- データが0件のときは空状態（アイコン + メッセージ + 作成ボタン）を表示する
- テーブルカラムは先生が気にする情報順に並べる
- 検索のプレースホルダーで何が検索できるか明示する
- 一括操作の前に確認ダイアログを表示する
- 8列以上のカラムを詰め込まない（横スクロールを避ける）
- 行アクションをすべてボタンで直接表示しない（More メニューに格納）
- ソート状態が見た目でわからない状態にしない
- ページ遷移で選択状態をリセットせずに保持しない（混乱の元）
プロトタイプ
オブジェクト一覧
| ID | 名前 | カテゴリ | ステータス | 件数 | 更新日 | ||
|---|---|---|---|---|---|---|---|
| OBJ-001 | オブジェクト 1 | カテゴリA | 有効 | 122 | 2026-03-10 | ||
| OBJ-002 | オブジェクト 2 | カテゴリB | 無効 | 160 | 2026-03-09 | ||
| OBJ-003 | オブジェクト 3 | カテゴリC | 下書き | 105 | 2026-03-08 | ||
| OBJ-004 | オブジェクト 4 | カテゴリA | 有効 | 21 | 2026-03-07 | ||
| OBJ-005 | オブジェクト 5 | カテゴリB | 無効 | 78 | 2026-03-06 | ||
| OBJ-006 | オブジェクト 6 | カテゴリC | 下書き | 109 | 2026-03-05 | ||
| OBJ-007 | オブジェクト 7 | カテゴリA | 有効 | 107 | 2026-03-04 | ||
| OBJ-008 | オブジェクト 8 | カテゴリB | 無効 | 78 | 2026-03-03 |