- アニメーションは適切に使えば、インターフェースの予測可能性、体感速度、楽しさを高める役割を果たす
- しかし、無秩序に使われたアニメーションは予測不能さや遅延、さらにはユーザーの信頼低下さえ引き起こしかねない
- 重要な最初のステップは、アニメーションの明確な目的を定めること
- アニメーションの使用頻度が高いほど、むしろアニメーションのない体験のほうが望ましい場合がある
- アニメーションの速度も、認知的パフォーマンスとユーザー満足度において決定的に重要である
アニメーションの目的意識
- 正しいアニメーションの使用は、インターフェースの予測可能性、体感速度、使用体験の楽しさを向上させる
- 誤ったアニメーションは、インターフェースを遅く、混乱し、不快なものにし、ユーザーの製品への信頼に悪影響を与える
意図の重要性
- アニメーションを適用する前に、「このアニメーションの目的は何か」と自問すべき
- 例として、LinearのProduct Intelligenceのマーケティング用アニメーションは、静的な画像の代わりにその機能がどう動くかをすぐに見せることで、ユーザーの理解を助ける役割を果たしている
- ボタンを押したときの微妙なscale down効果は、インターフェースをより生き生きとし、応答性のあるものに感じさせる
- Sonnerのtoast表示アニメーションには、次の2つの目的がある
- 突然現れるのではなく自然に表示されるようにして、違和感を和らげる
- 同じ方向から表示・退出させることで空間的一貫性を保ち、swipe-downジェスチャーの直感性を高める
- ときには「喜び」そのものがアニメーションの目的になることもあり、まれに行われるインタラクションでは新鮮さや記憶に残る体験を提供する
- ただし、使用頻度が高くなると最初の喜びはすぐにいら立ちや遅延へと変わりうる
使用頻度とアニメーション
- アニメーションを頻繁に目にするほど、ユーザーの疲労感や作業の遅れが大きくなる可能性がある
- たとえば、Raycastを繰り返し使う状況では、不要なアニメーションは大きな妨げになる
- 繰り返し使うメニューやリスト、キーボードで操作する場面では、アニメーションを完全に省くほうが望ましい
- 実際に、キーボード使用時にはアニメーションがかえって反応速度を落とす例が紹介されている
- 「アニメーションのない体験」が、特定のシナリオ（反復作業、大量処理など）では最適な選択になりうる
速度認知と応答性
- マーケティングサイトを除けば、すべてのUIアニメーションは素早く動作すべきであり、それによってユーザーが感じる性能と応答性が高まる
- 高速で回転するローディングスピナーは、読み込み時間が同じでもより速く感じさせる
- 180msのdropdownアニメーションは、400msよりもはるかに応答性が高いと感じられる
- UIアニメーションはおおむね300ms未満が適切
- ツールチップは最初に表示されるときには少し遅延があるほうがよいが、いったん開いた後は追加のアニメーションなしで即座に反応するほうが最良の体験を提供する（Radix UI、Base UI参照）
- ツールチップ間の無遅延な切り替えは、目的を損なうことなくユーザー体験を改善する
優れたインターフェースを構築する
- アニメーション自体が目標なのではなく、優れたユーザーインターフェースを構築することが最終的な目標である
- ユーザーが日常的に進んで使いたくなる体験を作ることが重要
- ときにはアニメーションが必要だが、状況によっては**「アニメーションなし」こそ最良の選択**になりうる
- いつ、どのようにアニメーションを適用するかを知ることが、UI/UX設計における重要な能力である
まとめ
- 優れたインターフェースを作るには、アニメーション活用への深い理解が必要
- 追加の理論・実践資料は「Animations on the Web」で確認できる
1件のコメント
Hacker Newsの意見
デザイナーがアニメーションについて議論するたびに、「ポリッシュ」や「喜び」といった言葉を使いながら、これらの要素を知覚遅延と天秤にかける傾向がある。完全に間違っているわけではないが、いくつか物足りなさが残る
「喜びが誇張されている」という意見について、適切に使われ、邪魔にならないのであれば、ソフトウェアにおける意味のあるアニメーションにはユーザーに対して確かなポジティブな効果がある。ただし、多くの人が期待する効果とは少し違うかもしれない
よく設計されたアニメーションは、「良い」と「素晴らしい」を分ける最後の20%の要素であり、必須ではないが、競合との比較で差別化を生む要素になる
アニメーションに価値があり得る現実的な理由は、フィジカル製品で人々が重厚感や耐久性を高級品の基準にする現象と似ている
しかし過去10年間、UIデザインは「雰囲気」「強い演出」「ブランディング」に偏ってきており、実際に効果的なアニメーション活用に関するまともな研究と実用性が軽視されている
今こそ、UIデザインは実用的なユーザビリティ重視へ立ち返るべきだと思う
ボタンをクリックしたときに起こる微妙なスケールダウン効果をアニメーションの一種と見なすことに驚いた。これはクリック可能であること、そしてクリックが認識されたことを知らせるごく基本的な視覚フィードバックだ
ソフトウェアデザインで「delight」自体を重視する姿勢は、（旧来の）Appleファンによく見られるものだ。たとえば、Jobs以後のAppleから楽しさが減ったことを惜しむような現象である
このテーマを総合的に整理した代表的な文章を知っているわけではないが、この短い文章で言及されている
こうしたディテールを好む性向は、特定のデザイナーだけの趣味や狭い現象ではなく、Appleファンダムの中核的特徴の一つだ
B2B環境で働くデザイナーが、B2Cっぽい感覚でデザインしてしまう状況によく遭遇する
B2B（特にエンタープライズ）では、単にユーザーの日常業務の道具になるだけなので、派手なアニメーションや多彩なグラデーション（最近ではこれがAIを意味することもある）などは実務の助けにならず、むしろ注意を散らす
こうした装飾的要素は、ユーザーがテキスト中心のダッシュボードを効率よく探索することの妨げにしかならない
「きれいで気分の良い」体験を作りたいなら、どうせCRM/ERPのようなワークフロー企業は向いていない。ユーザーの感情的満足がビジネス価値に直接つながる会社で働いてこそ意味がある
「delight」が誇張されているという意見には同意できない
たとえば、Apple/iPhoneユーザーが1週間Androidを使ってみると、「何か不自然で引っかかる」と感じたと言うはずだ
こうした部分は、iOSがインタラクション全体にわたって丁寧に作り込まれたアニメーションのおかげだ
一般消費者はこの体験を「delight」という用語で表現しなくても、以前より悪い体験をしたときには確実にそれを認識する
Appleにはこの点で学ぶべきところがあると思う。不要なアニメーションを待つために時間を無駄にすることが多い
たとえば、一番下までスクロールしてからボタンをタップしても、bouncingアニメーションが終わるまで何度も押さないと反応しない
アプリ間のスワイプ、通知を閉じる操作、Dockやドロワーを開く動作など、ほとんどのジェスチャーベースのアクションが過剰に遅い
アニメーションが連続で実行され、1つ終わって次のアニメーション、そのあとでようやく操作できる
アクセシビリティ設定でこうしたアニメーションを切って初めて少し快適に使えるという状況は皮肉だ
Apple Walletがスマホに接続されるとき、画面全体で何の役にも立たないアニメーションが走り、その間は何もできないのでいら立つ
ただ接続されたら、小さなハプティクス信号だけで十分だ
iOSのナビゲーションアニメーションはすべて途中で中断して別の行動ができるように設計されていて、最後まで必ず待つ必要はない
MacOSでデスクトップ/スペースを切り替えるとき、アニメーションが完全に終わるまで、すべての入力が前のスペースにしか反映されず本当にいらいらする
Appleは今やUI/UXを本気で気にしていない。こういう巨大組織では、Steve Jobsのような強力な意思決定者がいなければ良いユーザー体験を作るのは難しい
そしてしばしばデザイナーは、「平均的なユーザー」が自分や製品のファンなのではなく、単に基本機能と一貫性だけを求めている現実を自覚できていない
何かを変えるたびに、おばあちゃんに見せて「わあ、これは本当にずっと良くなった」と感嘆しない限り絶対に変えない、くらいの姿勢が必要だ
私はむしろアニメーション速度をもっと速くしたい
300msは私には遅すぎる
ほとんど認識できないくらい短いアニメーションのほうが好みだ
実際、アニメーションをなくして初めてその存在に気づくこともある
それ以上長いと遅すぎると感じる
私も以前は250msくらいを使っていたが、最近は200msに縮めた
200msは、何が、どう、なぜ変化したのかを把握するのに理想的なUI遷移速度だ
この基準を満たせないなら、遷移自体をなくすべきだ
200msはCSSでも単純に
.2sと書けるので便利だ150ms以下だとレンダリングのグリッチのように感じられることがあり、あまりに短いとかえってアニメーションの利点が失われる
Androidスマホを初めて使うとき、最初にやることは開発者モードでアニメーション速度を2倍速く設定することだ
標準速度のまま動くのを見ると、あまりにももどかしい
Webデザインにおけるアニメーションは、実際にはPowerPointの演出と大差ない
たいていの場合、素早いクロスフェードを1つか2つ使えば、すっきり整理されたUIを作れるし、それ以上が必要になることはめったにない
私は、アニメーションはユーザーがすでに知っている内容を確認させるときにだけ意味があると思う。アニメーション自体が情報伝達の手段になってはいけない
つまり、アニメーションを切っても同じ速度で作業を進められ、フローも同じように理解できるべきだ
アニメーションの目的は、UXジャーニーをなめらかにつなぎ、状態が期待どおりであるという小さなシグナルを与えることだ
たとえばマウスホバー時にすばやくハイライトされれば、自分のマウスがコントロールの上にあることを追加で意識する必要がない
ツールチップのポップアップの例のように、一度表示された後は0msで即座に出る場合、ユーザーのUXフローを本当によく理解しているという感覚を覚える
こういうものこそ、UXジャーニーをよく理解したアニメーションの代表例だ
私の原則は、ユーザーがアニメーションの終了を待たないと操作を続けられないなら、そのアニメーションは削除すべきだということだ
そして、すべてのアニメーションをオフにできるアクセシビリティオプションを必ず提供すべきだと思う
prefers-reduced-motionメディアクエリが本当に有用だ関連ドキュメント を参照
LinearのProduct Intelligence機能紹介用アニメーションについて、デザイナーの意図は理解できるが、実際に見ても理解の助けにはまったくなっていない
奇妙な3D角度のアニメーションは実際のUIと関係がないように見える
この3D効果が、画面内の特定のボックス（つまり製品）が私の読んでいるページそのものではないことを示唆してはいるが、それでもその機能自体を理解するのに大きく役立ってはいない
フェードイン効果のおかげでその領域には目が向くが、内容の伝達にはあまり貢献していない
「喜びを与える」アニメーションは、私の画面（例: M1 MacBook Pro）では問題なく見えるが、別の画面（例: IBM ThinkVisionの低解像度モニター）ではとても不自然で遅く見える
MacBookのデモ動画
低品質モニターのデモ動画
どのモニターで見るかによって、まったく違って感じられることがある
「高速で回転するスピナーは、より速く読み込まれているように感じさせる」という意見について、私はむしろ、実際には何も起きていないときに高速スピナーを乱用する悪いデザインを多く見てきたので、遅いスピナーのほうが信頼できるように感じる
私が信頼するのは、非線形に進捗が示されるローディングバーだけだ。そういう場合は、段階ごとに何かが本当に進んでいるシグナルをはっきり確認できる
遅いスピナーのほうが、かえって「重い処理をしているからもたついている」という信頼感があって、より信用できる
私の一日を台無しにする即効性のある例は、アニメーション実行中に状態の一貫性が失われるケースだ
たとえばWindowsで、あるアプリの通知ポップアップが出るとき、アニメーションが終わる前にXを押して閉じようとすると、その通知を開いてしまう
Macでデスクトップを切り替えるとき、アプリが一瞬画面に見えたあと別のアプリにぱっと切り替わるが、アニメーションが遅いせいで、もう終わったと思って何か操作してしまい戸惑うことがある
しかも、こうした現象がランダムに発生することすらある
デザイナーには、どうしてもアニメーションを入れたいなら完全に堅牢に作るべきで、そうでなければそのアプリを即座に信頼しなくなると言いたい