Remotion 動画生成
Remotion を使用して、アニメーション付き短尺動画（1080x1920）を作成します。6種類の動画形式に対応し、すべて「リサーチ→アニメーション」のワークフローに従います。
Remotion の利点
Remotion はピクセルではなくコードをレンダリングします。AIはコードを本質的に理解します——不透明度の変数を変更することは明確であり、ラスターフレーム内の「タイトル」を構成するピクセルを判断する必要はありません。コードによって、解像度に依存しない出力、再利用可能なコンポーネント、インスタントプレビュー、Gitベースのバージョン管理が可能になります。
前提条件
このスキルには Remotion ベストプラクティススキル が必要です。開始する前に、プロジェクトにRemotionスキルがインストールされているか確認してください。インストールされていない場合は、ユーザーに次のコマンドを実行するよう指示してください：
npx skills add remotion-dev/skills
詳細は Remotion Agent Skills ドキュメント を参照してください。
タイプ選択
ユーザーの入力に基づいて動画のタイプを決定します：
| ユーザーが提供するもの | 動画タイプ | 参照ファイルを読み込む |
|---|---|---|
| 教えたり説明したりするトピック | 教育解説 | education-explainer.md |
| 商品のURL | 商品デモ + ローンチ | product-demo.md |
| Googleビジネス / Mapsリンク | 口コミ / 社会的証明 | testimonial.md |
| トーキングヘッド動画ファイル（9:16） | アバター + アニメーションオーバーレイ | avatar-overlays.md |
| CSVまたはデータファイル | データ可視化ダッシュボード | data-viz.md |
| チャンネル/ブランド/ソーシャルURL | ローワーサード / オーバーレイ | lower-thirds.md |
該当するタイプの参照ファイルのみ と、defaults.md（セーフゾーン、フォント、アニメーションルール、ビジュアルスタイルの共有設定）を読み込んでください。
追加参照ファイル（必要に応じて読み込む）
これらのファイルはすべての動画で必要になるわけではありません。状況に応じて必要な場合のみ読み込んでください：
- integrations.md — Playwright（Webスクレイピング）、Lottieアニメーション、3Dアセット、ナレーション、AI生成画像が必要な場合に読み込みます。一部の統合にはAPIキーが必要です——必ず最初にユーザーに確認してください。
- advanced-patterns.md — タイミングスライダー、すべてのコンポジションのコントロール、カタログからの複数動画生成、透過レンダリング、カスタムトランジション、Gitベースの保存ワークフローが必要な場合に読み込みます。
共通ワークフロー
すべてのタイプは同じ2段階のパターンに従います：
ステップ1: リサーチ / スクレイピング / 分析
動画タイプに基づいて情報を収集します（トピックのリサーチ、ウェブサイトのスクレイピング、レビューのスクレイピング、動画の文字起こし、データの分析）。結果と提案するシーン構成を提示します。コードを書き始める前にユーザーの承認を待ちます。
ステップ2: デザイン & アニメーション
承認後、すべてのシーンをRemotion Reactコンポーネントとして構築します。defaults.md のアニメーションルールに従います：
- スプリングエントランス（
damping: 200）、リニアモーションは使用しない - 関連アイテムは8～12フレームずつずらす
- シーン間のフェードトランジションは
TransitionSeriesを使用し12フレーム - 図やフローチャートの描画には SVG
stroke-dashoffset - カウントアップアニメーションには
interpolate()+tabular-nums - お祝いやクロージングの瞬間にはパーティクルエフェクト
ステップ3: 仕上げ（オプション）
動画が正しく再生された後、コントロールを追加するオプションを提供します：
- タイミングスライダー — advanced-patterns.md を参照してコンポジションにリアルタイムコントロールを追加
- 統合 — integrations.md を参照してLottieアニメーション、3Dエフェクト、ナレーションなどを追加
プレビュー
構築後、Remotion Studio を起動します：
npx remotion studio
デザイン原則
- 各シーンには明確なビジュアルメタファーが必要——図、フローチャート、アイコン、ステップバイステップのアニメーション
- 文字の壁を作らない——情報は凝縮、美しい動き、速いテンポ
- クルツゲザグとファイアシップの融合：複雑なアイデアを視覚的に直感的に
- すべてのグラフィックはデフォルトでSVGコンポーネントとして構築。Lottieと3Dは integrations.md を参照
- セーフゾーンを尊重する（defaults.md を参照）——重要な要素は端に配置しない
クレジット
動画プロンプトの基盤：Sabrina Ramonov、制作インサイト：Remotion AI動画編集チュートリアル。構成可能なデフォルトとプログレッシブディスクロージャーを備えたエージェントスキルとして採用。