トースト通知とは何ですか？

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

トースト通知のポイントは？

画面の隅に一時的に表示され、数秒で自動消滅する通知メッセージ。ユーザーの操作を中断させず、さりげなく情報を伝えられる。成功・エラー・警告など状態に応じて色やアイコンを変えるのが一般的

【とーすとつうち】

最終更新: 2026年4月20日

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

📌 このページのポイント

トースト通知の表示と種類

ひよこ

トースト通知って、あの画面の端にひょこっと出てくるメッセージのこと？

ペンギン先生

そうだよ！「保存しました」とか「コピーしました」みたいに、画面の隅にちょっとだけ表示されて自動で消えるアレだね

ひよこ

なんで「トースト」って呼ぶの？

ペンギン先生

トースターからパンがポンと飛び出す動きに似てるからだよ。Androidが最初に「Toast」という名前でこのUIを実装して、それが広まったんだ

ひよこ

モーダルダイアログとはどう使い分けるの？

ペンギン先生

モーダルは「ユーザーの操作を止めて確認させたい」とき、トーストは「操作を邪魔せず結果を伝えたい」ときに使うよ。削除の確認はモーダル、保存完了の通知はトーストという感じだね

ひよこ

実装で気をつけることってある？

ペンギン先生

アクセシビリティが大事だよ。スクリーンリーダーに読み上げてもらうために`role="alert"`や`aria-live="polite"`を付けること。あと複数のトーストが同時に出る場合はスタック表示にして、重ならないようにするのがポイントだね

まとめ：ざっくりこれだけ覚えればOK！

「トースト通知」って出てきたら「画面の端にポッと出てスッと消える通知」と思えればだいたいOK！

📖 おまけ：英語の意味

「Toast Notification」＝トースト型通知

💬 トースターからパンがポンと飛び出すように、画面の下からニョキっと出てくるからこの名前がついたんだよ