Remotionは、動画をプログラムで作るための仕組みです。
普通の動画編集ソフトでは、タイムライン上に動画、画像、テキスト、音声を並べて編集します。Remotionでは、それに近いことをコードで行います。
ここで出てくる「コード」という言葉に身構える必要はありません。CodexのRemotionプラグインを使う場合、ユーザーが最初からコードを書くことが目的ではありません。チャットで指示するだけで、CodexがRemotion側の構成を直して、動画を書き出します。
つまり、Remotionそのものは「動画をコードで作る仕組み」ですが、Codexと組み合わせると「チャットで動画制作を進めるための土台」として使えます。
ReactとTypeScriptも使われる
Remotionの説明では、ReactやTypeScriptという言葉が出てきます。
Reactは、画面を小さな部品に分けて作るための仕組みです。Webサイトやアプリの画面作りでよく使われます。
Remotionでは、このReactの考え方を動画に使います。
たとえば、動画の中に次のような部品があるとします。
- タイトル画面
- 字幕
- ナレーションの音声
- 画像カード
- 動くグラフ
- 場面転換
これらを部品として分けて作り、動画の時間に合わせて表示します。
TypeScriptは、JavaScriptの仲間です。間違いに気づきやすくするための仕組みが入っています。動画制作で言えば、設定ミスや名前の間違いに気づきやすくなるため、同じ型の動画を何本も作るときに役立ちます。
初心者にとって大事なのは、ReactやTypeScriptを最初から覚えることではありません。
大事なのは、Codexに頼むと、裏側ではこうした仕組みを使って、動画の部品を正確に組み立てている、ということです。
Remotionプラグインでできること
Remotionプラグインでできることは、単に「動画を1本書き出す」だけではありません。
動画の構成、文字、画像、音声、字幕、アニメーションを組み合わせて、再利用しやすい動画制作の流れを作れます。
動画やアニメーションを作れる
プロンプトで指示した内容をもとに、タイトル画面、説明シーン、カード演出、図解、場面転換などを組み合わせた動画を作れます。
今回のサンプル動画では、次のような要素を入れました。
- 大きなタイトル
- チャットから動画が組み上がる図解
- タイムラインに素材が並ぶ演出
- TTSの説明シーン
- SNS動画、データ解説、対話型編集の活用例
- ナレーションに合わせた字幕
カードを置くだけではなく、素材を1つずつ出したり、グラフを動かしたり、音声に合わせて画面を切り替えたりできます。
音声読み上げを組み込める
TTSも動画制作では重要です。
TTSは、Text to Speechの略です。文章を音声に変える仕組みのことで、下記の様なTTSのサービスがあります。。
- OpenAI TTS
- VOICEVOX
- ElevenLabs
- Gemini speech generation
OpenAI TTSは、Codex作業と組み合わせやすく、説明ナレーションにも使いやすいです。
VOICEVOXは、日本語のキャラクター音声を使いたいときに向いています。解説動画にキャラクター性を出したい場合に相性がよさそうです。
ElevenLabsは、自然なナレーションや多言語音声の候補になります。声の種類や自然さを重視したい動画で試したい音声エンジンです。
Gemini speech generationは、今回のサンプルで使用しましたが、音声がかなり自然でした。特に英字を過度にネイティブ発音せず、日本語ナレーションの流れに合う形で読んでくれたのが印象的でした。
Remotionでは、こうした音声ファイルを動画に配置し、音声の長さに合わせてシーンの長さや字幕を調整できます。
グラフやデータ解説動画を作れる
Remotionは、動くグラフやチャートとも相性が良いです。
たとえば、統計データを使って、
- 棒グラフが伸びる
- 折れ線グラフが進む
- 数値カードが切り替わる
- 比較表が順番に出る
といった解説動画を作れます。
これは、通常の動画編集ソフトで手作業するとかなり面倒です。
しかしRemotionでは、データをもとに画面を作れるため、毎月のレポート動画、SNS用の数字解説、プレゼン用の短い動画などに展開しやすくなります。
小さく頼んで、見て、直せる
CodexとRemotionを組み合わせる一番のメリットは、対話しながら作れることです。
最初から完璧な指示を出す必要はありません。
たとえば、今回も次のような調整を何度も行いました。
- 字幕を太くする
- フォントを変える
- 文字間を詰める
- 背景を明るくする
- 小さい説明文字を削る
- ナレーションと字幕のタイミングを合わせる
- シーンごとの見出しを大きくする
これは、従来の動画編集で言えば、編集者に横で指示を出しながら直してもらう感覚に近いです。
ただし相手はCodexなので、「この文字をもっとYouTubeっぽく」「この説明は字幕と重なるから消して」など、自然な言葉で頼めます。
具体的な活用例
今回のサンプル動画では、特に次の3つを活用例として出しました。
SNS用のショート動画量産
YouTube ShortsやTikTok向けの短い動画を、テキスト指示から作れます。
たとえば、商品紹介、ニュース要約、豆知識、ランキング、キャンペーン告知のような動画です。
ショート動画は、同じ型で何本も作ることが多いです。
タイトル、字幕、背景、画像、ナレーションの型を作っておけば、内容だけを差し替えて量産しやすくなります。
これはRemotionの得意分野です。動画をコードとして管理できるため、同じテンプレートから別パターンを作りやすいからです。
データ解説動画の作成
統計データやグラフを使った動画にも向いています。
たとえば、売上推移、ユーザー数、ランキング、アンケート結果、SNS分析などです。
数字だけを見せると硬くなりがちですが、グラフを動かしながらナレーションで説明すると、視聴者に伝わりやすくなります。
プレゼン資料の一部を動画化したいときにも使えます。
プログラミング不要の動画編集
Remotion自体はコードで動画を作る仕組みです。
しかし、Codexのプラグインとして使う場合、ユーザーがコードを直接書けることは必須ではありません。
「字幕を大きく」「この文字を消す」「このシーンの見出しを目立たせる」のように、チャットで頼みながら進められます。
今回の制作でも、実際に細かいフォント調整、字幕タイミング、ナレーション差し替え、シーン内の文字整理を、対話形式で進めました。
これは、動画編集ソフトを覚える前に、まず動画を作ってみたい人にとって大きな入口になります。
HyperFramesとの違い
HyperFramesとRemotionは、どちらもCodexのプラグインでチャットだけで動画制作を進められますが、向いている場面が少し違います。
HyperFramesは、最初の形を早く作りやすい
HyperFramesは、動画の構成、見た目、アニメーションを一気に形にするのが得意です。
「こういう雰囲気の動画を作りたい」と頼んで、まず見える形にするまでが速いです。
今回のYouTube紹介動画でも、HyperFramesではカード演出、場面転換、はめ込み動画、ナレーション付きの構成まで作れました。
ラフを作る、見た目の方向性を探る、SNS向けの短い動画をまず1本出す、という段階ではかなり使いやすいです。
一方で、細かい音声差し替えや終端処理では注意もありました。音声の末尾に違和感が出たり、終了画像が点滅して見えたりする場面があり、最終的には細かい調整が必要でした。
Remotionは、再利用できる制作環境を作りやすい
Remotionは、最初にプロジェクトや素材フォルダ、音声、字幕の扱いを整える必要があります。
そのぶん、一度仕組みを作ると再利用しやすくなります。
今回のRemotion側では、次のような流れを作りました。
- シーンごとにナレーション音声を用意する
- 音声の長さをもとに動画尺を決める
- SRT字幕を読み込む
- 字幕をナレーションに合わせる
- 画像、カード、グラフ、場面転換を配置する
- MP4を書き出す
- loudnormでYouTube向けの音量に整える
このように、制作工程を部品化しやすいのがRemotionの強みです。
ショート動画を何本も作る、同じ型でデータ解説動画を作る、音声エンジンを差し替えて比較する、といった運用に向いています。
HyperFramesとRemotionの違い
「Remotion」はReact（JavaScript/TypeScript）を使うのに対し、HeyGenが公開した「HyperFrames」はHTMLとCSSを使って動画を組み立てます。どちらもテキストで指示して動画を作るという点では共通していますが、得意分野や仕組みに違いがあります。
HyperFramesは、動画のアイデアをすぐ形にしたいときに向いています。
Remotionは、同じ品質で何度も作れる動画制作パイプラインを作りたいときに向いています。
| 観点 | HyperFrames | Remotion |
|---|---|---|
| ベースとなる言語 | HTML + CSS + JS | React (JSX / TSX) |
| 得意分野 | WebサイトやLPの見た目をそのまま動画化すること | テロップやUIの細かい動き・グラフのアニメーション |
| Codexとの相性 | エージェントネイティブ（LLMが最も得意なHTML） | 高機能だが、Codexが複雑なReactコードを書く必要がある |
| 作り方 | プロンプトから一気に形にしやすい | シーンや素材を部品として組み立てる |
| 向いている動画 | ラフ、作例、短い紹介動画、HPを動画にする | シリーズ動画、テンプレート動画、データ解説 |
どちらが上という話ではありません。
Remotionは、要素をコードで管理できるため、テンプレート化や量産に向いています。
Codexと組み合わせれば、ユーザーはチャットで要望を伝えながら、動画の見た目や構成を少しずつ整えられます。
動画編集ソフトを覚えてから始めるのではなく、まずCodexに頼んで形にして、見ながら直していく。
Remotionプラグインは、その流れを作るためのかなり面白い選択肢です。
この動画もCodexとRemotionで制作しました。
