詳細
単一オブジェクトを深く理解するための画面。先生が「この教室 / この生徒の全体像」を把握し、必要な操作を行う場所。
目的と設計思想
詳細画面の目的は「1つのオブジェクトのすべてを理解すること」。一覧からドリルダウンして到達するため、常に「一覧に戻る」導線を用意する。読み取り専用がベースで、編集は明示的なアクション（編集ボタン）を経由する。
画面構成の原則
┌ 戻るリンク（← 一覧に戻る）
├ オブジェクトヘッダー
│ ├ 名前（太字）+ ステータスバッジ
│ ├ メタ情報（ID・カテゴリ・作成日）
│ └ アクションボタン（右寄せ: 編集 + More）
├ タブ（下線スタイル）
│ ├ 概要（dt/dd 2カラム）
│ ├ 関連データ（簡易テーブル）
│ └ 変更履歴（タイムライン）
└
オブジェクトヘッダー
ヘッダーは「このオブジェクトが何であるかを一瞬で伝える」ためのエリア。以下の3つの要素で構成する。
- 識別情報: オブジェクト名（太字で最も目立つ）+ ステータスバッジ。先生が「これは自分が探していたものだ」と確認できる。
- メタ情報: ID・カテゴリ・作成日など。1行にまとめ、区切り文字（・）で連結する。情報量が多すぎるなら概要タブに移動する。
- アクションボタン: 右寄せで配置。主アクション（編集）はラベル付きボタン、副アクション（削除・複製）は More メニューに格納する。
タブの設計
タブは「情報のスコープを切り替える」ための手段。先生が一度に見る情報量を制御する。
- タブ数: 最大5つ。それ以上は情報設計を見直す。3つ（概要・関連データ・履歴）が基本構成。
- 命名: 名詞で統一する（「概要」「生徒」「履歴」）。動詞（「確認する」）は使わない。
- スタイル: 下線スタイル（アンダーライン）を使う。カード型タブは使わない。
- デフォルト: 最も使用頻度が高いタブ（通常は「概要」）をデフォルト選択にする。
概要タブ
2カラムの dt/dd レイアウトでキーバリューペアを表示。ラベルは控えめな色、値ははっきり読める色。関連するフィールドをグルーピングする。
関連データタブ
このオブジェクトに属する子データを簡易テーブルで表示。件数が多いならサブページネーションを付ける。独立した一覧画面へのリンクも検討。
変更履歴タブ
タイムライン形式で「誰が」「いつ」「何をしたか」を記録。新しいものが上。先生の操作ミスを遡れる安心感を与える。
スコープの原則
表示するデータは「このオブジェクトに属するもの」に限定する。関連が薄いデータは別の一覧画面に誘導する。
Do / Don't
Do
- ヘッダーに「一覧に戻る」リンクを必ず配置する
- オブジェクト名 + ステータスで「何を見ているか」を一瞬で伝える
- 概要タブをデフォルトにして、最も重要な情報を最初に見せる
- 編集は専用画面に遷移させ、詳細画面は読み取り専用に保つ
Don't
- タブを6つ以上作らない
- 詳細画面にインライン編集を入れない（編集画面との責務が曖昧になる）
- ヘッダーのメタ情報を4項目以上表示しない（概要タブに回す）
- 関連データタブに他オブジェクトのスコープのデータを混ぜない
プロトタイプ
← オブジェクト一覧に戻る
オブジェクト 5
有効ID: OBJ-005 · カテゴリA · 作成日: 2026-03-01