UXの達人に学ぶ、アニメーション作成にありがちな失敗の回避策 | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

UXデザインにおける強力なツールのひとつがアニメーションです。今や、素晴らしいアニメーションを、ほぼすべてのプラットフォームやデバイス上で表現することが可能です。Adobe XDには自動アニメーション機能があり、見るものを引き込むようなアニメーション付きのプロトタイプを作成して、ブラウザでプレビューすることができます。

「画像やテキストだけの場合と比べて、アニメーションは、より深い意味を伝えることができます」とインタラクティブモーションデザイナークリス・ギャノンは強調します。「言葉だけでは語れない微妙な感情や感覚を伝えられます。また、ユーザインタフェースのモーションデザインにおいて、要素にアニメーションを付けると、アクションやタスクを明確化できます。特定の場所に視線を誘導したり、ユーザー入力を確認したり、操作に反応して誤操作を防いだり。つまり、『適切』に使われれば、アニメーションはとても強力な視覚言語となり得るのです」

クリスが指摘するように、大いなる力には大いなる責任が伴います。UIモーションデザインに関して、これは特に当てはまります。そこで、クリスをはじめとする数名のアニメーションの専門家に、アニメーションを使うときに人々が犯しがちな主要な間違いについて尋ねました。また、間違いを回避して、代わりにユーザー体験を改善するのに役立ついくつかの実用的なヒントも聞きました。

すべてをアニメーションさせる必要はない

クリスは、少ないほうが多くを得られると警告します。何かをアニメーションできるからといって、実際にそうすべきかは別問題だということです。

「UIにおけるモーションデザインは機能本位であるべきです。また、節度を持ってアニメーションを使用すべきです」と彼は忠告します。「アニメーションを使えば、見た目が素敵で、奇妙で、風変わりで、楽しいなど、共感を呼び起こす様々な表現ができます。多くの場合に、そうすることが適切です。ただし、あまりに多くのものが動いて根本的な意味が失われたなら、それはただ分かりにくく、過剰な認知負荷をつくりだすだけです」

「モーションデザイナーとして、私たちは、誇示したくなる自身の罪深い願望に抵抗し、代わりに明確で簡潔な仕事を目指すべきです。アニメーションが理解しやすく、インターフェイスを強化し補完するものであるように。そうすれば、きっとユーザーに感謝されることでしょう」

クリスギャノンによる、「ギャラリーに追加」アニメーション。明快で単純で直線的なジャーニーは、優しく視線をターゲットに誘導する

イージングの美点をを忘れずに

Designing Interface Animationの著者で、アドビのデザインアドボケートのヴァル・ヘッドは、アニメーション初心者のデザイナーに最もありがちな間違いは、イージングに注意を払わないことだと言います。

「イージングとは、アニメーションの途中で動いているオブジェクトのスピードを変化させることです。これは、アニメーションの出来栄えに大きく影響する要素です。現実の世界では、オブジェクトは加速して所定の速度に達し、停止の際は徐々に減速します。スクリーン上であっても、この一般的なパターンに従わないアニメーションは奇妙に感じられたり、ときに少し間違って見えることさえあります。アニメーションのイージングに注意を払えばこれを解決できます」

例として、ヴァルは画面外から入ってくるオブジェクトにイーズアウトを使用することを推奨しています。この場合、最終的な位置で停止する直前まで速度が徐々に低下していきます。これは、速度が一定のアニメーションが突然停止する場合よりもはるかに現実的に見えます。

「画面外へと出ていくオブジェクトには、その逆が当てはまります」とヴァルは言います。「イーズインのイージングは、オブジェクトが所定の速度になるまで徐々に加速します。実世界のオブジェクトにも同じ動きを見つけられるでしょう」

オブジェクトを画面内のある点から別の点へ移動するときのヴァルのお薦めは、所定の速度まで徐々に加速し、徐々に減速して停止するイーズイン/アウトです。

「さらにアニメーションスキルを一歩高めるには、使っているツールのデフォルトのイーズイン、イーズイン/アウト、イーズアウトをそのまま使うのではなく、イージングカーブを調整して使うことを強くお勧めします。CSSを使っているなら、cubic-bezier.comは、カスタムのイージングカーブを模索するのに最適な場所です」

アニメーションの間隔は最小限に

複数のアイテムが画面内に登場、または画面の外に退場するとき、アイテムごとにタイミングをずらしてアニメーションさせるのはよく使われるテクニックです。しかし、マイクロソフトのソフトウェアエンジニアであるデヴィッド・コルシードは、各アニメーションの間隔が長すぎるケースが多いと言います。

「まるで、『まずはこれ、次はこれ、そしてこれ』と、アニメーターのセリフが聞こえるようです」と警告します。「複数のアイテムをアニメーションさせるときは、ズレの間隔、つまり各アニメーション間の遅延は最小限にするべきです。50〜100ミリ秒ほどで十分なことだってあります。それでもちゃんと効果は見てとれます。間隔が長いと、個々のアニメーションが独立しているように感じられます。これは、全体がひとつのユニットとして動いているいう感覚に反するものです。

彼は一方で、間隔を全く取らないアニメーションは、すべてが結合した単一要素のように感じられ、直感に反するとも警告しています。彼が一般的に推奨するのは、間隔をほんの一瞬、アニメーション全体の尺のほんの一部に留めながら、次々に要素をアニメーションさせる方法です。「結果として、アニメーション化されたアイテムは、まとまりを保ちながらも、流動性を持ち、生き生きと動いているように見えます」とデヴィッド氏は説明します。

CodePenのサンプルを例にとると、悪いほうのアニメーションでは、各アイテムが、直前のアイテムが登場した後に登場ます。そのため、間隔がアイテムのアニメーションの尺に等しくなります。良いほうのアニメーションでは、ズレはアニメーションの尺のほんの一部であり、より効率的なアニメーションになっています。

ブランドアイデンティティに合わないアニメーションを避ける

「気持ちよく感じらるアニメーションをつくるときが、Webをデザインしていていちばん嬉しい瞬間のひとつです」と、アニメーションに情熱を傾けるフロントエンド開発者のイーライ・フィッチは告白します。「友人や家族に『すごい！』と言わせるような何かです。でも、その感情が、実は罠だったとしたら？」

「状況やブランドに合わない場合でも、常に『すごい！』を求めてアニメーションを作っていた時期がありました」とイーライは説明します。「自分のお気に入りの色はホットピンクです。時にはそれが目を引くこともありますが、ホットピンクがどんな場面でも使えるわけではないことは明らかです。でも、アニメーションの場合はそこがわかりにくいのです。大抵のブランドはアニメーションのガイドラインを持っていません。従って、何がブランドに適していて何がそうでないのかを知ることが難しく、結果として静的なアイデンティティと一致しない動きのアイデンティティを作ってしまいがちです」

イーライは、この罠に陥っていない良い例としてDropbox Paperを挙げています。「Paperは、目新しく遊び心のある、クリーンでモダンな編集ツールと位置づけられています。オリジナルのリアクションステッカーにも、それが現れています」

イーライはまた、メニューのアニメーションに少しだけフォローが付け加えられ、微妙に弾むような効果をつくることで、ちょっとした楽しさが強められていると説明します。それが邪魔になることはなく、ドキュメントの編集という、より重要な作業に集中したままでいられます。

他の人と共有するためリンクをコピーするなど、より重要なアクションについては、アニメーションの比重が相応に高くなっている、とイーライは指摘します。

「フォローの動きがより大きく、より早く動くため、まるで要素に重さがあるように感じられます。より多くのエネルギーがそこに込められているかのようです。このアニメーションは、ブランドアイデンティティーとユーザーにアクションの重要性の、両方にぴったりとマッチします」

アニメーションがどのデバイスでも同じように動作すると仮定しない

よくある間違いは、どのデバイスでも同じように動作することを前提にアニメーションを作成することです。ポーランドのLunar Logicのフロントエンド開発者兼デザイナーのアナ・マイガスは、次のように述べています。

「開発者が使っているデバイスの性能は、一般ユーザーに期待されるものとは大きく異なるのが実情です」と彼女は警告します。「私たちが作った美しいアニメーションが、誰かにとっては価値を加えるどころかボトルネックになるかもしれないということは想像しにくいでしょう。でも、さまざまな条件でアニメーションをテストすることは何よりも重要です。最も簡単な方法は、ブラウザーの開発者ツールでCPUスロットルを有効にして、アニメーションを実行することです」

スムーズな体験を確実にするため、アナは再レイアウトを強制するアニメーションの作成を避けるよう推奨します。この種のアニメーションは、影響を受ける要素の位置とサイズの再計算をブラウザーに要求し、処理コストがかかります。再レイアウトを避けるには、アニメーションに使うプロパティを”transform”と”opacity”の2つだけに限定することをアナは提唱します。

Chromeの開発者ツール、レイヤーパネルとFPSメーターを使用したアニメーションのデバッグ

「事前にブラウザーにアニメーションが発生するヒントを与えるのも良い考えかもしれません。そのためには、”will-change” CSSプロパティを使います。ただし、使いすぎには注意が必要です。”will-change”は使用のたびにCPUを若干消費するからです」とアナは指摘します。ギャノンは次の点を付け加えました。「ただ、たとえ”opacity”や”transform”プロパティだけを使っていたとしても、あまりに多くの要素をアニメーションさせるのは、決して良い考えではありません。動かす要素が多いほど、ブラウザーの負荷が高くなります」

JavaScript使ったアニメーションの場合については、アナは、常に”requestAnimationFrame()“関数を活用するよう推奨します。

「一部のフレームワークではこれがデフォルトで有効にされています。事前に確認するようにしましょう。この関数は、ブラウザーのリフレッシュレートと同期してアニメーションフレームの描画を行うように指示します。そのため、不要な処理を省けます」

まとめると、次回アニメーションを作成するときは、少ないほうが多くを得られること、イージングとアニメーション間隔への配慮が、現実感がある直感的な効果を生むのに役立つことを念頭に置きましょう。また、やり過ぎることなく、ブランドアイデンティティーに適合するアニメーションの作成を心がけましょう。最後に、何度でも繰り返しテストすることが重要です。なぜなら、アニメーションはすべてのブラウザーやデバイスでまったく同じように動くわけではなく、思ったよりも遅く再生されることがあるからです。

この記事はAnimation Best Practices for Avoiding Common Mistakes（著者:Oliver Lindberg）の抄訳です