Remotion + VOICEPEAKで解説動画をコードで作る

このサイトの技術記事、文字が多い。読みづらいかもなーとは思っていた。動画の方が見やすいよなー、でも動画編集ってめんどくさいし……と思いながらGeminiと話してたら、「Remotion」というフレームワークを知った。

Reactで動画を書けるらしい。VOICEPEAKはCLI対応なので、Node.jsから直接叩いて音声生成できる。これを組み合わせれば技術解説動画を自動化できるかも？と思って調べた内容をまとめる。

Remotionとは

RemotionはReactで動画を作るフレームワーク。動画のシーンをReactコンポーネントとして書いて、propsでタイミングを制御する。

Soraのような生成AI動画が「ガチャ」だとすると、Remotionは「エンジニアリング」。同じコードからは100%同じ動画が出力される。再現性があるので、バージョン管理もできるしCIに組み込むこともできる。

プレビューはホットリロード対応で、コードを保存すると即座に反映される。Astroの開発サーバーと同じ感覚で動画を作れる。

最近、Claude Code向けのスキルが公開されたことで話題になっているらしい。「〇〇の紹介動画を作って」とClaudeに話しかけるだけで、セリフ生成からコード作成まで自動化できるテンプレートがある。

remotion-voicevox-template - ずんだもん＆めたん掛け合い動画のテンプレート
yasunaさんのnote記事 - Remotionでゆっくり動画を作る実験

なぜVOICEPEAKか

解説動画には音声が必要。VOICEVOXも有名だけど、VOICEPEAKを選んだ理由はCLI対応だから。

項目	VOICEVOX	VOICEPEAK
価格	無料	有料（1万円〜）
連携方式	HTTP API	CLI
品質	十分使える	より自然
感情制御	限定的	パラメータで細かく指定可

VOICEVOXはHTTP APIなのでサーバーを起動してリクエストを投げる必要がある。VOICEPEAKはターミナルから直接叩けるので、シェルスクリプトやNode.jsから簡単に呼び出せる。

感情パラメータも --emotion happy=100 のように指定できるので、「ここは悲しく」「ここはハイテンションで」という演出もコードで完全に制御できる。

自分は「商用利用可能6ナレーターセット」を持っているので、これを使う前提で進める。

ライセンス（YouTube収益化は？）

気になるのは収益化のライセンス。調べたところ、商用利用可能セットなら追加ライセンスは不要。

AHSの公式ページを見ると、以下の行為は通常のソフト購入だけでOKと明記されている。

YouTubeの広告収入（AdSense）
スパチャ（Super Chat）
アフィリエイト
有料チャンネル（メンバーシップ）

「不要」が並んでいて安心する。商用利用可能セットはそもそも受託制作もOKなので、ライセンス周りで困ることはなさそう。

セットアップ手順

前述のテンプレートを使う場合の手順。

# リポジトリをクローン
git clone https://github.com/nyanko3141592/remotion-voicevox-template.git my-video
cd my-video
npm install

# VOICEVOXを起動しておく（アプリかDockerで）

# プレビューサーバー起動
npm start

ブラウザで http://localhost:3000 を開くとプレビューが表示される。デモ用のセリフと音声が含まれているので、すぐに動作確認できる。

VOICEPEAKを使う場合

VOICEPEAKを使うなら、ナレーター名を確認しておく。

# Macの場合
/Applications/voicepeak.app/Contents/MacOS/voicepeak --list-narrator

核心コード: VOICEPEAKをNode.jsから叩く

テンプレートはVOICEVOXのHTTP APIを使う設計だけど、VOICEPEAKのCLIを叩く方式に改造もできる。

Node.jsから呼び出す場合のコード例。

const { execSync } = require('child_process');

const VP_PATH = '/Applications/voicepeak.app/Contents/MacOS/voicepeak';

function generateVoice(text, outputPath, narrator, emotion = 'happy=50') {
  const cmd = `"${VP_PATH}" --say "${text}" --narrator "${narrator}" --emotion ${emotion} --out "${outputPath}"`;
  execSync(cmd);
}

// 使用例（ナレーター名は --list-narrator で確認）
generateVoice('Remotionを使えば動画をコードで作れます', './voices/001.wav', 'Japanese Female 1', 'happy=100');

音声ファイルを事前に生成しておいて、Remotion側ではそれを読み込むだけにすると安定する。

Remotionとの連携

Remotion側では、生成した音声ファイルの長さを取得してタイムラインに配置する。

import { Audio, Sequence, staticFile } from 'remotion';

export const MyVideo = () => {
  return (
    <Sequence from={0} durationInFrames={90}>
      <Audio src={staticFile('voices/001.wav')} />
      {/* キャラクター画像や字幕 */}
    </Sequence>
  );
};

音声の長さは music-metadata などのライブラリで取得できる。台本データ（JSON）と合わせて、セリフごとにSequenceを生成すれば、自動で動画が組み上がる。

まだ試してはいないけど、「編集ソフトでポチポチ」から「コードで書いてビルド」に変わるのは魅力的。技術記事を動画にするときに使えそうだなと思っている。

VOICEPEAKは既に持っているので、あとはRemotionをセットアップして試すだけ。