ITワクワク塾Toastとは？操作の結果を短く知らせるUIパターン
参照したオンライン文書の版番号：未確認 Webのアクセシビリティ基準：WCAG 2.2
Toastは保存や削除の結果を短く伝える通知です。表示する条件、消える条件、利用者が後から結果を確かめる方法を一緒に考えます。
Toastとは
「保存しました」のように、操作が終わったときに画面を大きく変えず結果を伝える表示です。Radix PrimitivesのToastは一定時間で閉じる仕組みを持ち、マウスを重ねたときやキーボードの焦点があるときには終了を一時停止できます。Androidでは似た用途にSnackbarという名称を使い、「元に戻す」などの操作を添える形です。
短い通知に重要な情報を全部入れると、消えた後に確認できません。保存状態が必要なら画面内の表示も更新し、削除の取り消しが必要なら通知内の操作が使える時間を十分に取ります。
2つの画面例
左は保存が完了した状態、右は項目を削除した直後です。いずれも架空の画面で、通知だけでなく、元の画面にも結果を反映しています。右は「元に戻す」を通知の中に置きました。
失敗を知らせる場合は原因や次の行動が必要か判断します。再試行が必要な大きなエラーを、すぐ消える通知だけに任せないでください。Webではrole="status"などを使い、画面の変化を読み上げる方法があります。
実例から見る設計の違い
Toastと近い用途の短い通知であるAndroidのSnackbarの公式画像から、操作を添える場合の見せ方を比べます。この節の引用画像は出典元の著作物で、当サイトのCC BY 4.0の対象外です。
例1：短い文と操作を一列に置く
通知文、操作、閉じる印を一列に収めた例です。明るい背景と暗い背景のどちらでも、操作が通知文と区別できるようにしています。
例2：削除後に元へ戻す
「1件を削除した」という結果と「元に戻す」を同じ通知に置いています。実行直後の取り消しを支えるなら、利用者が操作できる時間も設計に含めましょう。
Radix PrimitivesのToastでは表示時間と、読んだり操作したりしている間の停止条件を確認できます。MUIのSnackbarは表示位置を変える例を載せた資料です。
AIに画面を依頼するとき
メモを保存できたときだけ短い通知を出し、一覧の保存状態も更新してください。削除後の通知には「元に戻す」を付けます。通知へ焦点を当てている間は消えないようにし、失敗時は画面内で再試行できるようにしてください。