Remotionで解説動画を作りました — 台本1ファイルからフルHDのMP4が出るまでと、その仕組み

書き出したのは、転職の進め方を説明する1本の動画です。1920×1080、30fps、1分43秒、ファイルサイズは約31MBになりました。フレーム数にすると3,090枚です。中身は12シーンで、タイトル、動機の3分類、労力の配分、5ステップのロードマップ、各ステップの詳細が5枚、スケジュールのガントチャート、よくある失敗、まとめ、という構成です。

画面のレイアウトは8種類用意しました。タイトル、横並びカード、横棒グラフ、番号付きロードマップ、大きな番号と箇条書き、ガントチャート、対比表、エンディングです。台本側で種類を選ぶと、対応するレイアウトが割り当てられます。

作業はすべてClaude Codeに指示して進めました。空のフォルダにRemotionを入れるところから、シーンのコンポーネントを書き、静止画で文字あふれを確認し、本番のレンダリングを回すまでです。私が書いたコードは1行もありません。

Remotionは、動画編集ソフトのタイムラインの代わりに、コードを映像の設計図にするツールです。処理の流れはこうなっています。まず台本のデータからReactのコンポーネントが組み上がり、そこにいま何フレーム目かが渡されて画面ができます。ヘッドレスChromeがその画面を1フレームずつ画像にして、最後にFFmpegがMP4へ結合します。FFmpegはRemotionに同梱されているので、別途入れる必要はありません。

今回の動画では、この画像化が3,090回走りました。並列数は設定ファイルで4に指定していて、Chromeのタブが4つ同時に別々のフレームを担当します。初回の実行時にはChrome Headless Shellのダウンロードが挟まるので、そこだけ余計に時間がかかります。

動画を書き出すコマンドを打つと、内部ではまずesbuildでReactがバンドルされ、ローカルにサーブされます。その状態のページをChromeが順番に開いて撮っていく、という順序です。ブラウザで見えるものがそのまま動画になるので、CSSでできる表現はほぼそのまま使えます。

動画編集ソフトなら、0秒の位置に不透明度0、0.7秒の位置に不透明度100、というキーフレームを置きます。Remotionではその代わりに、フレーム番号を受け取って見た目を返す関数を書きます。0フレーム目から20フレーム目にかけて透明から不透明にしたいなら、interpolateという関数にその範囲を渡すだけです。バネの動きが欲しいときはspringを使います。

この書き方の効き目は、同じフレーム番号なら必ず同じ結果が返るところにあります。乱数も時計も使っていないので、何度書き出しても1バイト単位で同じ動画が出ます。書き出しの途中で失敗しても、途中から作り直しても、前と食い違うことがありません。

もうひとつ効いてくるのが、レイアウトが計算で決まることです。丸を5つ等間隔に並べる、帯の長さを月数から出す、といった配置を全部コードで書いているので、項目が4つになっても6つになっても手で並べ直す必要がありません。台本の配列に1つ足すだけで、間隔が自動で詰まります。

内容を変えたいときに触るのは、台本のファイル1つだけです。映像側のコードには手を入れません。台本は配列になっていて、1要素が1シーンに対応します。シーンごとに、使うレイアウトの種類、秒数、章のラベル、見出し、箇条書き、画面下のテロップを書きます。

秒数の合計がそのまま動画の尺になります。8秒のシーンを10秒に変えれば、その分だけ動画が長くなり、後ろのシーンの開始位置も自動でずれます。フレーム数を自分で計算する場面はありません。

テロップに書いた文章は、そのまま読み上げ原稿としても使える形にしてあります。今回の動画に音声は入れていませんが、あとでナレーションを足すときにここをコピーすれば済みます。

解像度は動画の定義側で指定します。今回のプロジェクトには、フルHD、720p、4K、そして縦型の4つを登録してあります。中身は1920×1080を基準に作っておいて、実際の出力サイズとの比率を計算して全体を拡大縮小する構造にしました。おかげで、台本もシーンのコードも一切変えずに、4つとも同じ内容で書き出せます。

使い分けとしては、確認のときは720p、本番はフルHD、素材として残すなら4K、ショート用なら縦型、という具合です。書き出しのコマンドで、どの定義を使うかを名前で指定します。コマンドラインから倍率を上書きする方法もあり、内部を2倍の解像度で描いてから縮めると、輪郭がきれいに出ます。

フレームレートも同じ場所で決まります。30fpsを60fpsにしても尺は変わらず、書き出すフレーム数が倍になるだけです。コーデックもコマンドで切り替えられるので、H.264以外の形式も選べます。

実際に回してみて効率がよかった順序は、構成と秒数をざっくり決める、台本を書く、Studioでプレビューする、静止画で細部を確認する、720pで試写する、本番を書き出す、という流れです。

この中で効くのが4番目の静止画です。文字があふれていないか、余白が詰まりすぎていないかを見るだけなら、動画を丸ごと書き出す必要はありません。フレーム番号を指定して1枚だけ画像にすれば、数秒で確認できます。実際、今回のシーンの確認はほとんどこれで済ませました。この記事に載せている画面写真も、同じ方法で書き出したものです。

台本を書くときのコツも見えてきました。1シーンに1つのことしか言わせないこと、箇条書きは3つまでにすること、秒数はテロップの文字数を8で割って2秒足すあたりが目安になること、の3つです。詰め込みたくなったらシーンを増やしたほうが結果的に見やすくなります。

Remotionは誰でも自由に使えるツールではないので、ここは先に確認しておいたほうがいい部分です。公式のライセンスページによると、個人と3人以下の会社は無料ライセンスの対象で、全機能が使えて商用利用にも制限がありません。サインアップも不要です。ただし組織が大きくなったらアップグレードが必要だと明記されています。

4人以上の会社や共同作業では有料ライセンスになります。用途によって2つに分かれていて、動画を自動生成するプロダクトを作る場合はレンダリング数に応じた課金、社内で手作業で動画を作る場合は人数に応じた課金です。さらに上のプランもあります。

個人でYouTubeやSNS向けの動画を作るぶんには無料の範囲に収まりますが、条件は変わりうるので、実際に使う前に公式のライセンスページを自分で確認してください。この記事の内容は2026年9月時点のものです。

使ってみて、向いているのは中身が構造化できる動画だと感じました。手順の解説、数字の比較、スケジュールの説明のように、同じ形のスライドを内容だけ変えて量産するタイプです。台本を差し替えれば同じ品質の動画が何本でも出るので、シリーズものとは相性がいいはずです。

逆に、実写の編集や、1カットずつ感覚で詰めていく作品には向きません。カットのつなぎを目で見ながら調整する作業は、タイムラインを持つ動画編集ソフトのほうが速いです。今回のように図と文字だけで構成する解説動画だったから成立した、という面はあります。

最後に、この動画は台本もデザインもコードもAIが生成したものです。私がやったのは、何についての動画を作るかを決めることと、出てきたものを確認することだけでした。動画の中身は一般的なキャリア情報を整理したもので、統計データではありません。労力の配分を示した棒グラフには、イメージ図である旨を画面内に明記しています。