Remotionとは、Reactというプログラミング技術を用いて、プログラムから動画を生成できるフレームワークです。
プログラミングにて動画を作れるという特徴から「Antigravity」や「Claude Code」のようにコード生成に特化したAIツールと連携することで、高品質な動画を簡単に生成できます。
本記事では、Remotionのダウンロード方法から、Antigravityと連携してAIで動画編集する方法について詳しく解説します。
プログラミング未経験者でもわかりやすいように解説しているので、ぜひ参考にしてみてください。
Remotionとは
Remotionとは、Reactを活用してプログラムから動画を生成できるフレームワーク（ツール）です。
従来のAfter EffectsやPremiere Proのように、タイムライン上で素材を配置しながら手作業で編集するスタイルとは異なり、「動画をコードで記述する」という新しいアプローチを採用している点が大きな特徴です。
テキストや画像、アニメーション、音声といった要素をすべてコードで制御できるため、同じフォーマットの動画を何本も作る場合でも、デザインや動きを正確に再現できます。
近年特に注目されているのが、AIとの組み合わせです。AIに日本語でイメージや構成を伝えると、動画用のコードを生成してくれるため、それをRemotionに反映するだけで短時間に動画を制作できます。
このようにRemotionは、動画制作を「職人作業」から「仕組み化・自動化」へと変える可能性を持ったフレームワークです。大量の動画制作やデータ連動型コンテンツを作りたい人にとって、非常に相性の良い選択肢と言えるでしょう。
Remotionの料金プラン
Remotionの料金プランは以下のとおりです。個人で動画を作る場合は、無料で利用できるフリーライセンスで十分です。
| プラン | 対象 | 主な内容・特徴 | 料金 |
|---|---|---|---|
| フリーライセンス | 個人・最大3人までの小規模チーム | ・動画本数は無制限 ・商用利用可能 ・自社クラウドでのレンダリング利用可 ・チーム人数が増えた場合はアップグレード必須 | 無料 |
| カンパニーライセンス | 4人以上のチーム・企業向け | ・商用利用可能 ・自社クラウドでのレンダリング対応 ・優先サポート付き ・Muxクレジット 250ドル分付与 ・開発者人数に応じた課金 ・月1000回までのレンダリング枠を含む | 最低月額 100ドル （開発者1人あたり25ドル＋レンダリング枠10ドルなど） |
| エンタープライズライセンス | 高度な要件を持つ大規模企業 | ・カンパニープランの全機能を含む ・専用SlackまたはDiscordでのサポート ・月1回のコンサルティングセッション ・契約・請求条件のカスタマイズ可能 ・各種コンプライアンス書類の提供 ・機能要望の優先対応 ・Editor Starter 利用可能 | 月額 500ドル〜（要問い合わせ） |
Remotionのインストール（ダウンロード）方法
Remotionを動かすには「Node.js」をインストールする必要があります。まだ用意していない方は、以下の記事を参考にインストールしてみてください。
RemotionはPremiere Proなどの動画編集ツールと違い、コマンドプロンプト（Macだとターミナル）というコードを入力するツールを使ってインストールします。
Windowsの場合は、検索欄に「cmd」と入力して開きます。Macの場合は「ターミナル」と入力してみて下さい。
ターミナルを開いた後の作業は、以下の動画でも詳しく解説しています。
ターミナルが開いたら、Remotionに関する情報をまとめるフォルダを作ります。コマンドプロンプトで以下のコマンドを実行することで、フォルダを作成できます。
mkdir フォルダ名続いて「cd」というコマンドとフォルダ名を入力・実行して作成したフォルダ内に移動します。
cd フォルダ名フォルダ内に移動したら、いよいよRemotionをインストールします。以下のコマンドを実行してください。
npx create-video@latestすると、以下のような画面になります。
ここでは、デフォルトで設定されている「Hello World」のままで構いません。このままクリックしましょう。
続く質問の「Add TailwindCSS?」と「Add agent skills?」は「No」にします。キーボードの横↓で選択肢を変更できます。
続いて、以下のコマンドを順番に実行していきましょう。
npm inpm run devこの順番で実行すると、Remotionの動画編集画面がブラウザで表示されます。
これでひとまずインストールは完了です。
Remotionで動画編集する方法
Remotionで動画編集する前に、実際どこを見て動画が作られるのか確認しておきましょう。まず「npx create-video@latest」を実行して複数の質問に答えることで、プロジェクトフォルダに以下のフォルダ構造が作成されます。
この中から「src」をクリックすると「Hello World.tsx」というファイルがあります。
ここに書かれたコードを基準に、Remotionの動画が生成されています。
ではいよいよ、Antigravityを使て動画を生成・編集してみましょう。
RemotionとAntigravityで動画編集を高速化する方法
まずはAntigravityを開きます。まだダウンロードしていない方は、以下の記事が参考になりますよ。
Antigravityを開いたら、左上のメニュー欄から「ファイル」→「フォルダーを開く」の順番でクリックします。
先ほど作成したプロジェクトフォルダを選択します。
続いて、画面右にあるAIエージェントとのチャット欄に「このプロジェクトフォルダの内容を理解してください。」というプロンプトを入力・実行します。
これで、Antigravityが「Remotionのフォルダ構造とどこに何を配置すれば動画を生成できるのか」という構造を正確に理解できます。
フォルダ構造を理解する処理が終わったら、Hello Worldというテンプレート動画をAIで修正してみましょう。
以下のプロンプトを入力・実行してみて下さい。
ありがとうございます。 現在はHello Worldにスターターテンプレートがあるかと思います。そのテンプレートの動画を、Remotionの紹介動画に編集してみて下さい。 nano bananaを使って適時最適な画像を生成してください。
「implementation.plan.mdというファイルに動画を作成するプランを作成しました。」という返答が返ってきました。
プラン内容を確認し、問題なければ「OK！そのまま続けてください。」というチャットを返しましょう。
ちなみに、日本語での処理を希望する場合は「日本語で返答してください。」とAIに指示する方法が有効です。
処理の途中で、時折AIの方から処理を実行許可に関して質問してくることがあります。
今回は、動画を作る上で新しいフォルダを作成する許可を求めてきたので「Accept」をクリックします。
続いて、完成した動画をmp4にレンダリングする処理の許可を求めてきました。このように定期艇に来るので、基本的には「Accept」を押し続けるという対応でOKです。
どうやら動画生成が完了したようですね。
その下に「+59 -64」という表示があります。これは「新しく59のコードを追記し、64のコードを削除対象としている」ことを表します。
「Accept all」をクリックすると、この処理が一斉に実行されます。ここを実行しないとコードエラーで動画を上手く作れない可能性があるので「Accept all」をクリックしましょう。
コードの反映が終わったら、実際に作った動画をブラウザに表示してもらいます。
これもAntigravityで「実際に作った動画をブラウザで見せてください」と入力・実行するだけでAIが必要なコマンドを実行してくれます。
【実際にできた動画】
geminiに搭載されているNano bananaという画像生成機能で3つの画像を作り、それに合わせてテキストが表示される動画を生成できました。
今回は簡単なプロンプトで編集してみましたが、動画の構成やセリフなどを設定することで、より高精度な動画を日本語の指示だけで作成できます。
ぜひ、AntigravityとRemotionを使った動画編集の最初のステップとして参考にしてみてください。
コメント