レイアウト基本構造

すべての画面に共通する外枠（シェル）の設計思想。先生が画面を開いた瞬間に「今どこにいるか」「何ができるか」を理解できる構造を目指す。

2つのレイアウトモード

先生Webのすべての画面は、次の2つのモードのいずれかに分類される。画面の目的に応じて使い分ける。

サイドバー + ヘッダー + コンテンツ。一覧・詳細・設定など、日常的に使う画面はすべてこれ。

サイドバー非表示。複数ステップの作成フローなど、集中操作が必要な画面で使う。

コンテンツは常に単一カラムで中央に配置する。先生は週に数回しか使わないため、視線の移動を最小化し、上から下へ自然に読める構造にする。左右の余白は「呼吸」のための空間であり、情報を詰め込まない。

スクロールするのはコンテンツエリアのみ。サイドバーとヘッダーは常に固定表示し、先生が「今どこにいるか」を見失わないようにする。長いコンテンツでもナビゲーションとコンテキスト情報は常に視界に入る。

ページタイトル、アクションエリア、テーブルなどのブロック間には十分な余白を取る。情報が多い画面でも、セクション間に呼吸があれば先生は圧倒されない。一画面の情報量が多すぎると感じたらタブやページ分割を検討する。

サイドバーはアプリ全体のナビゲーションを担う。先生がどの画面にいても、他の機能へワンクリックで移動できるようにする。メインのナビ項目（宿題・テスト・教室・生徒など）と、管理者向けメニュー（先生管理・スクール情報など）をセクション分けして表示する。

現在表示中の機能を左端のアクセントバー + 背景色で示す。これにより先生は「自分が今どの機能を使っているか」を常に確認できる。ユーザーテストで「今どこにいるかわからない」という声が出たら、まずこのアクティブ表示を疑う。

サイドバーはアイコンのみの折りたたみ状態に切り替えられる。コンテンツエリアを広く使いたいとき（テーブルの列が多い場合など）に先生自身が選択できる。折りたたみ状態はブラウザに記憶させ、次回アクセス時も維持する。

パンくずリストで「今どの階層にいるか」を示す。親はクリック可能なリンク、現在地はテキストのみ。先生が迷子にならないための道しるべ。

通知ベルとユーザー情報を右側に配置。画面横断で常に表示されるため、通知確認やログアウトに迷わない。

Don't

mikan for School

マニュアル

教室/デモ教室

mikan 管理者

FS for mikanRS