こちらの記事は、『The ultimate guide to proper use of animation in UX』の和訳になります。

はじめに

最近では、インタフェースのアニメーション化では人々を感動させたり驚かせる事が難しくなりました。画面上でのやりとりを示したり、アプリケーションの使用方法を説明したり、単にユーザーの注意を引く為にアニメーションが使われています。

アニメーションに関する記事を調べたところ、大抵の記事は特定のユースケースやアニメーションに関する一般的な事実だけを説明しているだけで、インタフェースのアニメーションに関する全ルールを明確かつ実用的に説明している記事がない事に気づきました。

この記事では新しい事ではなく、インタフェースにアニメーションを使いたいデザイナーが追加情報を探す必要がないように、すべての重要な仕組みとルールを1か所にまとめました。

アニメーションの長さとスピード

要素が位置や状態を変えるときには、ユーザーにその変化を気付かせる為にアニメーションを遅くしながらも、待たせることがないような速さが必要になります。

アニメーションは適切な長さであるべきです。速すぎず、かといってユーザーがあくびをする程遅くする事も避けなければなりません。

数多くの研究者が、インタフェースのアニメーションに最適な速度は200～500ミリ秒の間であると言っています。これらの数字は人間の脳の特性に基づいています。100ミリ秒より短いアニメーションは瞬間的すぎて、まったく認識されません。一方、1秒より長いアニメーションは遅れていると感じられ、退屈だと思われてしまいます。

インタフェースに最適なアニメーションの長さ

モバイルデバイスに関して、マテリアルデザインガイドラインでは、アニメーションの継続時間を200〜300ミリ秒に制限することを提案しています。タブレットでは30％長くなり約400～450ミリ秒にする必要があります。理由は簡単で、画面のサイズが大きいので、オブジェクトが位置を変更する過程が長くなるからです。ウェアラブルデバイスでは画面が小さくなる為、30%短い150～200ミリ秒のアニメーションにする必要があります。

モバイルデバイスのサイズはアニメーションの長さに影響を与えます。

Webアニメーションでは、別の方法が使われます。私たちはブラウザでウェブページをほぼ瞬時に開くことに慣れてしまっているので、異なる状態の間を素早く移動できるものだと思っています。そのため、ウエブページのアニメーションの長さは、モバイルデバイスよりも約2倍短くなり、150〜200ミリ秒にする必要があります。これより遅いと、ユーザーはコンピュータがフリーズしているか、インターネットの接続に問題があると考えるでしょう。

しかし、あなたがウェブサイト上で装飾的なアニメーションを作成しているか、特定の要素にユーザーの注意を引こうとしているならば、これらの規則を無視してください。このような場合、アニメーションは長くなります。

スクリーンの大きさとアニメーションの遅さは比例する？とんでもない！

プラットフォームに関係なく、アニメーションの長さは移動距離だけでなくオブジェクトのサイズにも関係することを覚えておいてください。小さな要素や変更の少ないアニメーションは速く移動するべきです。そして、大きくて複雑な要素を含むアニメーションは、時間をかけた方が見栄えがよくなります。

同じ大きさの場合、最初に止まるのは、最短距離を移動するオブジェクトです。大きいオブジェクトと比較して小さいオブジェクトは、より多く移動する必要があるため、ゆっくりと移動します。

オブジェクトのサイズと移動距離に応じてアニメーションの長さを変えます。

衝突のエネルギーはオブジェクト間で均等に分配されるべきで、一方のオブジェクトが跳ね返るバウンスの挙動は避けるべきです。合理的である場合だけ、例外的に使用してください。

注意をそらさない為にも、バウンスの挙動を使用しないでください。

オブジェクトの動きは鮮明でシャープなものでなければなりません。モーションブラーを使用しないでください（After Effectsユーザーの皆さん、今回は違うのです）。現代のモバイルデバイスでさえそのエフェクトを再現することは困難であり、インタフェースアニメーションでは全く使用されていません。

アニメーションにぼかし効果を使用しないでください。

リスト項目（ニュースカード、Eメールリストなど）は、表示されるまでに少し時間がかかり、新しい要素の出現には、各々20～25ミリ秒かける必要があります。これより要素の表示が遅いと、ユーザーはストレスを感じるかもしれません。

リストアイテムのアニメーションは20〜25ミリ秒である必要があります。

イージング

イージングは、オブジェクトの動きをより自然にさせます。それはアニメーションの原則における最も重要な事の一つで、オリー・ジョンストンとフランク・トーマス-という二人の重要なディズニーアニメーターによって書かれたディズニーアニメーション生命を吹き込む魔法という本の中で徹底的に説明されています

アニメーションが機械的で人工的に見えないようにする為、現実世界のすべての生物がそうであるように、オブジェクトの移動にはある程度の加減速を必要とします。

イージングのあるアニメーションは、直線的なアニメーションよりも自然に見えます。

直線的な動き

物理的な力の影響を受けないオブジェクトは直線的に、つまり一定の速度で動きます。このような直線的で一定速度の動きは人間の目には非常に不自然で人工的に見えてしまいます。

アプリケーションのためのアニメーションには、アニメーションカーブを使用します。それらについてお話します。アニメーションカーブは、同じ時間間隔を表す(x軸)の間にオブジェクトの位置(y軸)がどのように変化するかを示しています。今回の例では、動きが直線的であるためオブジェクトは同期間に同じ距離を移動します。

直線的な動きを表現する場合のアニメーションカーブ

直線的な動きは、例えばオブジェクトの色や透明度が変わるときにだけ使用でき、一般的には、オブジェクトが移動しない状態のときに使います。

イーズインまたは加速曲線

曲線上で、最初はオブジェクトがゆっくり変化し、その速度が徐々に速くなることがわかります。つまり、オブジェクトは一定の加速度で動いているという事です。

加速曲線

この曲線は、オブジェクトが全速力で画面から飛び出すときに使用します。それらはシステム通知でもインタフェースのカードだけでも構いません。しかし、そのような種類の曲線は、オブジェクトが画面から離れて戻る事がないときに使えるのであり、再度実行したり、戻したりすることができないという事に留意してください。

画面からカードが飛び出すための加速曲線

アニメーション曲線は、気分を正しく表現するのに役立ちます。下記の例では、移動時間とすべてのオブジェクトの距離が同じですが、曲線のわずかな変化でもアニメーションの雰囲気に影響を与える可能性があります。

そしてもちろん、曲線を変えることによって、可能な限り現実世界と同じようにオブジェクトを動かすことができます。

時間と距離は同じですが雰囲気が変わります。

イーズアウトまたは減速曲線

イーズインカーブとは反対に、オブジェクトは長距離をすばやく移動し、最後に停止するまでゆっくりとスピードを落とします。

減速曲線

このタイプの曲線は、要素が画面に表示されたときに使用するべきで、画面上を最大速度で飛行し、完全に停止するまで徐々に減速します。このアニメーションは画面の外側から現れるさまざまなカードやオブジェクトにも適用できます。

スムーズに表示するための減速曲線

イーズインアウトまたは標準曲線

この曲線では、オブジェクトは最初は速度を増した後にゼロに戻るまでゆっくりと速度を落とします。そのような動きは、インタフェースアニメーションで一番頻繁に使用されます。アニメーションでどのような種類のモーションを使用するのか悩んだ場合は、標準曲線を使用してください。

標準曲線

マテリアルデザインガイドラインでは、動きをより自然でリアルに見せるためには、非対称曲線を使用することをお勧めしています。加速時間が減速時間よりも短くなるように、曲線の終わりはその開始よりも強調されなければなりません。この場合、ユーザーは要素の最終的な動き、つまり新しい状態により注目します。

対称標準曲線と非対称標準曲線の違い

イーズインアウトは、オブジェクトが画面のある部分から別の部分に移動するときに使用され、そのような場合、アニメーションは人目を引くようなドラマティックな効果を避けなければなりません。

画面上のカードの動きとそれに対応する非対称曲線

要素が画面から消えたときには、同じ移動タイプを使用する必要がありますが、ユーザーはいつでも前の場所に戻すことができます。これはとりわけナビゲーションドロワーで使用されています。

ナビゲーションドロワーは標準曲線で画面から隠れます

今までの例から、最初のアニメーションは最後のアニメーションと等しくないという、初心者の多くが無視してしまう基本的な規則が導かれます。ナビゲーションドロワーの場合と同様に、減速曲線で表示され、標準曲線で消えます。さらに、マテリアルデザインガイドラインによると、注目度をより高める為にオブジェクトの出現の時間は長くしなければなりません。

減速度と標準曲線はそれぞれサイドメニューの出し方と消え方に対応する

曲線を記述するために、関数cubic-bezier()が使用されます。4つの座標を使用しているのでcubicと呼ばれています。最初の点である座標0;0（左下）と最後の点である座標1;1（右上）は既にグラフ上で定義されています。

それに基づいて、関数cubic-bezier() の4つの引数によって与えられるグラフ上の2つの点のみを記述する必要があります。最初の2つは最初の点の座標xとy 、次の2つは2番目の点のxとyです。

曲線を使った作業を簡単にするために、 easings.netとcubic-bezier.comというサイトを使用することをお勧めします。easings.netには、最もよく使われ、プロトタイピングツールにコピーすることができる曲線やパラメーターのリストがあります。cubic-bezier.comでは、曲線のさまざまなパラメータを使用して再生し、オブジェクトがどのように移動するかをすぐに確認することができます。

関数cubic-bezier()のさまざまな種類の曲線とパラメーター

インタフェースアニメーションにおける振り付け

基本的な考え方は、バレエの振り付けと同様、ある状態から別の状態へ移行する時にユーザーの注意を流動的に導くという事です。

振り付けには、同等な相互作用と従属的な相互作用という2つのタイプがあります。

同等な相互作用

同等な相互作用とは、すべてのオブジェクトの出現が特定の１つの規則に従うことを意味します。

この場合、すべてのカードの出現は、ユーザーの注意を一方向、つまり上から下へと導く1つの流れとして認識され、この順番に従わないと、ユーザーの注意が散らばってしまいます。同時にすべての要素が現れた場合も見栄えがしないでしょう。

ユーザーの注意は一方向に流れるようにしてください

表形式のビューに関してはもう少し複雑です。ここでは、ユーザーの焦点を対角線に向ける必要があるため、要素を1つずつ表示するのは好まれません。要素を一つずつ出現させるのは、アニメーションが長くなりすぎ、ユーザーの注意はジグザグになってしまう為、良い方法とは言えません。

表形式のカードにおける対角線的出現

従属的な相互作用

従属的な相互作用では、ユーザーの注意を引く中心的なオブジェクトが一つあり、他のすべての要素がそれに従属していることを意味します。このタイプのアニメーションは秩序感を与え、メインコンテンツに注目度を高めます。

他の場合では、ユーザーがどのオブジェクトに集中すべきかが非常にわかりづらく、注意が分散されてしまうでしょう。したがって、アニメーション化したい要素がいくつかある場合は、それらの動きの順序を明確に定義し、一度にできるだけ小さいオブジェクトをアニメーション化する必要があります。

中心的なオブジェクトを一つ作り、それ以外のオブジェクトはそれに従うようにアニメーション化するのが良いでしょう。そうでなければ、ユーザーはどのオブジェクトを注意するべきかわからないからです。

マテリアルデザインガイドラインによると、動いているオブジェクトのサイズが不均衡に変化する場合、それらは直線ではなく円弧に沿って移動する必要があります。動きをより自然にする事が出来るからです。「不均衡に」とは、たとえば正方形のカードが長方形に変わる時などに、増減によるオブジェクトの高さと幅の変化が非対称的に、異なる速度で行われることを意味します。

大きさが不均等に変化するオブジェクトの動きは円弧に沿って配置する必要があります。

直線に沿った動きは、オブジェクトのサイズが比例して変わるときに使用されます。そのような動きの実行ははるかに簡単なので、不均衡な円弧運動の規則はしばしば無視されがちです。実際のアプリケーションの例を見ると、直線的な動きが圧倒的に多い事に気づくでしょう。

比例したサイズの変更は直線で表します

曲線上の動きは、2つの方法で実現できます。まず「垂直アウト」と呼ばれるもので、オブジェクトが水平方向に動き始め、垂直方向の動きで終わります。 2つ目は「水平アウト」と呼ばれるもので、オブジェクトは垂直方向に動き始め、水平方向の動きで終わります。

曲線に沿ったオブジェクトの移動経路は、スクロールインタフェースの主軸と一致している必要があります。例えば、次の画像ではインタフェースを上下にスクロールすることができ、それに応じてカードが開かれます。最初は右へ、そして次に下に動いている事から垂直アウトの方法で展開されていることがわかります。逆の動きは反対の方法で行われます。つまり、カードは最初に垂直方向に上昇し、最後に水平方向に移動しています。

カードの展開/収束の方向は、インタフェースの軸と一致している必要があります

動いている物体の経路が互いに交差している場合、それらは互いに動くことが出来ません。オブジェクトは、速度を落としたり加速したりすることで、他のオブジェクトの移動に十分なスペースを確保する必要がありますが、他のオブジェクトを押しのける方法もあります。なぜでしょうか？インタフェース内のすべてのオブジェクトは1つの平面にあると想定しているからです。

移動中、オブジェクト同士が重なれない為、別のオブジェクトの移動のためのスペースを空けておいてください

動いているオブジェクトが他のオブジェクトの上を通るという方法もあります。それでも、他のオブジェクトと合体することや他のオブジェクトを通過することはありません。

なぜでしょうか？インタフェースの要素は物理法則に従うものであるとされており、固体の物質が現実の世界でそういった動きが出来ないからです。

オブジェクトは他のオブジェクトの上を通過し移動する事が出来ます。

結論

したがって、上記のすべての仕組みとルールをまとめると、インタフェースのアニメーションは、摩擦、加速と言った物理的に理解されている動きを反映するべきということです。現実の世界からオブジェクトの動作を模倣することができ、現実世界での物体の動きを真似る事により、ユーザーがインタフェースから何を期待できるのかをわかるようにするシーケンスを作成する事が出来ます。

アニメーションが正しく構築し、邪魔にならずにユーザーを目的からそらさないようにしましょう。邪魔になるようであれば、表現を優しくするか、全て削除しなければなりません。つまり、アニメーションによってユーザーの速度を低下させたり、タスクの実行が妨げられたりしないようにしなければいけないという事です。

しかし、アニメーションはサイエンスというよりもアートであり、ユーザーがどう感じるのかを、実験してテストすることをお勧めします。

翻訳協力

Author:Taras Skytsky(https://uxdesign.cc/@skytskyi)
Thank you for letting us share your knowledge!

記事選定: @takitakis
翻訳/技術監査: Koma, @aoharu
Markdown化: @aoharu