Claude CodeでRemotionの動画を自動生成する方法｜Reactで作るAI動画入門
Remotionを使ってみたいけど、Reactのアニメーションコードを一から書くのが大変…と感じていませんか？
Claude Code（AnthropicのAI搭載CLIツール）と組み合わせることで、テキストで指示するだけでRemotionのコードが自動生成され、動画制作の手間を大幅に削減できます。
この記事で得られること：
- Remotionの基本的な仕組みと導入手順
- Claude CodeをRemotionに組み合わせる具体的な方法
- 実際のプロンプト例と生成コードのサンプル
- ハマりやすい落とし穴と回避策
Remotionとは何か
RemotionはReactで動画をプログラマブルに生成するフレームワークです。各フレームがReactコンポーネントとして定義され、CSSアニメーションやJavaScriptの数値計算でアニメーションを制御します。 特徴：- Reactの知識だけで動画を作れる
- データから自動でグラフアニメーション動画を生成できる
- MP4・WebM・GIFでレンダリング可能
- サーバーサイドレンダリング（Lambda等）にも対応
Claude Codeとは何か
Claude Codeは、Anthropicが提供するAIエージェント型のCLIコーディングツールです。プロジェクトのファイルを読み込み、指示を与えるだけでコードの生成・編集・実行まで自律的に行います。 詳しいインストール手順はこちら：Claude Code のインストール方法【完全ガイド】 Remotionとの相性が特に良い理由：- コンポーネント構造を理解してアニメーションロジックを生成できる
interpolate()やspring()などRemotionのAPIを使いこなせる- 「フェードインを追加」「タイミングを0.5秒遅らせて」などの自然言語指示に対応
- エラーが出たら自分でログを確認して修正できる
セットアップ手順
1. Remotionプロジェクトを作成する
Node.js 18以上が必要です。以下のコマンドでプロジェクトを初期化します。npx create-video@latestcd my-video
npm install
npx remotion studionpx remotion studioを実行すると http://localhost:3000 でプレビュー画面が開きます。
2. Claude Codeをインストールする
Claude Codeのインストールがまだの場合は、以下の記事を参照してください。 Claude Code のインストール方法【完全ガイド】npm install -g @anthropic-ai/claude-code
claude3. RemotionプロジェクトでClaude Codeを起動する
cd my-video
claudeClaude CodeでRemotionコンポーネントを生成する方法
基本的な使い方
Claude Codeに対して日本語で指示するだけです。例えば：「タイトルテキストが下からフェードインして表示されるコンポーネントを作ってください。
フォントは太字、白文字、背景は紺色にしてください」interpolate()やuseCurrentFrame()を使ったコードを生成します。
生成されるコードの例：
import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';
export const TitleCard: React.FC = ({ title }) => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
const translateY = interpolate(frame, [0, 20], [40, 0], {
extrapolateRight: 'clamp',
});
return (
{title}
);
};効果的なプロンプトのコツ
Claude Codeへの指示を工夫するだけで、生成コードの品質が大幅に変わります。 フレーム数・タイミングを具体的に伝える：「30fpsで、0〜15フレームで左から右へスライドイン、
15〜45フレームで表示、45〜60フレームでフェードアウトするテキストを作って」「src/TitleCard.tsxと同じスタイルで、箇条書きリストをアニメーション表示する
コンポーネントを作って。各項目が0.3秒ずつ遅延して表示されるようにして」「外部からJSONデータを受け取って、棒グラフがニョキニョキ伸びる
アニメーションを生成するコンポーネントを作って」ハマりやすい落とし穴
RemotionとClaude Codeを組み合わせる際によく遭遇する問題と解決策です。 落とし穴1: interpolateの範囲外エラーinterpolate()のフレーム範囲が動画の総フレーム数を超えるとエラーになります。Claude Codeに「extrapolateLeft: 'clamp', extrapolateRight: 'clamp'を必ず付けて」と指示しておくと安全です。
落とし穴2: フォントがレンダリング時に反映されない
Remotion Studioでは表示されるのに、レンダリング結果に特定のフォントが出ないことがあります。staticFile()でフォントを明示的に読み込む必要があります。Claude Codeに「Remotionのstaticファイルとしてフォントを読み込む処理を追加して」と伝えましょう。
落とし穴3: Compositionのdurationが短すぎる
デフォルトのdurationInFramesが短いと、生成されたアニメーションが途中で切れます。Claude Codeに「アニメーションが完全に終わるまでの適切なdurationInFramesも合わせて設定して」と伝えると解決します。
実際に動画を生成してみる
プレビューで確認できたらレンダリングします。npx remotion render src/index.ts MyComposition out/video.mp4「以下のエラーが出ました。修正してください。
Error: Cannot read property 'map' of undefined at...」活用シーンとユースケース
- SNS動画の量産：商品紹介や告知動画をデータから自動生成
- プレゼン動画：スライド内容をJSONで渡してアニメーション化
- データビジュアライゼーション：売上推移などをグラフアニメーションに変換
- チュートリアル動画：手順テキストから説明動画を自動生成
よくある質問
Q1. RemotionはAfter EffectsやPremiereの代替になりますか？
完全な代替にはなりません。手動で細かくアニメーションを調整したい場合は専用ツールが優位です。Remotionは繰り返し量産する動画や、データドリブンな動画生成に特に向いています。Claude Codeと組み合わせることで、コーディングのハードルを下げながら活用できます。Q2. Claude Codeを使うと完全自動で動画ができますか？
コード生成は自動化できますが、プレビューで意図通りかを確認する工程は必要です。「イメージと違う」と感じたらその場でClaude Codeに修正を指示することで、数往復で完成に近づけられます。Q3. Remotionのレンダリングはどのくらい時間がかかりますか？
ローカル環境では30秒の動画で1〜5分程度が目安です（PCのスペックによる）。Remotion LambdaやRemotionクラウドを使えばGPUで並列処理ができ、数十秒に短縮できます。Q4. TypeScriptは必須ですか？
必須ではありませんが、Remotionの型定義が充実しているためTypeScriptの使用を強く推奨します。Claude Codeも型情報を参考にしてより正確なコードを生成できます。Q5. 生成した動画は商用利用できますか？
Remotion自体は商用利用可能ですが、Remotion Playerを含む一部機能はライセンス購入が必要なケースがあります。用途に応じて公式ライセンスを確認してください。まとめ
RemotionとClaude Codeを組み合わせることで、動画生成の工程を大幅に効率化できます。ポイントをまとめると：- Remotionはプログラマブルに動画を生成できるReactフレームワーク
- Claude Codeはプロジェクト全体を読んだ上でアニメーションコードを生成してくれる
- フレーム数・タイミング・スタイルを日本語で具体的に伝えると精度が上がる
- エラーはそのままコピペして渡すだけで修正してくれる
extrapolateRight: 'clamp'やフォント読み込みなど定型の落とし穴は事前にプロンプトに入れておく
npx create-video@latestでプロジェクトを作り、Claude Codeで「タイトルがフェードインするコンポーネントを作って」と試してみてください。