トースト通知 — 動きの伝え方辞典

toast notification / snackbar

トースト通知

画面端からスッと現れ、数秒で自動的に消える通知。入りは減速(ease-out)で素早く、出は加速(ease-in)で静かに退場させる非対称設計が肝。複数積まれたときの詰め直しまで動かすと完成度が跳ねる。

01 — Demo video

Play live →

02 — Prompt template

トースト通知(スナックバー)を実装してください。

- トーストは画面右下に固定し、画面外(translateX(120%))から {{duration}}s でスライドインさせる。イージングは ease-out(例: cubic-bezier(0.22, 1, 0.36, 1))
- 表示から {{hold}}s 経ったら自動で退場させる。出は入りと非対称に、ease-in で画面外へ滑らせながら opacity 0 へフェードする
- 複数のトーストはスタックさせ、1つ消えたら残りを transform の transition で滑らかに詰め直す(topやmarginをアニメーションさせない)
- 動かすのは transform と opacity のみ。リフローを起こさない
- prefers-reduced-motion 時はスライドさせず、opacityのフェードのみで出し入れする

トースト通知(スナックバー)を実装してください。

- トーストは画面右下に固定し、画面外(translateX(120%))から {{duration}}s でスライドインさせる。イージングは ease-out(例: cubic-bezier(0.22, 1, 0.36, 1))
- 表示から {{hold}}s 経ったら自動で退場させる。出は入りと非対称に、ease-in で画面外へ滑らせながら opacity 0 へフェードする
- 複数のトーストはスタックさせ、1つ消えたら残りを transform の transition で滑らかに詰め直す(topやmarginをアニメーションさせない)
- 動かすのは transform と opacity のみ。リフローを起こさない
- prefers-reduced-motion 時はスライドさせず、opacityのフェードのみで出し入れする

トースト通知(スナックバー)を実装してください。

- トーストは画面右下に固定し、画面外(translateX(120%))から {{duration}}s でスライドインさせる。イージングは ease-out(例: cubic-bezier(0.22, 1, 0.36, 1))
- 表示から {{hold}}s 経ったら自動で退場させる。出は入りと非対称に、ease-in で画面外へ滑らせながら opacity 0 へフェードする
- 複数のトーストはスタックさせ、1つ消えたら残りを transform の transition で滑らかに詰め直す(topやmarginをアニメーションさせない)
- 動かすのは transform と opacity のみ。リフローを起こさない
- prefers-reduced-motion 時はスライドさせず、opacityのフェードのみで出し入れする

03 — Params

duration(スライド時間 s) — 範囲 0.15〜1 / 初期 0.35
入りのスライド時間。0.25〜0.4sが快適。通知は「速く出て静かに消える」が基本。
hold(表示時間 s) — 範囲 1〜8 / 初期 3
自動で消えるまでの時間。一言の通知で3s前後、読ませる文なら5s。1s台は読み終わる前に消える。

04 — Vocab

toast / snackbar — 画面端に出る一時通知の呼び名。Android圏はsnackbar、Web一般はtoastで通じる。
in-out非対称 — 入りはease-outで素早く、出はease-inで静かに。UI要素の出入りはイージングを変えるのが原則。
auto dismiss — 一定時間後の自動消去。hold(表示時間)とセットで秒数を指定する。
stacking — 複数トーストの積み上げ。1つ消えた後の詰め直しをどう動かすかまで含めて指定する。

05 — NG → OK examples

言い方: 「「通知をアニメーションで出るようにして」」

なぜNG: 位置も消えるタイミングも決まらない。入りと出が同じイージングのまま返ってきて機械的な印象になりがちで、複数表示の挙動が未定義のままトースト同士が重なるバグも起きやすい。

言い方: 「「トーストを右下からtranslateXでスライドイン、0.35s ease-out。3s後にease-in+opacityフェードで退場。スタック時の詰め直しはtransformのtransitionで」」

なぜOK: 入りと出の非対称・自動消去の秒数・スタックの詰め直し方式まで指定。「transformのみ」の一言でリフローしない実装が担保される。