動き(モーション)でデザインを強化しよう！基礎知識から制作ツールまで、GIF動画付きで解説

以下のGIFに登場する2種類のボタンのうち、よりユーザーフレンドリーなのはどちらだと感じますか？

多くの人は、モーションが巧みに使われている下のボタンのほうが分かりやすいと感じるはずです。

このように、モーショングラフィックスは現代のWebデザインにおいて、ユーザーとWebサイトのインタラクションを強化してくれます。

今回は、UXの向上に欠かせない要素であるモーショングラフィックスについて、実例を交えながら解説します。この記事を参考にして、ぜひ自社のWebサイトに素敵なモーションを取り入れてみてください！

モーショングラフィックスとは

▲出典：Pineapple

モーショングラフィックスとは、ロゴやイラスト、文字、図形、写真などに動きや音を加えて動画にしたものを指します。

Webサイトに長い文章だけがずっと続いていると、読む気を削がれてしまうこともありますよね。そのようなコンテンツにモーショングラフィックスを取り入れれば、UXを向上させ、ユーザーの離脱率を下げてくれます。

Webサイトに動きをもたらすモーショングラフィックスは、コンテンツに命を吹き込み、デザインに深みをもたせる役割を担っているのです。

モーショングラフィックス事例が掲載されているおすすめサービス

『Lottie』『Dribbble』『Behance』などのWebサービスには、モーショングラフィックスの作品が数多く投稿されています。

なかでもAfter Effectsのソースファイルがダウンロードできる『LottieFiles』は、とくにおすすめです。Web、iOS、Androidなどのプラットフォームで使える、無料のアニメーションSVGも提供されています。

モーショングラフィックスを制作するときにおすすめのツール

柔軟性に優れ、細かいカスタマイズも可能な『Adobe After Effects』は、デザインに動きをつけるのにぴったり。

コードの処理速度が早いため、フレームバイフレームアニメーションのプロセスを効率化してくれます。

Adobe After Effects以外にも、『Adobe Animate』や『Procreate』などのツールもデザインに動きをつけられます。これらのツールはアニメーションのフレーム1枚1枚こだわりたい人におすすめです。

マイクロインタラクションとは

近年は、モーショングラフィックスにマイクロインタラクションを導入しているWebデザインが増えています。マイクロインタラクションとは、ユーザーのアクションに対するフィードバックなどを伝えるための、細かな相互作用のデザインを指します。

マイクロインタラクションの重要な機能のひとつとして、システムがコマンドを受け取ったという事実をユーザーに知らせることが挙げられます。気づかないほどのちょっとしたモーションでありながら、Webサイトとユーザーとのインタラクションを手助けしてくれるのです。

マイクロインタラクションの3つのフェーズ

ここからは以下のGIFの例を参考に、マイクロインタラクションが機能する流れを3つのフェーズに分けてみていき認ましょう。

▲出典：Pineapple

ステップ1. トリガー

ユーザーがボタンをクリックすると矢印が下にむかって動き、円がダイヤルに変わります。これが「トリガー」です。

トリガーは「引き起こす」という意味があり、ここではユーザーが行った行動（クリック）によってシステムが作動したことをユーザーに知らせる役割を担っています。

ステップ2. ルール

次に、進行状況がパーセンテージでダイヤルの中央に表示されます。これがこの例における「ルール」です。

ルールとは、トリガーによって引き起こされた一連の動作を定義しています。

ユーザーに進行状況を知らせることで、ユーザーがストレスを感じずにサービスを利用できます。

ステップ3. フィードバック

ダウンロードが完了すると、画面とボタンが緑色にかわり、星や円のようなエレメントが散ります。

これがユーザーにダウンロード完了を知らせるフィードバックです。フィードバックがあることによって、ユーザーに安心感をもたらせられます。

このようにマイクロインタラクションにおけるすべてのステップは、ユーザーが状況を確認するために存在しているのです。

マイクロインタラクションについてもっと詳しく知りたい！という方は、以下の記事も参考にしてみてください。

マイクロインタラクションを制作するときにおすすめのツール

『Adobe XD（自動アニメーション機能）』『ProtoPie』『Invision Studio』『Figma』などをチェックしてみてください。

Adobe XDは、自動アニメーション機能が搭載されていることが特徴です。またInvision Studioは、キーフレームで簡単にモーションを加えられるので重宝しています。

モーショングラフィックスをデザインに取り入れるときに気をつけたいこと

動きをリアルに再現しよう

▲出典：dribbble

モーショングラフィックスをデザインする際には、不自然な動きにならないように気をつけましょう。システムと対話しているという感覚をユーザーに与えるためには、自然な動きが重要です。

ボールを落としたとき、ボールは等速で移動しませんよね。それと同じように、Webサイトの画面をスワイプした際の速度が一定だと、ユーザーは違和感を覚えてしまいます。

したがって、ユーザーがWebサイトに入ってきたときのアニメーションは速くして、そこからだんだん速度を落としていくと、より自然に感じさせられるでしょう。

ただし、このアドバイスは理論上のものにすぎません。Web上でよりクリエイティブなインタラクションをデザインする際は、より柔軟な発想で動きを調整してみてください。

Googleガイドラインを参考にしよう

デザインにモーションを取り入れる際、参考にしたいのがGoogleのマテリアルデザインガイドラインです。デザインとモーションに一貫性をもたらすのに役立ちます。

Googleのマテリアルデザインは、光と空間の設定によってリアルな動きを再現し、z軸の使用を可能にしています。

モーションをデザインする前に、一度チェックしておきましょう。

おわりに

モーションはデザインを補完して、強化してくれます。しかしだからといって、おおもとのデザインで手を抜いていいわけではありません。

手抜きのデザインに大仰なモーションをつけるよりも、手の込んだデザインにシンプルなモーションをつけるほうが、相乗効果でずっと優れた作品ができるはずです。

「デザインが第一、モーションはUXを向上させるための補助的役割」という優先順位を忘れないようにしましょう。

（執筆：Muzli　翻訳：Nakajima Asuka　編集：Kimura Yumi）