動きを入れる前に決める7つのこと
UIアニメーションを入れる前に何を決めるべきですか?時間やイージングの目安も知りたいです。 まず動かすかどうかを決め、動かすならtransformとopacityだけを使い、ボタンは100~150ms、画面遷移は250~400msを目安にします。
アニメーションは、入れるかどうかから決めます。1日に何十回も見る動作に効果を入れると、すぐに邪魔になります。
使い方
- まず問います。この動きは「どこから来てどこへ行ったか」を伝えているか?そうでなければ外します。
- 1日に何十回も使う動作(タブ切り替え、一覧のスクロール)は短く、または動きなしに。たまに起きること(初完了、決済成功)だけ大きくします。
- 動かす属性は位置(transform)と透明度(opacity)だけにします。サイズや余白を動かすと、画面がもたつきます。
- 長さの目安: ボタンの反応100~150ms、小さな要素の登場150~250ms、画面遷移250~400ms。400msを超えると遅く感じます。
- カーブの目安: 入ってくるときは減速(ease-out)、出ていくときは加速(ease-in)、手で引いて離す動作はスプリング。
- 途中で中断できる必要があります。開く途中で閉じるを押したら、その場から戻るようにします。
- 端末で「視差効果を減らす」をオンにしている人には、移動の代わりにフェードだけを見せます。
コピーして使うプロンプト
モーションルールの適用
以下のルールで、この画面のアニメーションを整理してください。 - transformとopacityだけをアニメーションさせる。width、height、top、leftは動かさない。 - ボタンの押下120ms、小さな要素の登場200ms ease-out、画面遷移300ms。 - よく使う動作(タブ切り替え、一覧)は効果を最小限に。 - 開く途中で閉じたら、その場から戻るようにする(途中キャンセル可能)。 - prefers-reduced-motionがオンなら、移動なしでopacityのフェードだけにする。