動画生成AIにアプリの使い方動画を作らせてみた。実際に5サービスを比べて分かったこと

アプリの画面録画とスクリーンショットをまとめて渡せば、ナレーションやテロップまで付いた操作説明動画がそのまま出てくる。

最初は、かなり本気でそう思っていた。

そこで、HeyGen、Runway、Kling、CapCut、ChatGPTの5サービスを使い、Webアプリの操作説明動画を作ってみた。

実際に試すと、説明動画らしいものは作れる。

ただし、そのまま公開できるところまでは届かなかった。

難しかったのは映像のきれいさではない。

元の画面を変えずに、カーソル、ナレーション、テロップのタイミングだけを正しく合わせることだった。

今回作ろうとしたもの

作りたかったのは、Webアプリの基本操作を紹介する短い動画だ。

プロモーション動画のような派手さは必要ない。

初めてアプリを触る人が動画を見ながら、同じ操作を再現できればよい。

素材として用意したのは、次の3つ。お題はGoogleMap。

• アプリの主要画面を撮影したスクリーンショット
• 実際の操作を収録した画面録画
• アプリの概要と説明したい操作をまとめたプロンプト

完成動画には、ナレーション、カーソル、クリック位置の強調、補足テロップを入れることにした。

書き出してみると簡単そうだが、これらを同時に制御するのが思った以上に難しい。

実際に使ったプロンプト

最初はアプリの機能を細かく書いた長いプロンプトを使っていた。

しかし、特定のアプリに寄せすぎると使い回しにくく、指示が増えるほど動画生成サービス側が無視する項目も増えた。

最終的には、アプリ固有の説明と、動画全体の制約を分ける形にした。

# アプリ操作説明動画の制作依頼

添付した画面録画とスクリーンショットを使用して、
Webアプリの基本操作を説明する動画を制作してください。

## 動画の目的

初めてアプリを利用する人が、
主要な画面と基本操作を短時間で理解できる動画にしてください。

視聴者が動画を見ながら、
同じ操作を再現できる構成にしてください。

## アプリの概要

［ここにアプリの用途を2〜3文で記載］

## 想定する視聴者

［ここに動画を見る人を記載］

例：
- アプリを初めて利用する担当者
- ITやシステムに詳しくない利用者

## 動画で説明する操作

以下の順番で説明してください。

1. ［最初に表示する画面］
2. ［説明する操作］
3. ［入力または選択する内容］
4. ［操作後に確認する結果］
5. ［必要に応じて履歴、検索、詳細画面など］

元素材に存在しない機能や画面は追加しないでください。

## 素材の扱い

- 画面録画を映像の主素材として使用する
- スクリーンショットは画面紹介や補足に使用する
- 元のUIの文字、数値、色、配置を変更しない
- UIを新しく生成し直さない
- 元の操作順序と画面遷移を維持する
- 操作と関係のない場所を強調しない

## 動画に含める要素

- 操作内容を説明する日本語ナレーション
- クリック位置が分かるカーソル
- クリック時の短いエフェクト
- 操作対象を示す枠線またはハイライト
- 各画面の役割を補足する短いテロップ

## 動画の仕様

- 完成尺：45〜60秒程度
- 画面比率：16:9
- デザイン：シンプルで見やすいもの
- ナレーション：自然で聞き取りやすい日本語
- テロップ：一度に表示する文章を短くする
- BGM：使用する場合はナレーションを妨げない音量
- 過度なズームや不要なアニメーションは使用しない

入力動画の長さに制限がある場合は、
操作ごとに10〜15秒程度のシーンへ分割してください。

分割した場合も、
カーソル、テロップ、ナレーションのデザインを統一してください。

## 出力内容

可能な範囲で、以下を出力してください。

- 完成動画
- ナレーション原稿
- テロップ一覧
- テロップの表示タイミング
- シーンごとの構成

この形なら、アプリの概要と操作手順だけを書き換えて使える。

特に効いたのは、「UIを新しく生成し直さない」と明記した部分だった。

動画生成AIにとっては自然な補完でも、操作説明動画ではボタンの形や文字が少し変わるだけで困る。

スクリーンショットだけでは厳しかった

最初は、スクリーンショットを何枚か渡せば、AIが画面の切り替わりを自然につないでくれると考えていた。

実際に生成してみると、映像としては動く。

ただ、画面が動くたびに文字が微妙に変わったり、ボタンの位置がずれたりする。

一見すると小さな崩れでも、操作説明では致命的だ。

「このボタンをクリックしてください」と説明している横で、そのボタン名が別の文字に変わっていたら、動画として成立しない。

そこで、途中からは静止画を動かすImage-to-Videoではなく、既存の画面録画を土台にするVideo-to-Videoに絞った。

アプリの画面そのものは触らず、カーソル、強調表示、テロップだけを重ねるほうが、今回の用途には合っていた。

15秒制限が地味に重い

Video-to-Videoなら解決すると思ったが、次に入力動画の長さで引っかかった。

今回使った機能では、Runway以外の多くが15秒程度までの動画しか入力できなかった。

1分ほどの画面録画を、そのまま放り込むことはできない。

そのため、生成前に次の作業が必要になった。

• 操作していない時間を削る
• 読み込み待ちを早送りする
• 操作ごとに動画を分割する
• 生成した動画を最後に結合する

動画生成AIを使うために、先に動画編集をする。

少し本末転倒に見えるが、実際にはこの下準備をしたほうが生成結果も安定した。

一つの動画に多くの操作を詰め込むより、「ボタンを押す」「フォームを入力する」「結果を確認する」と場面を分けたほうが、AIも処理しやすいようだった。

HeyGenは最初の一発がうまい

CleanShot 2026-08-20 at 16.23.41.mp4

HeyGenは、細かく説明しなくても「それっぽい説明動画」にまとめるのがうまかった。

素材を入れて大まかな指示を出すだけで、構成や見せ方をかなりよしなに整えてくれる。

最初に生成結果を見たときは、これで十分なのではと思った。

困ったのは、そこからだった。

カーソルを少しだけずらしたい。

テロップの一文だけを直したい。

ナレーションの開始を1秒遅らせたい。

そうした細かな修正をしようとすると、手動で触れる範囲が狭い。

結局、プロンプトを書き換えて再生成することになる。

初稿を短時間で作るには便利だが、完成形へ詰めていく作業はかなりつらかった。

Runwayは生成後に直せる

［ここにRunwayの生成動画と操作画面を挿入］

今回、最終的に一番長く触っていたのはRunwayだった。

まず、生成される動画の品質が比較的高い。

そのうえ、最低限ではあるものの、動画編集用のUIが用意されている。

生成した動画を確認しながら、カットを調整したり、素材を並べ直したりできる。

当たり前に聞こえるが、動画生成ではこの「生成後に触れる」ことがかなり大きい。

Seedanceなど複数のモデルを選べるため、素材や目的に応じて生成モデルを切り替えられるのもよかった。

モデルを試すたびに、別のサービスへ動画をアップロードし直さなくて済む。

画像生成やアニメーション生成でトークンを消費する前に、確認が表示される点も助かった。

試行錯誤していると、「今の操作でクレジットを使うつもりはなかった」ということが意外と起きる。

その確認があるだけでも触りやすい。

もちろん、Runwayだけで全部が解決したわけではない。

テロップは付けられるが、専用の動画編集ソフトほど細かく調整できない。

ナレーションも、画面上の操作とぴったり合わせようとすると手作業が必要になる。

それでも、生成と修正を同じ場所で往復できた。

今回の用途では、その差が大きかった。

KlingはUIを保つ用途と相性が悪かった

［ここにKlingの生成動画と操作画面を挿入］

Klingは、ショート動画向けのテンプレートが豊富だった。

短いプロモーション動画や、映像に派手な演出を足す用途なら選択肢は多い。

ただ、今回は元のアプリ画面をそのまま残す必要がある。

生成結果を見ると、UI内の文字が崩れたり、レイアウトが微妙に変わったりしていた。

今回Video-to-Videoで使ったOmniも、期待した結果にはならなかった。

操作画面には秒数制限や細かな条件が多く、設定を変えるたびに別の制約へ引っかかる。

テンプレートを選んで短い動画を作るぶんにはよい。

元のUIを維持しながら、複数の操作を順番に説明する使い方では、かなり扱いにくかった。

CapCutは絵コンテ作りまではよかった

［ここにCapCutの操作画面と作成した絵コンテを挿入］

CapCutは、動画の概要や絵コンテを組み立てる画面が分かりやすかった。

どの場面で何を説明するのかを整理する作業は進めやすい。

生成前の企画を作るツールとしては、かなり使いやすいと思う。

ただ、今回やりたかったのは、企画を作ることではない。

すでにある画面録画を読み込み、その内容を保ったまま説明動画へ仕上げたかった。

今回試した範囲では、その流れをうまく作れなかった。

CapCutが悪いというより、こちらが求めていた使い方と、AI機能の得意な部分がずれていた。

ChatGPTは指示どおりに固定できなかった

［ここにChatGPTの生成動画を挿入］

ChatGPTにも、同じ素材とプロンプトを渡して動画を作らせた。

結果には、指示していない場所へのハイライトが入った。

ナレーションも十分には反映されず、画面上の操作と説明が合わない部分があった。

一枚の画像であれば、生成後に気になる部分を直せる。

動画では、画面、カーソル、テロップ、ナレーションを時間軸に沿って維持しなければならない。

一箇所を直した結果、別の箇所が変わることもある。

今回の操作説明動画では、使える状態まで持っていくのは難しかった。

5サービスを並べるとこうなった

＊higgsfieldなども使ってみたがそもそもVideoToVideoの選択肢がなかった。

AIだけで完成させるのは諦めた

最終的には、AIだけで完成動画を作る方針をやめた。

元の画面録画を短く整え、AIで使える部分を作り、最後に人間がタイミングを合わせる形にした。

操作説明動画では、固定したいものが多い。

• 元のアプリ画面
• 操作の順番
• カーソルの位置
• ハイライトの位置
• ナレーションの内容
• ナレーションを流すタイミング
• テロップの文章
• テロップを表示する時間
• BGMと効果音の音量

これらを一度の生成でまとめて制御しようとすると、修正していない部分まで変わりやすい。

ナレーションだけを直したいのに画面が変わる。

カーソルだけを動かしたいのにテロップが変わる。

生成し直すたびに、別の確認作業が増えていく。

画面構成やテロップの位置をテンプレートとして固定できるなら、自動化しやすくなると思う。

自由な画面録画を入力して、APIを一度実行するだけで完成動画まで作るのは、今回試した範囲では厳しかった。

次に作るならRunwayを選ぶ

今回の5サービスから一つ選ぶなら、Runwayになる。

動画の品質だけで選んだわけではない。

生成結果を見て、その場で修正し、必要なら別のモデルも試せる。

この往復ができることのほうが大きかった。

とはいえ、Runwayでもナレーションと操作の同期は手動で直す必要がある。

テロップも、最後は専用の編集ソフトで整えたほうが早い場面がある。

次に同じ動画を作るなら、最初から画面録画を土台にする。

操作ごとに短く分割し、Runwayで必要な映像を作り、ナレーションとテロップは最後にタイムライン上で合わせる。

プロンプト一発で完成させようとするより、おそらくそのほうが早い。