テーブル

構造化されたデータをスキャン・比較するための共通コンポーネント。一覧画面や詳細画面の関連データで使う。

カラム設計

良いカラムセットの条件

カラムは「先生がこの一覧で知りたいこと」だけに絞る。推奨は5〜7列。

  • カラム順: 選択チェックボックス → 識別（名前/ID） → 属性（カテゴリ等） → 状態 → 数値 → 日時 → アクション。左から右へ重要度が下がる。
  • 揃え方: テキストは左揃え、数値は右揃え、ステータスバッジは左揃え。
  • 幅の配分: 名前列を最も広く取り、ID・日付列は固定幅にする。

ヘッダーとソート

ソート可能な列のヘッダーにはインジケータアイコンを表示する。クリックで昇順/降順を切り替える。ソート可能であることが視覚的にわかるようにする。

すべての列をソート可能にする必要はない。名前・更新日・ステータスなど、並べ替えて意味がある列だけにする。デフォルトのソート順は「先生が最も自然だと感じる順序」にする。

行の設計

ホバー/クリック

行にホバーすると背景色が薄く変わり、クリック可能であることを示す。行クリックで詳細画面に遷移する。行の高さはすべて統一する。

データの書式

日付は YYYY-MM-DD 形式で統一。数値は桁区切りを使う。ステータスはバッジ（背景色 + テキスト色）で視覚的に判別可能にする。リンクは下線スタイル。

選択と一括操作

左端にチェックボックス列を配置。ヘッダーのチェックボックスで「現在表示中の全行」を選択する。

1件以上選択するとテーブル上部に一括操作バーが出現する。一括操作バーには「N件を選択中」と操作ボタンを表示。選択行は背景色を変えて視覚的にフィードバックする。

空状態

データが0件のときはテーブルを表示しない。代わりにアイコン + メッセージ + CTA（作成ボタン等）で構成する空状態を表示する。先生が「なぜ空なのか」「次に何をすべきか」を理解できるメッセージにする。

Do / Don't

Do
  • 名前列を最も広く取り、一目でオブジェクトを特定できるようにする
  • ステータスはバッジで色分けし、テキストだけに頼らない
  • 選択行の背景色を変えてフィードバックする
  • 空状態で次のアクション（作成ボタンなど）を提示する
Don't
  • 横スクロールが必要なほどカラムを詰め込まない
  • 行の高さをコンテンツによって変えない（一定に保つ）
  • 行内に複数のアクションボタンを直接表示しない（Moreメニューに）
  • 空状態で「データがありません」だけ表示しない（次の行動を促す）

プロトタイプ

名前教室ステータススコア最終ログイン
田中 太郎3年A組有効852026-03-10
佐藤 花子3年A組有効922026-03-09
鈴木 一郎3年B組無効672026-02-28
高橋 美咲3年A組有効782026-03-10
伊藤 健太3年B組招待中0---