動画編集もAIに任せているという人をちらほら見かけます。
そういう人がよく使っているツールとして有名なのが「Remotion」です。
Reactのコードで動画を組み立てるツールで、AIエージェントに指示すれば、簡単なロゴアニメくらいなら自然言語だけでも作れるそうです。
今回はそのRemotionのインストールから起動、AIでロゴアニメを作ってMP4に書き出すところまでやってみたので、それを紹介します。
Remotionとは？普通の動画編集ソフトとの違い
Remotionは、Reactのコンポーネントとして動画を作り、MP4などに書き出せるツールです。
一般的な動画編集ソフトのようにタイムラインを手で並べるというより、画面や動きをコードで定義していくタイプのもの。
テキスト・画像・図形・アニメーションをデータに応じて自動生成しやすく、同じテンプレートから量産しやすいのが強みみたいです。
AIとの相性もよく、「こういう構成にしたい」「この場面で文字を出したい」と自然文で指示しながら作れます。
主な特徴：
- YouTube向けの簡単なテロップ動画
- SNS向けの短尺動画
- データ差し替えで複数本を自動生成する動画
- Web制作やReactに慣れている人の動画作成入門
前提：Node.jsを用意する
Remotionを使うには、前提としてNode.jsが必要です。
入っているか分からない場合は、ターミナルで次のコマンドを打つと確認できます。
node -v
npm -vバージョンが表示されればOKです。
まだ入っていない場合は、先にNode.js公式サイトからインストールしてください。
Remotionをインストールする
次のコマンドでRemotionの開発環境を作ります。
手順の途中でフォルダ名を決めて、その中にインストールされるので、ドライブ直下で実行しても問題ありません。
npx create-video@latest選択肢が出るので、とりあえずアニメーションサンプルが見られるHello Worldを選びます。
この名前でプロジェクトを作っていいか聞かれるので、良ければEnter、変えたければ任意の名前に直してください。
次にTailwind CSSを最初から入れるか聞かれます。
AIに聞いたら、こういうメリットがあるそうです。
- 余白・文字サイズ・配置・色をクラス名で素早く指定できる
- AIがレイアウト修正を出しやすい
- 見た目の試行錯誤が速い
AIに指示して使う前提だし、分からなくても任せられそうな気がしたので、とりあえずYesにしました。
次にAIエージェント用のスキルを入れるか聞かれます。
どういうスキルかはよく分かりませんが、ここもAIを使う前提なのでyesで進めます。
検出されたAIエージェントのスキルをまとめて入れるか、個別に選ぶかを指定します。
Recommended（推奨）と書いてあったので、とりあえず上を選びました。
そのスキルをどこに入れるか選びます。
globalはPC全体で使えるようにするものですが、不具合もある？ようなのでprojectの方がいいそうです。
1つの元データを共有して使うか、各パスに本体を複製して使うかを選びます。
これもRecommendedの方を選びました。
インストールしていいか聞かれるので、Yesで進めます。
完了するとこんな表示が出ます。
Get started〜が起動コマンド、To render〜がレンダリングのコマンドです。
最後のOpen in C:\WINDOWS\notepad.exe?は、権限がどうのこうので開けませんでした。
ただ、ここは開けなくても問題なく使えました。
Remotionを起動する
表示されたコマンドを順に実行します。
フォルダを移動して、依存をインストールして、起動するという流れです。
cd my-video
npm i
npm run devnpm run devを実行すると、ブラウザが勝手に開きます。
再生すると、Remotionで作れるアニメーションのサンプル（Remotion Studio）が確認できます。
あとはAIに「こんな動画にしたい」と指示を出していけば、ある程度はやってくれると思います。
AIエージェントでロゴアニメを作る
ここからはAIエージェントと連携して、ロゴアニメーションを作ってもらいます。
そのままmy-videoでフォルダを作ったので、これをCodex Appに追加します。
Codex App使ってますが、CLIとかでも問題ありません。
srcフォルダの中で動画ごとにプロジェクトを分けられるので、それも含めてロゴアニメ作ってもらうよう指示したら、なんかいろいろ作ってくれました。
このtsxというファイルが、メインファイルとアニメーションを構成するパーツみたいなものらしいです。
ブラウザを開いている場合は、そのままF5で反映されると思います。
ターミナルを消してしまった場合は、もう一度npm run devで起動してください。
CompositionsにAiaicreateLogoが追加され、こんなのを作ってくれました。
ただ、ちょっと音がなくて寂しかったので、音も付けてと指示してみました。
効果音ラボさんから「メニューを開く5」をお借りしています。
これでそれっぽいのができたので、出力するCompositionと出力先を指定してレンダリングします。
AiaicreateLogoというCompositionを、outフォルダにaiaicreate-logo.mp4で保存するコマンドです。
npx remotion render AiaicreateLogo out/aiaicreate-logo.mp4・できたもの
つまずきやすいポイント
初心者がひっかかりやすいところを、自分が試した範囲＋AIに聞いた範囲でまとめておきます。
- セットアップ最後のOpen in notepad?は、権限で開けないことがありますが、開けなくても使えます。
- プレビューが市松模様（チェック柄）のままになるときは、まだ何も配置されていないか、コードのエラーが多いみたいです。ターミナルのエラー表示を見てAIに渡すと直しやすいです。
- 「Rendered more hooks than during the previous render」のようなReactのhooksエラーが出ることもあるそうで、これもエラーごとAIに投げると直してくれることが多いとのこと。
- 日本語の文字が表示されない・崩れるときは、日本語フォントの読み込み設定が要るみたいです。ここもAIに「日本語フォントを使えるようにして」と頼むのが早そうです。
基本的に、詰まったらエラー文をそのままAIに渡す、で大体なんとかなる印象でした。
商用利用は無料？ライセンスの注意
仕事で使う場合はライセンスに少し注意が要ります。
公式によると、個人利用・従業員3名以下の営利企業・非営利団体などは無料で使えるとのこと。
従業員4名以上の営利企業で使う場合は、商用ライセンスの契約が必要になるそうです。
具体的な料金は公式の購入ページ側に案内があるので、会社で使う予定なら先に確認しておくのが安心です。
まとめ
一度この外側さえ作ってしまえば、素材を変えるだけでいろいろな動画が作れそうです。
それらを並べるのもAIに任せられそうだし、立ち絵の差分を用意すればYMM4みたいに口パクもできて、自然言語だけでもわりと自由に表現できそうでした。
一度作った演出は使い回せるそうなので、編集の効率化にもなりそう。
まだスキルは使いこなせていないし、外側作りで苦戦している部分もあるので、もう少しいじってみようと思います。
以上Remotionの使い方を紹介しました。
参考になれば幸いです。
