空・ローディング・エラー

構成要素

空状態は3つの要素で構成する。

• アイコン: 大きめのアイコンで視覚的に「空」であることを伝える。
• メッセージ: 「なぜ空なのか」を端的に伝える。ネガティブな表現（「データがありません」）ではなく、状況を説明する表現（「生徒がまだ登録されていません」）を使う。
• CTA: 次のアクションへのボタン（「生徒を追加」「CSVインポート」など）。先生が「次に何をすべきか」を迷わない。

空状態が発生する場面

初回アクセス時（データ未登録）、検索/フィルタ結果が0件の場合。検索結果0件の場合はCTAを「フィルタをクリア」にし、初回とは異なるメッセージにする。

スケルトンスクリーン

スピナー（回転するアイコン）ではなく、スケルトンスクリーンを使う。スケルトンはコンテンツが表示される場所と形状を予告するため、先生は「これからここにデータが表示される」と予測できる。一覧画面ならテーブルの形、詳細画面ならdt/ddの形のスケルトンを表示する。

レイアウトシフトの防止

スケルトンの高さとレイアウトは実際のコンテンツと一致させる。データが読み込まれたときに画面がガタつく（レイアウトシフト）と、先生が操作中のボタンがずれて誤クリックする原因になる。

インラインエラー

フォームのバリデーションエラーなど、特定のフィールドに関するエラーは該当フィールドの直下に表示する。赤テキスト + 赤ボーダーで視覚的に強調。メッセージは「どうすれば解決するか」を伝える。

ページレベルエラー

APIエラーや通信エラーなど、画面全体に影響するエラーは、コンテンツエリアにエラー状態を表示する。アイコン + メッセージ + リトライボタンで構成する。技術的なエラーメッセージ（500 Internal Server Error）は表示せず、先生にわかる言葉で伝える（「データの読み込みに失敗しました。再度お試しください。」）。

復旧ガイダンス

エラー表示には必ずリカバリー手段を提供する。「再読み込み」ボタン、「サポートに問い合わせ」リンク、「前の画面に戻る」リンクなど。先生が行き止まりにならないようにする。