AI動画制作の「量産」フェーズへ。Remotion×Flovaでリスニング教材を自動生成してみた

今回のテーマは「異なるテンプレート」で動画のパターンを増やす

前回の記事では「お花見」をテーマに、AIで動画を自動生成する仕組みをご紹介しました。
今回は一歩進んで「全く別のテンプレート」を作ることに挑戦しました。選んだテーマは「リスニング（聴解）クイズ」です。

実は以前から外国人の友人たちに日本語を教えていた時、一番リクエストが多く、かつ喜ばれたのがリスニングです。 「ドラマ仕立ての動画はハードルが高いけど、リスニングなら……」と考えてみると、あることに気づきました。
リスニング教材は、音声が主役。背景映像は「シチュエーションを補足する絵」として機能すればいいので、一歩引いた立ち位置でいいんです。複雑なカット割りにこだわらなくて済む分、実は自動化のテンプレートとしてはめちゃくちゃ「作りやすい」ジャンルでした。

１. Flovaのプロジェクトは「同じ場所」で育てる

まずは、背景動画とBGMからです。
背景動画とBGMを作るFlovaでは、あえて前回と同じプロジェクト内で作業を続けました。理由はシンプルで「トンマナを揃えたい」から。
リスニング動画は、文字が主役。だからこそ、Flovaには「真ん中にデカデカと文字を載せるから、周囲にだけ要素を配置して！」という、例の『余白（Copy Space）』を意識したプロンプトを繰り返し学習させています。
同じプロジェクト内で生成を続けることで、AIが私の好みを学習し、安定したクオリティの「文字載せ専用素材」が次々と手に入るようになりました。

２. Remotionのプロジェクト構造を「プロ仕様」に改造

1本目の時は「1プロジェクト＝1動画」という力技でしたが、量産を考えるとこれでは限界がきます。そこで、Remotionのディレクトリ構成をガラッと変えました。
src/componentsやsrc/compositions/ 配下に「お花見編」と「リスニング編」といったテーマごとのサブフォルダを作り、ファイルをわけます。
こうすることで、typesやルビなど吹き出しのデザイン、Google TTS（音声合成）のロジックなど、苦労して作った共通パーツを使い回せるようになります。
1つのプロジェクトで、複数の「型」を管理する。これが量産の第一歩です。

最終のフォルダ構成はこちら。

├─src/
│  ├─components/            # 汎用的なデザインパーツ
│  │  ├─RubyText.tsx        # ふりがな付きテキスト
│  │  ├─hanami/             # お花見シリーズ専用部品
│  │  │  ├─PhraseScene.tsx
│  │  │  ├─SummaryScene.tsx
│  │  │  └─TitleScene.tsx
│  │  └─listening/          # リスニングシリーズ専用部品
│  │     ├─ChoicesPhase.tsx
│  │     ├─ListenPhase.tsx
│  │     └─QuizTitleCard.tsx
│  ├─compositions/          # 動画の「型（シナリオ）」を定義
│  │  ├─hanami/             
│  │  │  ├─HanamiLesson.tsx
│  │  │  ├─HanamiBackground.tsx
│  │  │  └─HanamiPhrases.tsx
│  │  └─listening/          
│  │     ├─ListeningLesson.tsx
│  │     ├─ListeningBackground.tsx
│  │     └─ListeningQuiz.tsx
│  ├─data/                  # 台詞やクイズの正解データ（JSON）
│  │  ├─hanami.json         # hanami-01, 02... の全セリフを管理
│  │  └─listening.json      # listening-01, 02... のクイズデータ
│  └─Root.tsx               # 全動画を束ねるエントリーポイント
├─public/                   # 生成AIで作った「生」の素材
│  ├─background/            # Flovaで生成した背景動画
│  │  ├─hanami/             
│  │  │  ├─01_hanami.mp4
│  │  │  ├─02_hanami.mp4
│  │  │  └─audio_hanami.mp3  # Flova生成のBGM
│  │  └─listening/          
│  │     ├─01_listening.mp4
│  │     ├─02_listening.mp4
│  │     └─audio_listening.mp3
│  └─audio/                 # Google TTSで生成したナレーション
│     ├─hanami-01/          
│     │  ├─audio1.mp3
│     │  ├─audio2.mp3
│     │  └─title_hanami.mp3
│     └─listening-02/       
│        └─question.mp3
└─scripts/                # 職人芸の自動化スクリプト
   ├─generate-audio.mjs   # JSONから音声を一括生成
   └─render-all.mjs       # 全動画を一括レンダリング

フォルダごとの役割はこちら。基本的にテーマごとのフォルダやファイルがわかるようにサブフォルダを切りました。

３. 複数のテーマのタイムラインを同時に確認可能

この構成にして最高に便利なのが、Remotionのエディタ画面（Player）を開いた時です。 画面左側のサイドバーに、登録した「お花見レッスン」と「リスニングクイズ」がずらりと並び、クリック一つで瞬時に切り替えることができます。

普通の動画編集ソフトだと、別の動画を編集するにはプロジェクトファイルを開き直す必要がありますよね。でもRemotionなら、同じ画面内で「こっちのクイズのテロップ位置を調整して、すぐにお花見動画のナレーションを確認する」といった行き来が自由自在。複数のテーマを並行して確認できるこのスピード感は、一度味わうともう元には戻れません。

４. レンダリング時間の壁。対象を「絞る」という知恵

動画の数が増えてくると、ある問題に直面します。それは全部書き出すと時間がかかりすぎること。 最初は全ファイルをレンダリングしていましたが、今は「今日はこの動画だけ！」と対象を絞って書き出すようにコマンドを工夫しています。
Remotionなら、IDを指定するだけで特定の動画だけを数秒で書き出せます。この「必要な分だけを作る」という引き算の考え方が、制作のストレスを激減させてくれました。

npx remotion render ListeningQuiz out/listening-biz-01.mp4

５. 背景動画とBGMは「自分だけのストック」になる

今回、ビジネス街の喧騒やオフィスの風景など、新しい背景動画をいくつか作りました。これらを public/ フォルダに溜めていくと、面白いことが起きます。 「あ、このフレーズなら、前作ったあのレストランの映像が合うな」と、パズルのように組み合わせるだけで新しい動画が作れるようになるんです。
AIに毎回作らせるのではなく、過去の自分が作った最高傑作を「再利用」する。このストックが増えれば増えるほど、動画制作はどんどん楽に、そして速くなっていきます。

６. リスニング教材としての手応え

実際に完成したリスニング動画を動かしてみると、手前味噌ですが「これ、もうちょっと突き詰めたら売れるクオリティになるのでは・・・？」と感じるほどでした。
会議室の風景流れる中で「打ち合わせ中」というフレーズが聞こえてくる。それをクイズ形式で提示し、最後に正解をさせて表示する。
このテンポの良さは、手作業の編集ではなかなか出せません。コードで動きを制御しているからこそ、どんなフレーズでも完璧なタイミングで字幕が出てくる。これぞ自動化の醍醐味です。

完成した動画はこちらです。

７. 次は「ドラマ仕立て」の会話劇へ

リスニング編が形になったことで、私の「動画量産システム」は一段上のステージに行けました。 背景動画集とBGM、そして洗練されたRemotionのコード。
これらが揃えば、あとは「何を教えるか」というコンテンツの中身に集中するだけです。次は、ラーメン屋での注文シーンのような、よりストーリー性のある「会話ドラマ」に挑戦しようと思っています。あるいはスマホで撮った動画に文字をかぶせて日常風景動画に挑戦するか。
AIを使いこなす楽しさは、この「次はもっと面白いものが作れる！」という確信にあります。

皆さんも、自分だけの「動画工場」を作ってみませんか？