フィードバック
先生の操作に対するシステムの応答。「保存できた」「失敗した」「何か起きている」を適切なタイミングと方法で伝える。
トースト通知
用途
操作の結果を一時的に表示する。「保存しました」「削除しました」「エラーが発生しました」など。先生の操作フローを中断せず、結果だけを伝える。
表示位置と消え方
画面右上に表示する。成功トーストは3〜5秒で自動消去。エラートーストは手動で閉じるまで残す（先生がエラー内容を確認する時間が必要）。複数のトーストが同時に出る場合は縦に積む（最大3つまで、古いものから消える）。
成功
背景を成功色（positive-subtle）に。チェックアイコン + メッセージ。自動消去。
エラー
背景をエラー色（negative-subtle）に。xアイコン + メッセージ + 閉じるボタン。手動消去。
インラインフィードバック
フォームバリデーション
フィールド直下に赤テキストでエラーを表示する。フィールドのボーダーも赤に変える。メッセージは「どうすれば正しくなるか」を伝える。詳細は「フォーム」ルールを参照。
保存ステータス
自動保存がある場合は「保存中...」「保存済み」をヘッダーやフォーム近くに控えめに表示する。先生Webでは明示的な保存ボタンを基本とするが、下書き機能ではブラウザのlocalStorageに自動保存し、その旨を表示することがある。
バナー通知
システム全体に関わるお知らせ（メンテナンス予告、重要なアップデート）はページ上部にバナーとして表示する。
- 情報バナー: 新機能のお知らせなど。info色の背景。閉じるボタン付き。
- 警告バナー: メンテナンス予告、データ移行のお知らせ。warning色の背景。期限を明記する。
- バナーは画面の最上部（ヘッダーの上）に配置し、閉じるまで常に表示する。閉じた状態はセッション中記憶する。
プログレス表示
ファイルアップロード: プログレスバーで進捗を表示する。「N% アップロード中...」のテキストを添える。アップロード中はキャンセルボタンを表示する。
長時間操作: CSV一括処理など、数秒以上かかる操作はプログレスインジケータを表示する。完了予測が難しい場合は不定形のプログレスバー（インデターミネート）を使う。
Do / Don't
- 成功トーストは自動消去、エラートーストは手動消去にする
- エラーメッセージに復旧手段を含める
- アップロード中にキャンセル手段を提供する
- バナー通知には具体的な日時・期限を明記する
- エラートーストを自動消去しない（先生が読む前に消える）
- トーストを4つ以上同時に表示しない
- 成功も失敗もフィードバックなしにしない（何が起きたかわからない）
- バナーを閉じた後に毎回再表示しない
プロトタイプ
バナー通知
新機能: CSVエクスポートに対応しました
一覧画面の右上からCSVファイルをダウンロードできます。
メンテナンスのお知らせ
2026年3月15日 2:00〜4:00（JST）にシステムメンテナンスを実施します。
トースト通知
プログレス
インラインバリデーション
有効なメールアドレスを入力してください。