これからのWebをつくる10のコア技術
TECHNOLOGY ANALYSIS 2025-2026 Web×AI融合これからのWebをつくる10のコア技術 ...
Z. Xingjie
2026年06月09日
みなさん、お疲れ様です!
デザインチームのタンです。
弊社では、SNS運用のご相談をいただくことも多いですが、その中でも、静止した画像やグラフィックを掲載するだけではなく、アニメーションなどを活用するケースが増えてきています。動画や動きのあるアニメーションを活用することで、ユーザーにストーリーが伝わりやすくなり、共感を得て、インプレッションやコンバージョンの向上が見込まれます。
そこで今回のブログでは、Motion Graphics(モーショングラフィックス)の制作について紹介させていただきます。

まずMotion Graphics(モーショングラフィックス)とは、グラフィックの要素に動きを与えるアニメーションのこと、またはアニメーションの小さなバージョンのことを意味します。通常、モーショングラフィックスを作成する際には、コンテンツの内容に合わせて制作します。
コンテンツの内容に合わせたグラフィックアニメーションは、Webサイトの読み込み画面やロゴデザインなどによく使用されます。さらには、短いストーリーを伝える動画としても利用されます。
モーショングラフィックスは、古くは、映画やテレビ番組のオープニングやクレジットなどが有名な例として挙げられます。その目的は、テキストをより興味深い方法でアニメーション化することです。
現在、多くの企業がモーショングラフィックスをオンラインメディアとして活用しています。その理由としては、通常のグラフィックと比較して、ブランドのストーリーや商品の情報などをより良く伝えることができるため、ブランディングの重要な要素となるからだと考えられます。

モーショングラフィックスの作成手順を説明する前に、モーショングラフィックスを作成するために私がおすすめするソフトウェアを紹介します。それはAdobe After Effects(AE)です。Adobe社によって開発されており、モーショングラフィックスやアニメーションを作成するためのソフトウェアです。
After Effectsを使用すると、ゼロからアニメーションを作成したり、素材を重ねて複雑な動きを付けたり、映像に特殊効果を加えることができます。After Effectsでイラストやグラフィックをゼロから作成することが難しい場合は、Adobe Illustrator(AI)を使用して、まずグラフィックを作成し、Illustratorから直接After Effectsにファイルをインポートすることができます。これは非常に便利ですね!
それでは、作成手順を説明していきます。

① Direction Concept(方向性のコンセプト)
このステップでは、まずクライアントのニーズを理解することが重要です。クライアントが販売したい製品やサービスの本質を把握し、ストーリーの方向性を確立します。
② Mood board(ムードボード)
このステップでは、クライアントや社内の関係者がデザインの方向性に共通の認識を持つため、作品のスタイルなどを決定します。通常、ムードボードには色合いやキャラクター、フォントスタイルなどが提示され、クライアントが作品のスタイルを想像できるようになります。
③Script(台本)
デザインの方向性が決定すると、次にスクリプトを作成します。以下の3 つの主要な段階に分けて作成していきます。
3.1 Introduction(導入部) : 視聴者の興味を引くため、ストーリー全体の概要を簡潔に伝えます。
3.2 Main Idea(メインアイデア) : ストーリーの中心となるアイデアです。
3.3 Ending(エンディング) : ストーリー全体の要約を短いキーワードで作成し、視聴者に内容がしっかりと伝わるようにします。
④ Storyboard(ストーリーボード)
Storyboardは、ストーリーを伝えるために台本とシンプルなスケッチを組み合わせます。将来の修正が容易になるように、Storyboardには細かな説明が含まれます。例えば、どのようなアニメーションがこのシーンで起こるかや、どのような要素がシーンに含まれるかなどが挙げられます。
⑤ Animate(動きを作成)
このステップでは、Illustratorで作成したシーンやグラフィックなどをレイヤーに分割し、After Effectsでアニメーションを行います。もしアニメーションに音声が含まれる場合は、アニメーションを開始する前に音声ガイドを入れておくことが良いでしょう。
⑥ Mix sound(音楽や音声の挿入)
このステップはAnimateが終了した後に行います。もしビデオにBGMや音声が含まれる場合は、このステップで挿入します。
モーショングラフィックスは、動くグラフィックを通じて情報やストーリーを伝えます。静止したグラフィックと比較して、より面白く魅力的なストーリーを伝えることができます。動くグラフィックは視聴者の興味を引きつけ、情報をより深く理解させることができます。

TECHNOLOGY ANALYSIS 2025-2026 Web×AI融合これからのWebをつくる10のコア技術 ...
Z. Xingjie
2026年06月09日
Trend Analysis 2026 AIショートドラマ広告の現在地 —— ...
Z. Xingjie
2026年05月11日
Have you ever tried to push code to your personal GitHub repository, only to be met with a frustrating error like this? ERROR: Permission to person...
Iftekhar Eather
2026年04月08日