思わず魅了されるモーショングラフィックス10種類。活用シーンや事例も紹介

デザインに動きを加え、表現の自由度を高める「モーショングラフィックス」。静止画では実現できない、アクティブな表現が可能です。

テクノロジーやポップカルチャーなど、最新のイノベーションから影響を受けて進化し続けているモーショングラフィックスですが、そこにもトレンドはあります。

本記事では、モーショングラフィックスにおける世界的トレンドと、その効果的な使い方をご紹介します。メインストリームの人気作品の特徴を掴み、あなたのブランドや創作活動に役立ててください。

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

モーショングラフィックスとは、本来は動きのない文字や写真、イラスト、ロゴ、アイコンなどに加工を加え、アニメーションにしたものを指します。

見た目にもポップで可愛らしい映像やCMが多く、伝えるべき情報も入れ込みやすい観点から、動画を用いたマーケティングに使われる動きも近年増えてきました。

機材などが高価だった時代は制作コストの面で敬遠されていましたが、近年では安価で高品質な機材やソフトウェアが増えてきており、技術も広まってきています。

【Premiere Pro】モーショングラフィックステンプレート39選

Workship MAGAZINE

モーショングラフィックスのメリット

モーショングラフィックスを使うメリットには、主に以下のようなものがあります。

メリット1. 情報を分かりやすく伝えられる

モーショングラフィックスはイラストやアイコンが主軸になるため、伝えたい情報を的確に表せます。視覚的にも分かりやすく、見る人へ直感的にアピールすることが可能です。

写真など静止画像では伝わりにくかった情報が、アニメーションを駆使することで圧倒的に伝わりやすくなります。近年、CMや企業ブランディング映像などにモーショングラフィックスが多用されているのも、マーケティングの観点から見た「情報の伝えやすさ」がメリットとして浸透しているからでしょう。

メリット2. 自由に表現できる

表現の自由度が高い点も、モーショングラフィックスの特徴であり、メリットのひとつです。

次項目でも詳しく紹介しているように「リキッドモーション」や「キネティックタイポグラフィ」など、モーショングラフィックスのなかでもさまざまな表現方法があります。表現の幅が広がるとともに、伝わる情報も増えることでしょう。

メリット3. 強い印象を残せる

情報が分かりやすく伝わるとともに、視覚的・直感的なインパクトを残せる点も大きなメリット。

モーショングラフィックスを使ったCMや企業PR映像などは、ほとんどの場合シンプルで短時間に作られています。それにも関わらず、印象的なものが多いのが特徴です。

メリット4. 低予算で制作できる

かつては金銭面・工程面で高コストだったモーショングラフィックス。しかし、時代の流れと機材や技術の進化により、低コスト化が進んでいます。

役者や小道具を用意する必要がある実写映像と比べても、市販のソフトで制作できるモーショングラフィックスのほうが明らかに低予算で形にできます。15〜30秒ほどのモーショングラフィックスであれば、外注したとしても20〜30万円程度です。

モーショングラフィックスの世界的トレンド10種類

モーショングラフィックスの世界的なトレンドを見ていきましょう。

日本ではまだ導入しているブランドは多くないので、今のうちに取り入れておけば先駆者となれるかもしれません！

トレンド1. リキッドモーション

リキッドモーションを使用すると、モーショングラフィックスにオーガニックな感覚を取り入れられます。

流れるようなリキッドモーションがシームレスな画面遷移や変化を生み出し、新鮮で印象的なグラフィックスに仕上げられます。

以下のInfoTechBuzの動画は、リキッドモーションのパワフルさを表現した作品です。

スライムから泡まで！液体をシュミレートしたリキッドモーション8選

Workship MAGAZINE

トレンド2. アニメーションロゴ

自社のブランドを印象づけるために、現在さまざまなブランドにアニメーションが用いられています。その代表ともいえるのが、アニメーションロゴ。Anastasiia Andriichukもその一例です。

下の例のように静的なタイポグラフィやアイコンにモーショングラフィックスで命を吹き込めば、ブランド自体もより魅力的に感じさせられるはず。

ロゴに動きやひねりをつけて、イノベーティブな印象をプラスしてみましょう。

トレンド3. キネティックタイポグラフィ

Webサイトの可読性が低くなることを恐れて、奇抜なフォントを避けてしまうデザイナーの方も多いでしょう。

しかし一度ぜひ殻を破って、モーションデザインに斬新なタイポグラフィを取り入れてみませんか？

近年は「文字を伸縮させる・ねじる・歪める」といった動きが取り入れられている、キネティックタイポグラフィも注目されています。

Webサイトやモバイルアプリのアニメーション動画にキネティックタイポグラフィを取り入れて、より印象的な動画をデザインしてみてください。

トレンド4. モーフィング

モーフィングも、近年人気が高まっているモーショングラフィックスのひとつです。

モーフィングはシームレスなトランジションを介して、ひとつの物体を別の物体に変化させる手法を指します。

モーフィングを取り入れたモーションデザインは、キャラクターやロゴなどに最適です。

またモーフィングには人の注意を強く引きつける力があリます。

Webサイトのアニメーションにモーフィングを取り入れて、滞在時間とSEOの向上に繋げましょう。

トレンド5. 鮮やかなパステルカラー

パステルカラーはモーショングラフィックスに最適な色彩で、とくにAppleによって印象的に使用されています。

かつて3Dタッチが搭載された当時のiPhoneに、以下の魚のグラフィックがあるのを見た方も多いでしょう。

鮮やかなパステルカラーを使用することで、非常に美しくエレガントに仕上がります。そこにモーショングラフィックスを取り入れることで、思わず目を奪われるようなデザインが作れるでしょう。

トレンド6. 色数を絞る

近年のトレンドとして注目したいのが、色数を絞ったモーショングラフィックスです。

少ない言葉で多くの情景を表現できる詩のように、少ない色数だからこそできる豊かな表現があります。

多くの色を使うのではなく、あえて色数を絞ってビジュアルストーリーを伝えてみましょう。

色数を絞ったシンプルなアニメーションは、洗練された印象を与えます。上の例のように、レトロな雰囲気のデザインを制作したいときには、とくにおすすめです。

限られた色数でムードやキャラクターを演出するのはチャレンジングかもしれませんが、成功すればとても魅力的なモーションデザインが実現します。

トレンド7. 細い線の使用

上のモーショングラフィックスはExplain Ninjaによって制作されたもので、細い線によって方向を示したり、輪郭を描いたりしています。

このように動画に細い線を取り入れるのも、モーショングラフィックスのトレンドです。

その場で線を描いているかのようなアニメーションは、プロモーション動画や説明動画をユニークなテイストにしてくれます。

トレンド8. グレイン

無機質な印象になりがちなベクター画像にグレインを取り入れると、デザインに自然な風合いを与えられます。

アニメーションにグレインを取り入れて、ホームメイド感や高品質さ、クリエイティビティを演出し、頭ひとつ抜けだした作品を制作してみましょう。

トレンド9. グリッチ効果

AdweekとShutterstockのレポートによれば、ブランディング、マーケティング、パッケージング、モーションデザインの分野でグリッチ効果が積極的に活用されているとのこと。

古いテレビのような、ノイズが入った画面を彷彿させるグリッチ効果。以下のJebari Wootenのビデオは、モーショングラフィックスにおけるグリッチ効果の参考になるでしょう。レトロな印象で、かつ未来的でもあるグリッチ効果。

ぜひモーショングラフィックスにグリッチ効果を取り入れてみてください。

トレンド10. 2Dと3Dの組み合わせ

3Dテクノロジーの進化は、モーショングラフィックスに新しい可能性をもたらしてくれます。もちろんモーショングラフィックだけでなく、多くの産業分野で3Dが活躍すること間違いなしでしょう。

また2Dと3Dを組み合わせることで、より複雑なビジュアル効果も狙えます。GoogleクラウドナビゲーションAIのプレゼンテーション動画は、2Dと3Dを印象的に組み合わせて流れるようなモーションを実現させた良い事例です。

また2Dと3Dのアニメーションをミックスするだけでなく、2Dのオーバーレイを取り入れる方法もトレンドのひとつです。

2Dと3Dを融合するメリットとして、予算をあまり必要としない点が挙げられます。大規模なプロジェクトだけでなく、小規模なデジタル広告にも活用できるのが魅力です。

モーショングラフィックスの活用シーン

続いて、モーショングラフィックスの活用シーンをご紹介します。

活用シーン1. マイクロインタラクション

昨今では多くの会社が、UXにおけるマイクロインタラクションの重要性に気づき始めています。

マイクロインタラクションとは、ユーザーが重要な要素にきちんと注意を払えるよう、UXを向上するために作られた小さなアニメーションのことです。

Sangmi Kimの作品がモーショングラフィックスにマイクロインタラクションを導入したよい事例でしょう。

マイクロインタラクションとは？導入の際に気をつけるべき4ポイント

Workship MAGAZINE

活用シーン2. ブランドのロゴへの活用

ブランドのロゴや、グリーティングのタイポグラフィーを、モーショングラフィックスを用いて華やかにできます。

ロゴは企業の顔とも言えるので、アニメーションやデザインにこだわってみてください。

Google/YouTubeなど！企業やブランドのロゴで使われているフォント17選

Workship MAGAZINE

活用シーン3. 入力フォームへの活用

以下の画像のように、入力フォームにモーションをつけるのも面白いです。

入力という手間のかかる作業を、少しでも楽しんでもらうためにアニメーションを取り入れるのは、よいアイデアですね。

マイクロインタラクションの実例といえるでしょう。

【図解】エントリーフォームUI設計 5つのポイント。よくある失敗例も解説

Workship MAGAZINE

活用シーン4. 教材への活用

直感的なグラフィックスは、数学や理科などを教えるのに向いています。

上の例はBenesseがオンラインで提供している教育サービスのサンプル映像です。モーショングラフィックスを上手に取り入れていますね。

活用シーン5. プロジェクションマッピングへの活用

近年はプロジェクションマッピング制作にもモーショングラフィックスが取り入れられています。

上の例は東京ビッグサイトのプロジェクションマッピングの動画です。建物の立体感をうまく活かしてアニメーションをつけています。3D技術と融合したモーショングラフィックスをぜひご覧ください。

活用シーン6. 作品紹介への活用

モーショングラフィックデザイナーの野村律子氏の作品を1本にまとめた動画です。

細部にもふんだんにモーショングラフィックスが取り入れられており、モーショングラフィックデザイナーとしての腕前が一目でわかります。

モーショングラフィックスの活用企業事例

次に大企業が公開している人気のモーショングラフィックス作品をみていきましょう。

事例1. Apple

モーショングラフィックスのお手本のような作品です。慣性や重力などのアニメーション表現を使いながらApple製品の紹介を行なっています。

YouTubeにAppleのモーショングラフィックスの制作方法を解説している動画があるので、「モーショングラフィックスを制作してみたいけど、どのチュートリアルをやったらいいかわからない」という方は一度動画をみて見てください。

事例2. au

https://youtu.be/o-oQsDL23fE

モーションインフォグラフィックスが使われた、auの新料金システム『povo』のCMです。

インフォグラフィックスを、アニメーションなどの映像で表現することを「モーションインフォグラフィックス」と呼びます。

モーションインフォグラフィックスは、数字やグラフを効果的に伝えられるため、プレゼンのときなどに利用するのがおすすめです。

事例3. Galaxy

Galaxyが新生活応援キャンペーンのために制作したモーショングラフィックス使用のCMです。

シンプルでありながら、キャンペーンの詳細が十分に伝わる、モーショングラフィックスの特徴をうまく活かした映像になっています。

事例4. ユニクロ

洗練されたおしゃれなモーショングラフィックスです。

ポップな色使いと洗練されたアイコンを併用することで、ユニクロのデザイン性を演出しています。かっこいいモーショングラフィックスを制作したい方は参考にしてみてください。

事例5. subway

モーショングラフィックスが使われているsubwayのCM動画です。

エビの丸みとアニメーションの動きがマッチしていて、ポップな音楽に合わせて弾けるようなモーションを取り入れているのがいいですね。

事例6. 新幹線YEAR2022

https://youtu.be/vPGScZGHsfM

JR東日本の新幹線キャンペーンPR動画。

シーンが途切れることなく流動的に進むモーションは、Webデザインのメインビジュアルとして取り入れる例が増えてきているため要チェックです。

事例7. HOT PEPPER Beauty

https://youtu.be/_B823plKUnI

HOT PEPPER BeautyのCMは、実写映像とモーショングラフィックスを組み合わせたパターンです。

同じパターンのモーショングラフィックスの例として、Google PixelやLOOKも参考になります。

事例8. STARBUCKS

モーショングラフィックスによって情報を分かりやすく伝えている動画です。スターバックスが提供するSTARBUCKS REWARDSの魅力を効果的に伝えています。モーショングラフィックスは視覚的な理解が魅力でもあるので、言語が異なっても映像を理解できます。

モーショングラフィックス流行による今後の動き

最後に、モーショングラフィックスが流行することで予想（またはすでに実行）されている動きを見ていきましょう。

Apple製品にみる、彩度とモーショングラフィックスの重要性

Apple Watchのユーザーインターフェースには、彩度70%以上、明度90%以上の鮮明なカラーを使用したデザインが採用されています。

至る所に細かなモーションが施されているのも特徴。

近年の鮮やかなパステルカラーの注目もあり、モーショングラフィックスを含むビジュアルデザインの彩度は今度ますます高まっていくと予想されます。

ビジュアルデザイン関連企業がUXデザイン業界へ進出

ビジュアルデザインを手がける企業や、視覚効果のプロ、3Ⅾアーティストたちが、UXデザイン業界に進出していきます。「モーショングラフィックスがUXに好影響を及ぼす」という認識が広まってきたためです。

Webデザインにとどまらず、以下のような映画ムービーの作成にまで、仕事の範疇は広まっていきます。

モーショングラフィックス市場は、さまざまな技能をもつプロフェッショナルたちの手によって、さらなる成長を遂げていくことでしょう。

まとめ

Webサイトやデザインなど、さまざまな場面で重要な役割を果たすモーショングラフィックス。写真や文字にエフェクトを加えることによって、作品のクオリティがグッと上がるでしょう。

トレンドに目を配りつつ、自身のプロジェクトに合わせた最適なクリエイティブを模索してみてください。

（執筆：Shinya Morimoto、Mariko Sugita、Nakajima Asuka　編集：Workship MAGAZINE編集部）

いま勢いのある世界的なモーショングラフィックススタジオ25選

Workship MAGAZINE

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

Workship MAGAZINE