より良いユーザー体験のためのモーションデザインのヒント | アドビ UX 道場 #UXDojo
アニメーションはデザイナーの強力なツールです。アニメーション効果を活用すれば、ナビゲーションによるコンテキストの変化をユーザーに示したり、画面要素の配置が変化した意味を説明したり、UI 要素の階層を明確化することが可能です。そのため、インタラクションデザインにおいて、アニメーションは欠かせない要素になっています。
デジタル製品のデザインプロセスでは、アニメーションを後付けの要素として扱う傾向があります。デザイン作業がほぼ終了した後に、動きを導入し始めることは決して珍しくありません。さらに、多くのデザイナーは UX を意識したアニメーションの経験を持っておらず、直感に頼って作業した結果として、悪いユーザー体験をつくり出すこともあります。
この記事では、まずモーションデザインの概念について説明し、その後アニメーションを制作する際に覚えておくべき、アニメーションの基本原則をいくつか紹介したいと思います。
モーションデザインとは？
モーションデザインとは、アニメーションや視覚的な効果を使用して、グラフィックデザインの原則をデジタル製品に適用する行為です。グラフィックデザイン、コレオグラフィー、ストーリーテリングは、モーションデザイナーが優れたアニメーション効果をつくり出すのに必要なスキルです。また、Adobe After Effects などのツールも使用できることも求められます。
UX アニメーションの原則
モーションデザインは、UI 全体のユーザー体験に関わり、インタラクションデザインに深みを与えて、より自然な体験を生み出す力を持っています。ただし、それを実現するには、モーション言語を適切に実装することが必要です。
アニメーションに意味を持たせる
十分な考慮を欠いたままデジタル製品にアニメーションを追加することは、よくある失敗のひとつです。たとえ見栄えが良くても、ユーザーインタラクションの価値を増すとは限りません。
なにより、動かしたいという理由だけでアニメーションを使うのはやめましょう。機能的なものも、愉快なものも、アニメーションはユーザーに意味を持つものであるべきです。アニメーションが目的に合っていないと、ぎこちなさや煩わしさを感じさせる可能性があります。アニメーションのせいで作業の進行が遅れているときは、特にそう感じるでしょう。良いアニメーションは、インターフェイスに何を期待できるかをユーザーが理解する助けになり、目的へと向かうユーザーを支援するものです。
以下は、一般的にアニメーションが特に有効ないくつかのケースです。
状態の遷移（変化の見落としを防ぐアニメーション）
UI の状態遷移は、ハードカット（途中に遷移の効果を伴わない画面から画面への遷移）の使用が標準的ですが、これが変化への追従を困難にする場合があります。現実の世界では、ものが突然現れたり消えたりすることはまずありません。車を運転していて赤信号で止まりたければ、徐々に速度を落として、静止するのはその後です。デジタル製品にも同様のルールが適用されるべきです。複数の状態を持つ要素が、状態間で遷移するとき、その変化が瞬間的ではなくてアニメーションを伴うものであれば、ユーザーはより容易に理解できるでしょう。
優れたモーションデザインは、これから起こることの手がかりをユーザーに与えます。下の例では、小さなカードをタップすると、そのアイテムが拡大されて詳細画面になります。アニメーションのおかげで、どのように新しい状態に至ったかをユーザーは明確に理解できます。
アニメーションは、初期状態から最終状態へと至る中間状態をつくり出し、徐々に変化させることで遷移の前後をつなぐ 出典: Dribbble
視覚的な合図（UI の使い方を理解するアニメーション）
製品を初めて使用するユーザーの中には、どこを見て、何をすればよいのか戸惑う人がいるかもしれません（特に、さまざまな機能が提供されている製品）。このような場合、アニメーションを使って、ユーザーに今の状況と自分が何をしているのかを理解させる視覚的な合図をつくり出すことができます。良くデザインされたアニメーションを伴う画面遷移は、ユーザーの注意を適切なタイミングで適切な場所に誘導します。そして、目的に応じた適切な要素を強調します。これが、新規ユーザーのオンボーディングにも、アニメーションが適している理由です。
アニメーションは、ユーザーの注意を喚起し、あるジェスチャーが誘発する結果を暗示する 出典: Material Design
視覚的なフィードバック（アクションと反応）
ユーザーがデジタル製品を操作すると、画面上では何かが変化し続けますが、GUI は、その性質上、反応が受け身になります。ニールセンのユーザビリティ 10 原則のひとつ「システムの状態の可視化」は、UI デザインにおいて最も重要な原則のひとつです。ユーザーは、常に現在の状況を知りたいものです。製品は、ユーザーを待たせる代わりに、適切な視覚的フィードバックを通じて何が起きているかを伝えるべきです。
アニメーションは、ユーザーのアクションに対する視覚的なフィードバックを提供する優れた手段です。視覚的なフィードバックは、操作している画面にリアルな感覚を与え、その操作の結果（成功したかどうか）を示します。ほとんどすべてのユーザー操作は、この恩恵を受けられます。例えば、ボタンを押したときの反応を、アニメーションはより印象的にすることができます。
「いいね！」の反応への視覚的なフィードバック 出典: Li Junfei
また、処理の結果をユーザーに伝える場合も、視覚的なフィードバックは有効です。処理が成功しなかった場合、アニメーションは問題に関する情報を、すばやく理解しやすい形で提供する手段となります。
ユーザーはこのアニメーションを見て、すぐに問題点を理解する 出典: thekineticui
一度に動かすオブジェクトの数をできるだけ減らす
アニメーションや遷移については「少ないほど良い」が特にあてはまります。画面上のすべての動きが注意を引くために、同時に多すぎるアニメーションは混乱の元になります。複数のオブジェクトを動かすと、ユーザーが動きを追いかけることが困難になります。したがって、アニメーションさせたい要素が複数ある場合は、動きの順番を明確に定義して、一度に動かすオブジェクトの数を可能な限り減らすべきです。
最適なアニメーションの継続時間と速度を選択する
遷移のアニメーションをデザインする上で、タイミングはおそらく最も重要な検討事項のひとつです。アニメーションをリアルに感じさせるために、タイミングがとても重要な役割を果たすからです。また、アニメーションの継続時間に関しては、バランスに注意しましょう。遷移の速さは、不快なほど速いのも、ユーザーを待たせるほど遅いのも不適切です。ユーザーが十分に変化に気付ける程度に遅く、待ち時間を感じさせない程度に速いアニメーションが理想的です。
アニメーションには、迅速かつ正確であるべき。ユーザーのアクションからアニメーション開始までの遅れが（ほとんど）ないことが理想。上のサンプルアニメーションは、ユーザーを待たせ、悪い UX の原因になっている 出典: Material Design
研究によると、インターフェイスのアニメーションに最適な速度は 200 ～ 500ms であることが判明しています。100ms より短いアニメーションは刹那的で、まったく認識されないかもしれません。一方、1 秒以上のアニメーションは遅延を感じさせ、ユーザーをイライラさせるでしょう。
ただし、装飾的なアニメーションを制作する場合は、このルールに依存する必要がありません。装飾的なアニメーションは、必要に応じて速度と継続時間を選べます。
イージングの選択が正しいことを確認する
物理的な世界で現実のオブジェクトが動くときは、何らかの加速や減速を伴います。UI オブジェクトのアニメーションの場合も、同じルールに従うべきです。直線的な動き（オブジェクトが一定の速度で動くこと）は、動きが機械的に見えるため避けましょう。直線的なアニメーションが適切な場面があるとすれば、オブジェクトの位置に変化のない装飾的なアニメーション表現のみです。
製品の本質に合ったモーション言語を使用する
使用するモーションは、製品の本質に沿ったものであるべきです。例えば、金融機関のアプリをデザインするとき、送金の確認画面に飛び跳ねるようなアニメーションを導入してみようと思うかもしれません。ですが、跳ねるアニメーションは深刻ではない感じを与える特徴を持っています。つまり、おそらく堅いイメージのビジネス用の製品には向いていません。
金融向けには、横スライドのようなあまり目立たないアニメーション効果を使用するのがよい 出典: Olga Tsebro
長期的な利用を意識する
たとえ良いアニメーションであっても、使い過ぎると目障りになってくることがあります。アニメーションをデザインするとき、次のように問いかけてみましょう。「このアニメーションは、100 回以上目にすると煩わしくなるか、それとも、いつまでもわかりやすくて邪魔にならないものか？」
ユーザーを喜ばせるアニメーション
ユーザーの感情に配慮することは、UI のインタラクションデザインにおいてとても重要です。Aarron Walter は、彼の著書『Designing for Emotion』に次のように書きました。「パーソナリティは不思議な力で、私たちを特定の人に引き付け、他の人には反発させます」。
ユーザーが個人的な目標を達成したとき、アニメーションでそれを褒め称えることができます。例えば、メールアプリでユーザーが受信トレイをすべて既読にしたときや、タスク管理ツールの特定のタスクを完了したときなど、アニメーションを用いて製品との関わりをより深めることが可能です。
Asana では、ユーザーが特定のタスクを完了すると、ユニコーンのアニメーションが表示される
アクセシブルな UI をデザインする
インタラクションにアニメーションを使用する場合は、アクセシビリティに関する追加の配慮が必要です。 Web Content Accessibility Guidelines は、動きのあるコンテンツやインタラクションに関する、多くの推奨事項を提供します。その中には、一時停止や再生の制御をユーザーに提供すべき場面、画面上の点滅や発光に対する制限に関するガイドライン、あるいは、動きを減らしたオプションを運動過敏のユーザー向けに提供すべき場面についてのアドバイスが含まれます。
Web もネイティブプラットフォームも、動きの効果の削減を必要とするユーザーのために、好みを示す手段を提供しています（Web では prefers-reduction-motion クエリ）。激しい動きを簡素化したアニメーションを提供し、そうしたユーザーの期待に対応することは望ましい行為です。
プロトタイプを使ったテスト
プロトタイプは、デザインにアニメーションを使用する意図を確認するための最良の方法です。インタラクティブなプロトタイプは、何が有効なのか、アプリのどこに欠点が隠れているのかを明確に映し出します。多くの場合に、アニメーションの見た目と感覚のずれを直すために、完全な手直しになることでしょう。すなわち、最初から完璧なアニメーション効果を実現することはできません。何回も、そして素早く修正を繰り返しましょう。ほんの些細なことでも、見直しを何度となく反復すれば、素晴らしいアニメーションに近づけられます。
おわりに
アニメーションは、ユーザーインターフェイスに生命を吹き込む、現代のデジタル製品に欠かせない要素です。製品をより使いやすくするだけでなく、視覚的な魅力を増すこともできます。ただし、それはデザイナーが適切なモーション言語を使用した場合のみ起きることです。
優れたアニメーションは目に見えないでしょう。自分がアニメーションを見ていると、ユーザーに気づかせないことが望ましいのです。しかし、素晴らしいユーザー体験が提供されていることには気がついてくれるはずです。
この記事は Animation Principles for UX Designers（著者: Nick Babich）の抄訳です