トースト通知
Toast Notification
概要（サマリー）
トースト通知とは、操作結果などを画面の端へ一時的に表示し、一定時間後に消える小さな通知UIのことである。トースターからパンが短時間だけ顔を出す様子に似ていることから、この名前で呼ばれる。
以下は、ボタンを押すと画面下にトースト通知が表示され、数秒後に自動的に消える簡単なデモである。
まだ保存していません
詳細解説
操作の結果を短く伝える
「保存した」「URLをコピーした」「設定を変更した」など、利用者が行った操作への軽い反応に向く。画面全体を止めず、作業を続けながら結果を確認できる。
重要度に合う通知を選ぶ
自動的に消えるため、重大なエラー、確認が必要な警告、長い説明には向かない。利用者が必ず判断すべき内容には、画面内のエラーメッセージやダイアログを使うほうがよい。
DOMへ追加して時間後に閉じる
実装では通知要素をDOMへ追加し、一定時間後に取り除く方法がある。
const toast = document.querySelector("#toast");
toast.textContent = "保存しました";
toast.hidden = false;
setTimeout(() => {
toast.hidden = true;
}, 4000);
連続操作で複数の通知が出る場合は、上書き、順番待ち、表示数の制限なども設計する。
トースト通知の表示・自動消去の実装は、次の解説ページで動きとコードを確認できる。
読み上げへ通知する
画面へ表示するだけでは、支援技術の利用者が気付けない場合がある。成功などの穏やかな通知にはrole="status"、緊急性が高い通知には用途を慎重に判断して別の方法を使う。
読める時間と閉じる手段
文章量に対して表示時間が短すぎると読めない。重要度が少し高い内容では閉じるボタンを設け、自動で消さない選択も検討する。アクセシビリティ設定や利用者の操作速度へ配慮が必要である。
AIコーディングとの関係
AIには「保存成功時だけ4秒表示して自動的に消す」「エラーは入力欄の近くに残す」のように、通知の重要度と表示時間を伝えるとよい。生成されたコードでは、role="status"などの読み上げ対応があるか、連続通知が重なったときの挙動、閉じるボタンの有無を確認する必要がある。
よくある勘違い
すべてのエラーをトーストで出せばよい？
よくない。入力欄のエラーは該当箇所の近くへ残し、修正方法を確認できるようにするほうがよい。
すぐ消えるほど邪魔にならない？
短すぎると読めない。内容の長さと重要度に合う表示時間が必要である。
画面に見えれば全員へ伝わる？
読み上げや拡大表示を使う人へ伝わらない場合がある。支援技術への通知も設計する必要がある。
まとめ
- トースト通知は短い操作結果を一時表示するUIである
- 作業を中断させない軽い通知に向く
- 重大なエラーや長文には別の表示方法を使う
- 表示時間、閉じる手段、読み上げへ配慮する
情報ソース
より詳しくAIに聞いてみよう
- トースト通知を初心者向けに説明してください。
- トーストとダイアログの違いを教えてください。
- トーストに向く内容と向かない内容を整理してください。
- 読み上げに対応したトーストを作ってください。
- 連続通知を安全に管理する設計を提案してください。