SECTION 27

Remotion × VOICEVOX
動画制作

コードで動画を量産 — React + AIナレーション

calendar_today2026 LCREATOR.Inc Google AI 研修プログラム

SECTION 27

なぜプログラマティック動画か

01 / 28

手作業動画制作の課題

  • 1本あたり数時間〜数日かかる
  • 同じフォーマットでも最初から作り直し
  • データ変更のたびに全編再編集が必要
  • Adobe Premiere等の高い学習コスト
  • スケールに限界がある

プログラマティック動画のメリット

  • テンプレート1本 × データ差し替えで量産
  • 100本の動画をコマンド1発で生成
  • バージョン管理・チーム開発が可能
  • Reactの知識が活かせる
100本
1コマンドで生成可能
90%
制作時間削減の目安

「動画をコードで書く」ことで、
ソフトウェア開発の知識がそのまま
動画制作の武器になる

© LCREATOR.Inc Google AI 研修プログラム — Section 27 2 / 28

SECTION 27

Remotionとは

02 / 28
定義

RemotionはReactで動画を作るオープンソースフレームワーク。Webの技術（HTML/CSS/JS）で動画コンテンツを定義し、Puppeteerでフレームをレンダリング、ffmpegで動画ファイルに書き出す。

code

React コンポーネントで動画を定義

通常のReactと同じようにコンポーネントを書くだけ。CSSアニメーションもそのまま動く。

preview

ブラウザでリアルタイムプレビュー

npx remotion studio でブラウザ上のStudioが起動。シークバーで任意フレームを確認。

movie_creation

高品質MP4出力

ffmpegを内部で利用し、最大4K・30fps/60fpsのMP4・WebMを書き出し可能。

Remotion Player プレビュー画面

技術スタック

  • React 18 + TypeScript
  • Puppeteer（フレームキャプチャ）
  • ffmpeg（動画エンコード）
  • Node.js 18+
  • npm / yarn
open_source
Remotionはオープンソース（GitHub 21k stars）。個人・非商用は無料。商用利用は会社規模に応じたライセンスが必要（$149〜）。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 3 / 28

SECTION 27

VOICEVOXとは

03 / 28
定義

VOICEVOXは無料・オープンソースのAI音声合成エンジン（ローカル動作）。個性豊かなキャラクターボイスを使い、テキストから自然な日本語音声を生成できる。

record_voice_over

50+ キャラクターボイス

ずんだもん・四国めたん・春日部つむぎなど多彩なキャラが収録。話者IDで指定。

api

REST APIで自動化

localhost:50021 でAPI提供。テキストをPOSTするだけでWAVファイルが返ってくる。

speed

パラメータ調整

速度・ピッチ・イントネーション・音量をAPI経由で細かく制御可能。

主要キャラクター一覧（抜粋）

話者ID キャラクター 特徴
1四国めたん標準・落ち着いた
3ずんだもん明るい・元気
8春日部つむぎ落ち着いた女性
11玄野武宏落ち着いた男性
info
VOICEVOXの音声を商用利用する場合はキャラクターごとの利用規約を確認すること。多くのキャラは商用利用可だが条件が異なる。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 4 / 28

SECTION 27

開発環境セットアップ

04 / 28

前提条件のインストール

1

Node.js 18+ のインストール

nodejs.org から LTS版をダウンロード・インストール

2

Remotionプロジェクト作成

npm create video@latest で雛形を生成

3

VOICEVOXをインストール

voicevox.hiroshiba.jp からデスクトップアプリをダウンロード

4

VOICEVOXを起動して確認

アプリ起動後、http://localhost:50021/docs でAPI確認

動作確認コマンド

# Node.js バージョン確認
node --version # v18+

# Remotionプロジェクト作成
npm create video@latest
cd my-video
npm install

# Studioを起動（ブラウザが開く）
npx remotion studio

# VOICEVOX API確認
curl http://localhost:50021/version
check_circle
セットアップ完了の確認: ブラウザでStudioが開き、かつ VOICEVOX APIがバージョンを返す状態がスタートライン。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 5 / 28

Remotion 基礎

コンポジション・アニメーション・レンダリングの基本

SECTION 27 — Remotion基礎

コンポジション設計 — fps / width / height / duration

06 / 28

Compositionの基本構造

TSX // src/Root.tsx
import {Composition} from 'remotion';
import {MyVideo} from './MyVideo';

export const RemotionRoot = () => (
  <Composition
    id="MyVideo"
    component={MyVideo}
    fps={30}
    width={1920}
    height={1080}
    durationInFrames={150}
  />
);

主要パラメータの意味

パラメータ 説明 推奨値
fpsフレームレート30（通常）24（Veo連携）
width横ピクセル1920 / 1080
height縦ピクセル1080 / 1920
durationInFrames総フレーム数fps × 秒数
tips_and_updates
30秒の動画 = fps 30 × 30秒 = durationInFrames 900。縦動画（9:16）はwidth 1080 / height 1920。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 7 / 28

SECTION 27 — Remotion基礎

アニメーション — useCurrentFrame / interpolate / spring

07 / 28

useCurrentFrame

現在のフレーム番号を返すフック。これを使ってフレームに応じた値を計算する。

const frame = useCurrentFrame();
// frame: 0, 1, 2, ... durationInFrames-1

interpolate — 線形補間

フレーム範囲を指定して値を線形補間。フェードインやスライドに使う。

const opacity = interpolate(
  frame,
  [0, 30], // フレーム範囲
  [0, 1], // 出力値範囲
  {extrapolateRight: 'clamp'}
);

spring — バネ物理アニメーション

自然なバネ物理でアニメーション。ポップイン・スケールアニメーションに最適。

const scale = spring({
  frame,
  fps: 30,
  config: {
    damping: 100,
    stiffness: 200,
  },
});
auto_awesome
組み合わせパターン: interpolateでフェード、springでポップイン。この2つで大半のアニメーションが実現できる。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 8 / 28

SECTION 27 — Remotion基礎

テキスト・画像・動画の配置

08 / 28
text_fields

テキスト

通常のReactでHTMLを書けばそのまま使える。絶対座標・Flexboxどちらも対応。

<AbsoluteFill>
 <div style={{
  fontSize: 80,
  color: 'white',
  opacity,
 }}>
  Hello World
 </div>
</AbsoluteFill>
image

画像

Remotionの<Img>コンポーネントを使うと画像読み込みを確実に待機してからレンダリングされる。

import {Img, staticFile}
 from 'remotion';

<Img
 src={staticFile('bg.png')}
 style={{width: '100%'}}
/>
smart_display

動画

レンダリングには<OffthreadVideo>を使う。<Video>はプレビュー用（ブラウザ依存でガタつく場合あり）。

import {OffthreadVideo,
 staticFile} from 'remotion';

<OffthreadVideo
 src={staticFile(
  'clip.mp4')}
/>
folder
静的ファイル（画像・動画・音声）は public/ フォルダに配置し、staticFile('ファイル名') でパスを解決する。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 9 / 28

SECTION 27 — Remotion基礎

レンダリング — npx remotion render

09 / 28

基本コマンド

# 基本レンダリング
npx remotion render

# コンポジションIDを指定
npx remotion render MyVideo out/video.mp4

# 並列レンダリング（高速）
npx remotion render --concurrency=4

# 品質指定（crf: 低いほど高品質）
npx remotion render --crf=18

出力形式

  • MP4（H.264）— デフォルト
  • WebM（VP8/VP9）
  • GIF — --codec gif
  • ProRes — macOS向け高品質
  • PNG連番 — 後処理用

レンダリング時間の目安

動画の長さ M1 Mac目安
10秒約20秒
30秒約1分
3分約5〜10分
rocket_launch
Lambda並列レンダリング: Remotion Lambdaを使うとAWS Lambda上で並列レンダリングが可能。100フレームを100並列で処理し、大幅な時間短縮が実現できる。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 10 / 28

VOICEVOX 連携

テキストからナレーション音声を自動生成する

SECTION 27 — VOICEVOX連携

VOICEVOX API — テキスト → 音声変換の仕組み

11 / 28

音声生成の2ステップAPI

1

audio_query — 発音情報を取得

テキストと話者IDを渡すと、読み上げ方・アクセント情報を含むJSONが返る

2

synthesis — WAVを生成

audio_queryの結果をそのままPOSTするとWAVファイルが返ってくる

Python import requests, json

# Step1: audio_query
query = requests.post(
  "http://localhost:50021/audio_query",
  params={"text": "こんにちは", "speaker": 8}
).json()

# Step2: synthesis → WAV
wav = requests.post(
  "http://localhost:50021/synthesis",
  params={"speaker": 8},
  json=query
).content
open("output.wav", "wb").write(wav)

Remotionへの音声組み込み

import {Audio, staticFile} from 'remotion';

// 音声ファイルをコンポーネントに配置
<Audio
  src={staticFile('narration.wav')}
  startFrom={0}
/>
volume_up
VOICEVOXで生成したWAVファイルをpublic/フォルダに配置し、AudioコンポーネントでRemotionに組み込む。音声タイミングはstartFrom（フレーム数）で制御。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 12 / 28

SECTION 27 — VOICEVOX連携

キャラクター選択 — 話者ID一覧と使い分け

12 / 28
話者ID キャラクター名 声の特徴 推奨用途 スタイル
1 四国めたん（ノーマル） やや高め・明るい 一般解説・案内 ノーマル
3 ずんだもん（ノーマル） 明るい・子供っぽい エンタメ・教育動画 ノーマル
8 春日部つむぎ 落ち着いた女性 ビジネス解説・研修 ノーマル
11 玄野武宏 落ち着いた男性 ビジネス・ナレーション ノーマル
20 もち子さん やわらかい女性 講師役・丁寧な解説 ノーマル
47 冥鳴ひまり 深みのある女性 ドラマ・シリアス ノーマル
lightbulb
全話者IDは GET http://localhost:50021/speakers で取得可能。スタイル（あまあま・ツンツン等）はキャラクターごとに異なり、同じAPIパラメータで切り替えられる。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 13 / 28

SECTION 27 — VOICEVOX連携

GASからVOICEVOX — 自動ナレーション生成

13 / 28

ワークフロー概要

table_chart スプレッドシートにナレーション原稿を入力
↓
code GAS: 原稿を行ごとに読み込んでJSON生成
↓
record_voice_over Python: JSON → VOICEVOX API → WAVファイル
↓
movie Remotion: WAV + 映像 → 完成動画

narration.jsonの形式

JSON [
  {
    "scene": 1,
    "text": "こんにちは！",
    "audio_file": "narration_01.wav",
    "speaker_id": 8,
    "speed": 1.15
  }
]
spellcheck
英語用語はカタカナに変換してVOICEVOXに渡すと読み上げ精度が向上する。
例: Remotion → リモーション、React → リアクト、API → エーピーアイ
© LCREATOR.Inc Google AI 研修プログラム — Section 27 14 / 28

量産パイプライン

データ駆動型動画で100本を自動生成する

SECTION 27 — 量産パイプライン

テンプレート設計 — データ駆動型動画

15 / 28

コンセプト

動画の構造（テンプレート）と内容（データ）を分離することで、データを差し替えるだけで量産が可能になる設計パターン。

// props でデータを受け取る
type Props = {
  title: string;
  audioFile: string;
  backgroundImage: string;
};

export const VideoTemplate: FC<Props>
= ({title, audioFile, backgroundImage}) => ...

inputPropsでデータ注入

# コマンドラインからデータ注入
npx remotion render VideoTemplate \
  out/video_01.mp4 \
  --props='{"title":"商品A","audioFile":"01.wav"}'

# JSONファイルを使う場合
npx remotion render VideoTemplate \
  out/video_01.mp4 \
  --props=./data/01.json
loop
シェルスクリプトのループでデータファイルを順番に渡すだけで100本を一括レンダリングできる。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 16 / 28

SECTION 27 — 量産パイプライン

JSON → 動画の自動生成フロー

16 / 28
description scenario.json
データ定義
→
record_voice_over VOICEVOX
音声生成
→
image Firefly / Gemini
画像生成
→
code Remotion
レンダリング
→
movie 完成MP4
動画ファイル

generate.py — 一括実行スクリプト

python3 generate.py \
  --scenario scenario.json \
  --output ./my-video \
  --title "商品紹介動画" \
  --speaker-id 8 \
  --speed 1.15

各ステップのスキップオプション

  • --skip-images — 画像生成スキップ
  • --skip-audio — 音声生成スキップ
  • --skip-render — 動画出力スキップ
  • --image-only — 静止画版のみ生成
© LCREATOR.Inc Google AI 研修プログラム — Section 27 17 / 28

SECTION 27 — 量産パイプライン

Veo 3.1連携 — AI動画素材の生成

17 / 28

Veo 3.1とは

Google Vertex AIが提供するAI動画生成モデル。テキストプロンプトまたは参照画像から動画クリップを生成し、Remotionの素材として組み込める。

JSON {
 "instances": [{
  "prompt": "Animated manga style...",
  "image": {"bytesBase64Encoded": "..."}
 }],
 "parameters": {
  "durationSeconds": 8,
  "aspectRatio": "16:9"
 }
}

Veo 3.1 重要仕様

項目 仕様
モデルIDveo-3.1-generate-preview
出力解像度720p / 24fps
最大長8秒（画像→動画）
Remotion fps設定24fps必須（30だとガタつき）
warning
Veo生成動画はRemotionと互換性がない場合があるため、ffmpegでH.264/yuv420pに再エンコードしてからpublic/に配置すること。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 18 / 28

SECTION 27 — ハンズオン

ハンズオン: 簡単な紹介動画を作成する

18 / 28
課題

Remotion + VOICEVOXで「自己紹介10秒動画」を制作する。テキストが中央に表示されながら音声ナレーションが流れる動画を完成させる。

1

Remotionプロジェクトを作成

npm create video@latest hello-video

2

VOICEVOXでナレーション音声を生成

「こんにちは、AIクリエイターです！」をWAV生成してpublic/に配置

3

コンポーネントを編集

テキストのフェードイン + Audioコンポーネントで音声を追加

4

npx remotion render で書き出し

out/hello.mp4 として完成動画を確認する

サンプルコンポーネント

export const HelloVideo = () => {
 const frame = useCurrentFrame();
 const opacity = interpolate(
  frame, [0, 30], [0, 1],
  {extrapolateRight: 'clamp'}
 );
 return (
  <AbsoluteFill style={{
   background: '#1a1a2e',
   justifyContent: 'center',
   alignItems: 'center',
  }}>
   <Audio src={staticFile('narration.wav')} />
   <h1 style={{color:'white', opacity}}>
    こんにちは！
   </h1>
  </AbsoluteFill>
 );
};
school
追加課題: springアニメーションで文字がバウンスしながら表示されるエフェクトを追加してみる。
© LCREATOR.Inc Google AI 研修プログラム — Section 27 19 / 28

Section 27 まとめ

Remotion × VOICEVOXで「コードで動画を量産する」スキルを習得。
AIとReactの力を組み合わせ、動画制作を自動化できる。

技術スタック
React+
VOICEVOX
量産スケール
100本
コマンド1発で
AI連携
Veo 3.1
Gemini
次のセクション
28
まとめとロードマップ
arrow_forward Section 28 — まとめと今後のロードマップ
🏠 研修ポータル ▶ この章の動画 📺 動画一覧