よいユーザー体験をつくる「アニメーション6つの基本原則」を覚えよう | アドビUX道場 #UXDojo

グラフィックデザインには黄金比という空間原理があります。写真には三分割法というフレーミングの原理があります。ではアニメーションにはこうした基本的な原理はあるのでしょうか？確かに「ディズニーアニメーション 生命を吹き込む魔法」には12の教義が書かれていますが、それらが40年ほど前に出版されて以来、インターネットや携帯電話が出現したことで、今では至るところにモーションデザインが見られます。操作可能な画面が標準的に使われる現代の環境で使うのには、ディズニーの原理は時代遅れです。

主要な違いは、クラシックなアニメーションは、ユーザが受動的に体験できるように直線的なストーリーラインで構成されている点です。今日のモーションデザイナーがつくっているのは、ユーザーが様々な方法で操作する “自分が終わりを選択するタイプのストーリー” です。そこにはとても多くの要因が関わります。そのため、普遍的なアニメーションの原理を見極めることはほとんど不可能に見えるかもしれません。

アドビのデザインエバンジェリストを務めるヴァル・ヘッドは、アニメーションの専門家で、Designing Interface Animationの著者でもあります。ピッツバーグにある彼女のスタジオで、優れたユーザー体験のためのアニメーションの使い方について、基本的なデザイン原理の話を聞きました。

ヴァルは、アニメーションの原則は、この記事で語られたものだけではないことを強調しました。「モーションデザインに詳しくない人にとっては、この記事が便利な近道になるでしょう。これから説明する6つのことを覚えておけば、9割の友人より上手にできるようになるでしょう」

1. タイミング: 素早く、ただし速すぎないように

誰も待たされるのは好きではありません。良いタイミングとは、アニメーションの時間を短く保つことにつきますが、あまり速すぎてもなりません。では、アニメーションが速すぎたり遅すぎるかは、どのようにしたら分かるでしょう？アニメーションが短すぎると、ユーザが視覚的に情報を吸収するのに十分な時間がありません。上の動画では、メニューのスライドのアニメーションに300ミリ秒かけていますが、ユーザーを待たせることなく応答しており、自然に反応しているように感じられます。

ヴァルは、「適切なタイミングになっていることを知る最良の方法は、実際に試して、それがどのように感じられるかを知ることです」と言います。Adobe XDの自動アニメーション機能のように簡単にプロトタイプをつくれるツールを使えば、「早期にデザインのアイデアやインタラクションのプロトタイプを作成して、それが意味をなしてしっくりくるかチェックすることがずっと簡単になります」と彼女は語りました。

2. イージング: 有機的な動きをつくる

デザインしているのが画面の中の体験だとしても、実世界から多くを借りることで、アニメーションが見慣れた論理的なものになるようにすることは大切です。これを実現するには、重力、運動量、速度など、実世界の物理的な原理をデジタルのアニメーションに利用します。

イージングは、アニメーションが継続している間に、動く速度がどのように変化するかを表します。上の動画では、紫の四角がゆっくりと広がり、その動きが加速して、その後に減速する様子を見ることができます。この例とは違って、速度が全く変化しないアニメーションもいくつか見かけます。こうしたアニメーションは、ロボットの動きのように見えて、ユーザが馴染めないかもしれません。自然に感じられるモーションをデザインするには、まず、木から落ちてきたニュートンのリンゴがどのように速度を速めるかを考えてみるとよいしょう。

3. 空間定位: 連続性により位置関係を表す

アニメーションは、モノの位置を、それがユーザーには見えないときでも仮想空間のどこにあるのかを視覚的に説明するには優れた手段です。隣の部屋に誰かが入室した時、その人が見えていなくても、その部屋にいることがわかるようなものです。

上の動画を見ると、ユーザーがボタンをクリックしたとき、画面はフレーム外の上下にスライドします。要素がスライドするアニメーションのおかげで、ユーザーは、画面が消えてしまったのではなく、別の場所に移動したのだと知ることができます。

空間定位は、さまざまな種類とサイズの画面の周囲の空間の、どこにUI要素があるかという認識を構築する場合に特に便利です。ユーザの疲労や混乱を避けるために、空間定位のためのアニメーションは特にシンプルに保つようヴァルは注意を促しています。

4. 注意を向ける: デザイン階層のトップに立つ

利用可能なすべてのデザインの道具、色、文字、レイアウトなどの中でも、アニメーションは外部に声を届けるツールです。その動きと揺らぎはアニメーションをデザインの階層のトップに立たせてユーザーの注意を引きます。そのため、ユーザーが実際に注意を向けるべきコンテンツに誘導するよう、慎重に使用する必要があるのです。

上の動画は、小さく力強い矢印のアニメーションを使って、ポッドキャストのダウンロード完了をユーザーに知らせています。別の例を挙げると、マイクロインタラクションは、ユーザーに自分の貴重な作業を保存するように思い出させたり、時間がなくなる前にフォームを完了させたりといった、より重要な役割を果たします。どんな場面であれ、アニメーションは階層構造を利用した優れたユーザ体験をつくるツールのひとつとして利用できます。

5． 視覚的な連続性: 画面のトランジション

映画などでこんなシーンを見たことはないでしょうか？ある場面で登場人物がコーヒーカップを持っていて、別のカットに切り替わったらそれが無かったというケースです。同様のことは、特に画面を次の画面に切り替えるとき、モーションデザインでも意図せず起きることがあります。監督が別のショットに切り替わったときに、ストーリーの流れを維持しなければならないのと同じように、デザイナーは、新しい画面への遷移の際、画面上のすべての要素を確認する必要があります。

ヴァルは次のように指摘します。「画面遷移に関しては、次の画面に存在する要素も含めすべてを削除するケースが多く見られます」。その代わりに、画面上のオブジェクトを実際のオブジェクトのように振舞わせ、画面をクリアするのではなく、遷移の間もあるべき位置に存在させるようにしましょう。

6. 明快さ: 意図がはっきりとした動き

複数の要素が同時に動くとき、それぞれの目的や相互の関係、シンプルさを維持する何らかの手段を考慮していないと、うっかり雑なモーションデザインになってしまうかもしれません。「私が好んで使うルールは、インタフェースのあらゆるアニメーションに対して、意図されたものを理解することです。目的を説明できないものがあれば、それは不要かもしれないと疑います」

上の動画では、ヴァルがシンプルで分かりやすい動きをつくり出すためのヒントをいくつか紹介しています。動きが重ならないようにアニメーションの開始と終了の位置を調整したり、一度にすべてを動かすのではな少しずつタイミングをずらすことで、気持ちよいアニメーションをつくることができます。

ヴァルは、アニメーション作成を楽しく、実験的に、わくわくしながら行うことが重要だと強調します。そして、モーションデザインの初心者には、Adobe XDを使用して、アニメーションに慣れることを勧めています。「私は人々が投稿したXDの自動アニメーションを見ることが大好きです。ちょっと馬鹿げたものがあったとしても、とにかく彼らはそれをつくったのです」

あなたも簡単なアニメーションのプロトタイプを早速始めてみませんか？軽くて遊び心のあるものを心掛けて、自分にどんな表現ができるのか試してみましょう。

この記事はSix Principles of Using Animation in UX Design（著者:Margaret Seelie）の抄訳です