「やりすぎ」と「ちょうどよさ」— アニメーション設計の判断

最高のアニメーションは気づかれません。「なんか使いやすい」「気持ちいい」という感覚は、アニメーションが「あって当たり前」になっているサインです。

逆に「アニメーションがすごい」と気づかれたとき、それは多すぎるサインかもしれません。

過多 vs 適切

2つのUIを切り替えて操作してみてください。

2つのモードを切り替えて操作してみる。「過多」は疲れる、「適切」は快適

「過多」なUIは30秒見ているだけで疲弊します。アニメーションは「操作したときだけ反応する」ことで初めて意味を持ちます。

1. このアニメーションはユーザーに何かを伝えるか？ 変化の可視化、関係性の表示、フィードバック——どれかを果たさないなら「飾り」です。

2. このアニメーションがなくても意味は通じるか？ なくても意味が完全に通じるなら、それは「あると良い」ではなく「ある必要がない」かもしれません。

3. ユーザーはこれを何百回も見るか？ 毎日使うアプリの操作フィードバックなら短く（100〜200ms）。オンボーディングの初回体験なら長く（400〜600ms）でよい。

4. このアニメーションはユーザーの作業を遅らせないか？ フォーム入力中、情報を素早く確認したいとき——アニメーションが「待ち時間」になっていないか確認する。

フォームに実際に入力してみてください。どちらが作業しやすいか体感します。

左右どちらも入力してみる。左は「入力の邪魔」と感じるはず

一部のユーザーは、アニメーションが身体的な不調を引き起こします——前庭障害（めまい）、てんかん、乗り物酔いしやすい方など。

prefers-reduced-motion というメディアクエリを使うと、ユーザーのOSの「視差効果を減らす」設定を読み取れます。これを実装することで、アニメーションが不要なユーザーには動きが消えます。「アニメーションがなくても意味が通じるUI」になっているかのテストにもなります。

「モーションを減らす」をONにすると、アニメーションが消えます。アニメーションがなくても意味が伝わるかを確認しましょう。

「モーションを減らす」をONにしてから「すべて既読」を押す。アニメーションがなくても操作の意味が伝わるか確認できる

このシリーズ全9回のまとめです。アニメーションを追加・レビューするときに使ってください。

チェック項目	判断の視点
目的があるか	変化の可視化・関係性・フィードバックのどれかを果たしているか
速さは適切か	操作の種類に合った duration（ホバー200ms、モーダル320ms など）
動き方は文脈に合っているか	入場はease-out、退場はease-in。overshootは喜びの表現に
操作フィードバックか	hover・active・result の3段階が揃っているか
ナビゲーションの空間感か	進む/戻るの方向が一貫しているか
やりすぎていないか	常時アニメーションしていないか、作業を遅らせていないか
アクセシビリティ対応か	prefers-reduced-motion が考慮されているか

気づかれないアニメーションが最高のアニメーションです。

ユーザーが「このアプリのアニメーション、すごい」と言ったとき、それはやりすぎのサインかもしれません。「なんか使いやすい」「気持ちいい」と感じてもらえたとき——それがアニメーション設計の成功です。