【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
以下のGIFに登場する2種類のボタンのうち、よりユーザーフレンドリーなのはどちらだと感じますか?
多くの人は、モーションが巧みに使われている下のボタンのほうが分かりやすいと感じるはずです。
このように、モーショングラフィックスは現代のWebデザインにおいて、ユーザーとWebサイトのインタラクションを強化してくれます。
今回は、UXの向上に欠かせない要素であるモーショングラフィックスについて、実例を交えながら解説します。この記事を参考にして、ぜひ自社のWebサイトに素敵なモーションを取り入れてみてください!
モーショングラフィックスとは、ロゴやイラスト、文字、図形、写真などに動きや音を加えて動画にしたものを指します。
Webサイトに長い文章だけがずっと続いていると、読む気を削がれてしまうこともありますよね。そのようなコンテンツにモーショングラフィックスを取り入れれば、UXを向上させ、ユーザーの離脱率を下げてくれます。
Webサイトに動きをもたらすモーショングラフィックスは、コンテンツに命を吹き込み、デザインに深みをもたせる役割を担っているのです。
思わず魅了されるモーショングラフィックス10種類。活用シーンや事例も紹介
Workship MAGAZINE
『Lottie』『Dribbble』『Behance』などのWebサービスには、モーショングラフィックスの作品が数多く投稿されています。
なかでもAfter Effectsのソースファイルがダウンロードできる『LottieFiles』は、とくにおすすめです。Web、iOS、Androidなどのプラットフォームで使える、無料のアニメーションSVGも提供されています。
柔軟性に優れ、細かいカスタマイズも可能な『Adobe After Effects』は、デザインに動きをつけるのにぴったり。
コードの処理速度が早いため、フレームバイフレームアニメーションのプロセスを効率化してくれます。
Adobe After Effects以外にも、『Adobe Animate』や『Procreate』などのツールもデザインに動きをつけられます。これらのツールはアニメーションのフレーム1枚1枚こだわりたい人におすすめです。
近年は、モーショングラフィックスにマイクロインタラクションを導入しているWebデザインが増えています。マイクロインタラクションとは、ユーザーのアクションに対するフィードバックなどを伝えるための、細かな相互作用のデザインを指します。
マイクロインタラクションの重要な機能のひとつとして、システムがコマンドを受け取ったという事実をユーザーに知らせることが挙げられます。気づかないほどのちょっとしたモーションでありながら、Webサイトとユーザーとのインタラクションを手助けしてくれるのです。
ここからは以下のGIFの例を参考に、マイクロインタラクションが機能する流れを3つのフェーズに分けてみていき認ましょう。
ユーザーがボタンをクリックすると矢印が下にむかって動き、円がダイヤルに変わります。これが「トリガー」です。
トリガーは「引き起こす」という意味があり、ここではユーザーが行った行動(クリック)によってシステムが作動したことをユーザーに知らせる役割を担っています。
次に、進行状況がパーセンテージでダイヤルの中央に表示されます。これがこの例における「ルール」です。
ルールとは、トリガーによって引き起こされた一連の動作を定義しています。
ユーザーに進行状況を知らせることで、ユーザーがストレスを感じずにサービスを利用できます。
ダウンロードが完了すると、画面とボタンが緑色にかわり、星や円のようなエレメントが散ります。
これがユーザーにダウンロード完了を知らせるフィードバックです。フィードバックがあることによって、ユーザーに安心感をもたらせられます。
このようにマイクロインタラクションにおけるすべてのステップは、ユーザーが状況を確認するために存在しているのです。
マイクロインタラクションについてもっと詳しく知りたい!という方は、以下の記事も参考にしてみてください。
マイクロインタラクションとは?導入の際に気をつけるべき4ポイント
Workship MAGAZINE
『Adobe XD(自動アニメーション機能)』『ProtoPie』『Invision Studio』『Figma』などをチェックしてみてください。
Adobe XDは、自動アニメーション機能が搭載されていることが特徴です。またInvision Studioは、キーフレームで簡単にモーションを加えられるので重宝しています。
モーショングラフィックスをデザインする際には、不自然な動きにならないように気をつけましょう。システムと対話しているという感覚をユーザーに与えるためには、自然な動きが重要です。
ボールを落としたとき、ボールは等速で移動しませんよね。それと同じように、Webサイトの画面をスワイプした際の速度が一定だと、ユーザーは違和感を覚えてしまいます。
したがって、ユーザーがWebサイトに入ってきたときのアニメーションは速くして、そこからだんだん速度を落としていくと、より自然に感じさせられるでしょう。
ただし、このアドバイスは理論上のものにすぎません。Web上でよりクリエイティブなインタラクションをデザインする際は、より柔軟な発想で動きを調整してみてください。
デザインにモーションを取り入れる際、参考にしたいのがGoogleのマテリアルデザインガイドラインです。デザインとモーションに一貫性をもたらすのに役立ちます。
Googleのマテリアルデザインは、光と空間の設定によってリアルな動きを再現し、z軸の使用を可能にしています。
モーションをデザインする前に、一度チェックしておきましょう。
マテリアルデザインのおすすめカラーパレット/ツール/リソース11選
Workship MAGAZINE
モーションはデザインを補完して、強化してくれます。しかしだからといって、おおもとのデザインで手を抜いていいわけではありません。
手抜きのデザインに大仰なモーションをつけるよりも、手の込んだデザインにシンプルなモーションをつけるほうが、相乗効果でずっと優れた作品ができるはずです。
「デザインが第一、モーションはUXを向上させるための補助的役割」という優先順位を忘れないようにしましょう。
(執筆:Muzli 翻訳:Nakajima Asuka 編集:Kimura Yumi)
いま勢いのある世界的なモーショングラフィックススタジオ25選
Workship MAGAZINE
【Premiere Pro】モーショングラフィックステンプレート39選
Workship MAGAZINE
もう色の決め方に迷わない!デザインにおける6つアイディアをマスターしよう
Workship MAGAZINE