プロダクトを紹介する動画を自動で作るツールを作ったので紹介します

概要

auto-product-video-generatorは、プロダクトのソースコードを解析し、紹介する機能の選定から画面録画、ナレーション、字幕、動画の書き出しまでを自動化するツールです。

auto-product-video-generatorのGitHubリポジトリ

Webアプリ、CLIツールなどの録画に対応し、GitHub Actionsから実行することもできます。(対応プラットフォームは今後増えていく予定です)

プロダクトの紹介やリリース時のデモに加えて、ハッカソンやコンテストへ応募するときに提出する紹介動画の作成にも利用できます。

ProtoPediaでも公開しています。

ProtoPediaの作品ページ 作ったプロダクトを紹介する動画、自動で作ります

実際に生成した動画はこちらです。

なぜ作ったのか

開発したプロダクトの魅力や操作感を伝えるには、文章やスクリーンショットだけでなく、実際の動きを見せる動画が効果的です。しかし、動画を作るうえで最も手間がかかるのは、何をどの順番で見せるかという構成を考えることでした。

構成を決めた後にも、各場面に合わせた字幕やナレーションの原稿を用意し、TTSで音声を生成する必要があります。さらに、構成に沿って画面を録画し、映像、音声、字幕のタイミングを合わせて一つの動画に仕上げなければなりません。

つまり動画の編集作業だけでなく、その前段階にある構成や原稿作りから多くの手間がかかります。

そこでGitリポジトリを指定すれば、プロダクトの内容を調べて紹介動画まで作る一連の流れをAIを用いれば、自動化できそうなことが分かったので実現してみました。

作成したツールについて

auto-product-video-generatorはGitで管理されているプロジェクトを入力として受け取ります。リポジトリの中から実行対象のアプリを探しソースコードやREADME、package.jsonなどを読み取って、動画で紹介する内容を組み立てます。(Claude CodeやCodexなどのコーディングエージェントで行われていることの応用です)

主な機能は以下の通りです。

• ソースコードからプロダクトの特徴を抽出
• Web、CLIなどの種類を自動判定
• 紹介する機能と操作手順をAIで作成
• VOICEVOXなどの音声合成ツールを用いてナレーションを生成
• ナレーションの実際の長さに合わせた画面録画
• 字幕、映像、音声を合成して動画ファイルを出力

このほか、実際のプロジェクトで利用しやすくするため、次の機能にも対応しています。

• ログインが必要なWebアプリの録画
• 環境変数ファイルを使ったアプリの起動
• GitHub Actionsでの実行

これらは、後半の「利用場面を広げる機能」で個別に紹介します。

使用している技術

このプロジェクトで使用している主な技術は以下の通りです。

技術	推奨モデル・構成	このプロジェクトでの役割
TypeScript / Node.js	Node.js 20以上	全体の処理とCLIの実装
Ollama	qwen2.5:7b-instruct	ソースコードの理解、機能の整理、録画シナリオの生成
Playwright	Chromium	Webブラウザの操作と録画
Docker	-	VOICEVOXやCLI録画用環境の実行
VOICEVOX	voicevox_engine:cpu-latest	日本語ナレーションの音声合成
FFmpeg	-	映像、音声、字幕を1本の動画へ合成

LLMには、外部の有料APIを使わず無料で動かせるOllamaを選びました。有料APIへ依存すると、利用量や料金改定によって継続的なコストが大きくなる可能性があります。プロダクトを更新しながら動画を作り続ける用途でも持続できるよう、ローカルLLMだけで一連の処理を実現することを目指しています。

推奨モデルはqwen2.5:7b-instructです。GitHub-hosted runner上でOllamaを動かすことを想定し、限られたCPUやメモリでも実行しやすく、生成品質とのバランスが取れるモデルとして選びました。

どのように動画を作っているのか

録画対象には、ローカルにあるGitリポジトリのパス、またはリモートリポジトリのURLを指定します。

全体の流れは以下の通りです。

リポジトリからプロダクトの内容を調べる

AIがリポジトリの中から動画生成に必要なファイルを選び、ソースコードやREADME、設定ファイルなどを読み取ります。その内容をもとに、プロダクトの特徴や紹介する機能、起動方法を整理します。

録画のシナリオを作る

解析結果をもとに、次の内容を組み立てます。

• どの機能を紹介するか
• どの画面を開き、何を操作するか
• 各場面で何を説明するか

作成したシナリオと台本は、次の工程で機械が読み取りやすく、人間も内容を確認・管理しやすいYAML形式で書き出します。

生成ファイル	内容
.apvg/scenario.yml	画面操作と録画の流れ
.apvg/script.yml	ナレーションと字幕の原稿

生成結果をそのまま次の工程で利用できるだけでなく、録画前に人が確認し、必要に応じて編集することもできます。

映像・ナレーション・テロップを同期する

紹介動画では、映像に映っている操作とナレーションや字幕（テロップ）の内容が同じタイミングで切り替わる必要があります。これらがずれると、画面とは関係のない説明が流れる不自然な動画になってしまいます。

そこで、シナリオの各場面を次の順序で処理します。

1. 各場面のナレーション音声をVOICEVOXで生成
2. 生成した音声の長さを計測
3. 音声の長さに合わせて画面を操作・録画
4. 同じ時間に対応する字幕を表示

ナレーションの実際の長さを映像と字幕の基準にすることで、同じ内容を伝える映像・音声・字幕を同期させています。

プラットフォームごとに映像素材を収録する

ここで行う録画は、最終的な動画へ組み込む映像素材を集めるための工程です。スクリーンレコードの方法はプラットフォームごとに異なるため、それぞれで利用できるツールに合わせて収録します。

プラットフォーム	映像素材の収録方法	状態
Webアプリ	Playwrightでブラウザを操作・録画	動作確認済み
CLIツール	Docker上のターミナルをブラウザへ表示して録画	動作確認済み
Android系アプリ	端末またはエミュレーターを操作して録画	実験的対応

収録方法だけをプラットフォームごとに切り替え、その後の動画生成は共通の流れで処理します。収録した映像素材へffmpegでナレーションと字幕を合成し、output/final.mp4へ書き出します。

今後は、各プラットフォームに適した収録方法を追加することで、対応範囲を広げていく予定です。

完成動画だけでなく素材も残す

完成した動画だけでなく、生成途中のデータや映像・音声素材も個別のファイルとして出力します。

出力先	内容
.apvg/scenario.yml	画面操作と録画の流れ
.apvg/script.yml	ナレーションと字幕の台本・時間情報
.apvg/subtitles.srt	字幕（テロップ）
.apvg/voice/*.wav	シーンごとのナレーション音声
.apvg/recordings/*.mp4	シーンごとに収録した映像素材
output/artifacts/	動画生成に使用した中間生成物一式
output/final.mp4	映像・音声・字幕を合成した完成動画

そのため、完成動画をそのまま使うだけでなく、音声を別のものへ差し替えたり、字幕を編集したり、映像素材をほかの動画編集ツールへ読み込んだりできます。こうした個別の編集は、出力された素材を使って利用者が自由に行えるようにしています。

字幕やナレーションを含めずに、本ツールで動画を作り直すこともできます。

apvg video generate --no-subtitles
apvg video render --no-voice

使い方

インストール

Node.js 20以上が入っている環境で、以下のコマンドを実行します。

npm install -g auto-product-video-generator
apvg setup
apvg doctor

Webアプリの録画にはPlaywrightを使用するため、apvg setupでPlaywright用のChromiumをダウンロードします。このコマンドはOllama本体のインストールまでは行いません。ローカルLLMを使う場合は、Ollama公式ダウンロードページを参考にインストールしてください。

インストール後、推奨モデルをダウンロードします。

ollama pull qwen2.5:7b-instruct

apvg doctorでは、動画生成に必要なツールやサービスが利用できるかを確認できます。その後に実行するapvg serveは、VOICEVOXとインストール済みのOllamaを起動します。推奨モデルがまだない場合は、apvg serveの実行時にもダウンロードされます。

動画を生成する

ローカルにあるGitリポジトリを録画する場合は、--sourceでそのパスを指定します。

apvg serve
apvg project init --source /path/to/your-app
apvg video generate

apvg project initを実行すると、録画対象やLLM、動画、音声などの設定を保存するapvg.config.ymlが生成されます。既存の設定ファイルを作り直して上書きする場合は、--forceを付けて実行します。

apvg project init --source /path/to/your-app --force

設定項目の詳細は、READMEの「設定ファイル」を参照してください。

モノレポを指定した場合は、リポジトリ内から実行可能なアプリを探し、録画対象を自動で選択します。対象を固定したい場合は、apvg.config.ymlのsource.projectPathへアプリのディレクトリを指定できます。

source:
  projectPath: apps/web

複数の候補がある場合の優先順は、source.platformPriorityで変更できます。

手元にない公開リポジトリを対象にする場合は、リポジトリのURLを指定することもできます。

apvg project init --repo https://github.com/you/your-app.git
apvg video generate

処理が完了すると、完成した動画がoutput/final.mp4へ保存されます。

一括実行と工程ごとの実行

通常は、次のコマンドだけで解析から完成動画の書き出しまでを一気通貫で実行します。

apvg video generate

apvg video generateの内部では、次の工程を順番に実行しています。それぞれを個別のコマンドとしても利用できるようにしています。

コマンド	実行する工程
apvg project analyze	ソースコードの解析
apvg video scenario generate	録画シナリオと台本の生成
apvg video voice	ナレーション音声の生成
apvg video record	映像素材の収録
apvg video render	映像・音声・字幕の合成

個別コマンドは、一気通貫の処理を工程ごとにも実行できるように分けたものです。通常はapvg video generateを使用し、特定の工程だけを実行したい場合に個別コマンドを利用します。

ブラウザを表示しながら動作を確認したい場合は--headed、実際の録画をせず計画を確認したい場合は--dry-runも利用できます。

apvg video generate --headed
apvg video generate --dry-run

利用場面を広げる機能

ここまで紹介した動画生成の流れに加えて、実際のプロジェクトで利用しやすくするための機能も用意しています。ログインが必要なWebアプリや、環境変数を使って起動するアプリを録画できるほか、GitHub Actions上で動画生成を実行することもできます。

ログインが必要なWebアプリを録画する

管理画面や会員向け画面など、ログイン後にしか表示できないWebアプリも録画できます。

apvg project initで生成したapvg.config.ymlを開き、target.authへログイン画面のURLと認証状態の保存先を設定します。

target:
  url: https://example.com/dashboard
  type: web
  auth:
    mode: manual
    loginUrl: https://example.com/login
    successUrl: https://example.com/dashboard
    storageStatePath: ./.apvg/auth/storage-state.json

次にブラウザを開き、手動で一度ログインします。

apvg auth login

ログイン後のCookieなどが保存され、以降の録画で再利用されます。パスワードをapvg.config.ymlへ直接書く方式ではありません。

保存されたファイルにはログイン情報が含まれるため、Gitへcommitしたり、第三者へ共有したりしないよう注意が必要です。

.envファイルが必要なアプリを録画する

アプリの起動にAPIキーなどが必要な場合は、普段使用している.envファイルを指定できます。

source:
  localPath: /path/to/product
  environmentFile: /secure/path/product.env

コマンドから一時的に指定することもできます。

apvg video generate --env-file /secure/path/product.env

通常のWebプロジェクトでは.envとして配置します。Cloudflareプロジェクトでは.dev.vars、Androidプロジェクトではlocal.propertiesの形式へ自動的に変換します。そのため、録画対象ごとに同じ内容を別形式で用意する必要はありません。

このファイルにもAPIキーなどが含まれる可能性があるため、Gitへcommitしないようにしてください。

GitHub Actionsで動画を作る

ローカル環境だけでなく、GitHub Actions上でプロダクトの解析から動画生成まで実行できます。

name: Generate product video

on:
  workflow_dispatch:

permissions:
  contents: read

jobs:
  video:
    runs-on: ubuntu-latest
    timeout-minutes: 360
    steps:
      - uses: actions/checkout@v6
      - id: apvg
        uses: TakuKobayashi/auto-product-video-generator@v1
        with:
          video-type: demo
          ollama-model: qwen2.5:7b-instruct
      - uses: actions/upload-artifact@v7
        with:
          name: promotional-video
          path: ${{ steps.apvg.outputs['artifacts-path'] }}

手動実行にしておけば、必要なタイミングでGitHub Actionsの画面から動画を作れます。リリースや特定のbranchへのpushをきっかけに実行する構成へ変更すれば、プロダクトの更新に合わせて動画を生成することもできます。

Geminiを利用する

ローカルLLMを用意しにくい環境向けの選択肢として、Geminiにも対応しています。無料枠が比較的大きく、APIキーを設定すればOllamaの代わりに利用できますが、このツールではローカルLLMによる実行を基本としています。

現在の対応範囲と注意点

現在、動作確認できている録画対象はWebとCLIです。Android、Flutter、React Native、Unityから出力したAndroidアプリ向けの仕組みも実装していますが、十分な動作確認はまだ行えていません。iOSとUnityのデスクトップアプリは未対応です。

AIが作る操作手順は、実際の画面構成によって調整が必要になる場合があります。そのため、すべてを一度で完成させるだけでなく、生成されたシナリオを人が確認し、必要な工程だけをやり直せる構成にしています。

また、CLIツールの録画では、安全のため自動実行できるコマンドを--helpや--versionなどの読み取り中心の操作へ制限しています。ファイル削除や公開処理などをAIが勝手に実行しないための対策です。

まとめ

auto-product-video-generatorを使うと、Gitリポジトリの内容から紹介する機能を整理し、画面録画、ナレーション、字幕を含むプロダクト紹介動画を生成できます。

動画制作を完全にブラックボックス化するのではなく、途中で作られるシナリオや台本を確認・修正できるようにしたことで、自動化しつつプロダクトに合った内容へ調整できるようにしています。

プロダクトの紹介動画を作る作業や、更新のたびに動画を撮り直す作業を効率化したい場合に試してもらえればと思います。

auto-product-video-generatorのGitHubリポジトリ

npmパッケージはこちらから確認できます。

auto-product-video-generatorのnpmパッケージ

完成した動画と作品の概要はProtoPediaにも掲載しています。

ProtoPediaの作品ページ 作ったプロダクトを紹介する動画、自動で作ります