製品PVを仕様ファイル1枚から自動生成する「kpvgen」を作りました——実画面キャプチャ×AIナレーション×機械検証
名古屋でAIシステム開発の会社をやっています。自社製品が増えてくると、製品ごとの紹介動画(PV)を作る・直すという作業が積み上がります。動画編集ソフトでの手作業は、価格や実測値が変わるたびに作り直しで、続きません。そこで、PVそのものをコードにしました。
- コード(公開): github.com/katsushi2441/kpvgen
- 第1号の成果物(30秒PV): Kurage 商圏分析 PV
仕様ファイル1枚で何が起きるか
シーンの並びと言わせたい台詞をJSONに書いて、コマンドを1回実行します。あとは5工程が自動で流れます。
- capture — 製品の実画面をヘッドレスブラウザで撮影。地図など読み込みの遅い画面は白画面を検出して待ち直します
- narration — 自社TTSでナレーション生成。数字は読み方をカナで確定させてから渡します(TTSは「9634」を桁バラバラに読みます)
- compose — HTML+GSAPのアニメーションとして組み立て。実写クリップ、実画面のズーム、数字のカウントアップ、エンドカードの4種のシーン型があります
- render — HyperFramesでmp4に書き出し
- verify — 完成品の尺・解像度を実測し、音声をWhisperで聴き取って「言うべき台詞・数字・価格が本当に言えているか」を機械判定。不合格なら出力を捨てます
「言った瞬間に画面に出る」を実測で合わせる
一番気に入っている機能が sync_to です。ナレーションが「買い切り5万5000円」と言う瞬間に、画面に価格が表示されてほしい。これを、Whisperのタイムスタンプで発話時刻を実測し、シーンの開始時刻を自動で一致させる形にしました。仕様ファイルに同期させたい語を1行書くだけで、前のシーン群の尺は比例配分で自動調整されます。
実例: 商圏分析ツールの30秒PV
第1号として、Kurage 商圏分析(住所を入れると徒歩10分圏の人口が出るツール)の30秒PVを作りました。実写のオープニング、実画面での住所入力、名古屋駅徒歩10分圏の人口9,634人へ増えていくカウントアップ、到達圏の地図、価格のエンドカード——全部で6シーンです。完成品はそのまま商品ページで使っています。
作ってみて学んだこと
順調に完成したわけではありません。3回のビルドのうち2回は失敗でした。
- 描画エンジンには「駆動契約」がある。 HyperFramesは一時停止したタイムラインをフレーム単位で進めて撮影する方式で、時間差で自走するアニメーション指定は一切実行されません。動画後半が真っ白になった原因はこれで、答えは社内で既に動いている別システムのコードに最初から書いてありました
- 検証コードにもバグは入る。 Whisper聴き取り検証が「5万5000円」(台本)と「55,000円」(聴き取り結果)の表記ゆれで、正しいナレーションを不合格にしていました。数字を正規化して比較するように修正しました
それでも完成に辿りつけたのは、「完成しました」を人間の感覚ではなく機械に言わせる設計にしていたからです。失敗が「気づかないまま公開」ではなく「ビルドが落ちる」という安全な形で現れました。
PVを作りたい製品が増えても、これからは仕様ファイルを1枚書くだけです。