Claude Code × Codex を1つの知識基盤で動かす実装ガイド【2026年版】
ルミィ
AIの歩き方
Remotionとは？コードで動画を作るReactフレームワーク入門
ルミィ
動画を作るといえば、編集ソフトを開いて、素材を並べて、テロップを1枚ずつ置いて……という作業を思い浮かべると思います。その常識を裏返すのが、今回紹介する「Remotion（リモーション）」。一言でいうと、動画を「コードで」作るためのReactフレームワークです。
「同じ形式の動画を何本も作る」「データから動画を自動生成する」という場面で、編集ソフトとはまったく違う強さを発揮します。実は当サイトの解説動画づくりでも、VOICEVOXの音声と組み合わせて実際に運用しているツールです。
この記事では、Remotionの仕組み、編集ソフトとの違い、できること、料金、始め方を初心者向けに整理します。
「動画をプログラミングする」って最初は変な感じだけど、量産・自動化の世界では最強の発想だよ。
Remotionとは？
Remotionは、スイスのRemotion AGが開発するオープンソースの動画制作フレームワークです。Webサイト作りで広く使われる「React」の書き方そのままで、動画の画面を記述します。
発想はシンプルです。動画とは、静止画（フレーム）を1秒間に30枚ほど連続で見せるパラパラ漫画。Remotionでは「いまが何フレーム目か」を受け取って、その瞬間の画面をコードで描きます。これを全フレーム分つなげれば、動画の完成です。
仕組みは3ステップ
- ①Reactで画面を書く：「フレーム番号がnのとき、こういう見た目」というコンポーネントを書く
- ②フレームごとに描画：Remotionがブラウザ（Chrome）で1フレームずつ画面を撮影
- ③動画に書き出し：撮影したフレームをつなげてMP4などの動画ファイルに
コードの中心になるのがuseCurrentFrame()です。雰囲気だけ、最小の例を見てください。
import { useCurrentFrame } from "remotion";
export const Title = () => {
const frame = useCurrentFrame(); // いま何フレーム目？
const opacity = Math.min(1, frame / 30); // 30フレームかけてフェードイン
return (
<h1 style={{ opacity }}>こんにちは、Remotion！</h1>
);
};「フレーム番号から見た目を計算する」——これがRemotionのすべてです。文字も図形も画像も音声も、この仕組みの上に乗っています。
編集ソフトと何が違う？
PremiereやCapCutが「悪い」わけではありません。得意分野が根本的に違うのです。
| 編集ソフト（GUI） | Remotion（コード） | |
|---|---|---|
| 作り方 | 手で素材を並べる | コードで画面を記述する |
| 得意なもの | 1本を感性で作り込む | 同じ型の動画を量産する |
| 修正 | 1本ずつ手直し | コード1か所直せば全部に反映 |
| データ連携 | 手作業で差し替え | CSV・JSONから自動生成できる |
| 管理 | プロジェクトファイル | Gitでバージョン管理できる |
たとえば「毎週同じフォーマットの解説動画」「100商品ぶんの紹介動画」「成績データから1人ずつ違う動画」——こういう仕事は、編集ソフトでは苦行ですが、Remotionならテンプレート1つとデータの差し替えで済みます。
Remotionでできること
- 字幕つき解説動画の量産：台本と音声データから、字幕・場面切り替えを自動で組み立てる
- データドリブン動画：ランキング・グラフ・成績表など、データから動画を生成
- SNS動画の一括生成：同じデザインでテキストだけ違う動画を何十本も
- アプリへの組み込み：Webアプリ内で動画プレビュー（Player）や、クラウドでの自動レンダリング（Lambda）
当サイトでは、VOICEVOXで作ったナレーション音声に合わせて、字幕や画面をRemotionで組み立てる——という流れで解説動画を作っています。「音声の長さに合わせて字幕が切り替わる」ような同期も、コードなら正確に制御できます。
AI時代に強い理由
Remotionの画面は「ただのReactコード」です。つまり、AIにコードを書かせる今の開発スタイルとそのまま噛み合います。
- 「タイトルが下からスライドインするコンポーネントを書いて」とAIに頼める
- 公式がLLM向けのシステムプロンプトを配布しており、AIにRemotionを書かせる使い方を公認
- Claude CodeのようなAI開発エージェントと組み合わせると、「動画テンプレートの改修」まで任せられる
AIエージェントでの開発に興味があれば、Claude Codeの使い方もあわせてどうぞ。「AIがコードを書き、コードが動画を作る」——この連鎖がRemotionの面白さです。
料金・ライセンス｜個人は無料で商用OK
- 無料：個人、および従業員3人以下の企業（商用利用も可）
- Company License：従業員4人以上の企業は有料ライセンスが必要（月100ドル〜・開発者シート制）
※ライセンス条件は変わることがあります。業務利用の前に、必ず公式のライセンスページで最新の条件を確認してください。
始めるには
Node.jsが入っていれば、コマンド1行でテンプレートつきのプロジェクトが作れます。
npx create-video@latest- ①プロジェクト作成：上のコマンドでテンプレートを選んで作成
- ②Remotion Studioでプレビュー：ブラウザ上で動画をリアルタイム確認しながら編集
- ③レンダリング：コマンドでMP4に書き出し
Reactが初めてだと最初は戸惑いますが、テンプレートを少しずつ書き換えるところから始めれば大丈夫です。AIに「ここをこう変えて」と頼みながら進めるのが、いまどきの近道です。
向いている人・向いていない人
- 向いている：同じ形式の動画を繰り返し作る人／データから動画を作りたい人／動画制作を自動化したい人／コード管理（Git）に価値を感じる人
- 向いていない：1本ものの映像作品をじっくり作り込みたい人（編集ソフトの方が速い）／コードに一切触れたくない人
「1本の傑作」は編集ソフト、「100本の定型」はRemotion。混ぜて使うのが正解だよ。
まとめ
Remotionは、Reactのコードで動画を作るフレームワークです。フレーム番号から画面を計算するというシンプルな仕組みの上で、テンプレート化・データ連携・自動化という編集ソフトにはない強みを発揮します。
動画＝パラパラ漫画。フレームごとの画面をコードで描く。
1本を作り込むなら編集ソフト、同じ型で量産するならRemotion。
個人は無料・商用OK。npx create-video@latestで今日から試せる。
よくある質問（FAQ）
Remotionは無料で使えますか？
A. 個人と従業員3人以下の企業は無料で、商用利用もできます。それ以上の規模の企業はCompany License（有料）が必要です。条件は変わることがあるため、公式ライセンスページで最新情報を確認してください。
プログラミング初心者でも使えますか？
A. ReactとJavaScriptの基礎があるとスムーズですが、テンプレートを書き換えるところから始められます。AIにコードを書いてもらいながら進める方法とも相性が良いツールです。
編集ソフト（PremiereやCapCut）の代わりになりますか？
A. 用途によります。1本の映像をじっくり作り込むなら編集ソフトが向いています。Remotionが強いのは、同じ形式の動画の量産、データからの自動生成、制作フローの自動化です。
動画生成AI（Seedanceなど）とは何が違いますか？
A. 動画生成AIは「映像そのものをAIが生成する」ツールです。Remotionは「決めたデザインを正確に動画化する」フレームワークで、字幕・図解・テロップなど再現性が必要な動画に向いています。役割が違うため、組み合わせて使えます。
あわせて読みたい
参考・一次ソース
- Remotion公式サイト（remotion.dev）／The fundamentals
- Remotion License（remotion.dev/docs/license）
※本記事は2026年6月時点の公式ドキュメント・公開情報をもとに整理しています。ライセンス・機能は変わることがあるため、最新情報は公式サイトでご確認ください。
ChatGPT・Gemini・Claudeなどの会話AI、画像生成AI、動画生成AI、資料作成AI、AI検索ツールを初心者向けに解説するAIナビゲーター。実際に使ってみた感想や、仕事・学習・発信に役立つAI活用法をわかりやすく紹介しています。
