Remotionはreactコンポーネントをレンダリング済み動画ファイルに変換する。タイムラインでクリップをドラッグする代わりに、JSXを書き、コンポジションを定義し、コマンドラインからMP4をエクスポートする。skills.shで126,000以上のインストールを記録し、グローバル第4位のエージェントスキルであり、プログラマティック動画分野で最も人気のスキルだ。
HUB記事: 動画制作スキルの全体像は2026年ベスト動画制作エージェントスキルを参照。
何が作れるか
Remotionスキルをインストールすると、AIエージェントが以下のコードを生成できる:
- アニメーションスクリーンショットとブランドトランジション付きプロダクトデモ
- JSONやAPIデータから駆動されるデータビジュアライゼーション動画
- テキストオーバーレイとキャプション付きSNSクリップ（Shorts、Reels、TikTok形式）
- モーショングラフィックスとステップバイステップ表示のアニメーション解説
- ブランドカラー、フォント、ロゴ配置が統一されたマーケティング動画
関連: プロンプトトランスレーターで多言語動画スクリプトを作成、動画ツールキットスキルも参照。
Remotionスキルとは
RemotionはReactベースのオープンソース動画フレームワーク。動画シーンをReactコンポーネントとして定義し、フレーム番号でタイミングを制御、MP4・WebM・GIFとして出力する。
Remotionエージェントスキルは28のモジュラールールファイルで構成される。インストールすると、エージェントが以下の知識を得る:
- 9つのコンポーネントパターン（シーケンス、シリーズ、静止画、音声、動画、シェイプ、テキスト、IFrame、GIF）
- 7つのトランジションタイプ（フェード、スライド、ワイプ、フリップ、クロックワイプ、カスタム）
- アニメーションプリミティブ（スプリング物理、補間、フレームベースキーフレーム）
- 音声統合（BGM、ナレーションタイミング、ボリューム制御）
- 音声ファイルからのキャプション生成
- Three.js連携による3Dレンダリング
- デプロイ・レンダリング設定（Lambda、Cloud Run、ローカルCLI）
npx skills add remotionClaude Code、Codex CLI、Cursorに対応。
主な機能
アニメーションとモーション
spring()関数とinterpolate()ユーティリティで物理ベースのスムーズなモーションを実現。
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({
frame,
fps,
config: { damping: 12, stiffness: 200 },
});フェードイン、スライドイン、スケールアップ、リストのスタガード表示、終了アニメーションなどの一般パターンをカバー。
キャプションとテキスト
@remotion/install-whisper-cppパッケージで音声からキャプションを生成。ワードレベルのタイムスタンプ抽出、アニメーション字幕オーバーレイ、キャプションのスタイリングに対応。
音声統合
- ビジュアルトランジションとオーディオビートの同期
- 複数音源のレイヤリング（ナレーション + BGM + 効果音）
- トラック別ボリューム制御
- シーン境界での音声フェード
トランジション
| トランジション | 効果 | 最適な用途 |
|---|---|---|
| フェード | 不透明度クロスフェード | シーン切り替え全般 |
| スライド | 水平/垂直プッシュ | 連続コンテンツ |
| ワイプ | 方向性のある表示 | ビフォーアフター比較 |
| フリップ | 3Dカード回転 | 機能紹介 |
| クロックワイプ | 円形スイープ | カウントダウン |
| カスタムスプリング | 物理ベースの動き | ブランドモーション |
| なし | ハードカット | テンポの速いモンタージュ |
Remotion vs 従来の動画編集
| 項目 | Remotion | Premiere/DaVinci | CapCut |
|---|---|---|---|
| 再現性 | 決定的、毎回同一出力 | 手動、エディターにより変動 | テンプレート限定 |
| バージョン管理 | Git完全対応 | 差分が読めない | なし |
| バッチ生成 | データから100バリアント | 手動、1つずつ | 限定的 |
| 学習曲線 | React + TypeScript必要 | タイムライン編集スキル | 低い |
| コスト | 無料（OSS） | $20〜55/月 | 無料枠+有料プラン |
Remotion vs AI動画ジェネレーター
Remotionを選ぶ場合:
- 数十〜数百のバリアント（ローカライズ、データ駆動、A/Bテスト）
- ブランド一貫性が重要でデザインシステム通りの全フレーム
- データ駆動コンテンツ（ダッシュボード、レポート）
- バージョン管理とCI/CDが必要
AIジェネレーターを選ぶ場合:
- コードで作れない有機的・フォトリアリスティックなビジュアル
- 一点もののクリエイティブ作品
- テキストプロンプトからコーディング不要で完成クリップ
両方を組み合わせる: AIジェネレーターで映像素材を生成し、Remotionでアセンブリ、ブランディング、テキストオーバーレイ、トランジション、最終構成を行う。SeedanceやKlingでAIクリップを生成し、Remotionプロジェクトにインポートするのが最強のワークフロー。
ベストプラクティス
- コンポジションをモジュラーに。 シーンごとに1コンポーネント、1ファイル。
staticFile()ヘルパーを使用。 相対パスではなくRemotionの静的ファイルシステムを利用。- FPSと解像度を一箇所で設定。 コンポジションレベルで定義し全体で参照。
- Remotion Studioでテスト。
npx remotion studioでリアルタイムプレビュー。 - レンダーをキャッシュ。 変更のないフレームの再レンダリングを回避。
- 動画プロジェクトをGitで管理。 Remotionプロジェクトはコードなので、差分がレビュー可能。
FAQ
Remotionエージェントスキルとは？
28のモジュラールールファイルで構成され、AIコーディングエージェントに正しいRemotionコードの書き方を教える。npx skills add remotionでインストール。
Reactの経験は必要？
基本的なReactとTypeScriptの知識があれば理解とカスタマイズが容易。エージェントスキルがRemotion固有のパターンを処理する。
RemotionとFFmpegの違いは？
RemotionはReactコンポーネントから動画を生成。FFmpegは既存動画ファイルの処理（トリミング、エンコード、変換）。両者は補完的。ffmpeg-editingスキルとの組み合わせが効果的。
クラウドレンダリングは可能？
Remotion Lambda（AWS）やCloud Run（GCP）でサーバーレスレンダリングに対応。スキルにはクラウドレンダリング設定ルールも含まれる。
Remotionは無料？
個人と3人未満の企業は無料。3人以上の企業はライセンスが必要。スキル自体は無料。
