🤖
Claude Code × Remotion — AIでビデオコードを生成するプロンプトテクニック
効果的なプロンプト構造と5つの実践プロンプト例でビデオ開発を加速
Claude CodeとRemotionを組み合わせるとビデオ開発速度を大幅に向上できます。
効果的なプロンプトの4要素
- 動画の種類: ロゴアニメーション、データビジュアライゼーションなど
- 視覚要素: 色、形、テキスト
- アニメーション: 動きの種類、タイミング
- 尺: 秒数、fps
プロンプト例5選
- ロゴアニメーション: フェードイン → スケールアップ+グロー、ダークグラデーション背景、3秒60fps
- データビジュアライゼーション: 棒グラフの段階的成長アニメーション、データ[100,250,180,320,280]
- タイプライターテキスト: 1文字ずつ表示+カーソル点滅
- トランジション: 左→右の斜めワイプ
- パーティクルエフェクト: 100個の浮遊する円のランダム移動
Tips: 具体的な数値（カラーコード、px、秒数）を含める、Remotion API名を直接言及、参考コードがあれば一緒に渡す。
動作フロー
1
ビデオ種類（ロゴ/データ/テキスト/トランジション/エフェクト）を明確に指定
2
カラーコード(#hex)、サイズ(px)、長さ(秒)、fpsなど具体的な数値を含む
3
アニメーション種類を明示: フェードイン、スケールアップ、springバウンス、ワイプなど
4
Remotion API（spring、interpolate、Sequence、Series）をプロンプトで直接言及
5
参考コードがあれば一緒に渡してスタイルの一貫性を確保
メリット
- ✓ 具体的なプロンプト → 即座に実行可能なRemotionコード生成
- ✓ プロンプトパターンをテンプレート化すればチーム内ビデオ開発の標準化
デメリット
- ✗ AI生成コードは必ず検証が必要: 存在しないAPIを生成する場合がある
- ✗ 複雑なインタラクションはプロンプトだけでは説明が難しい
ユースケース
Remotion初心者が素早くビデオプロトタイプを作りたい時
AIアシスタントと協業してビデオ開発速度を上げたい時