こんにちは。FASTCODINGデザイナーの七転び八重子です。
近年、YoutubeのOPや、企業ロゴ、Webサイトのキービジュアルなどモーショングラフィックスを利用する事が増えました。
今回は、モーショングラフィックスのメリットや2021年のトレンド、事例をご紹介しようと思います。
目次
モーショングラフィックスとは？
モーショングラフィックスとは、グラフィックデザインに動きを加えたもので、ロゴやテキスト、イラストが動くことで静止画では伝えきれないイメージや情報を伝えることができます。近年は特に注目され、商品やサービス、企業イメージを伝えるためにモーショングラフィックスを動画広告に利用する企業が増えています。
モーショングラフィックスのメリット
正確に情報を伝える事ができる
百聞は一見に如かずということわざ通り、文字を通して得る情報に以上に、視覚から人が受ける情報の割合は大きく、全体の8割を超えると言われています。異国の言語が分からなくてもジェスチャーで通じ合えるように、モーショングラフィックスを利用する事で、言葉の壁を越えてイメージを共有する事ができます。
ブランドイメージをより強く印象づける
近年、ユーチューブでの宣伝や、商品の紹介動画を利用する企業が増えたので、OPに動きのあるタイポグラフィーを取り入れた動画が増えました。
特にアニメーションロゴは、ブランドイメージに直結する顔なので、動きや音を取り入れる事でよりユーザーに印象付ける事ができます。
UXの向上！ユーザーに飽きさせない工夫ができる
WebサイトのCTAのクリックや、お問い合わせなどの入力フォームに動きを加えるなどUXにおけるマイクロインタラクション（※）が見直されています。
「ボタンをクリックした時に、そのアクションが正しく実行されたことを表示する」、「新しい通知が届いた事を、ユーザーに伝える」、「アプリのインストールのステータスを表示する」など、細かな部分のデザインや、アクションに対するフィードバックを視覚的に取り入れる事で、スムーズで飽きさせないUXを提供する事が可能になります。
マイクロインタラクションとは？
アプリやWebサービスを利用するときのユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのことです。
モーショングラフィックスの2021年トレンド
アニメーションロゴ
これまで、静的なタイポグラフィとアイコンだったロゴに、予期しない動きやひねりなどの動きを取り入れる事で、ブランドをより魅力的でダイナミックに表現できるようになりました。アニメーションロゴは、すでにブランドアイデンティティデザインの最も重要なトレンドの1つになっています。
ロゴマークのキャラクターにアニメーションを取り入れた例。
Animation by Ashot S.
モーフィング
モーフィングは、１つの画像や形状を別の画像または形状に変形するアニメーションの効果です。アニメーションロゴで良くみられます。
Animation by Ashot S.
グレイン効果
グレインは、画像にテクスチャの効果を追加したものです。洗練された雰囲気、ソフトでナチュラルな印象を与える事ができます。
Animation by Gregory Darroll
細いライン
細いラインで書かれたイラストをラインにそってアニメーションさせます。つい目で追って、最後までアニメーションを見てしまいますね。
Animation by Mark Rise
2D・3Dのハイブリッド技術
2Dと3Dを合わせたアニメーションです。あえて、テイストの違うイラストを織り交ぜる事で、アニメーションにコントラストができます。
Animation by Ashot S.
モーショングラフィックスの企業活用事例
SmartHR
Nintendo Switch Logo
See the Pen
Nintendo Switch Logo Animation by Koto Furumiya (@kotofurumiya)
on CodePen.
Animation by Ashot S.
Intel
Animation by Hamza Ouaziz
Fedex
Animation by Mate Miminoshvili
まとめ
モーショングラフィックスをWebサイトに取り入れると、もちろんUXが向上するものもありますが、データ量が大きいとページスピードに影響があるので、そのあたりのさじ加減が大切になってきます。
ファーストコーディングでは、コーディングはもちろん、アニメーション制作もお受けしています。お困りの際はお気軽にご相談くださいませ。
