Claude Codeで動画が作れる！Remotion × AI の可能性を試してみた

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

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

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

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

目次

1. Remotion × Claude Code とは
2. セットアップ手順
3. 実際に動画を作ってみた
4. Remotionの強みと限界
5. どんな用途に向いている？
6. まとめ

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. セットアップ手順

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

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

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

npx create-video@latest my-video

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

Step 2: Claude Codeで動画を作る

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

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

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

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

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

作成した動画

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を書ける人なら、すぐに理解できるコードだ。

4. Remotionの強みと限界

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

強み

限界

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

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

向いている用途

向いていない用途

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

6. まとめ

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

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

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

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

関連リンク

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