Remotion ビデオディレクター

Remotion ビデオディレクター は何をしますか？

「動画が必要」というアイデアから、音楽付きのレンダリングされたMP4まで、熟練した討議、シナリオ設計、実績のあるRemotionパターンを通じてユーザーをガイドするインタラクティブスキルです。

使用するタイミング

以下のような場合にこのスキルを起動してください：

• ユーザーがRemotionを使って動画を作成したい場合
• 製品デモ、ローンチ動画、定期的なコンテンツテンプレート、マーケティング動画、ナラティブイントロが必要な場合
• 「動画が必要」「...の動画を作って」「Remotion動画を作成」「コードとしての動画」と言った場合
• どんな動画を作るべきか、どう構成すべきかについて考えをまとめる手助けが必要な場合
• Remotionプロジェクトを持っていて、専門家のレビューを希望する場合

公式Remotionスキルとの関係

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

• 公式スキル：「interpolate() の使い方は？」（技術リファレンス）
• ビデオディレクター：「どんな動画を作るべきか、どう流れを構成すべきか？」（創造的プロセス）

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

---

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

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

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

重要: このフェーズはインタラクティブです。質問は一度に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 | ...   | X秒       | ...     |

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

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

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

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

---

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

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

ステップ 6 - シーン設計

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

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

重要なRemotionの制約とプレミアムスタイリングパターンについては references/remotion-patterns.md を読んでください。

シーンフォーカスルール: 各シーンは、コアメッセージに接続する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のヘッダーを参照）：

<project>/
├── 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/ で見つけることをお勧めします。ダウンロードリンクまたはファイルを共有していただければ、適切な音量カーブで統合します。」

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

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

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

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

1. シーンコンテンツからナレーションスクリプトを生成（約3ワード/秒）
2. ユーザーが録音するか、ElevenLabsを使用
3. ミュージックダッキングと統合（ナレーション中は音楽が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風、「オーディオビジュアルの調和」音楽が追加された場合、「設定の再利用性」データレポートの場合）。

各専門家は自分の観点からレビューします。これには、撮影監督がビジュアル構成を、音楽監督がオーディオを（音楽が追加された場合）レビューすることを含みます。以下に統合します：

1. 長所 - うまく機能している点
2. 改善点 - 具体的で実行可能な変更
3. 判定 - 現状のまま出荷可能、もう1回のパスが必要、または大幅な再作業が必要

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

ステップ 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つのベース動画を構築し、それをパラメータ化して複数のバリエーションを生成する方法を示します。

---

参考文献

このスキルには、以下を含む参考文献のセットが含まれています：

• references/video-archetypes.md - 各クリエイティブディレクションの詳細な仕様
• references/component-library.md - 再利用可能なRemotionコンポーネント
• references/remotion-patterns.md - 重要なパターンと制約
• references/music-and-audio.md - 音楽統合ガイド
• references/expert-definitions.md - 専門家パネルの定義とレビューテンプレート

各ステップで適切な参考文献ファイルを読み、その知識を適用してください。