Remotion で動画を作ってみた

概要

Remotionを使って動画を作ってみた。 Remotion は動画をコードで管理できる、Movie as a Code とでも言えるようなライブラリである。 ベースは React を使っているので、ウェブ技術で動画を作ることができる。 いろいろやってみたことを記録しておく。

作ったもの

ソースコード: GitHub

ポイント

コンポーネント

再利用可能なコンポーネントを作った。

src/components
├── CharacterLayer.tsx
├── GenericScene.tsx
├── IconSlide.tsx
├── ImageSlide.tsx
├── PointsSlide.tsx
├── Subtitle.tsx
├── TerminalSlide.tsx
├── TitleSlide.tsx
└── VideoSlide.tsx

データ定義

シーンを定義するファイルと、台本を記載したファイルを作った。

シーンを定義するファイル(scenes.tsx)

一定のタイミングで背景のスライドを変えていくが、一つのスライドを使っている時間を 1 シーンと呼んでいる。

export const sceneDefinitions: SceneDefinition[] = [
  {
    id: 'scene1',
    renderSlide: () => <TitleSlide title="Vive Codingを始める前に" subtitle="知っておきたい3つのこと" />,
    subtitles: subtitles.scene1,
  },
  {
    id: 'scene2',
    renderSlide: () => (
      <PointsSlide
        title="これだけ知っておこう"
        points={[
          'VSCode の使い方',
          'Gemini CLI の使い方',
          '数個の Unix コマンドの使い方',
        ]}
      />
    ),
    subtitles: subtitles.scene2,
  },
  // ...

台本を記載したファイル(subtitles.tsx)

export const subtitles = {
  scene1: [
    {
      id: "01-001-B",
      text: "最近バイブコーディングという言葉がよく使われていますね。",
      start: 10,
      end: 142,
      speaker: "B",
    },
    {
      id: "01-002-A",
      text: "はい。",
      start: 152,
      end: 173,
      speaker: "A",
    },
    // ...

音声生成

Google TTS を使用した。 Amazon Polly、Azure TTS でも SSML を使えるのだが、 試しに生成してみたところ、Google TTS が最も自然な音声だった。 また、音声モデルは ja-JP-Neural2-B、ja-JP-Neural2-C を使用した。 より高性能なモデルで ja-JP-Chirp3-HD- シリーズもあるのだが、 実行のたびに出力が変わるので、安定性を考えて ja-JP-Neural2-B、ja-JP-Neural2-C を使用した。

SSML は VSCode や「おこなっている」の発音に使った。

<say-as interpret-as="verbatim">VS</say-as>Code

<phoneme alphabet="yomigana" ph="おこなって">行って</phoneme>いる

その他

Remotion は MCP サーバーを提供しており、Claude Code の MCP 設定に追加して使用した。 最近はライブラリのドキュメントを MCP 化しているものが多いように思う。 おかげで苦労せずコードを生成することができる。 ありがたい。

参照

以下の動画を見て Remotion を知った。

Play