本文へスキップ

トースト・スナックバー・バナー・インライン

処理の結果や状態を、トースト・スナックバー・バナー・インラインのどれで知らせる?

判断表

判断軸トースト通知
短く出て勝手に消える
スナックバー+取り消し
消える前に取り消せる
アラート・バナー
画面に残り、読んで閉じる
コピー完了フィードバック
操作した場所そのものが変わる
残る時間約3秒で自動的に消える(見本は2.8秒)3秒。取り消しを押せば即消える×を押すまで残る1.6秒で元の表示に戻る
利用者に求める操作なし。読まなくても進める任意。取り消したい人だけが押す閉じる操作。読ませたい情報向きなし。押した結果がそのまま答え
重さ・緊急度軽い。保存完了などの確認中。削除や送信など「戻したいかもしれない」結果重い。エラー・警告・更新の案内最軽量。コピー・いいね・切替の反応
読み上げの扱いrole=status・aria-live=polite で自然に読まれる取り消しボタンがあるので、消える前に届く工夫が要るrole=status。エラーなら role=alert に上げるボタンの文言が変わるので、その場で読まれる
見失いやすさ画面端に出るので、別の場所を見ていると見逃す同上。ただし操作直後に出るので視線は近い内容の上に置けば見逃さない視線の先で変わるので見逃さない

迷ったらこれ

迷ったら、操作した場所で反応を返せるならインライン、返せないなら自動で消えるトースト。ただし取り消せる操作の結果はスナックバーにして確認ダイアログを減らし、利用者の判断が要る情報(エラー・期限)はバナーで残す。

トーストを何種類も積み上げない。同時に出るのは1枚までにし、連続した操作は最後の1件に置き換える(見本はタイマーを clearTimeout で更新している)。

候補の見本

  • クリック

    トースト通知解説あり

    Toast Notification

    ボタン操作後にふわっと現れ、数秒で自動消滅する通知。処理完了などの確認に使う。

  • ホバー

    スナックバー+取り消し解説あり

    Snackbar with Undo

    リスト項目を削除すると「削除しました [取り消す]」が下部に出て3秒で自動消滅。取り消しで元に戻る。

  • クリック

    アラート・バナー解説あり

    Alert / Banner

    情報・成功・警告・エラーの4色のインラインバナー。アイコンと文言、×ボタンで構成し、×を押すとスライドしながら消える。

  • クリック

    コピー完了フィードバック

    Copy-to-Clipboard Feedback

    クリックすると「✓ コピーしました」に変わって元に戻る。操作が伝わる安心感のある演出。