～AIによる動画生成オートメーションの構築と実践～
本記事では、GoogleのAI開発環境「Antigravity」と、Reactベースの動画生成フレームワーク「Remotion」を連携させる「Agent Skills」について解説します。
非エンジニアの方にも概念が直感的に伝わるよう配慮しつつ、実務で即戦力となる技術仕様、導入フロー、そして高度なプロンプトエンジニアリングまでを網羅しました。
音声のみはこちら↓
【概念】Antigravity × Remotion Skill のアーキテクチャ
従来の課題：AIの「知ったかぶり」
これまで、AI（LLM）にRemotionのような専門的なライブラリのコードを書かせると、以下のような問題が頻発していました。
- ハルシネーション（幻覚）: 存在しない関数や古いAPIを使用する。
- 文脈の欠如: Remotion特有のファイル構成（
Root.tsxへの登録必須など）を無視する。
決策：実行可能な仕様書（Skill）の注入
この課題を解決するのが 「Remotion Skill（Agent Skills）」 です。
これは単なるテキストドキュメントではなく、Antigravity上のAIエージェントが読み取れる形式（Markdown + JSON）で構造化された「機能拡張パック」です。
- Antigravity: 実行環境（IDE + エージェント）。
- Remotion: 動画生成エンジン。
- Skill: 両者を繋ぐブリッジ。AIに対し、Remotionの「最新の仕様」「ベストプラクティス」「禁止事項」を強制的に学習（コンテキスト注入）させます。
【内部構造】Skillはどう機能しているのか
技術的な観点から、SkillがAIの挙動をどう変えるのかを解説します。
コンテキストウィンドウへの動的注入
ユーザーが npx skills add を実行すると、.antigravity/skills/remotion 等のディレクトリに定義ファイルが配置されます。
AIエージェントはプロンプトを受け取った際、必要に応じてこれらのファイルを参照（RAG: Retrieval-Augmented Generationの一種）し、自身の短期記憶に以下の情報をロードします。
- Definitions (定義): コンポーネント構造やAPIの正確な仕様。
- Patterns (実装パターン):
useCurrentFrame()やspring()といったコア関数の正しい使用例。 - Anti-Patterns (禁止事項): Reactの
useEffectを使った非同期処理など、動画生成においてバグの原因となる記述の禁止。
これにより、AIは「確率的な推論」ではなく「仕様書に基づいた実装」を行うようになります。
【導入】実務用セットアップフロー
ここでは、エラーを未然に防ぎ、最短で開発環境を整えるための手順を記述します。
Step 1: Antigravity 環境の初期化
Google Antigravity（または互換性のあるAI対応IDE）にて、Node.jsランタイムを選択しプロジェクトを作成します。
Step 2: Remotionプロジェクトの作成
ターミナルにて以下のコマンドを実行し、ベースとなるプロジェクトを生成します。
Bash
npx create-remotion@latest my-video-project
# プロンプトに従い、テンプレート（例: TypeScript / HelloWorld）を選択
cd my-video-project
Step 3: Skill のインストール（重要）
エージェントに知識をインストールします。
Bash
npx skills add remotion-dev/skills
※ 成功すると、エージェントのコンテキスト設定に remotion-dev が追加された旨が表示されます。これでAIはRemotionの専門家となりました。
【実装】Remotion Skillを活用した開発テクニック
Skill導入済みのAIに対して、どのような指示（プロンプト）を出せば高品質なコードが得られるか、具体的なテクニックを解説します。
キーワード駆動のプロンプト設計
Skill内のドキュメントを的確にヒットさせるため、以下の専門用語を意図的にプロンプトに含めます。
Interpolate: 数値の範囲変換アニメーションを指定する場合。Spring: 物理挙動に基づいた滑らかな動きを指定する場合。Sequence: タイムライン上の時間差表示を指定する場合。AbsoluteFill: レイアウト崩れを防ぐための絶対配置コンポーネント。
プロンプト例:
「
AbsoluteFillを使用して背景を白に設定し、テキストが画面下部から中央へspringアニメーションで登場するコンポーネントを作成してください。不透明度はinterpolateを用いて制御してください。」
Zod Schema による型安全性の確保
Remotionの強力な機能である「動的プロパティ（Props）」をAIに実装させる際は、バリデーションライブラリ zod の利用を明示します。
指示のテンプレート:
「以下の要件で動画コンポーネントを作成し、
src/Root.tsxに登録してください。
- Props定義:
zodスキーマを使用し、title(string),color(string) を定義。- Composition: IDは “TitleCard” とし、FHDサイズ、30fps、5秒で設定。」
これにより、AIは入力値の型チェックを含んだ堅牢なコードを生成します。
【応用】Programmatic Video（動画の自動生成）
個別の動画作成を超え、システム化・自動化を目指す場合の構成例です。
データドリブン動画生成
外部データ（JSON/CSV/API）に基づき、大量の動画を生成するパイプラインの構築です。
- データ取得スクリプト: Node.jsでAPIからデータを取得し、JSON化するスクリプトをAIに作成させます。
- レンダリングコマンド: Skillに含まれるCLI知識を活用し、以下のバッチ処理を記述させます。
Bash
# AIが生成するコマンド例
npx remotion render src/index.ts MyComp out/video.mp4 --props='{"title": "Hello", "color": "blue"}'
AIに対し「このJSONデータの各要素に対して、Remotionでレンダリングするループ処理を書いて」と指示するだけで、Skillが引数の渡し方（--propsの構文など）を補完し、正確なシェルスクリプトが出力されます。
【トラブルシューティング】2026年版
開発現場で発生しやすい問題とその解決策です。
- Q: 画像やフォントが読み込まれない
- 原因: Web標準のパス解決と、Remotionのレンダリング環境（Headless Chrome）のパス解決の不一致。
- 対策: AIに対し、「静的アセットは
public/ディレクトリに配置し、staticFile()関数を使ってパスを解決するようコードを修正して」と具体的指示を出します。
- Q: プレビュー動作が重い
- 原因: Reactの再レンダリング過多。
- 対策: 「重い計算処理は
useMemoでキャッシュし、レンダリングパフォーマンスを最適化して」と指示します。
- Q: 生成されたコードが非推奨のAPIを使っている
- 対策:
npx skills updateでSkillを最新版に更新してください。Remotionのアップデートに追従できていない可能性があります。
- 対策:
結論
Antigravity × Remotion Skill は、動画制作を「クリエイティブな作業」と「エンジニアリング」に分離する技術です。
「どう動かすか（How）」の実装詳細をAIとSkillに任せることで、人間は「何を表現するか（What）」の設計とディレクションに集中できるようになります。これは、動画コンテンツの生産性を根本から変えるワークフローと言えます。
コメント