2014年6月にGoogleが発表したデザインガイドラインで触れられた「マテリアルデザイン」において、行える操作を動きで直感的に表現する「モーション」は重要視されています。
その中で出てきたのが、動きそのものをデザインとして捉える「モーションデザイン」という概念です。

モーションデザインはもともとゲームの世界でキャラクターの動きを表現するのに使われてきた概念ですが、現在ではWebサービスにおけるUIとして注目されています。

今回は*「モーションデザイン」の基本概念と事例をご紹介します。*

例えば、iPhoneでは画面のロック解除を行う時に間違えた番号を打ち込んでしまうと、画面全体が揺れて、ロックが解除できない旨を伝えています。
このように動きをデザインすることは、UIの質を高めることにもつながるでしょう。

実際にGoogleではモーションデザイナーの採用枠を設けており、今後もデザイン業界において注目される分野になっていくかもしれません。
ぜひこの機会にモーションデザインとはどのようなものを指すのがおさえておきましょう。

参考：
Google Design

モーションデザインとは

モーションデザインとは、モーション（動き）そのものを想像し、具現化する行為を指します。

例えば、ゲーム業界では剣を振るう姿や歩く姿勢ひとつとっても、キャラクターの個性を出すことが求められます。そのためただ動くだけでなくキャラクターらしく動くために、モーションデザインが用いられてきました。
ロボット工学の分野においてもセンサーで実際の動作を記録するモーションキャプチャという技術を用いて動作を分析することで、人間らしい動きや動物らしい動きなどを表現しています。

参考：
第161回　「動作」を記録する、モーションキャプチャの技術
21_21 DESIGN SIGHT-企画展
モーションデザイン｜株式会社ヘッドロック

モーションデザインとUIの関わり

このような動きそのものをデザインとして捉える考え方は、UIの世界にも進出してきています。

例えば、今ご覧になっているホームページでもトップ画像では、複数の画像が出てきて左右にスワイプすることができます。それだけでなく、メニュー画面をクリックすると扉が開くように画面が表示されるモーションデザインを取り入れています。

ferret__フェレット_｜webマーケティングがわかる・できる・がんばれる.png

こういったUIにおけるモーションデザインは、Googleが推奨している「マテリアルデザイン」で取り上げられたことで注目されるようになりました。

Googleではマテリアルデザインとして取り入れるべきモーションについて、上記の動画で紹介しています。

モーションを取り入れることによって、画面と画面で移動することを左右の動きで表現したり、選択していることをボタンから同心円状に光ることで知らせたりできます。
このようにWebサービスの操作に合わせて動きをつけることでユーザーにとって直感的な操作が可能となるでしょう。

参考：
マテリアルデザインとは〜基本概念と実務で使える無料フレームワーク6選
マテリアルデザイン

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

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

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

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

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

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

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

1.Googleマップ

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

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

2.Twitter

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

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

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

まとめ

Webサービスにおいて動きそのものをデザインすることを「モーションデザイン」といいます。動きが加わることでユーザーのタスクの流れに合わせて案内を行うことが可能となり、ユーザーにとって使いやすいUIを実現できるでしょう。

一方では、サービス内でモーションのルールが統一されてないと、ユーザーの混乱を招くこととなります。デザインが表示される方向や速度など、サービス全体で統一感を持ってデザインするようにしましょう。

「モーションデザイン」は、スマートフォンのような小さい画面でも直感的な操作を可能にします。
こらからのWebデザイナーにとっては平面だけの世界に向き合うのではなく、デザインをどうやって動かすのかという視点が重要になってくるでしょう。