なぜ多くの人気サービスが「遊び心のあるUIデザイン」を採用するのか？
- UI/UX
- アプリデザイン
- トレンド
デザインに動きを加え、表現の自由度を高める「モーショングラフィックス」。静止画では実現できない、アクティブな表現が可能です。
テクノロジーやポップカルチャーなど、最新のイノベーションから影響を受けて進化し続けているモーショングラフィックスですが、そこにもトレンドはあります。
本記事では、モーショングラフィックスにおける世界的トレンドと、その効果的な使い方をご紹介します。
メインストリームの人気作品の特徴を掴み、あなたのブランドや創作活動に役立ててください。
モーショングラフィックスの世界的トレンド
まずは近年見られる、モーショングラフィックスの世界的なトレンドを見ていきましょう。
日本ではまだ導入しているブランドは多くないので、今のうちに取り入れておけば先駆者となれるかもしれません！
トレンド1. リキッドモーション
リキッドモーションを使用すると、モーショングラフィックスにオーガニックな感覚を取り入れられます。
流れるようなリキッドモーションがシームレスな画面遷移や変化を生み出し、新鮮で印象的なグラフィックスに仕上げられます。
以下のInfoTechBuzの動画は、リキッドモーションのパワフルさを表現した作品です。
スライムから泡まで！液体をシュミレートしたリキッドモーション8選
Workship MAGAZINE
トレンド2. アニメーションロゴ
自社のブランドを印象づけるために、現在さまざまなブランドにアニメーションが用いられています。
その代表ともいえるのが、アニメーションロゴです。
▲出典：David Kovalev
静的なタイポグラフィやアイコンにモーショングラフィックスで命を吹き込めば、ブランド自体もより魅力的に感じさせられるはず。
ロゴに動きやひねりをつけて、イノベーティブな印象をプラスしてみましょう。
トレンド3. キネティックタイポグラフィ
Webサイトの可読性が低くなることを恐れて、奇抜なフォントを避けてしまうデザイナーの方も多いでしょう。
しかし一度ぜひ殻を破って、モーションデザインに斬新なタイポグラフィを取り入れてみませんか？
▲出典：Jeroen Krielaars
近年は「文字を伸縮させる・ねじる・歪める」といった動きが取り入れられている、キネティックタイポグラフィも注目されています。
Webサイトやモバイルアプリのアニメーション動画にキネティックタイポグラフィを取り入れて、より印象的な動画をデザインしてみてください。
トレンド4. モーフィング
モーフィングも、近年人気が高まっているモーショングラフィックスのひとつです。
モーフィングはシームレスなトランジションを介して、ひとつの物体を別の物体に変化させる手法を指します。
モーフィングを取り入れたモーションデザインは、キャラクターやロゴなどに最適です。
▲出典：Aslan Almukhambetov for Fireart Studio
また、モーフィングには人の注意を強く引きつける力があリます。
Webサイトのアニメーションにモーフィングを取り入れて、滞在時間とSEOの向上に繋げましょう。
トレンド5. 鮮やかなパステルカラー
パステルカラーはモーショングラフィックスに最適な色彩で、特にAppleによって印象的に使用されています。
3Dタッチが搭載された最新のiPhoneを持っている方なら、以下の魚のグラフィックを見たことがあるでしょう。
鮮やかなパステルカラーを使用することで、非常に美しくエレガントに仕上がります。そこにモーショングラフィックスを取り入れることで、思わず目を奪われるようなデザインが作れるでしょう。
トレンド6. 色数を絞る
▲出典：Aslan Almukhambetov for Fireart Studio
近年のトレンドとして注目したいのが、色数を絞ったモーショングラフィックスです。
少ない言葉で多くの情景を表現できる詩のように、少ない色数だからこそできる豊かな表現があります。
多くの色を使うのではなく、あえて色数を絞ってビジュアルストーリーを伝えてみましょう。
▲出典：Aslan Almukhambetov for Fireart Studio
色数を絞ったシンプルなアニメーションは、洗練された印象を与えます。レトロな雰囲気のデザインを制作したい際には、とくにおすすめです。
限られた色数でムードやキャラクターを演出するのはチャレンジングかもしれませんが、成功すればとても魅力的なモーションデザインが実現します。
トレンド7. 細い線の使用
上のモーショングラフィックスはExplain Ninjaによって制作されたもので、細い線によって方向を示したり、輪郭を描いたりしています。
このように動画に細い線を取り入れるのも、モーショングラフィックスのトレンドです。
その場で線を描いているかのようなアニメーションは、プロモーション動画や説明動画をユニークなテイストにしてくれます。
トレンド8. グレイン
▲出典： Dmitrij
最後にご紹介するモーショングラフィックスのトレンドは、グレインです。
無機質な印象になりがちなベクター画像にグレインを取り入れると、デザインに自然な風合いを与えられます。
アニメーションにグレインを取り入れて、ホームメイド感や高品質さ、クリエイティビティを演出し、頭ひとつ抜けだした作品を制作してみましょう。
トレンド9. グリッチ効果
AdweekとShutterstockのレポートによれば、ブランディング、マーケティング、パッケージング、モーションデザインの分野でグリッチ効果が積極的に活用されているとのこと。
古いテレビのような、ノイズが入った画面を彷彿させるグリッチ効果。以下のJebari Wootenのビデオは、モーショングラフィックスにおけるグリッチ効果の参考になるでしょう。レトロな印象で、かつ未来的でもあるグリッチ効果。
ぜひモーショングラフィックスにグリッチ効果を取り入れてみてください。
トレンド10. 2Dと3Dの組み合わせ
3Dテクノロジーの進化は、モーショングラフィックスに新しい可能性をもたらしてくれます。もちろんモーショングラフィックだけでなく、多くの産業分野で3Dが活躍すること間違いなしでしょう。
また2Dと3Dを組み合わせることで、より複雑なビジュアル効果も狙えます。GoogleクラウドナビゲーションAIのプレゼンテーション動画は、2Dと3Dを印象的に組み合わせて流れるようなモーションを実現させた良い事例です。
また2Dと3Dのアニメーションをミックスするだけでなく、2Dのオーバーレイを取り入れる方法もトレンドのひとつです。
2Dと3Dを融合するメリットとして、予算をあまり必要としない点が挙げられます。大規模なプロジェクトだけでなく、小規模なデジタル広告にも活用できるのが魅力です。
▲出典： Julia Simas
モーショングラフィックスの活用シーン
続いて、モーショングラフィックスの活用シーンをご紹介します。
活用シーン1. マイクロインタラクション
昨今では多くの会社が、UXにおけるマイクロインタラクションの重要性に気づき始めています。
マイクロインタラクションとは、ユーザーが重要な要素にきちんと注意を払えるよう、UXを向上するために作られた小さなアニメーションのことです。
以下のSangmi Kimの作品がモーショングラフィックスにマイクロインタラクションを導入した良い事例でしょう。
マイクロインタラクションとは？導入の際に気をつけるべき4ポイント
Workship MAGAZINE
活用シーン2. ブランドのロゴへの活用
ブランドのロゴや、グリーティングのタイポグラフィーを、モーショングラフィックスを用いて華やかにできます。
ロゴは企業の顔とも言えるので、アニメーションやデザインにこだわってみてください。
活用シーン3. 入力フォームへの活用
以下の画像のように、入力フォームにモーションをつけるのも面白いです。入力という手間のかかる作業を、少しでも楽しんでもらうためにアニメーションを取り入れるのは良いアイデアですね。
マイクロインタラクションの実例といえるでしょう。
▲出典：Andrej Radisic
活用シーン4. 教材への活用
直感的なグラフィックスは、数学や理科などを教えるのに向いています。
以下はBenesseがオンラインで提供している教育サービスのサンプル映像です。モーショングラフィックスを上手に取り入れていますね。
活用シーン5. プロジェクションマッピングへの活用
近年はプロジェクションマッピング制作にもモーショングラフィックスが取り入れられています。
以下は東京ビッグサイトのプロジェクションマッピングの動画です。建物の立体感をうまく活かしてアニメーションををつけています。3D技術と融合したモーショングラフィックスをぜひご覧ください。
活用シーン6. 作品紹介への活用
モーショングラフィックデザイナーの野村律子氏の作品を1本にまとめた動画です。
細部にもふんだんにモーショングラフィックスが取り入れられており、モーショングラフィックデザイナーとしての腕前が一目でわかります。
モーショングラフィックスの活用企業事例
次に大企業が公開している人気のモーショングラフィックス作品をみていきましょう。
事例1. Apple
モーショングラフィックスのお手本のような作品です。慣性や重力などのアニメーション表現を使いながらApple製品の紹介を行なっています。
YouTubeにAppleのモーショングラフィックスの制作方法を解説している動画があるので、「モーショングラフィックスを制作してみたいけど、どのチュートリアルをやったらいいかわからない」という方は一度動画をみて見てください。
事例2. カロリーメイト
カロリーメイトが制作したモーションインフォグラフィックスが使われた動画です。
インフォグラフィックスを、アニメーションなどの映像で表現することをモーションインフォグラフィックスと言います。
モーションインフォグラフィックスは、数字やグラフを効果的に伝えられるのでプレゼンの際などに利用するのがおすすめです。
事例3. 銀のさら
銀のさらがキャンペーンPRのために制作したモーショングラフィックス動画です。
動画中の寿司や手は写真が使われており、細かい集合体の表現ができるモーショングラフィックスの特徴をうまく活かした映像になっています。
事例4. ANA
洗練されたおしゃれなモーショングラフィックスです。
細い線にアニメーションを加えることで、ANAのネットワークの広さを演出しています。かっこいいモーショングラフィックスを制作したい方は参考にしてみてください。
事例5. subway
モーショングラフィックスが使われているsubwayのCM動画です。
エビの丸みとアニメーションの動きがマッチしていて、ポップな音楽に合わせて弾けるようなモーションを取り入れているのがいいですね。
事例6. Pixel
Pixelはシームレスなモーショングラフィックスを配信しています。
シーンが途切れることなく流動的に進むモーションは、Webデザインのメインビジュアルとして取り入れる例が増えてきているので要チェックです。
事例7. Facebook
社会問題を取り扱う場合や、ブランドの価値を伝える際、イラストを用いたドキュメンタリー風のモーショングラフィックスを使う例がよく見られます。宿泊予約サイトのAirbnbやアメリカの3大自動車メーカのFordもイラストを用いたモーショングラフィックスを配信しているので興味のある方は参考にしてください。
事例8. STARBUCKS
モーショングラフィックスによってデータや数字わかりやすく伝えている動画です。スターバックスがどれだけ世界で飲まれているか、拡大しているかが一目でわかります。音声は英語ですがモーショングラフィックスは視覚的な理解が魅力でもあるので、言語が異なっても映像を理解できます。
モーショングラフィックス流行による今後の動き
最後に、モーショングラフィックスが流行することで予想（またはすでに実行）されている動きを見ていきましょう。
Apple製品にみる、彩度とモーショングラフィックスの重要性
Apple Watchのユーザーインターフェースには、彩度70%以上、明度90%以上の鮮明なカラーを使用したデザインが採用されています。
至る所に細かなモーションが施されているのも特徴。
また2013年にiOS6からiOS7にバージョンアップした際、大幅に彩度が高くなりました。
近年の鮮やかなパステルカラーの注目もあり、モーショングラフィックスを含むビジュアルデザインの彩度は今度ますます高まっていくと予想されます。
▲出典：Slava Beskrovni
ビジュアルデザイン関連企業がUXデザイン業界へ進出
ビジュアルデザインを手がける企業や、視覚効果のプロ、3Ⅾアーティストたちが、UXデザイン業界に進出していきます。「モーショングラフィックスがUXに好影響を及ぼす」という認識が広まってきたためです。
Webデザインにとどまらず、以下のような映画ムービーの作成にまで、仕事の範疇は広まっていきます。
モーショングラフィックス市場は、さまざまな技能をもつプロフェッショナルたちの手によって、さらなる成長を遂げていくことでしょう。
まとめ
Webサイトやデザインなど、さまざまな場面で重要な役割を果たすモーショングラフィックス。写真や文字にエフェクトを加えることによって、作品のクオリティがグッと上がるでしょう。
トレンドに目を配りつつ、自身のプロジェクトに合わせた最適なクリエイティブを模索してみてください。
（執筆：Shinya Morimoto、Mariko Sugita、Nakajima Asuka 編集：Workship MAGAZINE編集部）
いま勢いのある世界的なモーショングラフィックススタジオ25選
Workship MAGAZINE
動き(モーション)でデザインを強化しよう！基礎知識から制作ツールまで、GIF動画付きで解説
Workship MAGAZINE
