Remotion Video Director は何をしますか？

「動画が必要」というアイデアから、専門家による検討、シナリオ設計、実戦で検証されたRemotionのパターンを経て、MP4形式の動画を音楽付きでレンダリングするまでをガイドするインタラクティブスキルです。

使用するタイミング

以下のような場合にこのスキルを起動します：

ユーザーがRemotionを使って動画を作成したい
製品デモ、ローンチ動画、定期的なコンテンツテンプレート、マーケティング動画、ナラティブなイントロが必要
「動画が必要」「...の動画を作って」「Remotion動画を作成」「コードとしての動画」と発言した
どんな動画を作るか、どう構成するかについてアドバイスが欲しい
Remotionプロジェクトを専門家の目でレビューしてほしい

公式Remotionスキルとの関係

公式の remotion-dev/skills パッケージは、ClaudeにRemotionのAPI（アニメーション、オーディオ、キャプション、トランジションなど37のルールファイル）を教えます。このスキルは、その上に創造的・戦略的なレイヤーを提供します：

公式スキル：「interpolate()の使い方は？」（技術リファレンス）
Video Director：「どんな動画を作るべき？どんな流れにする？」（創造的プロセス）

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

4フェーズのワークフロー

フェーズ1: 戦略的フレーミング

目標: 会話を通じてユーザーのニーズを理解し、専門家の視点を集約する。

重要: このフェーズはインタラクティブです。質問は一度に一つずつ行い、回答を待ってください。すべての質問を一度にまとめて投げかけたり、ユーザーの入力を待たずに自動的に進めたりしないでください。

ステップ1 - 発見（対話形式）

まずは1つの開かれた質問から始めます：

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

ユーザーの回答を待ちます。その後、不足している情報に基づいてターゲットを絞ったフォローアップをします：

視聴者が不明な場合：「具体的に誰が見ますか？（顧客、チーム、投資家、ソーシャルメディア？）」
目的アクションが不明な場合：「見た後、視聴者に何をしてほしいですか？（サインアップ、理解、共有？）」
制約が言及されなかった場合：「知っておくべき制約はありますか？尺、ブランドカラー、既存アセット、期限など？」
製品について言及した場合：「製品やインターフェースのスクリーンショットを見せてもらえますか？」

以下の項目を理解するまでは次に進まないでください：目的、視聴者、目的アクション、制約。

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

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

スタイル	雰囲気	最適な用途
ミニマル/Jobs	黒背景、劇的な間、1フレーム1アイデア、Impactフォント	製品ローンチ、大きなアイデア、基調講演
データリッチ/ブルームバーグ	濃紺背景、アニメーションチャート、密度はあるが整理された	ミーティングのまとめ、レポート、ダッシュボード
ウォーム/ナラティブ	暖色系、個人の引用、セリフアクセント	コースイントロ、チームストーリー、コミュニティ
ターミナル/ハッカー	暗いコードテーマ、タイプライター、等幅フォント統一	技術デモ、開発ツール、エンジニアリング
カスタム	ユーザーが参考スクリーンショットや動画を提供	特定のもの全般

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

回答を待ちます。

references/video-archetypes.md を読んで、選択された方向性の完全な仕様（色、フォント、アニメーションスタイル、タイミングルール）を確認します。

ステップ3 - 参考入力（オプション）

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

ユーザーが参考資料を提供した場合、それらを分析します：カラーパレット、タイポグラフィ、アニメーション速度、レイアウト密度、全体的なムード。これらをクリエイティブブリーフに組み込みます。

回答を待つか、スキップの確認をします。

ステップ4 - 専門家パネルの招集

選択されたアーキタイプ（references/video-archetypes.md より）とクリエイティブ方向性に基づいて、references/expert-definitions.md から3〜4人の専門家を招集します。

専門家の視点を生成 - 各専門家について、2〜3文を生成します：

1つの具体的な推奨事項
注意すべきリスク1つ

簡潔にまとめます。簡単なラウンドテーブルとして提示します。専門家間で意見が異なる点だけを強調します（ユーザーが判断すべき決定事項が示されます）。

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

構造化されたブリーフにまとめます：

## クリエイティブブリーフ

**目的**: [1文]
**視聴者**: [誰が、何を重視しているか]
**コアメッセージ**: [視聴者が覚えるべき「たった一つのこと」]
**目的アクション**: [視聴者が次にすべきこと]
**尺**: [秒]（30fpsで[フレーム]フレーム）
**クリエイティブ方向性**: [選択されたスタイル - ミニマル/Jobs、ブルームバーグなど]
**感情の流れ**: [例：好奇心 -> 証明 -> 確信 -> 行動]

## オーディオ戦略
- 音楽: [アンビエント/アップビート/ドラマティック/スパース] Pixabayから
- ナレーション: [あり/なし]
- 音楽の雰囲気: [クリエイティブ方向性に合った説明]

## シーンシーケンス
| # | シーン | 尺 | 目的 |
|---|-------|----------|--------|
| 1 | ...   | Xs       | ...     |

## データモデル（該当する場合）
[パラメータ化されるものとハードコードされるもの - 再利用可能なテンプレート構造]

## ビジュアルスタイル
- テーマ: [クリエイティブ方向性名]
- 背景: [色]
- 色: [メイン色、アクセント色、セカンダリ色]
- タイポグラフィ: [見出しフォント、本文フォント、等幅フォント]
- アニメーションの雰囲気: [スナッピー/優しい/劇的/タイプライター]

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

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

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

目標: ブリーフを詳細なシーンごとのシナリオに変換します。

ステップ6 - シーンデザイン

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

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

references/remotion-patterns.md を読んで、重要なRemotionの制約とプレミアムスタイリングパターンを確認します。

シーンフォーカスのルール: 各シーンは、コアメッセージに繋がる1つのアイデアを提供しなければなりません。シーンがコアメッセージから逸れている場合は、削除します。散漫なシーンを多く作るよりも、焦点の絞られたシーンを少数作ることの方が常に優れています。

フレーム予算: タイムライン全体をマッピングします：

const TIMING = {
  scene1: { start: 0, dur: 6 },   // フック
  scene2: { start: 6, dur: 10 },  // ...
  // 合計はコンポジションの durationInFrames / fps と一致する必要があります
};

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

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

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

パターン例（WeeklyIntroより）：

const weekData = {
  weekLabel: "3月3日 - 3月9日",
  heroNumber: 312,
  heroLabel: "新規サインアップ数",
  // ... 毎週変わるフィールド
};

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

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

「構築の準備はできましたか、それとも何か調整しますか？」

確認を待ちます。

フェーズ3: ビルド

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

重要: インタラクティブなCLIウィザードやプロンプトを起動するコマンドを絶対に実行しないでください。これには npx create-video、npx remotion init、npm init、または引数なしの npx remotion render が含まれます。常に手動でファイルを作成し、すべての引数をCLIコマンドに明示的に渡してください。

ステップ9 - プロジェクトのスキャフォールド

Remotionプロジェクト構造を手動で作成します（スキャフォールディングウィザードは使用しないでください - フェーズ3のヘッダーを参照）：

<プロジェクト名>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # または <VideoName>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # データ駆動型の場合
├── public/
│   ├── music.mp3           # 背景音楽
│   └── illustrations/      # 背景画像を使用する場合
├── 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フレームのエンベロープ；例外：ターミナル/ハッカースタイルではハードカットが適切）
すべての要素はアニメーションで登場しなければならない - カット上で静的表示にしてはいけない

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

フォントの多様性：見出しフォント + 本文フォント + 等幅フォントを混ぜる（すべてにInterを使わない）
極端なサイズのコントラスト：見出しは72〜96pt、本文は20〜24pt
重要な質問や見出しは垂直方向の中央に配置
本文スライドは最大15〜20ワード、見出しスライドは7ワード（Jobsスタイル）
テキストはフレームの上部85%に維持
可読性のため最低24pxのフォント
端から80〜120pxのパディング

ステップ11 - オーディオ統合

完全なオーディオガイドについては references/music-and-audio.md を読んでください。

「背景音楽を追加しますか？[選択されたクリエイティブ方向性]のスタイルに合ったロイヤリティフリーのトラックを、pixabay.com/music/ で探すことをお勧めします。ダウンロードリンクまたはファイルを共有していただければ、適切な音量カーブで統合します。」

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

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

public/music.mp3 にダウンロード/保存
フェードイン/フェードアウトの音量カーブを持つ <Audio> コンポーネントを追加
データ量の多いシーンでは音楽の音量を下げる（0.30 -> 0.15）
トラックが動画より長い場合、startFrom を使用して最後のセクションを再生

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

シーンの内容からナレーションスクリプトを生成（約3ワード/秒）
ユーザーが録音するか、ElevenLabsを使用
ミュージックダッキングで統合（ナレーション中は音楽を0.10〜0.12に下げる）

もしユーザーがオーディオをスキップする場合：--muted フラグを付けてレンダリング。

ステップ12 - レンダリングとプレビュー

重要：インタラクティブなプロンプトを避けるため、常にエントリポイントファイルを渡してください。 裸の npx remotion render を決して実行しないでください。インタラクティブなコンポジションピッカーが起動する可能性があります。常にエントリファイルとコンポジションIDを明示的に指定してください：

# 最終MP4をレンダリング - 常にエントリポイントとコンポジションIDを指定
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18

# オーディオなしの場合：
npx remotion render src/Root.tsx <CompositionId> out/<name>.mp4 --codec=h264 --crf=18 --muted

ユーザーがレビューできるように動画を開きます。

フェーズ4: レビュー

目標: 専門家レビューとユーザーフィードバックを通じて動画を洗練し、リリースできる状態にします。

ステップ13 - 複数専門家レビュー

ユーザーが動画を確認した後、references/expert-definitions.md のレビュープロトコルを実行します。

スコアカードを生成します（完全なテンプレートは references/expert-definitions.md を参照）：

| 評価軸                          | 優先度   | スコア |
|--------------------------------|----------|-------|
| フックの明確さ（最初の3〜5秒）     | 最重要   | ?/5   |
| コアメッセージが伝わったか         | 最重要   | ?/5   |
| ペーシング / ダイナミズム         | 高       | ?/5   |
| ビジュアルの可読性               | 高       | ?/5   |
| ターゲットアクションが明確か       | 高       | ?/5   |
| 視聴者への適合性                 | 中       | ?/5   |

2〜3のタイプ固有の評価軸を追加します（例：「ビジュアルのプレミアム感」ミニマル/Jobsの場合、「オーディオビジュアルの調和」音楽が追加された場合、「設定の再利用性」データレポートの場合）。

各専門家が自分の視点からレビューします。これには、映像ディレクターによるビジュアル構成、音楽ディレクターによるオーディオ（音楽が追加された場合）が含まれます。以下のように統合します：

強み - うまく機能している点
改善点 - 具体的で実行可能な変更点
評決 - 現状でリリース可能、もう一度手直しが必要、大幅な再作業が必要

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

ステップ14 - ユーザーレビューと反復

専門家レビューは技術的な問題を指摘しますが、動画が 適切に感じられるか どうかを判断できるのはユーザーだけです。

「動画と専門家レビューをご覧になったところで、あなたの感想はいかがですか？

どのシーンがうまく機能していますか？

変更が必要なシーンはありますか？（可能であれば特定のフレームのスクリーンショットがあれば）

テキスト、タイミング、またはビジュアルに関する問題はありますか？

不足しているもの、削除すべきものはありますか？」

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

ユーザーがフィードバックを提供した場合：

気に入った点を認識します（方向性を強化する）
メモに基づいて行う具体的な変更点をリストアップします
変更を実行します - シーンコンポーネントの編集、タイミングの調整、テキストの修正
再レンダリングして更新された動画を提示します
再度尋ねます：「良くなりましたか？他に調整しますか？」

ユーザーが満足するまでこのループを繰り返します。一般的な動画は1〜3回の改良ラウンドが必要です。

よくあるフィードバックパターンとその対処方法：

「速すぎる」 → シーン尺を30〜50%延ばし、劇的な間を増やす
「テキストが多い」 → シーンを分割し、1フレームあたり7ワードに減らす（Jobsスタイル）
「プレミアム感がない」 → ミニマル/Jobsの方向性に切り替え、ネガティブスペースを追加
「音楽が合わない」 → 別のPixabayトラックを試し、音量カーブを調整
「トーンが違う」 → クリエイティブ方向性を再検討し、カラーパレットとアニメーション速度を調整
「シーンXがわかりにくい」 → 1つのアイデアに簡略化し、視覚的な階層を追加

適応ガイドライン

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

フェーズ1〜2のスキャフォールディングをスキップします。既存コードのレビュー、改善提案、新しいシーンやコンポジションの追加に集中します。

ユーザーが手早く動画を欲している場合（検討不要）

フェーズ1を圧縮：動画の種類 + クリエイティブ方向性を1つの質問で尋ねます。トップ2の専門家を選び、簡潔なシナリオを生成します。すぐにビルドに移行します。それでも音楽については確認します。

ユーザーがコンセプトのみを欲している場合（コード不要）

フェーズ1〜2を完全に実行します。クリエイティブブリーフとシナリオをドキュメントとして出力します。フェーズ3はスキップします。

ユーザーが複数バリエーションの動画を欲している場合

Growth Marketingアーキタイプを使用します。バリエーションマトリックス（バリエーションごとに変わるもの）をデザインします。1つのベース動画を構築した後、パラメータ化された設定オブジェクトを使ってバリエーションを生成する方法を示します。

Remotion Video Director