AfterEffectsは不要です。Reactのコードを書くだけで、プロ品質のモーショングラフィック動画をローカルで生成できます。

この記事でわかること：

  • RemotionがどんなOSSで何ができるか
  • CodexのGPT-5.5でRemotionのアニメーションコードを自動生成する方法
  • プロジェクト作成から動画書き出しまでの基本的な流れ
  • 実際に使えるユースケースと料金の考え方

RemotionはReactで動画を作るOSSフレームワーク

https://www.remotion.dev/

RemotionはReactコンポーネントをフレーム単位でレンダリングし、MP4やWebMとして書き出すOSSフレームワークです。GitHubリポジトリは44,000以上のスターを獲得しており、開発者コミュニティで広く使われています。

仕組みはシンプルです。「フレーム番号を受け取り、Reactで何かを描く」という関係があるだけです。useCurrentFrame() フックでフレーム番号を取得し、その値に応じてスタイルや表示内容を変化させることでアニメーションが成り立ちます。

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill
      style={{ justifyContent: "center", alignItems: "center", fontSize: 100 }}
    >
      Frame: {frame}
    </AbsoluteFill>
  );
};

動画には width、height、fps、durationInFrames の4つのプロパティがあります。これらを <Composition> コンポーネントに登録すれば、Remotion Studioからプレビューを確認しながら開発できます。

他の動画編集ツールと根本的に違う点は、すべてをコードでパラメータ化できることです。テキスト・画像・ブランドカラーを変数として持てば、1つのテンプレートから何百本ものパーソナライズ動画を自動生成できます。

アニメーション実装の壁をCodexが崩す

Remotionでアニメーションを実装するには、CSSアニメーションのeasing関数やフレーム計算の知識が必要です。慣れていないと、思ったような動きを実現するまでに時間がかかります。

ここでOpenAIのCodexが力を発揮します。

https://developers.openai.com/codex/cli

CodexはOpenAIが提供するAIコーディングエージェントです。ターミナルまたはアプリから利用でき、指定ディレクトリのコードを読み取り・変更・実行する能力を持ちます。2026年4月23日にリリースされたGPT-5.5を搭載しており、GPT-5.5はGPT-4.5以来初めて完全に再トレーニングされたベースモデルです。複雑なコーディングや研究ワークフローにおいてGPT-5.4を明確に上回る性能が確認されています。

Remotionの公式ドキュメントはCodexをはじめとするAIコーディングエージェント向けに最適化されており、「Agent Skills」としてスキルファイルを提供しています。このファイルをCodexに読み込ませることで、GPT-5.5がRemotionのAPI仕様やベストプラクティスを把握した状態でコード生成を実行します。

セットアップから動画生成まで

前提条件: Node.js 16以上、macOS 15以降またはLinux（glibc 2.35以上）、ChatGPT有料プラン（CodexでのGPT-5.5利用に必要）

プロジェクトを作成する

npx create-video@latest

対話形式でテンプレートを選択できます。初めて使う場合は「Hello World」テンプレートが無難です。プロジェクト作成後、npm run dev でRemotionスタジオを起動します。

CodexにRemotionプラグインをセットアップする

Remotion公式ドキュメントの「Agent Skills」ページを開き、スキルファイルをCodexのプロジェクトに追加します。このステップでGPT-5.5がRemotionのコンポーネント仕様を学習した状態になります。

Codexにアニメーションを指示する

プロジェクトディレクトリでCodexを開き、自然言語で指示します。

"テキストが左からスライドインして表示される5秒のアニメーションを作ってください"

Codexがコードを生成・編集し、Remotionスタジオで即座にプレビューを確認できます。修正も同様に自然言語で指示するだけです。

実際に使えるユースケース

ブランドアセット動画: ロゴのアニメーションやSNS用動画バナーの制作。デザインデータをReactコンポーネントとして表現し、CodexにCSSアニメーションを追加させる流れが効率的です。

BGM付きモーション動画: RemotionはAudioコンポーネントを標準で備えており、音楽ファイルのタイミングに合わせた映像を生成できます。音楽のビートとビジュアルを同期させる実装もCodexに任せられます。

パーソナライズ動画の量産: 顧客名・商品名・画像URLをpropsとして渡す設計にすれば、同一テンプレートから大量のユニーク動画を自動生成できます。ECサイトやSaaS企業が個別の顧客向け動画を出力するケースで実際に活用されています。

ライセンスと料金

Remotionのライセンスは利用規模によって異なります。個人・3人以下のチームは無料で商用利用を含む全機能を使えます。4人以上のチームはCompany Licenseが必要で、クリエイター向けは月$25/席から、SaaS・自動化向けは月$100（レンダリングあたり$0.01の従量制）となります。

CodexはChatGPT有料プランのユーザーが利用できます。GPT-5.5はAPIキー認証では使えず、ChatGPTアカウントでのログインが前提です。

Reactエンジニアが動画制作に参入する入口

RemotionはAfterEffectsのような専門ツールを学ぶコストなしに、Reactの知識をそのまま動画制作に活かせる点が強みです。CodexのGPT-5.5と組み合わせると、アニメーション実装の試行錯誤にかかる時間が大幅に短縮されます。個人・3人以下のチームなら無料で始められるため、まずHello Worldテンプレートを動かしてみるところから試せます。