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