Design Pattern

トースト通知

トースト通知は、ユーザーの操作を中断せずに短いフィードバックを返す軽量 UI です。表示位置や消去タイミングだけでなく、aria-live や role の使い分けまで含めて設計する必要があります。

難易度: 中級カテゴリ: フィードバック

いつ使う / 使わない

使うべきとき

保存やコピーなど、操作成功を簡潔に伝える場合
バックグラウンド処理の完了を非モーダルに通知したい場合
ユーザーの作業を止めずにフィードバックしたい場合

使わないべきとき

確認が必要な重要エラー → ダイアログを使う
常時表示すべき情報 → バナーやアラートを使う
フォームの入力エラー → フィールド近くにインライン表示する

構造（Anatomy）

1 トーストコンテナ（位置固定の領域）

2 トースト本体（個別の通知カード）

3 アイコン（種類を視覚的に示す）

4 メッセージテキスト

5 閉じるボタン / プログレスバー（オプション）

コンテナ — 複数トーストをスタックする固定領域
トースト本体 — role="status" または role="alert" を持つ通知カード
アイコン — 成功、警告、エラーなどの種類を補助する
メッセージ — 短く具体的なフィードバック文
補助要素 — 閉じるボタンや残り時間を示す進捗表示

HTML 構造

重要なポイント

非緊急の通知には role="status"、緊急通知には role="alert" を使い分ける
aria-live 領域として機能するように構成する
閉じるボタンがある場合は明確なラベルを付ける
トーストは JavaScript で動的追加されても読み上げられる構造にする

CSS 実装

配置とアニメーション

画面端に固定し、スタック順を一貫させる
opacity と transform を使って自然に出入りさせる
種類ごとに色分けしても、アイコンや文言で意味を重ねる
進捗バーを使う場合は残り時間の把握に役立つようにする

操作ガイドライン

トーストはユーザー操作をブロックしない
閉じるボタンがある場合はキーボードフォーカス可能にする
ホバー中の自動消去停止など、読み切るための猶予を検討する

ライブデモ

成功トースト

成功メッセージを非モーダルに通知する基本形です。

スタイルバリエーション

成功・警告・エラー・情報を区別する例です。

自動消去（プログレスバー付き）

スタック表示と残り時間表示を組み合わせた例です。

よくある間違い

非緊急メッセージに role="alert" を使う

読み上げを強制的に割り込ませるため、成功通知などには過剰です。

表示時間が短すぎる

読める前に消えるトーストは、通知として意味を失います。

スクリーンリーダーに通知されない

aria-live や role の設計がないと、見えていても支援技術には届きません。

色だけで種類を区別する

色覚多様性を考えると、形や文言による補助が必要です。