モーダル / ドロワー

ページ遷移せずに情報を表示したり、確認を求めたりするオーバーレイの使い分け。先生の操作フローを中断させずに、必要な情報や確認を提供する。

使い分けの判断基準

タイプ	用途	例
モーダル	確認ダイアログ、短いフォーム入力。先生の注意を強制的に引く必要がある場合。	削除確認、名前変更
ドロワー	プレビュー表示、クイック編集。元の画面のコンテキストを保ちながら詳細を見たい場合。	生徒詳細プレビュー、設定パネル
フルスクリーン	複雑な複数ステップのフロー。他の画面への導線を断って集中させたい場合。	オリジナル教材作成

小（確認ダイアログ）: コンテンツに合わせたコンパクトなサイズ。中（短いフォーム）: 適度な幅で入力を受け付ける。大きなフォームにはモーダルを使わず、専用ページまたはフルスクリーンモーダルを使う。

右上の x ボタン、背景オーバーレイのクリック、ESCキーの3つで閉じられるようにする。ただし確認ダイアログでは背景クリックでは閉じない（意図しない操作を防ぐ）。

モーダル表示時は背景を半透明の黒で覆い、モーダルに視線を集中させる。背景のスクロールはロックする。

右からスライドインする。幅は画面の1/3〜1/2を目安にする。コンテンツが長い場合はドロワー内でスクロール。元の画面が左に見えていることで、先生は「今何の情報を見ているか」のコンテキストを保てる。

ドロワーは元画面を部分的に見せる。モーダルは完全に覆い隠す。「元画面の文脈を保ちたいか」が判断基準。一覧画面から行をクリックしてプレビューするケースではドロワーが適している。

破壊的操作の文言: 「本当に削除しますか？」のような曖昧な表現ではなく、「この教室を削除すると、所属する30名の生徒データも削除されます。この操作は元に戻せません。」のように影響範囲を具体的に伝える。

ボタンの色と順序: 破壊的操作の実行ボタンは赤（negative色）。キャンセルを左、実行を右に配置。先生が「間違って押しにくい」レイアウトにする。

Forgiving原則: 可能な限り「ソフトデリート」（論理削除）にし、後から復元できるようにする。物理削除の場合はその旨を明示する。

Don't

教室名 *