トースト・スナックバー・バナー・インライン
処理の結果や状態を、トースト・スナックバー・バナー・インラインのどれで知らせる?
判断表
| 判断軸 | トースト通知 短く出て勝手に消える | スナックバー+取り消し 消える前に取り消せる | アラート・バナー 画面に残り、読んで閉じる | コピー完了フィードバック 操作した場所そのものが変わる |
|---|---|---|---|---|
| 残る時間 | 約3秒で自動的に消える(見本は2.8秒) | 3秒。取り消しを押せば即消える | ×を押すまで残る | 1.6秒で元の表示に戻る |
| 利用者に求める操作 | なし。読まなくても進める | 任意。取り消したい人だけが押す | 閉じる操作。読ませたい情報向き | なし。押した結果がそのまま答え |
| 重さ・緊急度 | 軽い。保存完了などの確認 | 中。削除や送信など「戻したいかもしれない」結果 | 重い。エラー・警告・更新の案内 | 最軽量。コピー・いいね・切替の反応 |
| 読み上げの扱い | role=status・aria-live=polite で自然に読まれる | 取り消しボタンがあるので、消える前に届く工夫が要る | role=status。エラーなら role=alert に上げる | ボタンの文言が変わるので、その場で読まれる |
| 見失いやすさ | 画面端に出るので、別の場所を見ていると見逃す | 同上。ただし操作直後に出るので視線は近い | 内容の上に置けば見逃さない | 視線の先で変わるので見逃さない |
迷ったらこれ
迷ったら、操作した場所で反応を返せるならインライン、返せないなら自動で消えるトースト。ただし取り消せる操作の結果はスナックバーにして確認ダイアログを減らし、利用者の判断が要る情報(エラー・期限)はバナーで残す。
トーストを何種類も積み上げない。同時に出るのは1枚までにし、連続した操作は最後の1件に置き換える(見本はタイマーを clearTimeout で更新している)。
候補の見本
- クリック
トースト通知解説あり
Toast Notification
ボタン操作後にふわっと現れ、数秒で自動消滅する通知。処理完了などの確認に使う。
- JS
- ホバー
スナックバー+取り消し解説あり
Snackbar with Undo
リスト項目を削除すると「削除しました [取り消す]」が下部に出て3秒で自動消滅。取り消しで元に戻る。
- JS
- クリック
アラート・バナー解説あり
Alert / Banner
情報・成功・警告・エラーの4色のインラインバナー。アイコンと文言、×ボタンで構成し、×を押すとスライドしながら消える。
- JS
- クリック
コピー完了フィードバック
Copy-to-Clipboard Feedback
クリックすると「✓ コピーしました」に変わって元に戻る。操作が伝わる安心感のある演出。
- JS