取り消せる操作は止めない、取り消せない操作だけ止める(確認ダイアログと Undo)

一言まとめ

全部の削除に確認モーダルを出すと読まずに押す癖がつき、確認が働かなくなる。復旧できる操作は確認なしで Undo 付きトースト、復旧できない操作だけ確認モーダル(+ 退避手段)。トーストは「結果の報告」は自動で消し、「まだ終わっていない用件」(エラー + 再試行)は手動で閉じるまで残す。

作成 · 更新 · #ux#confirm-dialog#undo#toast
目次 6 sections
  1. 01 原則
  2. 02 「まとまった削除も Undo で済ませる」を採らない理由
  3. 03 トーストの消え方
  4. 04 重なりの扱い
  5. 05 関連
  6. 06 更新履歴

調査時点: 2026-08。ある PWA(片手でスマホ入力する前提)の設計から。

原則#

操作扱い
復旧できる(1 件の削除など)確認なし。Undo 付きトースト(6 秒)
復旧できない(まとまったデータの削除など)確認モーダル。対象の名前と件数を明示し「この操作は取り消せません」と書く。同じ画面に退避手段(「削除前に .json をダウンロードする」チェック)を置く
状態が一方通行に変わる(記録の終了、編集の破棄)確認モーダル。要約(N 日間 / N 件)を添える

確認モーダルは「押した後に取り返せない」ときだけの道具として温存する。全部に出すと形骸化する。

「まとまった削除も Undo で済ませる」を採らない理由#

Undo が生きている間にアプリを閉じられると復旧不能になる。削除済みデータを保持し続ける必要も出る。

トーストの消え方#

種別内容消え方
保存「保存しました」+ 時刻2 秒で自動
削除「削除しました」+「元に戻す」6 秒
エラー「候補を取得できませんでした」+「再試行」+ offline · 手入力で保存できます手動で閉じるまで残す

保存・削除は結果の報告だが、エラーは「まだ終わっていない用件」で再試行の入口を兼ねる。勝手に消すと用件ごと消える。

重なりの扱い#

  • トーストはシート・モーダルより手前に出す(裏に回ると閉じられなくなるため)。
  • ただし保存トーストだけは、ボトムシートが開いているあいだ出さない(連続入力で入力欄に被るため)。保存できたことは一覧に項目が増えることで分かるので、情報は失われない。Undo とエラーは代わりが無いので隠さない。
  • 空状態の「ここを押す」矢印のような浮いた要素は、トーストと構造的に重なる。表示条件で回避するとトーストの種類が増えるたびに調整が要るので、要素自体を消して説明を 1 か所に集める。

関連#

更新履歴#

  • 2026-08-29: 初版(ローカル調査ノート)
  • 2026-10-17: Wiki へ移植、概念ページとして再構成

同じトピック — UI/UX