- 動画編集
- 2021/11/03
モーショングラフィックスとは?作成のコツやおすすめのソフト・サイトを初心者向けに紹介!
テレビCMやWebサイトの動画広告、案内板などに使われている表現方法「モーショングラフィックス」。 この記事では、作成の手順や、おすすめの作成ソフト、素材やテンプレートサイトについて、初心者向けに紹介していますので、ぜひご活用ください。
モーショングラフィックスとは?
テレビ番組のオープニング映像から、店頭や街角に流れるデジタルサイネージの動画、またはSNSやウェブサイトに使われている動きのある広告など、モーショングラフィックスはさまざまな場面で活用されています。
「モーション」とは動きのことで、「グラフィックス」は画像やテキストを使った視覚表現を意味します。その二つの単語を組み合わせた「モーショングラフィックス」とは、動きを加えたイラストや、実写やテキストを組み合わせた映像のことを指します。
パソコンなどを使い、デジタルで制作・加工・編集されるものが主流です。しかし、古くはパラパラ漫画や、ストップモーションのコマ撮り映像なども、「動く画像」という意味では、モーショングラフィックスの一種といえます。
モーショングラフィックスでは、伝えたいメッセージによって、イラストやデザインを考え、文字と組み合わせ、エフェクトや動きなどの演出を加えて動画を作成していきます。
モーショングラフィックスのメリット
モーショングラフィックスを活用するメリットは、まずメッセージが伝わりやすいことです。イラストや写真に動きを加えることで、より注目を集めやすく、さらに視聴者の記憶に残りやすくなります。色づかいや構図などを工夫することで、さらに目にとまりやすく、インパクトのある動画をつくることができます。
インターネット上で提供されている素材や、テンプレートなどを活用すると、比較的安価に作成することができるというのもモーショングラフィックスのメリットです。
モーショングラフィックスの活用例
テレビの世界では以前より、番組オープニングのタイトルや、CMなどにモーショングラフィックスが活用されていました。近年では、インターネット回線の高速化や、デバイスの多様化とともにWebサイトやSNSなどに表示される広告にもモーショングラフィックスが活用され、動きのあるものが増えてきました。
ほかにも、飛行機の機内映像や、タクシーや電車内のディスプレイの映像、街頭のデジタルサイネージを活用した動画広告など、モーショングラフィックスの活用例は広がっています。
東京 2020オリンピックでは、スポーツ競技を表すピクトグラムに動きをつけ、「動くスポーツピクトグラム」がつくられました。これも、モーショングラフィックスが効果的に活用された事例です。
モーショングラフィックスの作り方をご紹介
効果的なモーショングラフィックスを作成するには、いくつかのポイントをおさえる必要があります。さまざまな作り方と表現方法がありますが、ここでは主な手順とポイントをご説明します。
1.目的・ねらいを定める
まずは、モーショングラフィックスを作るには、その目的とねらいを定めることが大切です。その動画を視聴する方々に、何を伝えたいか。そして、どのようなアクションを起こしてもらいたいかを明確にしましょう。
2.ストーリー・構成を決める
伝えたいメッセージが決まったら、ストーリーと構成をまとめましょう。全体の構成案を脚本化し、絵コンテを作成するとよりイメージ化しやすくなります。
3.デザインを決める
具体的なデザインを作っていきます。ポイントとしては、全体の色味や世界観を統一すること。きちんとデザインのテーマを決めて、それにあったイラストや表現、エフェクトなどを選びましょう。
4.素材・テンプレートを用意する
必要に応じて、素材やテンプレートを用意します。画像編集のソフトを使って自作したり、あるいはプロの方に撮影を依頼したりするのも効果的です。フリー素材やテンプレートなどを提供しているWebサイトもありますので、上手に活用すると効率的にモーショングラフィックスを作成することが可能です。
5.ソフト(アプリ)を使用して編集する
モーショングラフィックスを編集するには、パソコン向けの専用ソフトや、スマートフォン向けのアプリなどを活用します。用意した素材やテンプレートを使って、動画をつなぎあわせて加工していきます。
同時に、音楽や効果音、ナレーションなども組み合わせていきます。全体の動きと、動画の長さなどを確認しながら、仕上げていきます。画質や動画形式を設定して、動画ファイルを作成したら完成です。
モーショングラフィックス作成のコツ
さらに効果的なモーショングラフィックスを作成するために、学ぶべき知識や身につけておくとよいスキルがあります。
ご自身で動画を編集する場合は、ソフトやアプリの使い方を習熟することが必要です。編集を外注する場合でも、効果的なアニメーションの動かし方や、エフェクトの種類などを知っておくと、指示を出しやすくなります。また、メッセージやストーリーを伝えるために、派手すぎる動きは避けるべきです。
モーショングラフィックスを作成するためには、デザインや視覚芸術に関する素養も必要です。効果的な色の組み合わせや、視覚的な要素が人に与える影響などを理解しましょう。シンプルで見やすいデザインにするために、テーマに沿った世界観や色づかいを心掛けることも重要です。
コピーライティングや、フォントに関する知識も重要です。簡潔で伝わりやすいコピーを考え、さらにそれを適切なフォントで表現します。動画の長さやタイミングに合わせて、細かい調整を行っていきます。
最後に、効果的なモーショングラフィックスを作成するために重要なのは、クリエイティブな発想と構成力です。目的やねらいを明確にし、それを達成するためにどのようなメッセージやストーリーを伝えるか。それを実現するためには、創造性豊かなアイデアと、それを形にする構成の力が必要です。
これらのスキルや知識を身につけ、伸ばしながら、より良いモーショングラフィックスを目指しましょう。
モーショングラフィックスを作れるソフトは?
ここからは、モーショングラフィックス制作におすすめのソフトやアプリをご紹介します。
AviUtl(エーブイアイユーテル)
AviUtlは、「KENくん」が個人で開発している動画編集ソフトです。AVIファイルにフィルタをかけたり、各種コーデックで圧縮したりすることができます。初版は1997年に公開され、それ以降アップデートを重ねながら現在も無料で使えるフリーウェアとして多くのユーザーに愛用されています。AviUtlは、Windowsのパソコンに対応しています。
After Effects(アフターエフェクツ)
モーショングラフィックス制作の代表的なツールと言えるのが、Adobe(アドビ)社が販売している有料のソフトAfter Effectsです。2Dの映像だけでなく、奥行きのある3Dのモデリングデータも取り込むことができます。映画やテレビ番組、CM、ゲーム、アニメなど、さまざまな映像コンテンツ制作に活用されています。After Effects は、macOSとWindowsの両方に対応しており、月額料金で利用することができます。
Alight Motion(アライトモーション)
Alight Motionは、Alight Creative(アライトクリエイティブ)が開発する、スマートフォンやタブレットでモーショングラフィックスが作れるアプリです。豊富なエフェクトや、キーフレームアニメーション、タイミングカーブを使った自然な動きなど、映像加工に必要なさまざまな機能があります。基本的に無料で使えますが、有料のメンバーシップオプションに登録すると、透かしを削除して、プレミアム エフェクトと機能のライブラリーにアクセスできるようになります。Alight Motionは、iOSとAndroidに対応しています。
モーショングラフィックス作成に使えるフリー素材・テンプレートサイト4選!
ここでは、初心者の方にもおすすめの、フリー素材やテンプレートをダウンロードできるサイトをご紹介します。
Adobe Stock(アドビストック)
Adobe Premiere Pro(アドビプレミアプロ)や、After Effects(アフターエフェクツ)を販売するAdobe(アドビ)社では、画像や映像の素材を提供するAdobe Stockというサービスを運営しています。モーショングラフィックスのテンプレートなどもここで探すことができます。利用する素材の数によっていくつかの有料プランがあるほか、無料で使える素材もありますが、利用には、Adobe IDが必要です。
Pixabay(ピクサベイ)
写真やイラストに加えて、数千点以上のフリー動画素材を提供するPixabay。このサイトに登録されている画像や映像は著作権フリーとなっており、商用利用も含めて自由に利用することができます。無料の会員登録をすると、フルサイズの素材をダウンロードできます。
NHKクリエイティブ・ライブラリー
NHKクリエイティブ・ライブラリーは、NHKアーカイブスの番組や番組素材から切り出した映像や音声を利用者個人の創作用素材として利用ができる、無料のサービスです。素材は個人的な創作に使用することができますが、この素材を使って制作した作品を販売したり、または素材自体を有料で公開したりすることはできません。利用にあたっては、著作者名の表示が必要です。
ニコニ・コモンズ
ニコニ・コモンズは、ニコニコ動画の関連サービスのひとつで、クリエイターの創作活動を支援する目的でつくられました。作品ライブラリーに登録されている画像、音声、動画を使って自分の作品をつくることができます。ただし、作品によって利用許可範囲や営利利用についての規定が異なりますので、きちんと理解した上で使いましょう。
モーショングラフィックスについて、そのメリットや活用例、作り方などをご紹介しました。テレビやWeb、交通広告やデジタルサイネージなどにも活用されているモーショングラフィックス。制作環境を整え、フリー素材なども活用しながら、ぜひ作ってみてください。
WEBデザイン学習者が学ぶべきスキルセット
Webデザイナーを目指すなら
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザインに挑戦したい人が一気通貫して学べる総合学習コースです。
イラレの基本~実践的なテクニックを学ぶ
【初級〜中級】Illustrator(イラストレーター)でグラフィックデザインをしよう!!ロゴ・印刷物・WEB用素材
グラフィックデザイン・印刷の基礎知識を手に入れて、仕事に役立ててみませんか?
最新のAdobe XDを最短でマスター
【2020年最新版】Adobe XD 手を動かして覚えるUI/UXプロトタイピング。初級から高度テクニックまで全てを学ぶ
実践的な作品制作をしながら、機能の完全理解と応用力を育てることに重点を置いたXDマスター講座!
動画編集をマスターしよう!
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
動画制作をはじめたい方へ、短期間で仕事で応用できるほどのスキルアップ技をお届け。
関連記事

Adobe Premiere Pro CCの使い方を初心者向けにわかりやすく解説!
Adobe Premiere Proは、動画データの加工や編集などの本格的な…

【初心者向け】Adobe XD基本の使い方を紹介!UI/UXデザインを簡単に
Adobe XDは、WebサイトやモバイルアプリのUI/UXデザインができ…

カラーグレーディング(カラグレ)のやり方を解説!カラコレとの違いや編集ソフト別の…
カラーグレーディングは、画像や映像に色彩の補正を加えること…

YouTubeに投稿する動画の編集方法は?方法やおすすめソフトを解説
近年、動画コンテンツの人気が高まり、老若男女問わずYouTubeな…
最新情報・キャンペーン情報発信中