この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。
ディズニー社の現場で長年培われた、アニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusion of Life: Disney Animation）」として1981年に出版され、現在でもアニメーションの基本ガイドのひとつとして広く知られています。
これらの基本原則は、もともとディズニーのキャラクターデザインのために設計されたものですが、この記事では、これらのアニメーション基本原則をUIデザインに適用する方法を探っていきましょう。
ここで紹介するアニメーションの基本原則を、どのようにウェブページに適用できるかまとめたHTML/CSSソースコードも以下のページからダウンロードできるので、参考にしてみてはいかがでしょう。
01. 押し潰しと伸縮（Squash and Stretch）
アニメーションでは、「押し潰しと伸縮」（Squash and Stretch）は物体の重力や質量、重さ、柔軟性を表しています。ボールが地面にぶつかるときに伸縮しながら跳ね返る様子は、分かりやすい例です。UIデザインでは、「押し潰しと伸縮」をボタン要素と簡単に適用することができます。
たとえば以下のサンプル例のように、ボタンが押された状態が「押し潰し」です。「押し潰しと伸縮」をうまくコントロールすることで、ボタン要素に対応して手軽に文字を定義できます。
ボタン要素に「押し潰しと伸縮」（Squash and Stretch）を適用した様子。
ボタン要素以外にも、インターフェースのあらゆるインタラクティブな要素に適用することができます。
サイドバー要素に「押し潰しと伸縮」（Squash and Stretch）を適用した様子。
02. 予備動作（Anticipation）
予備動作（Anticipation）は、次に何が起こるかを見ているひとに通知します。たとえば、キャラクターがやりを放つ前に腕を後ろに引く動作は、予備動作と言えます。
UIデザインでは、ホバー状態がこれの良い例です。デザイン要素の上にマウスカーソルを置くと、特定の要素がそれに反応して、クリック可能で、クリックすると何かが起こりそうだということを示すことができます。
ホバーインタラクションは通常、次になにかアクションが起きることを知らせます。
水平スクロールを含むインターフェースは、スクロールやスワイプで次に表示される要素の一部を、少しだけ見せておく傾向があります。
03. タイミング（Timing）
通常のアニメーションでは、「タイミング」（Timing）がフレームの描画方法を決定します。フレームの数が多いほど、アニメーションはなめらかでゆっくりとしたものになります。また、「タイミング」はオブジェクトの雰囲気やキャラクターにも影響を与えます。
「タイミング」は、すべてのUIアニメーションの基本的な要素です。イージング機能とともに、モーションの振り付けにおいて重要な役割を果たします。トランジションが長すぎると、ユーザーを待たせてしまいます。一方で、アニメーションが早すぎると、ユーザーは見逃してしまうかもしれません。
通常、UIアニメーションでは200〜600ミリ秒で適用されます。ホバーやフィードバックのようなインタラクションはおよそ300ミリ秒、トランジションのような精巧な動きはおよそ500ミリ秒です。
より詳しいアニメーションの種類については、マテリアルデザインを参照にしてみると良いでしょう。
左が正常なアニメーション、右側はユーザーを待たせてしまいます。
CarbonやLightningのようなデザインシステムでは、動きをデザインの重要な要素として、各タイプのトランジションの仕様（タイミング、イージングなど）に取り入れています。
04. スローインとスローアウト（Slow In and Slow Out）
私たちの日常生活では、ほとんどの物体は動きが緩和されており、突然動きは始まりません。自由落下する物体は、ゆっくりと動き出してから徐々に勢いを増していきます。
左のカードにはイージングがありません。右のカードはより自然な動きに見えることが分かります。
インターフェースデザインにイージングを追加することで、より生き生きとしたものとなり、より自然な動きに見えるようになります。タイミングとイージングだけでも、動きを効果的に定義することができます。
05. 演出（Staging）
「演出」（Staging）はシーンを振り付けます。シーンの中でどのようにオブジェクトを配置するか、どのように、いつ、どのようにアニメーションが適用されるかなどです。シーンのなかでもっとも重要な要素に注意を向けることができます。
UIデザインにおいては、「演出」（Staging）はインタラクションが発生したときに要素がどこに配置され、どのように振り付けられるかを決定します。こうすることでユーザーの注意を意図した要素に向けることができます。
もっとも重要ないいねボタン要素に、他の要素とは異なる演出を加えています。
たとえば上記サンプル例のように、わたしたちの興味に基づいて音楽を提案してくれる音楽アプリをみてみましょう。このアプリでもっとも重要なことは、ユーザーが似たようなタイプの曲を聴きたいと思ったときに、その曲を「いいね！」と言わせることです。
そのためにハート型のいいねボタンを、他の要素の振り付けとは別に演出する必要があります。
06. 運動曲線（Arc）
高いところから投げられたボールは、放物線状のパスに沿って進みます。「運動曲線」（Arc）を追加することで、より自然な動きを表現できます。
UIデザインでは、対角線上にある要素は円弧を描くことでより自然になります。「運動曲線」は、要素のパスを強調したいときに使えます。
左側は直線的な動き、右側は運動曲線を適用した例で、より自然な動きとなります。
07. 副次アクション（Secondary Action）
通常のアニメーションでは、副次アクション（Secondary Action）はオブジェクトの一時的な動作をサポートしたり、強化したりするために使用されます。たとえば、歩行中のキャラクターの頭の動きは、副次アクションと言えるでしょう。
UIデザインでは、副次アクションはメインのアクションをより目立たせるために使われます。特にユーザーにフィードバックを与える必要がある場所で効果的です。すべてのマイクロインタラクションは、副次アクションの基本原則に基づいています。
粒子のような副次アクションは、メインとなるボタン動作を強化しているのが分かります。
08. 誇張とアピール力（Exaggeration and Appeal）
シーン内の重要なキャラクターは魅力的でなければならず、同時に特定のアクションは、より多くの注目を集めるために誇張することができます。
UIデザインでは、重要なインタラクションはユーザーの注意を引くために誇張できます。以下サンプルのような、マテリアルデザインにおけるFABが良い例と言えます。
FAB自体の静止している状態は、アクセントカラーになっているだけでなく、すべての要素の上に浮かんでいるので魅力的に見えます。
インタラクションで誇張されたFABカード
なにかインタラクションが発生したときに、FABのアニメーションを誇張して画面全体を占めることで、より魅力的に魅せることができます。
メインとなる動画が大げさに誇張された、決済アプリ上でのやりとり
09. 継続する動きと後追いの動き（Follow Through and Overlapping Action）
たとえば、高いところからウサギがジャンプすると考えてみましょう。ウサギが動き出すと、耳は体とは別に動き出すでしょう。そして着地しても、耳は動いたままです。
前者は、キャラクターの異なる部分が異なる速度で動く「オーバーラッピング（overlapping）」と呼ばれる動作です。後者は「フォロースルー（Follow through）」と呼ばれ、キャラクターが停止したあともキャラクターの一部だけが動き続けます。
UIデザインでは、「フォロースルー」させてから静止することで、より自然な動きを表現することができます。
「フォロースルー」を適用したモーダルウィンドウのサンプル例。ポジションを通り過ぎ、元の位置に戻って静止します
スクロールすると、イメージカードと文字テキストが異なる速度で表示され、重なり合うように動きます。
さいごに、。
WebサイトやUIデザインのすべてのインタラクションは、体験をより没入感のあるものにし、適切な場所で慎重に利用する必要があります。
アニメーションの基本原則を適切な場所で利用することで、インタラクションがUIデザインとかけ離れたものにならないようにします。
これらのアニメーション基本原則の多くは、今日のデジタル製品でさまざまな形や方法で使用されています。30年前に設計されたアニメーションの基本原則が、現在でも通用するということがよく分かるでしょう。
参照元リンク : Disney’s motion principles in designing interface animations by Ruthi – Medium
