Remotion x VOICEVOX ゆっくり解説テンプレート

Remotion と VOICEVOX を組み合わせて、複数キャラクターが時系列で登場・発話する動画テンプレートです。 サンプルテーマは「ネコミミはなぜかわいいのか？」です。

使い方

1. 依存関係をインストール

npm install

2. VOICEVOX エンジンを起動

VOICEVOX のエンジンを起動してください。既定では http://host.docker.internal:50021 を参照します。 詳細は公式リポジトリを参照してください。

https://github.com/VOICEVOX/voicevox_engine

3. 脚本を編集

src/data/script.ts の characters と timeline を編集します。

show("sayo", {caption: "ネコミミ代表として、小夜が登場！"});
say("sayo-001", "sayo", "小夜です。ネコミミ代表として、耳のかわいさを証明しに来ました。");
say("zunda-005", "zundamon", "それじゃあ、また次回なのだ！");

• characters: 表示名、VOICEVOX の speakerName / styleName、立ち絵設定を定義します。
• initialVisibleCharacters: 動画開始時から表示するキャラクターを定義します。
• show(...): キャラクターを画面に登場させ、任意の説明字幕を出します。
• say(...): キャラクターに読み上げさせ、字幕と音声を同期します。
• 行ごとにスタイルを変える場合は say(..., {voicevox: {styleName: "スタイル名"}}) を使います。

4. 音声を生成

npm run voice:generate

src/data/script.ts の say(...) から public/audio/lines/*.wav を生成し、 src/data/voicevox-manifest.json に長さ・話者・スタイル情報を記録します。 音声が未生成の行は、プレビュー時にテキスト長から尺を推定します。

5. プレビュー

npm run start

6. レンダリング

npm run render YukkuriZundamon out/video.mp4

編集ポイント

• 時系列脚本: src/data/script.ts
• 音声タイミング: src/data/voicevox-manifest.json (自動生成)
• 映像の構成: src/yukkuri-composition.tsx

字幕方針

本テンプレートは、短編 VOICEVOX ドラマ動画や、実写映像を背景にした解説動画での利用を主用途としています。

そのため、字幕は @remotion/captions の Caption 型 JSON による単語単位・時刻単位の正式な字幕データとしては扱わず、src/data/script.ts の say(...) / show(...) に紐づく発話単位・シーン単位の表示テキストとして扱います。

say(...) の字幕は VOICEVOX で生成した音声尺、または未生成時の推定尺に同期して表示します。SRT/VTT 互換、単語単位ハイライト、自動文字起こし字幕が必要になった場合は、その時点で @remotion/captions の導入を検討します。

VOICEVOX設定

• VOICEVOX_URL (既定: http://host.docker.internal:50021)
• 話者とスタイルは src/data/script.ts の characters.*.voicevox で指定します。

立ち絵の差し替え

現在の小夜は CSS の仮立ち絵です。画像素材を使う場合は public 配下に画像を置き、 characters.sayo.avatar.imagePath に images/sayo.png のような public からの相対パスを設定してください。

以前の public/audio/zundamon.txt と src/data/script.json は互換用に残していますが、現在は参照しません。