モーションデザインの事例

Googleはモーションに対して、以下の効果があると述べています。

 ・画面間での視線誘導
 ・ユーザーが操作を完了すると何が起きるのかヒントを示す
 ・要素間の階層的、空間的な関係
 ・背後で行われている処理（コンテンツの取得、次の画面の読み込みなど）から注目をそらす
 ・キャラクター表現、楽しさの演出

参考：
マテリアルデザイン-モーション（Motion)

モーションの効果が表れているわかりやすい例では、ファイルのアップロード中に表示されるバーが挙げられます。
この時、処理時間を表示するだけでなく、ユーザーに対して背後で行なわれている処理から注目をそらす効果が狙えるでしょう。

では、実際にモーションデザインはどのように用いられているのでしょうか。
2つの事例を見てみましょう。

参考：
これからのUXデザインにおけるモーションデザインの重要性

1.Googleマップ

上記のようにとある地点を検索した時、Googleマップではズームインするようなモーションがおきるだけでなく、調べていた地点から離れた地点を検索すると新しく検索した地点に走るように画面遷移します。

このような動きが加わることで、ユーザーは場所と場所の空間的な関係を感覚的に察することができるでしょう。
Googleマップでは他にもクリックした地点を中心として同心円上に円が描かれるなど、多くのモーションデザインが用いられています。

2.Twitter

Twitterでは、公式アプリから「いいね！」を意味するハートのアイコンをタップすると、ハートが弾けるモーションが現れます。

Googleがモーションの効果として挙げている「キャラクター、洗練、楽しみ」を実現していると言えるでしょう。
また、Twitterではユーザーの注意をひくために通知がポップアウト形式で現れたり、新しいツイートを読み込むためにタイムラインを下にスワイプすると画面が下に動いたりといったモーションも採用されています。

アプリではスマートフォンの小さい画面の中でも、ユーザーにとって操作しやすい画面にしなくてはなりません。
そんななかでも、モーションを活用することで直感的な操作が可能となるでしょう。