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選
マテリアルデザイン