動画にモーショングラフィックスを追加する方法

多くのプロダクト動画は、動きを増やす必要はありません。必要なのは、視聴者の視線を適切なタイミングで適切な場所に誘導することです。動画にモーショングラフィックスを追加する場合、それぞれのグラフィックは「どこを見るべきかを示す」か「何の意味があるかを伝える」という2つの役割のいずれかを果たすべきです。それ以外の装飾は、画面収録においては解説対象のUIと競合してしまいます。

以下に、効果的な8つのグラフィック、それぞれのタイミングのルール、60秒のウォークスルー動画のビフォーアフターのショットリスト、そして3つの作成手法を紹介します。

すべてのグラフィックがクリアすべきテスト#

グラフィックがある場合とない場合でクリップを再生してみてください。グラフィックがあることで、視聴者はボタンや数字をより早く見つけられていますか？もし正直な答えが「見た目が良くなるから」であれば、削除しましょう。以下の2つのチェックで、ほとんどの不要な要素を取り除けます。

• アニメーションは一度に1つだけ。 登場タイミングを少なくとも0.5秒ずらさないと、視聴者はどれも認識できません。
• ナレーションに合わせてグラフィックを表示する。 ナレーションで「エクスポートをクリック」と言っているのにハイライトが2秒後に表示されると、視聴者はすでに迷子になっています。言葉を発した瞬間、あるいは数フレーム前に表示させましょう。

画面収録で役立つ8つのグラフィック#

コールアウト#

コールアウトは「請求設定」や「請求書を送信しました」のように、コントロールの名前や結果を明示するものです。6単語以内に収めましょう。BBCの字幕ガイドラインでは、1単語あたり最低約0.3秒の表示を推奨しています。画面収録では視聴者がインターフェースをスキャンしながら見るため、その倍の時間を確保してください。4単語のコールアウトなら1.2秒ではなく、約2.5秒必要です。

ズーム＋ハイライト#

画面収録で最も便利ですが、最も多用されがちなグラフィックです。クリックの0.5秒前にズームし、結果が表示されるまで保持し、その後ズームアウトして全体像を見せます。ハイライト（ソフトボックスや周囲を暗くする処理）は、フレームを動かさずに同じ役割を果たせるため、ズームすると文脈が見えなくなるような高密度なダッシュボードに適しています。1つの操作につき、どちらか一方を使用しましょう。

ステップカウンター#

画面の隅に固定された「ステップ3/5」は、残りの工程を視聴者に伝えます。位置とスタイルは固定し、数字だけを変更します。3ステップ未満の場合は不要です。

ロワーサード#

プロダクト動画では、カメラ枠内のプレゼンターの名前を表示したり、セクション（「管理者ビュー」など）にラベルを付けたりするために使用します。配置には注意してください。多くのWebアプリでは、下部に保存バーやチャットウィジェットが表示されます。

タイトルカード#

各ステップではなく、章の区切りに使用します。60秒の動画なら冒頭に1つで十分です。読み込み時間が必要なタイトルカードは、グラフィックのふりをした段落に過ぎません。

アニメーション矢印#

「このトグルでプレビューが変わる」といった画面上の2つの関連性を示す場合、ズームよりも矢印が有効です。約0.3秒で描画し、その後静止させます。バウンドする矢印は、動いている間ずっと注意を引いてしまいます。

データカウンター#

デモやローンチ動画で「1,240枚のチケット」のように数値を強調する際に有効です。ハウツー動画にはほとんど不要です。素早くカウントアップして最終値で止めるようにしないと、動きばかりが記憶に残ってしまいます。

トランジション#

1動画につき1スタイルとし、シーンやトピックが変わる時のみ使用します。同じ画面内の2つのステップ間は、カット編集が最適です。フラッシュエフェクトは避けましょう。WCAGの3回以下のフラッシュという基準があるのは、点滅するコンテンツが発作や偏頭痛を引き起こす可能性があるためです。

アニメーションオーバーレイの一貫性を保つルール#

アニメーションオーバーレイは、システムとして統一感がある時にプロフェッショナルに見えます。

1. モーションスタイルを統一する。 すべてのコールアウトで、イージング、登場方向、持続時間を同じにします。ステップ1で左からスライドインするなら、ステップ5でも左からスライドインさせます。2. ブランドテンプレートを作成する。 フォント、色、ロゴ表示、タイトルカードのレイアウトは動画ごとに作り直すのではなく、保存されたテンプレートを使用します。以下のツールはすべて、何らかの形でこれをサポートしています。3. セーフエリアを守る。 テキストはフレームの端や、解説しているUIコントロールから離してください。テンプレートにセーフエリアをマークしておきましょう。4. スクリプトにグラフィックを合わせる。 まずナレーションを書き、各グラフィックを表示する単語をマークします。言葉がなければ、グラフィックも不要です。

ビフォーアフター：60秒のウォークスルーショットリスト#

一般的なSaaS請求アプリでの「最初の請求書を送る」という60秒のウォークスルー動画の例です。「ビフォー」はナレーション付きの未編集録画です。

これで60秒間に16のグラフィックイベントが発生します。登場タイミングをずらし、それぞれがスクリプトの単語に紐付いているため、効果的に機能します。ぼかしはプライバシー保護のためであり、実際の顧客データを使用する場合は決して省略してはいけないグラフィックです。

動画にモーショングラフィックスを追加する3つの方法#

1. 従来の編集ソフト：Premiere、After Effects、DaVinci Resolve#

Adobe PremiereとAfter Effects。 モーショングラフィックス・テンプレート（.mogrtファイル）はAfter Effectsで作成し、Premiereで再利用します。Adobeのヘルプページにあるように、グラフィックステンプレートパネルからテンプレートをビデオトラックにドラッグし、プロパティパネルの編集タブで調整します。データ駆動型テンプレートを使用すれば、スプレッドシートデータから棒グラフや折れ線グラフを自動生成でき、正確なデータカウンターやグラフを作成する最もクリーンな方法となります。

DaVinci Resolve。 FusionページはResolve内のノードベースのコンポジターで、200以上のツールを備えています。Fusionでロワーサード、アニメーション背景、トランジションを作成し、マクロとして保存すれば、編集者が触るべきコントロールだけを表示させることが可能です。これらは編集ページのライブラリに表示され、どのプロジェクトでも使用できます。Resolveは無料でダウンロードでき、Resolve Studioは295ドルで提供されています。

適した用途： テンプレートを一度作成するモーショングラフィックスデザイナーと、それを再利用する編集者がいるチーム。トレードオフ： 画面収録のズームや吹き出しは、その都度手動でキーフレームを打つ必要があります。

2. テンプレートベースの編集ソフト：CanvaまたはCapCut#

Canvaでは、ページ、要素、テキストのアニメーションを「アニメーション」ボタンから設定でき、「低速」「中速」「高速」のプリセットや、イントロ・アウトロの正確な時間を指定できます。「要素のタイミングを表示」で各要素の出現時間を設定し、「アニメーションを作成」で要素をモーションパスに沿ってドラッグすることも可能です。ブランドキットにロゴ、色、フォントを保存しておけば、テンプレートのブランド統一も維持できます。

CapCutにはテキストテンプレートとテキストアニメーションのライブラリがあり、デスクトップ版では位置、サイズ、回転、不透明度のキーフレームを設定できます。これを使って手動でズームやスライドする吹き出しを作成します。

適した用途： これらのツールを使い慣れており、短いクリップにアニメーションテキストを載せたいマーケター。トレードオフ： どちらも画面収録に特化していないため、クリックに追従するズーム、カーソルのクリーンアップ、プライバシーのためのぼかしなどは手作業になります。

3. Clevera：タイムライン上のオーバーレイ、または言葉による指示#

Cleveraは録画からスタートします。AIナレーション付きハウツー動画や製品デモにおいて、カーソルの動きを滑らかにし、重要な操作をハイライトし、スマートズームを適用しながらナレーションの作成と同期を行います。上記のショットリストにあるズームやハイライト作業のほとんどは、エディターを開く前に完了しています。

タイムラインエディターでは、テキスト、画像、ぼかし、ハイライトのオーバーレイ、タイトルカード、イントロカード、ロゴ演出、ズーム、そしてズームクロス、階段状、ブラインド、ディゾルブ、ソフトワイプ、スライドといったトランジションを追加・調整できます。タイトルカード、ロゴ演出、動画スタイルはプリセットやカスタムテンプレートとして保存できるため、2本目以降の動画も統一感のある仕上がりになります。ズーム、オーバーレイ、タイトルカードのみで構成された動画であれば、スタイル適用済み（共有可能）オプションはAIクレジットを消費しないため、Freeプランを含めすべてのプランで無制限に利用可能です（Freeプランではリンク共有または埋め込みが可能。MP4ダウンロードはStarterおよびProプランで利用できます）。

リストにないグラフィックスが必要な場合は、AIモーショングラフィックスジェネレーターの「Describe what you want」を使用してください。「0:45で0から1,240までのアニメーションカウンターを追加し、期限フィールドから利用規約プレビューへ矢印を引く」といった自由形式の指示を書けば、Cleveraが既存の動画の上にアニメーション化されたグラフィックスを構築します。エディターのオーバーレイリストには専用の矢印やカウンターがないため、これらを作成する際に最適です。

公開済みのClevera動画に対してテキスト、ハイライト、ぼかしを編集すると、すべてのホストされたリンクと埋め込みに反映されるため、ボタンのラベル変更なども一度の修正で済みます。ただし、UI自体が変更された場合は新しい録画が必要です。

適した用途： 編集者なしで毎週ウォークスルー動画を作成する製品、サポート、マーケティングチーム。トレードオフ： AIレコーダーは公開されているhttpsのウェブサイトやウェブアプリのみをキャプチャするため、デスクトップソフトウェアやイントラネットの映像はデスクトップアプリまたはアップロード経由で取り込む必要があります。Cleveraが適さない作業については次のセクションを参照してください。

Cleveraが自動で行ったこと、行わなかったこと#

2026年10月、CleveraのAIレコーダーを使用してデモ用To-Doアプリの短いタスクをキャプチャしました（0:58の未編集映像）。これをハウツー動画に変換したところ、約50秒、9クレジットの消費で、タイムラインにはイントロカード、ロゴ演出、1.5倍および1.8倍の自動ズームが適用され、0:40に短縮されました。これでショットリストのタイトルカードとズームの項目は完了です。吹き出し、ステップカウンター、矢印は含まれていないため、これらは手動で追加する必要があります。

次に、同じ録画に対して組み込みの「デフォルト」ではなくチームテンプレートを使用して「共有用にスタイルを適用」を実行しました。所要時間は約25秒、クレジット消費は0でした。出力時間は1:07で、イントロカードの分だけソースより長くなりました。1.8倍の自動ズームが2箇所適用され、エディターは背景、パディング、角丸、カーソルを設定するスタイルパネルが開いた状態でした。録画されたページ自体が色あせて低コントラストに見えましたが、スタイルパネルは映像を枠で囲むものであり、画質を修正するものではありません。

同じ録画の「共有用にスタイルを適用」バージョン（1:07、未編集、0クレジット）。

指示による作成では、カスタム指示を使用して1:00の[アニメーションインフォグラフィック](/blog/animated-infographic-with-ai)を約7〜8分で作成し、86クレジットを消費しました。数値は正確でしたが、指示に書いた15秒という長さ（長さはフォーマットメニューで設定）は無視され、ソースの行がスマホ用としては小さすぎました。そのクリップはゼロから構築されたものです。既存の録画にグラフィックスを重ねるテストはまだ行っていません。

指示から生成されたCleveraのアニメーションインフォグラフィック（1:00、未編集）。

モーショングラフィックスデザイナーに依頼すべき場合#

AIエディターとテンプレートは、本ガイドで紹介したグラフィックスをカバーしますが、以下のようなケースではモーショングラフィックスデザイナーの代わりにはなりません：

• ローンチ用ヒーロー動画やブランドフィルム：すべてのフレームがアートディレクションされ、動きそのものがメッセージとなるもの。
• 動く映像上のトラッキンググラフィックス：手持ち撮影のスマホに追従するラベルなど。
• 3D、キャラクターアニメーション、カスタムイラスト：動きを伴うもの。
• テンプレートシステム：デザイナーがAfter EffectsやFusionでロワーサード、タイトルカード、ロゴ演出を構築する1週間の作業は、その後チームが作成するすべての動画において、テンプレート対応ツールであれば何でも活用でき、大きな投資対効果を生みます。

一般的な使い分けは、システム構築や重要なローンチにはデザイナーを、毎週のウォークスルー動画にはAIツールやテンプレートエディターを活用することです。

まずはズームから#

次の画面録画に何かひとつ加えるなら、クリックの0.5秒前に止まるズームを入れましょう。製品動画で最もよく聞かれる「どこをクリックしたのかわからなかった」という不満を解消でき、このガイドで紹介するほかのグラフィックもすべて、ナレーションが示す場所に視線を誘導するこの習慣を土台にしています。