海外サイト Toptal.com で公開された Compelling and Moving – A Guide to Motion Design Principles を著者 Micah Bowers より許可をもらい、意訳転載しています。
動き（英: Motion）は、デジタルデザインのユーザーエクスペリエンスに大きな影響を与えます。
しかし、インターフェース要素にモーションデザインの基本原則をうまく取り入れなければ、使いやすさとなるユーザビリティは損なわれてしまいます。
この記事では、ユーザーに説得力と感動を与える、モーションデザインの基本原則12個をまとめています。
モーションデザインとは？
モーションデザインとUXの組み合わせは、比較的新しいものですが、そのルーツは世界中のひとを魅了し続けるディズニーです。
ディズニー社の現場で長年培われ、トップクリエイターFrank ThomasとOllie Johnstonが苦心して作成したアニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusion of Life: Disney Animation）」として1981年に出版され、現在でもアニメーションの基本ガイドのひとつとして広く知られています。
このディズニーの基本原則は、アニメーションストーリーのために、物理的な動きの基本的な法則をまとめたものです。
描かれたキャラクターに動きや感情を与えるものですが、現代のユーザーインターフェースに求められる、インタラクティブな動きのニーズには十分対応できてないとも言えるでしょう。
このギャップを埋めるために、アニメーションの専門家であるホルヘ・R・カネド・エストラーダ氏は、ディズニーの基本原則を翻案した「モーションデザインの10の原則」を発表しています。
10 Principles of Motion Design by ホルヘ・R・カネド・エストラーダ
インタラクティブなUIデザインを中心に、モーションデザインの原理を再編集したのが、Issara Willenskomer氏の「UX in Motion Manifesto」です。
Willenskomer氏は、アニメーションの基本原則12個を表現するには、以下の点が重要としています。
- モーションデザインとUIアニメーションを区別する
- 動きがどのようにユーザビリティに役立つか明確にする
- 核となる動きの細かい仕組みを理解する
モーションデザインとユーザビリティの違いとは？
モーションデザインは装飾デコレーション以上のもの
モーションデザインとUIアニメーションは同じ意味では有りません。UIアニメーションは多くの場合、UXとは関係のない装飾のように扱われます。しかし、モーションデザインは、行動そのもので、その行動こそが、ユーザーエクスペリエンスを助けたり、妨げたりします。
2つの動きの種類: リアルタイム vs. 非リアルタイム
モーションデザインは、リアルタイムと非リアルタイム、2つの基本的なインタラクションに関係しています。
- リアルタイムインタラクションでは、ユーザーが画面上のUI要素を操作すると、即座にフィードバックが得られます。モーション動作はユーザーの入力に即座に反応。
- 非リアルタイムインタラクションは、ユーザーが入力した後に発生します。ユーザーは継続する前に一時停止して、結果として生じるモーション動作を見ることになります。
リアルタイムインタラクション: モーション動作はユーザーの入力に即座に反応します。 by Stan Yakusevich
非リアルタイム: インタラクションの後、ユーザーはしばらく待ってモーション動作を確認する必要があります。 by Vitaly Rubtsov
モーションがユーザビリティをサポート
モーションデザインは、4つの明確な方法でユーザビリティをサポートする必要があります。
- 期待（英: Expectation）: ユーザーがUI要素を操作するときに、どのような動きを期待していますか？その動きは期待通りですか、それとも混乱の原因になっていませんか？
- 継続性（英: Continuity）: ユーザー体験全体を通して、一貫したモーション動作となっていますか？
- 物語性（英: Narrative）: インタラクションとそのトリガーとなる動きは、ユーザーを満足させる論理的なストーリーの進行に結びついていますか？
- 関係性（英: Relationship）: UI要素の空間的、デザイン性、階層などはどのように関連し、ユーザーの意思決定に影響を与えていますか？
デジタルプロダクトにおけるモーションデザインの基本原則12個まとめ
1. イージング（英: Easing）
イージングは、わたしたちの普段の生活において、物体が時間の経過とともに加速したり、減速したりする様子を真似ており、すべてのUI要素に適用できます。
イージングの反対は直線運動（Linear Motion）で、この直線的な動きをUI要素に適用すると、止まった状態から全速スピードへ加速、フルスピードから一瞬で静止するように移動します。
物理的な動きの法則に反しており、ユーザーには止まっているように見えます。
UIカードとそれに対応した椅子は素早く動きますが、イージングのおかげでスムーズで制御されて停止しています。 by Saptarshi Prakash
2. オフセットと遅延（英: Offset and Delay）
複数のUI要素が同じ時間と速度で移動すると、ユーザーはそれらをまとめてグループ化し、各要素の独自の機能を見落としがちです。
オフセットと遅延は、同時に移動するUI要素の間に階層を作成し、関連しているが別々のものであることを伝えます。
完全に同期するのではなく、要素のタイミング、速度、間隔がずれることで、「次から次へと」表示される効果がうまれます。
この暗号通貨アプリは、複数のUI要素を一度に表示しています。要素が関連していることを伝えるために、要素の到着が少しずれるようにしてあります。 by Gapsy Studio
3. 親要素（英: Parenting）
親要素は、あるUI要素のプロパティを他のUI要素のプロパティとリンクします。親要素の値が変更されると、子要素のリンクされたプロパティも変更されます。
たとえば、親要素の位置を子要素のスケールに結びつけることができるでしょう。親要素が移動すると、子要素のサイズが増減します。
親要素はUI要素間の関係をつくり、階層を確立し、複数のUI要素がユーザーと一度に通信できるようにします。この理由から、リアルタイムのインタラクションで使用される場合、親要素はもっともインパクトのあるものとなります。
青いスライダーの位置で背景マスクの不透明度、電球周りのグロー効果の広がり、光量の数値をコントロールしています。 by Ayoub Kada
4. 変形（英: transformation）
変形は、あるUI要素が別のUI要素に変わるときに発生します。たとえば、ダウンロードボタンがプログレスバーや完了アイコンへの変身は分かりやすい例でしょう。
ユーザビリティの観点から見ると、変形はユーザーに目標となるゴールに関連した、ステータスを表示するのに効果的な方法です（システムステータスの可視化）。特に、開始と終了のプロセスのあるUI要素に役立ちます（例: ファイルのダウンロード）。
変形はダウンロードの開始、進行中、完了を告げます。 by Aaron Iker
5. 値の変化（英: Value Change）
値の変化は、データー表現の動的な性質を伝え、データがインタラクティブで、ある程度影響を受ける可能性があることを、ユーザーに知らせます。モーション動作を導入しないと、ユーザーのデータへの意欲は低下するでしょう。
データーに影響を与える可能性があることを示すために、値はモーション動作で表示されます。
6. マスキング（英: Masking）
マスキングとは、UI要素の一部を意図的に表示したり、隠したりすることを指します。
要素の形状やスケールを変更することで、要素自体を識別可能にしたままで、ユーティリティの変更を通知します。このため、写真やイラストのような詳細なVisualが理想的な候補と言えるでしょう。
ユーザビリティの観点から、マスキングを実装することで、ユーザーに一連のインタラクションが進行中であることを伝えることができます。
マスキングは、画像の取り込みからアップロード、オンラインストアへの商品追加などに使用されています。 by SELECTO
7. オーバーレイ（英: Overlay）
オーバーレイは、UI要素の平面空間で前景と後景が区別されているようなエフェクトを起こします。奥行きをシミュレートすることで、オーバーレイはユーザーのニーズに応じて要素を表示したり、非表示にしたりします。
オーバーレイを採用する際には、情報の階層づくりが重要となります。たとえば、メモ書きアプリでユーザーが最初に見るのは、メモのリストです。その後、オーバーレイを使用して、削除やアーカイブのように、メッセージごとにオプション設定を表示させることができます。
オーバーレイは、ユーザーがノートアプリのエントリを素早くアーカイブしたり、削除したりすることができます。 by Karan Kapoor
8. クローニング（英: Cloning）
クローニングとは、1つのUI要素が他の要素に分割されるモーション動作のことです。重要な情報やインタラクション設定を強調するのに、最適な方法といるでしょう。
UI要素がインターフェース内で分割されるときは、どの要素からはじまったのか、明確にする必要があります。要素がどこからともなく出現したり、フェードアウトしたりすると、ユーザーは自信を持って要素を操作することができなくなります。
「メモを追加」のアイコンから明らかに出ているので、ためらうことなく色付きのサークル円をクリックできます。 by Ariuka
9. オブスキュレーション（英: Obscuration）
くもりガラスのドアを想像して見ましょう。ドアが開くには相互作用が必要ですが、向こう側に何があるのかを、ある程度は見分けることが可能です。
オブスキュレーションはまさに同じ考え方です。ユーザーに操作を要求するインターフェースを表示すると同時に、下にある画面のヒントを明らかにします。
ナビゲーションメニュー、パスワード画面、フォルダ、モーダルウィンドウなどが一般的な実装例です。
オブスキュレーションは、ユーザーに重要なインタラクションを提示しながら、操作すべき方向性を保つことを可能にします。 by Kyle Abarquez
10. パララックス（英: Parallax）
パララックスが表示されるのは、2つ以上のUI要素が、異なる速度で同時に移動する場合です。ここでも、、階層を確立することを目的としています。
インタラクティブ要素の移動速度は速く、前景に表示され、非インタラクティブな要素は動きが遅くなり、背景に後退します。
パララックスは、ユーザーをインタラクティブなUI要素に誘導する一方で、非インタラクティブな要素を画面上に残し、デザインの統一性を維持します。
パララックス効果を利用すると、もっとも重要なインタラクティブ要素はもっとも速く動き、非インタラクティブ要素はより遅く動き、背景に後退します。 by Tubik
11. 次元性、ディメンショナル（英: Dimensionality）
ディメンショナル（次元性）は、現実世界のように、UI要素が複数のインタラクティブな側面を持っているように見せることができます。
このモーション動作は、要素が折りたたみ式、反転式、浮動式、またはリアルな奥行きなどを表現することが重要です。
スマートフォンなどのデバイスにおいて次元性は、UI要素の異なる側面がリンクされていることを意味し、シームレスな画面遷移を可能にします。
ディメンショナルは、平面的なUI要素が、複数のインタラクティブな側面を持っていることを意味します。 by Sang Nguyen
12. ドリー効果とズーム効果（英: Dolly and Zoom）
ドリー効果とズーム効果によって、ユーザーはUI要素を空間的に移動したり、スケールを拡大して、より詳細なレベルを明らかにしたりします。
- ドリー効果: ドリーはユーザーの視点がUI要素に近づくと発生します。カメラを持ったひとが被写体に近づいて撮影する様子。
- ズーム効果: ズームではユーザーの視点とUI要素は固定されたままですが、ユーザーの画面内では要素のサイズが変化します。止まった状態で、カメラのズーム機能をつかって被写体を撮影する様子。
ドリー効果: ユーザーの視点が背景画像に近づいているのが分かります。 by Yanosh
ズーム効果: ユーザーの視点は画像に近づかず、画像のスケールが大きくなります。by Victor Aldabalde
動きはコミュニケーション。
インタラクティブな体験には、控えめな動きが求められます。モーションデザインの原則を守られていれば、基本的なUI要素でさえも、人間のコミュニケーションの洗練されたものとなるでしょう。
反対にモーションデザインの原則が無視されると、自然界にない不自然な動きとなってしまいます。
モーションデザインとデジタル製品のUXの関係は、急速に成熟しています。
モーションデザインへの基本原則に沿ったアプローチは、トレンドやツール、テクニックなどに過度に依存することも防ぐことができます。
さらに、スクリーン上のUI要素の平面的な動きと、普段の生活における自然で立体的な動きの溝を埋めることができるでしょう。
今回紹介したモーションデザインの原則を、今後のウェブ制作に活用してみてはいかがでしょう。
モーションデザイン、アニメーションの関連リソースまとめ
ここでは、当ブログでこれまでに紹介したアニメーションに関連する記事をまとめています。モーションデザインをより詳しく知りたいときなど、一緒に参考にしてみると良いでしょう。
わかりやすく図解した、UXデザインにおけるアニメーションの基本原則とルールをまとめています。
ディズニーのアニメーションの基本原則12個をHTML/CSSで再現したスニペット集。
これまでのアプリ開発から学んだ、実践的なデザイン制作で役立つ、美しいアニメーションのテクニック。
アニメーションの基本原則のより具体的な実装サンプル例を知りたいときはこちら。
実際に実装されているモーションデザイン、アニメーションをまとめた記事。
魅力的なWebアニメーションを実装できるLottieのつかい方をまとめた完全ガイド。
参照元リンク : Compelling and Moving – A Guide to Motion Design Principles – Toptal.com
