【とーすとつうち】

トースト通知 とは?

最終更新:
💡 トースターからポンと出てくるように、パッと現れてスッと消える通知

トースト通知とは画面の端にパッと現れて自動で消える小さな通知UIのこと。モーダルとの使い分け、実装のポイント(アクセシビリティ対応)をわかりやすく解説。

📌 このページのポイント
トースト通知の種類と表示位置 Webアプリ画面 保存する ✓ 保存しました × ↑ 数秒で自動消滅 種類 ✓ 成功:保存しました ✗ エラー:送信失敗 ⚠ 警告:容量不足 ℹ 情報:更新あり ユーザーの操作を中断せず、さりげなく結果を通知
トースト通知の表示と種類
ひよこ ひよこ
トースト通知って、あの画面の端にひょこっと出てくるメッセージのこと?
ペンギン先生 ペンギン先生
そうだよ!「保存しました」とか「コピーしました」みたいに、画面の隅にちょっとだけ表示されて自動で消えるアレだね
ひよこ ひよこ
なんで「トースト」って呼ぶの?
ペンギン先生 ペンギン先生
トースターからパンがポンと飛び出す動きに似てるから、と説明されることが多いよ。AndroidにはToastという名前の部品があって、「メール送信中…」のような短いメッセージを操作を邪魔せずに出して、時間が来たら自動で消すんだ
ひよこ ひよこ
モーダルダイアログとはどう使い分けるの?
ペンギン先生 ペンギン先生
モーダルは「ユーザーの操作を止めて確認させたい」とき、トーストは「操作を邪魔せず結果を伝えたい」ときに使うよ。削除の確認はモーダル、保存完了の通知はトーストという感じだね
ひよこ ひよこ
実装で気をつけることってある?
ペンギン先生 ペンギン先生
アクセシビリティが大事だよ。「保存しました」のような通知は`role="status"`(控えめに読み上げ)、急ぎのエラーは`role="alert"`(すぐに読み上げ)と使い分けてね。自動で消えるから、重要なエラーは画面内にも残すこと。複数出るときは重ならないように並べるのもポイントだよ
もっと詳しく知りたい人へ

トースト通知が自動で消えるのはアクセシビリティ的に問題ないの?

内容によるよ。W3CのWCAG 2.2「Timing Adjustable(2.2.1)」の解説では、メールの着信を知らせる通知が5秒で消えても、受信トレイなど別の方法で同じ情報を確認できるなら調整機能は不要という例が挙げられている。逆に、その通知でしか知ることができない情報なら、表示時間を延ばす・止める・自分で閉じるといった手段が必要になるよ。入力エラーのように対応が必要な内容は、トーストだけでなく画面内にも残すのが安全だね。

Androidではトーストとスナックバーのどちらを使えばいい?

Androidの公式ガイドは、アプリを操作中のユーザーへ知らせるならスナックバーを勧めているよ。スナックバーは「元に戻す」のような操作ボタンを付けられるからだね。アプリがバックグラウンドにあって操作が必要な場合は、トーストではなく通知(Notification)を使うよう案内されているよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「トースト通知」って出てきたら「画面の端にポッと出てスッと消える通知」と思えればだいたいOK!
📖 おまけ:英語の意味
「Toast Notification」 = トースト型通知
💬 トースターからパンがポンと飛び出す様子にたとえた呼び名と説明されることが多いよ。AndroidにはToastという名前の通知部品が標準で用意されているんだ

参考資料

← 用語集にもどる