Remotionで動画を組み立てる｜テロップ・音・書き出し
生成AIで作ったカットをRemotionで30秒の広告に組み立てた工程を、実際のコード・素材・書き出しにかかった時間と、途中で直したところまで説明します。
RemotionはReactのコードで動画を組み立て、手元のパソコンでMP4に書き出せるツールです。生成AIで作ったカットを並べ、文字・図・音を重ねる工程に向いています。生成AIは画面の文字を崩しやすいので、文字をコードで描けることが一番の利点です。
この記事では、FablessBridgeが2026年10月14日に作った30秒の自社制作サンプル「旅する豆箱」（架空のコーヒー豆の定期便）を例に、素材の置き方・コード・書き出しまでを実際の数値とともに説明します。30秒（900フレーム）の書き出しは約31秒でした。
Remotionで組み立てる前に用意した素材と環境
- 映像
- 動画生成AIの5秒カット5本（1920×1080・24fps）
- 音
- 音楽30秒1曲と効果音4種（ElevenLabs）
- 環境
- Mac（Apple Silicon）、Node.js 24、Remotion 4.0.532
- 書き出し
- 1920×1080・30fps・H.264
実写風のカットはHiggsfieldで作りました。作り方と候補の選び方は制作ノートの記事「Higgsfieldの使い方」にまとめています。
動画と音のファイルはRemotionのプロジェクトの public フォルダに置き、コードからは staticFile('c1.mp4') のように名前で読み込みます。画面の文字は素材に含めず、すべてコードで重ねる方針にしました。
構成をコードにする：Compositionとカットの並び
動画全体の大きさ・フレームレート・長さは Composition で決めます。各カットの開始フレームと長さは配列にまとめ、台本の秒数をそのままフレームに直しました。
<Composition id="CoffeeAd" component={CoffeeAd}
durationInFrames={900} fps={30} width={1920} height={1080} />
// use は生成動画（5秒）のうち使う秒数
const CUTS = [
{src: 'c1.mp4', from: 0, len: 150, use: 3.6, text: '毎月ちがう国から'},
{src: 'c2.mp4', from: 150, len: 150, use: 5, text: '今月はエチオピア'},
{src: 'c3.mp4', from: 300, len: 180, use: 5, text: '花のような香りの浅煎り'},
{src: 'c4.mp4', from: 480, len: 180, use: 5, text: '高地の畑で摘んだ豆'},
{src: 'c5.mp4', from: 660, len: 120, use: 4, text: '朝の一杯が旅になる'},
];生成したカットはすべて5秒ですが、台本では6秒のカットや4秒のカットもあります。そこで「元の動画の何秒分を使うか」を use に書き、カットの長さに合うように再生速度を計算しました。6秒のカットは約0.83倍でゆっくり再生しています。
{CUTS.map((c) => (
<Sequence key={c.src} from={c.from} durationInFrames={c.len + 12}>
<OffthreadVideo src={staticFile(c.src)} muted
playbackRate={(c.use * 30) / c.len} />
</Sequence>
))}テロップと図をコードで描く
テロップは1文字ずつ下から浮かび上がるようにしました。Remotionの spring で文字ごとに少しずつ遅らせ、カットの終わりの18フレームで消しています。書体はMacに入っているヒラギノ明朝を指定しました。書き出すパソコンにない書体は別の書体に置き換わるので、ほかの環境で書き出すときは書体ファイルを読み込む必要があります。
{[...text].map((ch, i) => {
const s = spring({frame: frame - 14 - i * 3, fps, config: {damping: 200}});
return <span style={{opacity: s, transform: `translateY(${(1 - s) * 24}px)`}}>{ch}</span>;
})}産地の畑のカットには、エチオピアから日本へ点線の弧が伸びる図をSVGで重ねました。地図の形は描かず、2つの点と弧だけで「遠くから届く」ことを示しています。弧の伸び方は interpolate で0から1の値を作り、表示する範囲を少しずつ広げています。
音楽と効果音をフレーム単位で配置する
音楽は Audio で全体に流し、最初の15フレームで音量を上げ、最後の30フレームで下げています。効果音は Sequence の開始フレームで位置を決め、箱を取り出す・袋を開ける・湯を注ぐ・一口飲むの4か所に置きました。
書き出した動画の音量は-17.5 LUFS、最大は-2.7 dBFSでした。音量の数値は書き出したあとにffmpegで測っています。
<Audio src={staticFile('music.mp3')}
volume={(f) => interpolate(f, [0, 15, 870, 900], [0, 0.85, 0.85, 0])} />
<Sequence from={310}>
<Audio src={staticFile('sfx/pour.mp3')} volume={0.5} />
</Sequence>Remotionの書き出しにかかった時間と最初の準備
書き出しはコマンドの代わりに、Node.jsから @remotion/bundler と @remotion/renderer を呼ぶスクリプトにしました。コードをまとめ（bundle）、構成を選び（selectComposition）、MP4に書き出す（renderMedia）の3段階です。
最初の書き出しでは、Remotionが書き出し用のブラウザ（Chrome Headless Shell、93.5MB）を自動でダウンロードしました。2回目からはダウンロードせずに書き出せます。30秒・900フレームの書き出しは仮の版が約34秒、完成版が約31秒で、ファイルは約28MBでした。
const serveUrl = await bundle({entryPoint: 'src/index.ts', publicDir: 'public'});
const composition = await selectComposition({serveUrl, id: 'CoffeeAd'});
await renderMedia({composition, serveUrl, codec: 'h264', crf: 18,
outputLocation: '../final/coffee-30s.mp4'});仮の書き出しから直したところ
仮の書き出しをフレームごとに見て、次の3点を直しました。
- 01冒頭のカットを作り直したところ、3.8秒あたりから手が消えて箱に崩れた文字が出た。崩れる前の3.6秒だけを使い、0.72倍でゆっくり再生して5秒にした
- 02地図に入れた「約11,000km」は根拠を確かめていない数字だったので消した
- 03地名のラベルが小さく背景の山に埋もれたので、文字を大きく太くして影を付けた
生成AIのカットに問題があっても、使う範囲と速さをコードで変えれば作り直さずに済む場合があります。数字や地名のように確かめが必要な文字は、コードで描いたあとも人が見て判断します。
Remotionを使う前に確認しておくこと
- 01利用条件：個人と従業員3人までの会社は無料で使え、それより大きい営利の組織には有料のライセンスが必要（Remotion 4.0.532 のライセンス文書による）
- 02書体：書き出すパソコンにある書体が使われるので、環境を変えるときは書体を読み込む
- 03最初の書き出し：書き出し用のブラウザが自動でダウンロードされる
- 04素材：生成した動画の尺やフレームレートが違っても、使う秒数と再生速度をコードで合わせられる
生成AIで作ったカットの選び方と作り直しは「Higgsfieldの使い方」の記事に、Claude Codeに制作を任せるときの進め方は「Claude CodeでAI動画を作る」の記事にまとめています。
制作のご相談
企画が固まっていない段階からご相談いただけます。
お問い合わせ料金と制作の流れを見る
