notifications-and-recovery

通知と復旧

成功、失敗、その中間のどのような変化でも、ユーザーに知らせる必要があります。また、問題が発生した場合は、必ず先に進むための方法を用意する必要があります。復旧アクションのない通知は、ただの謝罪にすぎません。

---

パターンの選択

パターン	使用するタイミング	閉じ方
トースト	ユーザー操作の一時的な結果（保存、送信、削除）	4～6秒で自動的に閉じる、手動で閉じる
インラインエラー	フィールド単位のバリデーション、フォームエラー	修正すると消える
アラートバナー	現在のコンテキストに影響する継続的な問題	手動で閉じる、または問題の解決時に閉じる
モーダル／ダイアログ	続行前に判断が必要なブロッキングエラー	ユーザーの操作が必要
空の状態	まだデータがない場合 — 最初の操作へユーザーを導く	最初の項目で置き換える
スケルトン／読み込み中	非同期コンテンツの読み込み待ち	コンテンツで置き換える
インプレース確認	インライン編集の保存、行の更新、項目の切り替え	2～3秒後に自動的に消える

---

トースト通知

トーストは、バックグラウンドで実行された操作の完了を確認するためのものです。ユーザーの操作を中断せずに表示されます。

配置： 下部中央または右下。上部中央には配置しないでください。ページのコンテンツやナビゲーションと競合します。

表示時間： 情報の場合は4～6秒です。エラーは、ユーザーが内容を読んで対処できるよう、閉じるまで表示し続けます。

構成：

[Icon] Message text                    [Action] [×]

• アイコン：色分けします（緑 ✓ 成功、赤 ✗ エラー、オレンジ ⚠ 警告、青 ℹ 情報）
• メッセージ：平易な言葉で1文にします
• アクション（任意）：「元に戻す」、「再試行」、「表示」など。アクションは最大1つです
• 閉じるボタン：エラーには必ず表示し、成功の場合は任意です

✓ "Changes saved."
✓ "Message sent.  [Undo]"
✗ "Could not save. Check your connection.  [Retry]"  ← persists until dismissed

禁止事項： 複数のトーストを同時に表示しないでください。順番にキューへ追加し、一度に1つだけ表示します。

---

インラインエラー

インラインエラーは、原因となった要素のすぐ近くに表示されます。最もコンテキストに即した、実行可能なエラーフィードバックです。

フォームのバリデーション：

• すべてのキー入力ごとではなく、フィールドからフォーカスが外れたときに検証します。キー入力ごとの検証は煩雑です
• フォーム全体は送信時に検証します
• エラーメッセージは、アイコンとともに赤色でフィールドのすぐ下に表示します
• フィールドの枠線を --color-error に変更します
• スクリーンリーダー向けに、エラーメッセージを aria-describedby で関連付けます

<label for="email">Email</label>
<input id="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error" role="alert">Enter a valid email address.</p>

インプレース編集：

• フィールドをインライン編集する場合（テーブルのセル、カードのタイトルなど）、保存／キャンセルのコントロールをフィールドの近くに表示します
• 保存時：短時間「✓ 保存しました」という成功インジケーターを表示し、2秒後にフェードアウトさせます。別の画面に移動させないでください
• エラー時：再試行オプション付きのインラインエラーメッセージをフィールドの下に表示します
• キャンセル時：元の値にすぐ戻します

---

アラートバナー

バナーは継続的に表示され、問題が解決するか、ユーザーが閉じるまで残ります。

用途：

• サービスの機能低下（「一部の機能が一時的に利用できません」）
• 対応が必要なアカウントの問題（「サブスクリプションの有効期限は3日後です。[更新]」）
• 同期中に発生しているエラー（「変更を保存できません。[再試行]」）
• 現在のページに関連する重要なお知らせ

配置： 影響を受けるセクションの上部に配置します。問題が本当に全体に及ぶ場合を除き、ページ全体には表示しません。

構成：

[Icon] [Message — describes the issue and its scope] [Action] [×]

• 1つの領域につきバナーは一度に1つだけにします。複数のバナーを同時に表示すると、アラート疲れを引き起こします
• ブロッキング状態でない限り、閉じられるようにします
• 色はステータスカラーの規則に従います。赤（エラー）、オレンジ（警告）、青（情報）、緑（成功／解決済み）

---

復旧パターン

すべてのエラー状態に、先へ進むための方法を用意する必要があります。エラーメッセージと同時に、復旧アクションも設計してください。

再試行

一時的な障害（ネットワーク、タイムアウト、レート制限）の場合：

"Could not load results."
[Try again]

• 再試行ボタンを押すと、同じアクションを実行します
• 3回再試行しても失敗する場合は、次の案内に切り替えます：「引き続き問題が発生していますか？[サポートに問い合わせる]」
• 再試行中はスピナーを表示し、ユーザーが複数回クリックできないようにします

取り消し

削除、アーカイブ、送信など、破壊的または取り消せない操作の場合：

"Message sent.  [Undo]  ×"

• 取り消し可能な時間：5～10 秒。この時間中、トーストを表示し続けます。
• この時間が過ぎると、操作は確定します
• 重要度の低い操作では、確認ダイアログよりも取り消し機能が適しています。操作が速く、邪魔になりにくいためです

自動保存と下書きの復元

フォーム、ドキュメント、エディターなど、長文を入力する場合：

• 30～60 秒ごとに、通知なしで自動保存します
• 保存に失敗した場合：「自動保存に失敗しました — 変更内容はローカルに保存されています。[保存を再試行]」
• クラッシュまたは終了後に戻ってきた場合：「[時刻]時点の未保存の変更があります。[復元] [破棄]」

適切な機能縮退

機能が失敗しても、製品のほかの部分は引き続き動作する場合：

• 失敗したセクションだけにエラー状態を表示します。ページ全体を空白にしないでください
• 代替手段を提示します：「おすすめを読み込めませんでした。[すべての商品を見る →]」
• エラーは通知なしで記録し、ユーザーには必要な情報だけを伝えます

---

読み込み中とスケルトン状態

読み込み中はエラーではありませんが、デザインが必要な状態です。

• コンテンツの多いページではスケルトン画面を使い、データの読み込み中にレイアウトの形を表示します
• 対象が明確な非同期操作（ボタンの読み込み、インライン更新）にはスピナーを使います
• 所要時間がわかっている長時間の操作（ファイルのアップロード、複数ステップの処理）にはプログレスバーを使います
• 読み込み中に画面を空白にしないでください。必ず何かを表示します

スケルトン画面は、スピナーと比べて待ち時間を短く感じさせます。スケルトンの形状は、実際のコンテンツのレイアウトに合わせてください。

---

通知センター

トーストやバナーは一時的なものです。通知センターは、ユーザーが通知を確認し、受け取る内容を管理するための、常に利用できる場所です。うまく機能させるには、2つの要素があります。

簡単にアクセスでき、簡単に管理できること。ユーザーがほとんど手間をかけずに通知設定へアクセスできるようにします（ベルアイコン → 通知センター → 設定）。また、管理方法は大まかにし、カテゴリーは最大1～3個に絞って、それぞれにシンプルなレベルを設けます。

• Off (0) — このカテゴリーの通知を受け取りません
• Minimal — 重要な通知のみ
• All / granular — すべての通知

イベントごとのトグルを大量に並べないでください。実際に必要なのは、ほとんどの場合、すべての通知を止めるか、1つか2つのカテゴリーだけを残すことです。そうしたニーズに直接応えるため、目立つ「すべてミュート」／「すべて既読にする」ボタンと、1～3個のカテゴリー切り替えを設計します。

**読む量を最小限にすること。**通知センターは、じっくり読むのではなく、ざっと確認する場所です。カテゴリーごとにグループ化し、各項目は文章ではなく、見分けやすいアイコンと対象の項目／操作から始めます。未読状態を明確に表示し、リスト全体を一度の操作で消去できるようにします。読むことには時間がかかります（[[ui-density]] を参照）。注意深く読まなければならない通知センターは、その目的に反します。

通知のアクセシビリティ

• エラーには role="alert" を使い、スクリーンリーダーで直ちに読み上げられるようにします
• ステータス更新には role="status" を使い、現在の読み上げが終わった後に控えめに読み上げられるようにします
• トーストにはキーボードでアクセスできるようにします。閉じるボタンに pointer-events: none を設定しないでください
• 自動で消えるトーストには十分な表示時間を設定します（prefers-reduced-motion のユーザーには、読むためにより長い時間が必要な場合があります）

<div role="alert">Could not save. Check your connection.</div>


<div role="status" aria-live="polite">Changes saved.</div>

---

レビューチェックリスト

• すべてのエラーに復旧操作（再試行、取り消し、サポートへの問い合わせ）がありますか？
• 成功時のトーストは自動で消え、エラー時のトーストは表示され続けますか？
• 一度に表示されるトーストは常に1つ以下ですか？
• インラインエラーはフォームの先頭ではなく、該当するフィールドの隣に配置されていますか？
• フォームのエラーは aria-describedby で入力欄と関連付けられていますか？
• アラートバナーは常にページ全体ではなく、影響を受けたセクションの先頭に表示されますか？
• 長文入力では、自動保存または下書きの復元を利用できますか？
• 読み込み状態では、コンテンツにスケルトンを、対象が明確な操作にスピナーを使っていますか？
• エラーは role="alert" で、ステータス更新は role="status" で読み上げられますか？