ナビゲーション
先生が「今どこにいるか」「どこに行けるか」を常に把握できるための導線設計。迷子にさせないことが最優先。
サイドバー
常駐ナビゲーション
サイドバーはすべての標準レイアウト画面に表示される。先生がどの画面にいても、他の機能へワンクリックで移動可能。ページ遷移してもサイドバーは固定表示のため、画面全体がリロードされる感覚を抑える。
グルーピング
ナビゲーション項目は機能の種類で2グループに分ける。メイン機能（宿題・テスト・教室・生徒・管理教材）と管理者メニュー（先生管理・教室グループ・スクール情報）。グループ間はラベル + 余白で区切る。管理者メニューは管理者権限のユーザーにのみ表示。
アクティブ状態
現在表示中の機能は、左端のアクセントバー（プライマリカラー）+ 背景色の変化で示す。アクティブ状態は「大分類」レベルで表示する（例: 「教室詳細」画面でも「教室」がアクティブ）。子ページでアクティブが消えると先生が迷子になる。
パンくずリスト
階層の表示
ヘッダーにパンくずリストを配置し、現在の画面がどの階層にあるかを示す。区切りは「/」。親階層はクリック可能なリンク、現在地はプレーンテキスト。深さは最大3階層まで（例: 教室 / 3年A組 / 生徒一覧）。
サイドバーとの役割分担
サイドバーは「機能間の移動」、パンくずは「機能内の階層移動」を担当する。先生はサイドバーで「教室」を選び、パンくず で「教室一覧 → 特定教室 → 生徒詳細」と掘り下げていく。
タブ
ページ内コンテンツ切り替え
タブは1つの画面内でコンテンツのスコープを切り替えるために使う。ページ遷移はしない。下線スタイル（アンダーライン）で、アクティブなタブに太い下線を表示する。最大5タブまで。タブ名は名詞で統一（「概要」「生徒」「履歴」）。
タブ vs ページ分割
同じオブジェクトに属する異なる側面のデータはタブで切り替える。関連が薄いデータは別画面に分ける。判断基準: 「この情報はこのオブジェクトを理解するために必要か？」Yesならタブ内、Noなら別画面。
戻るリンク
詳細画面やフォーム画面の上部に「← 一覧に戻る」形式のリンクを配置する。パンくずリストとは別に、より目立つ導線として機能する。
- 戻り先を明示する（「← 戻る」ではなく「← 教室一覧に戻る」）
- フォーム画面のキャンセルボタンも同じ戻り先に遷移する
- パンくずと戻るリンクの戻り先が矛盾しないようにする
ページタイトルの階層
h1（ページタイトル）: 各画面に1つ。最も大きく太い文字。「教室一覧」「生徒を作成」など。
h2（セクション見出し）: ページ内のセクション分割。フォームのセクション見出しやタブ内のグループ見出し。
h3（サブ見出し）: セクション内のさらなる分割。使う頻度は低い。
見出し階層を飛ばさない（h1の次にh3を使わない）。
Do / Don't
- サイドバーのアクティブ状態を子ページでも維持する
- 戻るリンクで戻り先を明示する（「← 教室一覧に戻る」）
- パンくずの親をクリック可能なリンクにする
- タブ名は名詞で統一する
- パンくずを4階層以上にしない
- タブを6つ以上にしない
- 「← 戻る」のように戻り先を曖昧にしない
- サイドバーとパンくずで異なる機能がアクティブに見えないようにする
プロトタイプ
← 3年A組に戻る
田中 太郎
ID: STD-001 · 3年A組