【保存版】ユーザーを魅了する!UXデザインの正しいアニメーション完全ガイド

ultimate-guide-to-proper-use-of-animation

 

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。

 

最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。

 

この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。

 

 

アニメーションの持続時間とスピード

 

要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、待ち時間がない程よい速さで変化させる必要があります。

 

適切な長さのアニメーションを使用しましょう。あまり速すぎず、退屈に感じない長さにしましょう。

 

 

多くの研究により、インターフェースのアニメーションの最適速度は、200〜500msであることが分かっています。この数値は、人間の脳の特定の性質に基づいています。100msより短いアニメーションは瞬間的で、まったく認識されません。1秒以上の長いアニメーションは、ユーザーにとって遅く、退屈に感じてしまいます。

 

インターフェースで活用したい、アニメーションの持続時間

 

 

モバイル端末に関しては、Googleのマテリアルデザインガイドラインにおいて、アニメーションの持続時間を200〜300msに制限するように提案しています。タブレット端末では、持続時間をおよそ30%長くする(約400〜500ms)必要があります。

 

その理由は簡単で、スクリーンサイズが大きくなるので、要素の位置が変化するときに、より長い距離を移動する必要があるからです。反対に、時計などのウェアラブル端末では、画面のサイズがより小さくなるので、持続時間はおよそ30%短くなり、およそ150〜200msとしましょう。

 

端末のサイズは、アニメーションの時速時間に影響します。

 

 

ウェブアニメーションに関しては、別の方法が採用されています。ブラウザ上でウェブページを即座に開くことに慣れているので、素早くやり取りすることが期待されます。そのため、Webアニメーションの持続時間は、モバイル端末のおよそ2倍、150〜200msに設定する必要があります。それ以外の場合、ユーザーはパソコンがフリーズして固まってしまったり、インターネット接続に問題があると考えてしまうでしょう。

 

しかし、ウェブサイトに装飾的なアニメーションを作成したり、特定の要素にユーザーの注目を集めたい場合、これらのルールは無視しても構いません。このような場合は、用途に応じてアニメーションを長くすると良いでしょう。

 

画面サイズの大きなパソコンでは、素早いアニメーションの持続時間を設定しよう。

 

 

表示端末に関係なく、アニメーションの長さは、移動距離だけでなく要素のサイズにも依存することも覚えておきましょう。小さな要素や小さな変化を伴うアニメーションは、より速く動くはずです。そのため、大きくて複雑な要素のアニメーションは、少し長く続く感じます。

 

同じサイズの要素が移動するとき、最初に停止する要素は、もっとも短い距離を移動したものとなります。大きな要素と比較して小さな要素は、より大きなオフセットとなるため、より遅く動きます。

 

アニメーションの持続時間は、オブジェクトのサイズと移動距離によって変化します。

 

 

要素同士がぶつかったとき、衝突エネルギーは物理の法則によって、均等に力を分配する必要があります。そのため、跳ねるようなバウンス効果は避けたほうが良いでしょう。例外的な場合にのみ、使用するようにしましょう。

 

注意をそらしてしまうので、バウンス効果は使用しないようにしましょう。

 

 

要素の動きは明確で、分かりやすい必要があるので、モーションブラーは使用しないようにしましょう。(After Effectsユーザーのひとは注意!)私達が利用しているモバイル端末でも、エフェクトを再現するのが難しく、インターフェース・アニメーションにはまったく利用されていません。

 

アニメーションにブラーエフェクトは利用しないようにしましょう。

 

 

リストアイテム(ニュース用カードレイアウトやeメールリストなど)は、それぞれの要素間にとても短い遅延アニメーションが必要になります。新しい各要素の出現は、20〜25msで続く必要があり、これより遅くなると、ユーザーが悩んでしまうかもしれません。

 

リストアイテム間のアニメーションは、20〜25msの持続時間にしましょう。

 

 

イージング

 

イージング(英: Easing)は、オブジェクトの動きをより自然に見せるのに役立ちます。ディズニーの主要アニメーター Ollie Johnston と Frank Thomas によって書かれた、The Illusion of Life: Disney Animation という本に詳しく解説されている、アニメーションの基本原則のひとつでもあります。

 

アニメーションが機械的または人工的に見えないようにするには、日常生活の動きと同じように、オブジェクトにある程度の加速と減速を加える必要があります。

 

直線的な動きに比べて、イージングを加えることでより自然なアニメーションを実現できます。

 

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!

 

 

直線的な動き

物理的な力の影響を受けないオブジェクトは、直線的な一定の速度で移動します。このため、人間の目にとって不自然で、ロボットのように人工的に見えてしまいます。

 

アプリケーション向けのアニメーションには、アニメーション曲線を使用しましょう。同じ時間の間隔(x軸)でオブジェクトの位置(y軸)がどのように変化するかを示すことができます。今回のケースでは、動きは直線的なので、オブジェクトは同じ時間に同じ距離を移動します。

 

直線的な動きのアニメーション曲線

 

 

直線的な動きは、オブジェクトの色や透明度が変更されたときのみ利用できます。一般的に言えば、オブジェクトの位置が変わらないときは、直線的な動きは利用できません。

 

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

このアニメーション曲線では、最初はオブジェクトの位置がゆっくりと変化し、速度は徐々に加速しているのがわかります。つまり、オブジェクトはある一定の加速度で動いていると言えます。

 

加速度曲線の変化について

 

 

このアニメーション曲線は、オブジェクトがフルスピードでスクリーン画面から飛び出すときに使用できます。システム通知やカード型のインターフェースのみでの利用と言えるでしょう。しかし、このようなタイプのアニメーション曲線は、スクリーン画面から完全に離れるときにのみ使用し、呼び戻したりすることはできません。

 

スクリーン画面からカード型レイアウトを消去するときの加速曲線

 

 

アニメーション曲線は、適切な雰囲気を演出するのにも役立ちます。以下のサンプル例では、すべてのオブジェクトの移動時間と距離は同じですが、アニメーション曲線の小さな変化でも、雰囲気に大きく影響する可能性があります。

 

もちろん、アニメーション曲線を変更することで、日常生活の動きにより近く合わせて調整することもできます。

 

同じ持続時間と移動距離ですが、異なる雰囲気が表現されています。

 

 

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

イーズイン(英: Ease-in)曲線とは反対に、イーズアウト(英: Ease-out)曲線では、オブジェクトは最初に大きく移動し、最終的に停止するまでゆっくりと速度を落とします。

 

減速曲線の変化について

 

 

このアニメーション曲線は、オブジェクトがスクリーン画面上に出現するときに使用されます。フルスピードで画面上を移動し、完全に停止するまで徐々に減速します。これは、スクリーン画面の外側から表示される、カードやオブジェクトに適用することもできます。

 

オブジェクトが出現するタイミングに最適な減速曲線

 

 

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

このアニメーション曲線は、最初にオブジェクトの速度を上げ、ゆっくりとゼロに戻していきます。このタイプの動きは、インターフェース用アニメーションでもっともよく利用されます。どのアニメーション曲線を採用していいかわからないときは、この標準曲線にしましょう。

 

アニメーション曲線に迷ったら、標準曲線を利用しよう。

 

 

マテリアルデザインのガイドラインによれば、左右非対称の形をしたアニメーション曲線を利用することで、動きをよりナチュラルでリアルに魅せることができます。曲線カーブの終わりは、加速時間を減速時間より短くすることで、アニメーションのはじまりを強調できます。このとき、ユーザーは要素の最終的な動きに注意を払いながら、新しい動きへと続いていきます。

 

左右対称と非対称の曲線アニメーションの違いを確認してみましょう。

 

 

イーズインアウトは、オブジェクトが画面のある場所から別の場所に移動するときに利用されます。このようなケースでは、目を引くような派手なエフェクトをつかったアニメーションは避けましょう。

 

画面上のカードの動きに対応する、非対称の曲線アニメーション

 

 

オブジェクトがスクリーン画面から消えても、ユーザーはいつでも元の場所に戻すことができ、どちらも同じアニメーションの動きが必要となります。なかでも、左右から横スライド式に表示される、ナビゲーションメニューが良い例でしょう。

 

横スライド式のナビゲーションメニューは、スクリーン画面から隠れており、標準曲線を利用しています。

 

 

以下のサンプル例は、多くのアニメーション初心者が見落としがちな、基本的なルールに従っています。アニメーションのはじまりと終わりは同じではなく、減速曲線ではじまり、標準曲線で完了します。さらに、Googleのマテリアルデザインによれば、オブジェクトが出現するときは、より多くの注目を集めるために、アニメーションを長くする必要があります。

 

サイドメニューの表示・非表示は、減速曲線と標準曲線で表現されます。

 

 

関数 cubic-bezier() は、曲線を表現、記述するために使用されます。4つの座標から構成されており、「キュービック(英: Cubic)」と呼ばれています。はじめに座標0,0(左下)、座標1,1(右上)の点は、グラフ上にあらかじめ定義されています。

 

それに基づいて、2つの点をグラフ上に記述する必要があり、はじめの2つは最初の点の座標軸xとyで、後の2つは2番めの点の座標軸xとyとなります。

 

曲線カーブをつかった作業をより簡単にするには、easing.netcubic-bezier.com を使用してみましょう。初期設定では、もっともよく利用される曲線カーブのリストが用意されており、手軽にコピペできます。また、お好みでパラメーターを設定、再生しながら、オブジェクトがどのように動くか、その場で確認することもできます。

 

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

 

 

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

バレエの振り付けと同じように、メインとなる考え方は、あるポイントからポイントまで移動中に、ユーザーの注意を一方向に誘導することです。

 

この振り付けには、同一インタラクションと追従インタラクション、2つのタイプがあります。

 

同一インタラクション

同一インタラクション(英: Equal Interaction)とは、すべてのオブジェクトの見た目が、一つの特定のルールに従うことを意味しています。

 

たとえば以下のサンプル例では、すべてのカード型レイアウトの外観は、ユーザーの注意を上から下の一方向に誘導します。この順序がなければ、ユーザーの注目が散ってしまい、全体の見た目も悪くなってしまいます。

 

ユーザーの注目は一方向に誘導するように心がけましょう。

 

 

表形式の見せ方は、もう少し複雑になります。ここでは、ユーザーの注目をななめ方向に向ける必要があります。オブジェクトを一つずつ表示すると、アニメーションが長くなりすぎ、ユーザーの注目がジグザグになってしまうため、あまり好ましくありません。

 

カードリストの表形式では、対角線方向にアニメーションさせましょう。

 

 

追従インタラクション

追従インタラクション(英: Subordinate Interaction)とは、全ユーザーの注意を引きつける中心となるオブジェクトに、他のすべての要素が追従するアニメーションを意味します。このタイプのアニメーションは、コンテンツの階層、順序をうまく表現でき、メインコンテンツにもっとも注目を集めます。

 

このテクニックを利用しないと、どのオブジェクトを追うべきかユーザーが迷ってしまい、注意が分散する原因となります。アニメーションさせたい要素が複数あるときは、動きのシークエンス、決まりごとをきちんと決め、できるだけ少ないオブジェクト数で実行するようにしましょう。

 

メインとなるオブジェクトをアニメーションさせ、残りの要素を追従させましょう。ユーザーはどのオブジェクトを追うべきか迷ってしまいます。

 

 

マテリアルデザインによれば、移動するオブジェクトのサイズが不釣り合いになるときは、直線ではなくアーチ状に移動することで、よりナチュラルな動きを表現できます。たとえば、オブジェクトの高さと幅のサイズの増減に異なるアニメーション速度を用いる場合(たとえば、正方形のカード型レイアウトが長方形に変化するなど)が挙げられます。

 

 不規則にサイズが変化するオブジェクトの動きは、アーチ状にアニメーションさせましょう。

 

 

直線的な動きは、オブジェクトのサイズが比例して変化するときに利用でき、実装の手軽さから、アーチ状のアニメーションはしばしば見落とされがちです。実際に自分自身が使用しているいくつかのアプリケーションを見てみると、直線的な動きがいかに多いか気付くでしょう。

 

縦横サイズが比例して変化するときは、直線的な動きで表現されます。

 

 

アーチ状の曲線的な動きは、2つの方法で実現できます。まず最初に、水平方向に移動し、垂直移動で終了するパターン(垂直〆(英: Vertical Out))。そして2つ目が、垂直方向に移動し、水平移動で終了するパターン(水平〆(英: Horizontal Out))です。

 

曲線的な動きのパスは、スクロールするインターフェースの主軸と一致させる必要があります。以下のサンプル例では、上下にスクロールできるので、水平から垂直方向への移動となります。もうひとつは、垂直から水平方向へ移動する、間違った実装例です。

 

カード型レイアウトの展開・折りたたみの方向は、インターフェースの軸と一致させる必要があります。

 

 

移動するオブジェクトのパスがお互いに交差するとき、貫通して移動することはできません。オブジェクトは、速度を加速・減速させながら、別のオブジェクトの移動に必要なスペースを残す必要があります。もうひとつは、オブジェクトを押しのける方法で、インターフェース上にすべての要素が配置されていると考える点に由来しています。
 

オブジェクトの移動中は、お互いが貫通することなく、別のオブジェクトの移動に必要なスペースを残すようにしましょう。

 

 

他のケースとしては、オブジェクトが他の要素の上を浮かんで移動することがあります。しかし、ここでも他のオブジェクトを破壊したり、貫通することはありません。その理由は、インターフェース上の要素の動きは、物理的な自然の法則が一般的で、現実では不可能だからです。

 

他のオブジェクトの上を移動することもできます。

 

 

さいごに。

 

ここまで見てきたすべてのルールや基本原則をまとめると、インタフェースのアニメーションは、摩擦や加速度など日常生活の動きを反映する必要があると言えるでしょう。わたしたちの生活の中にある動きを真似することで、ユーザーが求める理解しやすいインターフェースのアニメーションを作成できます。

 

アニメーションが適切に作成されていれば、なにも邪魔にならず、ユーザーは目的から注意を逸らすことはありません。ユーザーが動きを遅く感じたり、パフォーマンスの妨げとなるようなときは、アニメーションを調整しましょう。

 

しかし、アニメーションは科学的よりもアートであることを覚えておきましょう。自分のユーザーに合ったアニメーションを検証、テストしてみましょう。

 

 

アニメーションに関する参考資料

 

ウェブデザイナーが試したい、Webアニメーション無料プラグイン&ライブラリ75個まとめ【保存版】

サイトやアプリの使い心地を改善!UIアニメーションを良くする実践テクニック、小技7個まとめ

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!

Bootstrap 対応!マイクロインタラクションをクラス名だけで作ろう!ScrollReveal.js

 

参照元リンク : The ultimate guide to proper use of animation in UX by Taras SKytskyi | Medium