remotion-video-director

Remotion Video Director

専門家による検討、シナリオ設計、実績のある Remotion のパターンを通じて、「動画が必要」という状態から、音楽付きのレンダリング済み MP4 までユーザーを導く、対話型スキルです。

使用する場面

次のような場合に、このスキルを起動します。

• Remotion を使って動画を作成したい場合
• 製品デモ、ローンチ動画、定期コンテンツのテンプレート、マーケティング動画、または物語性のあるイントロが必要な場合
• 「動画が必要」「〜の動画を作って」「Remotion の動画を作成して」「コードで動画」と言った場合
• どんな動画を作るか、どう構成するかを一緒に考えたい場合
• Remotion プロジェクトがあり、専門家によるレビューを希望する場合

公式 Remotion スキルとの関係

公式の remotion-dev/skills パッケージは、Remotion API（アニメーション、音声、キャプション、トランジションなどを扱う 37 のルールファイル）を Claude に教えます。このスキルは、その上位にあるクリエイティブおよび戦略のレイヤーを扱います。

• 公式スキル：「interpolate() の使い方は？」（技術リファレンス）
• Video Director：「どんな動画を作り、どのように展開するべきか？」（クリエイティブプロセス）

公式 Remotion スキルがインストールされている場合は、API 固有の詳細に活用してください。インストールされていない場合でも、このスキルの references/remotion-patterns.md と references/component-library.md で、本番用動画を制作するのに十分な Remotion の知識を得られます。

---

4 段階のワークフロー

フェーズ 1：戦略的な方向づけ

目標：対話を通じてユーザーのニーズを理解し、専門家の視点をまとめます。

重要：このフェーズは対話形式です。質問は一度に 1 つずつ行い、回答を待ちます。質問を一度にすべて提示したり、ユーザーの入力なしに自動で先に進んだりしないでください。

ステップ 1 - ニーズの把握（対話形式）

まず、自由回答形式の質問を 1 つだけします。

「この動画は何のためのものですか？アイデア、誰が見るのか、見た後に何をしてほしいのかを教えてください。」

ユーザーの回答を待ちます。その後、不明な点に応じて、的を絞った追加質問をします。

• 対象者が不明な場合：「具体的に誰がこの動画を見ますか？（顧客、チーム、投資家、SNS の視聴者など）」
• 期待する行動が不明な場合：「動画を見た後、視聴者に何をしてほしいですか？（登録する、何かを理解する、共有するなど）」
• 制約について触れられていない場合：「把握しておくべき制約はありますか？長さ、ブランドカラー、既存の素材、締め切りなどはありますか？」
• 製品について触れられた場合：「製品やインターフェースのスクリーンショットを共有できますか？」

目的、対象者、期待する行動、制約を理解するまで先に進まないでください。

ステップ 2 - クリエイティブディレクション

クリエイティブの方向性の選択肢を提示し、ユーザーに選んでもらいます。

スタイル	雰囲気	最適な用途
ミニマル／Jobs	黒背景、ドラマチックな間、1 フレームにつき 1 つのアイデア、Impact フォント	製品ローンチ、大きなアイデア、基調講演
データ重視／Bloomberg	ダークネイビーの背景、アニメーション付きチャート、情報量は多いが整理された構成	会議のまとめ、レポート、ダッシュボード
温かみのある／ナラティブ	温かみのある色調、個人的な引用、セリフ体のアクセント	コースのイントロ、チームのストーリー、コミュニティ
ターミナル／ハッカー	ダークなコードテーマ、タイプライター風、全体に等幅フォントを使用	技術デモ、開発者向けツール、エンジニアリング
カスタム	ユーザーが説明、または参考スクリーンショットや動画を提示	個別の要望全般

「動画にはどのスタイルが合いそうですか？または、気に入った動画のスクリーンショットを共有してください。」

回答を待ちます。

選ばれた方向性の詳細仕様（色、フォント、アニメーションスタイル、タイミングのルール）について、references/video-archetypes.md を読みます。

ステップ 3 - 参考資料の入力（任意）

「参考にしたい動画、スクリーンショット、ビジュアルスタイルはありますか？（なければスキップしてください）」

ユーザーが参考資料を提示した場合は、色のパレット、タイポグラフィ、アニメーションの速度、レイアウトの密度、全体的な雰囲気を分析します。これらをクリエイティブブリーフに反映します。

回答、またはスキップする旨の確認を待ちます。

ステップ 4 - エキスパートパネルの編成

選択したアーキタイプ（references/video-archetypes.md から）とクリエイティブの方向性に基づいて、references/expert-definitions.md から 3〜4 人のエキスパートでパネルを編成します。

エキスパートの視点を生成する - 各エキスパートについて、2〜3 文を生成します：

• 具体的な提案を 1 つ
• 注意すべきリスクを 1 つ

簡潔にまとめます。短い円卓会議形式で提示します。エキスパート間の意見の相違（ユーザーが判断する必要のある決定事項を示すもの）のみを強調します。

ステップ 5 - クリエイティブブリーフ

内容をまとめ、構成化されたブリーフにします：

## Creative Brief

**Purpose**: [one sentence]
**Audience**: [who, what they care about]
**Core Message**: [the ONE thing viewers should remember]
**Desired Action**: [what viewers should do next]
**Duration**: [seconds] ([frames] frames at 30fps)
**Creative Direction**: [selected style - Minimal/Jobs, Bloomberg, etc.]
**Emotional Arc**: [e.g., curiosity -> proof -> confidence -> action]

## Audio Strategy
- Music: [ambient/upbeat/dramatic/sparse] from Pixabay
- Voice-over: [yes/no]
- Music mood: [description matching creative direction]

## Scene Sequence
| # | Scene | Duration | Purpose |
|---|-------|----------|---------|
| 1 | ...   | Xs       | ...     |

## Data Model (if applicable)
[What's parameterized vs hardcoded - the reusable template structure]

## Visual Style
- Theme: [creative direction name]
- Background: [color]
- Colors: [primary, accent, secondary]
- Typography: [heading font, body font, mono font]
- Animation feel: [snappy/gentle/dramatic/typewriter]

「クリエイティブブリーフはこちらです。シーンを設計する前に、調整したい点はありますか？」

確認または調整を待ちます。

---

フェーズ 2：シナリオ設計

目標：ブリーフを、シーンごとに詳しく記述したシナリオにします。

ステップ 6 - シーン設計

シーケンス内の各シーンについて、以下を指定します：

• 内容：正確なテキスト、データ、ビジュアル
• コンポーネント：使用する再利用可能なコンポーネント（references/component-library.md から）
• アニメーション：開始／終了アニメーション、フレーム単位のタイミング
• トランジション：すべてのシーン間にクロスディゾルブ（8〜12 フレーム）

Remotion の重要な制約とプレミアムなスタイルパターンについては、references/remotion-patterns.md を読みます。

シーンの焦点ルール：各シーンは、コアメッセージにつながる 1 つのアイデアを扱う必要があります。コアメッセージと関連性の薄いシーンは削除します。焦点を絞ったシーンを少数にする方が、散漫なシーンを多数用意するより常に効果的です。

フレーム予算：タイムライン全体を計画します：

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Hook
  scene2: { start: 6, dur: 10 },  // ...
  // Total must match composition durationInFrames / fps
};

ステップ 7 - データアーキテクチャ

動画がデータ駆動型（定期レポート、複数バリエーションのマーケティング動画）の場合：

• レンダリングごとに変更する設定オブジェクトを設計します
• 一定に保つもの（ビジュアルテンプレート）と変化させるもの（コンテンツ）を特定します
• 設定の形式をユーザーに示し、確認を求めます

WeeklyIntro のパターン例：

const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "new signups",
  // ... fields that change weekly
};

ステップ 8 - ユーザー確認

シナリオ全体を提示します。

「ビルドを開始しますか？それとも調整したい点はありますか？」

確認を待ちます。

---

フェーズ 3：ビルド

目標：Remotion プロジェクトを作成し、最初のバージョンをレンダリングします。

重要：対話型 CLI ウィザードを起動したり、入力を求めたりするコマンドは実行しないでください。これには npx create-video、npx remotion init、npm init、引数を指定しない npx remotion render が含まれます。ファイルは必ず手動で作成し、CLI コマンドにはすべての引数を明示的に渡してください。

ステップ 9 - プロジェクトのひな型作成

Remotion プロジェクトの構造を手動で作成します（ひな型作成ウィザードは使用しないでください。フェーズ 3 の見出しを参照）：

<project>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # or <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # if data-driven
├── public/
│   ├── music.mp3           # background music
│   └── illustrations/      # if using background images
├── package.json
├── tsconfig.json
└── remotion.config.ts

依存関係をインストールします：pnpm install

ステップ 10 - シーンの構築

フェーズ 2 のシナリオに従って各シーンのコンポーネントを構築します。references/component-library.md のコンポーネントを使用します。

重要なビルドルール（references/remotion-patterns.md より）：

• すべてのアニメーションは useCurrentFrame() と interpolate()／spring() を使用します。CSS トランジションは絶対に使用しません
• 必ず補間をクランプします：{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
• useCurrentFrame() はグローバルタイムラインではなく、最も近い <Sequence> からの相対値です
• すべてのシーン間でクロスディゾルブを適用します（8〜12 フレームのエンベロープ。ただし、ハードカットが適している Terminal／Hacker スタイルは例外です）
• すべての要素にアニメーションを付けて表示します。カットの切り替え時に静止したまま表示させないでください

プレミアムスタイルのルール（references/remotion-patterns.md より）：

• フォントに変化をつけます：見出し用フォント＋本文用フォント＋等幅フォントを組み合わせます（すべてを Inter にしないでください）
• サイズのコントラストを大きくします：見出しは 72〜96pt、本文は 20〜24pt
• 重要な質問や見出しは画面の垂直方向中央に配置します
• 本文スライドは最大 15〜20 語、見出しスライドは 7 語（Jobs 風）にします
• テキストはフレームの上部 85% 以内に配置します
• 読みやすさを確保するため、フォントサイズは最低 24px にします
• 端から 80〜120px のパディングを設けます

Step 11 - 音声の統合

音声ガイドの全文は references/music-and-audio.md をお読みください。

「BGMを追加したいですか？選んだクリエイティブディレクションのスタイルに合う、ロイヤリティフリーの楽曲を pixabay.com/music/ で探すことをおすすめします。ダウンロードリンクまたはファイルを共有していただければ、適切な音量カーブを設定して統合します。」

ユーザーの返答を待ちます。

ユーザーが音楽を提供した場合：

1. public/music.mp3 にダウンロード／保存します
2. フェードイン／フェードアウトの音量カーブを設定した <Audio> コンポーネントを追加します
3. データ量の多いシーンでは音楽の音量を下げます（0.30 -> 0.15）
4. トラックが動画より長い場合は、startFrom を使って終盤の部分を再生します

ユーザーがナレーションを希望する場合：

1. シーンの内容からナレーション原稿を作成します（約3語／秒）
2. ユーザーが録音するか、ElevenLabs を使用します
3. ナレーション中に音楽の音量を下げて統合します（0.10-0.12）

ユーザーが音声を省略する場合は、--muted フラグを付けてレンダリングします。

Step 12 - レンダリングとプレビュー

重要：インタラクティブなプロンプトを避けるため、必ずエントリーポイントのファイルを指定してください。 npx remotion render だけで実行しないでください。インタラクティブなコンポジション選択画面が起動することがあります。必ずエントリーファイルとコンポジション ID を明示的に指定してください。

# Render final MP4 - always specify entry point + composition ID
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18

# If no audio:
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18 --muted

ユーザーが確認できるよう、動画を開きます。

---

フェーズ 4：レビュー

目標：専門家によるレビューとユーザーからのフィードバックを通じて動画を改善し、公開できる状態にします。

Step 13 - 複数の専門家によるレビュー

ユーザーが動画を見た後、references/expert-definitions.md に記載されたレビュープロトコルを実行します。

スコアカードを作成します（テンプレートの全文は references/expert-definitions.md を参照してください）。

| Dimension              | Priority | Score |
|------------------------|----------|-------|
| Hook clarity (first 3-5s) | Critical | ?/5   |
| Core message landed    | Critical | ?/5   |
| Pacing / dynamism      | High     | ?/5   |
| Visual readability     | High     | ?/5   |
| Target action clear    | High     | ?/5   |
| Audience fit           | Medium   | ?/5   |

動画の種類に応じた評価項目を2～3つ追加します（例：「ミニマル／Jobs ではビジュアルの高級感」、「音楽を追加した場合は映像と音楽の調和」、「データレポートでは設定の再利用性」）。

各専門家がそれぞれの視点からレビューします。これには、ビジュアル構成を評価する撮影監督と、音楽を追加した場合の音声を評価する音楽ディレクターも含まれます。レビューをまとめ、次の項目を提示します。

1. 長所 - うまくいっている点
2. 改善点 - 具体的で実行可能な変更
3. 評価 - 現状のまま公開できる、もう一度の修正が必要、または大幅な作り直しが必要

どの改善点を適用するか、ユーザーに尋ねます。

Step 14 - ユーザーレビューと反復

専門家のレビューで技術的な問題は見つかりますが、動画がしっくりくるかを判断できるのはユーザーだけです。

「動画と専門家のレビューを確認したところで、どのように感じましたか？

1. うまくいっているシーンはどれですか？
2. 変更が必要なシーンはどれですか？（可能であれば、該当するフレームのスクリーンショットを共有してください）
3. テキスト、タイミング、ビジュアルに問題はありますか？
4. 不足しているものや、削除すべきものはありますか？」

ユーザーからのフィードバックを待ちます。

ユーザーからフィードバックがあった場合：

1. ユーザーが気に入った点を確認します（方向性を強化できます）
2. メモに基づいて行う具体的な変更を列挙します
3. 変更を加えます - シーンコンポーネントの編集、タイミングの調整、テキストの修正を行います
4. 再レンダリングし、更新した動画を提示します
5. もう一度、「改善されましたか？ほかに調整する点はありますか？」と尋ねます

ユーザーが満足するまで、このサイクルを繰り返します。通常、動画の改善には1～3回の反復が必要です。

よくあるフィードバックと対応方法：

• 「速すぎる」→ シーンの長さを30～50％延ばし、ドラマチックな間を加えます
• 「テキストが多すぎる」→ シーンを分け、1フレームあたり7語に減らします（Jobs スタイル）
• 「高級感がない」→ ミニマル／Jobs の方向性に切り替え、余白を加えます
• 「音楽が合わない」→ Pixabay の別の楽曲を試し、音量カーブを調整します
• 「雰囲気が違う」→ クリエイティブディレクションを見直し、カラーパレットとアニメーション速度を調整します
• 「シーン X がわかりにくい」→ アイデアを1つに絞ってシンプルにし、視覚的な階層を加えます

---

適応ガイドライン

ユーザーがすでに Remotion プロジェクトを持っている場合

フェーズ1～2の足場作りは省略します。既存コードのレビュー、改善の提案、新しいシーン／コンポジションの追加に注力します。

ユーザーがすぐに動画を作りたい場合（検討不要）

フェーズ1を短縮し、動画の種類とクリエイティブディレクションを1つの質問で尋ねます。専門家を上位2名に絞り、簡単なシナリオを作成します。すぐに制作に進みます。音楽については引き続き尋ねてください。

ユーザーがコンセプトのみを希望する場合（コードなし）

フェーズ1〜2を最後まで実施します。クリエイティブブリーフとシナリオをドキュメントとして出力します。フェーズ3は省略します。

ユーザーが複数バリエーションの動画を希望する場合

グロースマーケティングのアーキタイプを使用します。バリエーションマトリックス（各バリエーションで変更する内容）を設計します。ベース動画を1本作成し、設定オブジェクトでN個のバリエーションをパラメーター化する方法を示します。

ユーザーが「プレミアムにして」／「もっと高級に」と言った場合

ミニマル／Jobsのクリエイティブディレクションに切り替えます。黒い背景、Impactフォント、極端なサイズのコントラスト、1フレームにつき1つのアイデア、ドラマチックな間（60フレーム以上の表示）、広いネガティブスペースを取り入れます。バックグラウンドミュージックを追加します。

---

品質チェックリスト（完了を宣言する前に）

• 動画がエラーなくレンダリングされる
• テキスト同士が重なっていない
• フレーム下部15%にテキストがない
• 重要な見出し／質問が垂直方向の中央に配置されている
• 1フレームあたりの単語数が最大15〜20語（見出しスライドは7語）
• すべてのアニメーションでフレーム駆動のタイミングを使用している（CSSトランジションは使用しない）
• すべての要素にアニメーションを付けて表示している（静的なカットは使用しない）
• すべてのシーン間にクロスディゾルブを使用している
• フォントに変化を付けている（どこでもInterだけを使わない）
• 音楽がスムーズにフェードイン／フェードアウトする（音楽がある場合）
• データ量の多いシーンでは音楽の音量を下げる（音楽がある場合）
• 尺がクリエイティブブリーフに合っている
• 最初の5秒以内に中心的なメッセージが明確に伝わる
• CTAまたは締めくくりに印象が残る
• データモデルが整理され、再利用可能である（データ駆動の場合）
• ユーザーが最終版を確認し、承認している