【2026年最新】Remotion × Claude Codeで動画自動生成｜Agent Skills完全ガイド

「Claude Codeで動画が作れるようになった」

2026年1月20日、動画制作ライブラリRemotionの公式Xアカウントが投稿した一文に、開発者界隈がざわついた。

Remotionは、Reactで動画を作れるオープンソースのフレームワークだ。今回、Claude Codeの「Agent Skills」機能に対応したことで、プロンプトを打つだけで動画が生成できるようになったという。

本当にそんなことができるのか？実際に試してみた。

目次

1. Remotion × Claude Code とは
2. Remotionの基礎知識
3. Agent Skillsの仕組み
4. ライセンスと料金
5. セットアップ手順
6. 実際に動画を作ってみた
7. プロンプトテクニック集
8. Remotionの強みと限界
9. トラブルシューティング
10. 代替ツールとの比較
11. どんな用途に向いている？
12. 2026年1月 最新アップデート
13. まとめ

1. Remotion × Claude Code とは

Remotionってなに？

Remotionは、ReactとTypeScriptを使って動画を作成できるフレームワークだ。After EffectsやPremiere Proのような動画編集ソフトを使わず、コードだけで動画を生成できる。

通常の動画編集では、タイムラインにクリップを配置して、キーフレームを打って…という作業が必要になる。Remotionは違う。Reactコンポーネントを書けば、それがそのまま動画になる。

Agent Skillsへの対応

今回、RemotionがClaude CodeのAgent Skillsに対応した。Agent Skillsとは、Claude Codeに特定の機能を追加できる拡張システムだ。

これにより、Claude Codeに「こういう動画を作って」と伝えるだけで、Remotionのコードを自動生成し、動画をレンダリングできるようになった。

2. Remotionの基礎知識

実際に使う前に、Remotionの基本を押さえておこう。

Remotionとは何か

Remotionは、2021年にJonny Burger氏が開発したオープンソースの動画制作フレームワークだ。「React + TypeScriptで動画を作る」という発想で、プログラマーに新しい動画制作の選択肢を提供した。

従来の動画編集との違い

Remotionが選ばれる理由

なぜRemotionを使うのか？主な理由は3つある。

3. Agent Skillsの仕組み

2026年1月、RemotionがClaude CodeのAgent Skillsに対応した。これが何を意味するのか、技術的に解説する。

Agent Skillsとは

Agent Skillsとは、AIエージェント（Claude Code、Codex、Cursorなど）に「特定のフレームワークの使い方」を教える仕組みだ。

簡単に言うと、「説明書をAIに読ませる」ようなもの。Remotion Skillsをインストールすると、Claude Codeは以下を理解するようになる：

インストール方法

Remotion Skillsのインストールは1コマンドで完了する。

# 既存プロジェクトに追加
npx skills add remotion-dev/skills

# 新規プロジェクト作成時（自動で選択肢が出る）
npx create-video@latest

インストール後、Claude Codeを起動するだけで自動的にSkillsが読み込まれる。

MCP（Model Context Protocol）との関係

Agent SkillsはMCP（Model Context Protocol）に準拠している。MCPとは、AnthropicがAIと外部ツールの連携を標準化するために策定したプロトコルだ。

対応AIツール

• Claude Code（Anthropic）— 最も推奨
• Codex CLI（OpenAI）— 対応済み
• Cursor（Cursor Inc.）— 対応済み
• その他のMCP対応ツール

4. ライセンスと料金

Remotionは無料で使えるが、企業利用には注意が必要だ。

無料で使えるケース

企業ライセンスの料金

従業員4人以上の企業は、有料ライセンスが必要になる。

ライセンス購入方法

1. remotion.proにアクセス
2. プランを選択
3. クレジットカードで決済
4. 請求書は自動発行

アップグレード、ダウングレード、解約はセルフサービスで可能。営業担当とのやり取りは不要だ。

5. セットアップ手順

実際にやってみよう。手順は驚くほどシンプルだ。

Step 1: プロジェクトの作成

まず、Remotionのテンプレートプロジェクトを作成する。

npx create-video@latest my-video

対話式のプロンプトが表示されるので、「Hello World」テンプレートを選択。依存関係のインストールが完了すれば準備完了だ。

Step 2: Claude Codeで動画を作る

あとはClaude Codeに指示を出すだけ。

「かっこいいモーショングラフィックスを作って。グラデーション背景、パーティクル、テキストアニメーションを入れて」

Claude CodeがReact/TypeScriptのコードを生成し、Remotionがそれを動画にレンダリングする。

6. 実際に動画を作ってみた

では、実際に作った動画を見てほしい。

作成した動画

お使いのブラウザは動画再生に対応していません。

Claude Codeに「かっこいいモーショングラフィックスを作って」と指示して生成した動画

この動画の特徴

• 回転するグラデーション背景（シアン→パープル→ピンク）
• 浮遊するパーティクル（50個の光の粒子）
• スプリングアニメーションで登場するタイトル
• グロー効果（脈動する光）
• 伸びるライン装飾
• 広がる円形アニメーション

これがプロンプト一発で作れる。所要時間は、コード生成からレンダリング完了まで約1分。

生成されたコードの一部

参考までに、生成されたコードの一部を紹介する。

// パーティクル生成
const particles = Array.from({ length: 50 }, (_, i) => ({
  id: i,
  x: Math.random() * 100,
  y: Math.random() * 100,
  size: Math.random() * 4 + 2,
  speed: Math.random() * 0.5 + 0.3,
}));

// メインタイトルのアニメーション
const titleProgress = spring({
  frame: frame - 20,
  fps,
  config: { damping: 15, stiffness: 100 },
});

const titleScale = interpolate(titleProgress, [0, 1], [0.3, 1]);
const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);

RemotionのAPIを使って、フレーム単位でアニメーションを制御している。Reactを書ける人なら、すぐに理解できるコードだ。

7. プロンプトテクニック集

Claude Code × Remotionで効果的な動画を作るためのプロンプト例を紹介する。

基本のプロンプト構造

効果的なプロンプトは以下の要素を含む：

プロンプト例5選

よくある失敗と対策

8. Remotionの強みと限界

実際に使ってみて感じた、Remotionの強みと限界を正直に書く。

強み

限界

9. トラブルシューティング

Remotionでよく遭遇するエラーと解決法をまとめた。

1. レンダリングが遅い

# 並列数を増やす
npx remotion render --concurrency=4

# Remotion Lambdaを使う（クラウドレンダリング）
npx remotion lambda render

2. タイムアウトエラー

// 悪い例
const handle = delayRender();
fetch(url).then(data => setData(data));
// continueRender()がない！

// 良い例
const handle = delayRender('Fetching data...');
fetch(url)
  .then(data => {
    setData(data);
    continueRender(handle); // これが必要
  });

3. useStateが使えない

// 悪い例
const [opacity, setOpacity] = useState(0);

// 良い例
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);

4. CSSアニメーションが動かない

5. Lambdaでチラつきが発生

10. 代替ツールとの比較

Remotionと他の動画生成ツールを比較する。

動画生成ツールの分類

まず理解すべきは、Remotionと Sora/Runway は別カテゴリのツールということだ。

Remotion vs Sora vs Runway

どれを選ぶべきか

11. どんな用途に向いている？

Remotion × Claude Codeの組み合わせが活きる場面を考えてみた。

向いている用途

向いていない用途

• 実写風のリアルな映像 → Runway / Sora がおすすめ
• 複雑なキャラクターアニメーション → After Effects がおすすめ
• 長尺のストーリー動画 → 従来の動画編集ソフトがおすすめ

12. 2026年1月 最新アップデート

Remotionの最新動向をまとめた。

Agent Skills 正式リリース（2026年1月）

価格改定

2026年初頭に企業ライセンスの価格が改定された：

• Developer License: $15/月 → $25/月
• 最低料金: 新設 $100/月（または$1,000/年）

既存ユーザーは旧価格が継続適用される。

今後のロードマップ

公式から明示されているわけではないが、コミュニティでは以下が期待されている：

• より多くのAIツールへのSkills対応
• Remotion Studioの機能強化
• Lambda以外のクラウドレンダリングオプション

13. まとめ

Claude Code × Remotionで動画を作ってみた結果、わかったことをまとめる。

正直なところ、「誰でも簡単にプロ品質の動画が作れる」というレベルではない。あくまでプログラマブルなモーショングラフィックスのツールだ。

ただ、ロゴアニメーションやデータビジュアライゼーションなど、特定の用途では非常に強力。コードで動画を管理できるという点は、開発者にとって大きなメリットだと感じた。

興味がある人は、ぜひ一度試してみてほしい。セットアップから動画生成まで、10分もあれば体験できる。

関連リンク

• Remotion公式サイト
• Remotionライセンス情報

関連記事

• ▶ Claude Code 完全攻略ガイド｜ハッカソン優勝者が明かす本当の使い方
• ▶ Claude CodeでDaVinci Resolveを自動操作！無料版で検証した動画編集AIの可能性
• ▶ Claude完全ガイド【2026年最新】｜Claude 4.5・Cowork・Microsoft Copilot統合を徹底解説