AI時代のWebサイト生存戦略(六):Webに生成AIを導入
AI時代のWebサイト生存戦略シリーズの第6弾。市場で注目される3つの主要アプローチを詳しく解説し、Web制作企業が高度なカスタマイズ要求に応える直接API導入の可能性についてご紹介します。
Z. Xingjie
2025年10月08日
みなさん、お疲れ様です!
デザインチームのタンです。
弊社では、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や音声が含まれる場合は、このステップで挿入します。
モーショングラフィックスは、動くグラフィックを通じて情報やストーリーを伝えます。静止したグラフィックと比較して、より面白く魅力的なストーリーを伝えることができます。動くグラフィックは視聴者の興味を引きつけ、情報をより深く理解させることができます。

AI時代のWebサイト生存戦略シリーズの第6弾。市場で注目される3つの主要アプローチを詳しく解説し、Web制作企業が高度なカスタマイズ要求に応える直接API導入の可能性についてご紹介します。
Z. Xingjie
2025年10月08日
海外向けのプロモーション動画は、文化や言語の違いを乗り越える必要があるため、ターゲット市場に合わせた戦略的な企画が求められます。 本記事では、海外向けプロモーション動画を作成する際に重要な「企画」の役割に焦点を当て、その成功を引き出すための主要なポイントを解説していきます。
K. Wozniak
2025年06月27日
ユーザーエクスペリエンスの本質的変化 AI検索普及による新しい生態系とその影響 ...
Z. Xingjie
2025年05月09日