モーションデザインの基礎概念

はじめに

「モーション」を「デザイン」する、とはそもそもどういうことなのか？
あくまで僕個人の主観になりますが、その土台となる考え方を言語化してみました。大前提として、静止画でのグラフィック的要素については別ものとして取り上げることとします。

モーションデザインの基礎概念

モーションデザインとは、「UIや映像などにおいて動きをデザインする」ことですね。その効果は大きく分けて3つあります。

①情報の強調
人は本能的に動くものに注目し、目で追ってしまう習性があります。
そうした習性を利用して重要なデザインを強調する手段としても有効です。

②UIの強化
「画面上のボタンを押した時に、画面からなにかしら反応が返ってくる」のようなユーザとデバイスのコミュニケーション。
このようなUIにおいてインタラクション（相互作用）の潤滑油になり、より良いインタラクションが成立することも、モーションデザインの大きな効果に成り得ます。

③「読む」から「見る」へ
テキストを「読む」体験から、風景のように「見る」体験に置き換えることで、鑑賞者がより見やすいものへと変換するために用いられることもあります。

こういった3点の特性を生かして、静止画でのデザインでは成し得ない情報設計を可能にし、ユーザビリティを向上する手段としても活用できるものが「モーションデザイン」のメリットです。

モーションとアニメーション

モーションの原点として、「アニメーション」という概念があると考えています。

命を宿すアニメーション
「アニメーション（Animation）」とはラテン語で「生命」「魂」という意味の「アニマ（Anima）」という言葉を語源に持ちます。つまりアニメーションとは「まるで命があるかのように動くこと」を指しています。
つまりアニメーションには自然界を観察し、それらの動きや事象を模倣することで「命を宿す」ことを行ってきた歴史があります。

自然を引用するモーション
同様に、モーションにおいても自然界に通じたアクションが善とされています。
よく「この動きなんか不自然…」という感想を抱くのはその辺りに起因しているのでしょう。
そして自然界に通じた動きを模倣している時点で、動きにおいてもメタファー（隠喩）を内包させることが可能となります。

2つの言葉の違い
アニメーションとモーション、どちらの言葉も動きにまつわる分野のため、概ね根底にある考え方は一緒なのは当然と言えば当然なのですが、モーションは命を吹き込むためにつけるものではないので、別の言葉として用いられているのだと思われます。

動きの印象

グラフィックでもアニメーションのように「模倣」は大事な要素ですが、モーションにおいても既存の価値観や、メタファーを引用してデザインを構築していきます。

時間というベクトル
静止画でのグラフィック的要素とは別の「動き」というベクトルを生み出し、デザインに新たな情報を付与させて、見る人に静止画とは全く別の印象を与えることができます。

例えば、文字がドミノ倒しのように倒れていくだとか、風船のように破裂する。ゴムボールのように跳ね回ったり、インクのにじみのように現れる…など、「〇〇のように」と表現されるモーションが担うメタファーです。

UI体験と映像体験
静止画でのグラフィック的要素が持つメタファーと、動きによって付与されるメタファーが掛け合わされた状態が、UIにおける体験も含めた映像体験なのかと思います。

そしてこれらが複合的に作用して、かわいい、ポップな印象や、ちょっと怖そうなシリアスな印象などを演出することが可能です。

おわりに

いかがでしたか？
モーションデザインというものの根本的な概念を、簡潔ではありますがまとめてみました。
これで誰かの役に立つのかとても不安ですが、今後、もう少し具体的なモーションの手法にフォーカスを当てていければなと思っています。