教育用動画クリエイター

Remotionを使用してKurzgesagt/回形針ビジュアルスタイルで専門的な教育用ビデオを制作します。

前提条件

このスキルはRemotionの技術的実装のため remotion-best-practices スキルが必要です。

確認とインストール（フェーズ1開始前に必須完了）:

# 既にインストールされているかを確認し、なければインストール
npx skills list 2>/dev/null | grep remotion-best-practices || npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

インストール後、remotion-best-practicesスキルを読む ことでRemotion APIの詳細をコンテキストに読み込みます。これは必須です。なくするとフェーズ4のコードがRemotion APIの使用法を誤ります。

外部依存関係（フェーズ4.5音声生成で必要）:

# ffmpeg（音声時間の測定用ffprobe提供）
brew install ffmpeg        # macOS
# apt install ffmpeg       # Linux

# edge-tts（ナレーション生成用のPython TTSエンジン）
pip install edge-tts

プロジェクト設定

このスキルは現在のワークスペース内の remotion_video サブディレクトリで動画を制作します。

初回セットアップ（推奨 — 非対話的）:

# ビデオプロジェクトディレクトリを作成
mkdir -p remotion_video
cd remotion_video

# 対話プロンプトなしで初期化
npm init -y
npm install remotion @remotion/cli @remotion/google-fonts @remotion/transitions react react-dom
npm install -D typescript @types/react

# 最小限のプロジェクト構造を作成
mkdir -p src public/audio/narration

必須エントリファイルを作成します：

• src/Root.tsx — メインコンポジション登録
• src/index.ts — registerRoot(Root) を含むRemotionエントリポイント
• remotion.config.ts — Remotion設定
• tsconfig.json — TypeScript設定

別方法（対話的 — 自動化環境ではブロックする可能性あり）:

mkdir -p remotion_video && cd remotion_video
npx create-video@latest --blank
npm install

注記: npx create-video はプロジェクト名やパッケージマネージャーなどの入力を求める場合があります。CLI/自動化コンテキストではブロックを避けるため、上記の非対話的メソッドを使用してください。

既存プロジェクト:

cd remotion_video
npm install  # 依存関係がインストールされているか確認

プロジェクト構造:

your-workspace/
├── remotion_video/           # ビデオプロジェクトルート
│   ├── src/
│   │   ├── Root.tsx          # メインコンポジション登録
│   │   └── YourVideo/        # ビデオ固有コンポーネント
│   │       ├── index.tsx
│   │       ├── scenes/
│   │       └── components/
│   ├── public/               # 静的アセット
│   └── package.json
└── ... (その他のワークスペースファイル)

クイックスタート

1. プロジェクト設定 → 必要に応じて remotion_video ディレクトリを作成
2. 要件確認 → トピック、対象者、時間を確認
3. スクリプト作成 → ナレーション全体の完成版を作成
4. ストーリーボード作成 → スクリプトをビジュアルシーンに分割
5. ビジュアル設計 → スタイルガイドを適用、SVGコンポーネント作成
6. アニメーション実装 → Remotionでシーンをコーディング
7. 品質保証 → 自動確認、自動修正、自動プレビュー開始

⚠️ コンテキスト復旧プロトコル

すべての会話ターンでコンテキスト喪失（圧縮、新規セッション）が発生する可能性があります。作業を開始する前に必ず：

1. 確認 remotion_video/PROGRESS.md が存在するか
   • YES の場合 → 完全に読み、現在のフェーズと最後に完了したステップを確認
   • NO の場合 → これは新規プロジェクト、フェーズ1に進む
2. 関連ファイルを読む PROGRESS.md で参照されているもの（該当フェーズが完了済みの場合のみ）:
   • remotion_video/script.md （フェーズ1.5以降完了の場合）
   • remotion_video/storyboard.md （フェーズ2以降完了の場合）
   • src/<Composition>/constants.ts （フェーズ3以降完了の場合 — COLORS、SCENES、NARRATION、AUDIO_SEGMENTSを含む）
3. 確認 "Files Created"セクション内のファイルがディスク上に実際に存在するか
4. 再開 現在のフェーズの最初のチェックされていない項目から

このプロトコルをスキップすると、重複作業またはファイル破損が発生します。常に最初に実行してください。

進捗トラッキング — 必須プロトコル

⚠️ このプロトコルは譲歩の余地がありません。更新をスキップするとコンテキスト喪失と重複作業が発生します。

progress-template.md を使用して remotion_video/PROGRESS.md を維持します。フェーズ1開始時に作成します。決定をDecisionsテーブルに記録し、作成されたすべてのファイルを"Files Created"に追加します。

チェックポイントルール

PROGRESS.md のチェックボックス項目を完了したら、必ず：

1. 項目を [x] にマークし、簡潔なメモを追加
2. "Current State"セクションを更新（現在のフェーズ+現在のステップ）
3. その後 —そしてその時だけ— 次の項目に進む

複数項目をバッチ処理しないでください。1項目完了 → 1回更新 → 次の項目。

フェーズ遷移ゲート

新しいフェーズを開始する前に、必ず：

1. PROGRESS.md を読み、前のフェーズのすべての項目が [x] であることを確認
2. "Current Phase"を新しいフェーズに更新
3. 前の項目にチェックがなければ、最初にそれを完了

ワークフロー

フェーズ1: 要件確認

⚠️ 最初に: 前提条件 セクションを完了（remotion-best-practicesスキルをインストールして読む）。その後 progress-template.md から remotion_video/PROGRESS.md を作成し、プロジェクト情報を入力します。

開始前に、以下の重要な詳細をユーザーと確認します：

• トピック: どのコンセプト/主題を説明するか?
• 対象者: 誰が見るか?（子供/大人、初心者/専門家）
• 言語: 中国語/英語/その他?
• 時間: 短（1-3分）、中（3-5分）、長（5-10分）?
• 主要ポイント: 視聴者は何を学ばなければならないか?

詳細な質問テンプレートは requirements-guide.md を参照してください。

フェーズ1.5: スクリプト執筆

⚠️ チェックポイントルール有効: このフェーズの各チェックボックス項目を完了したら、すぐに PROGRESS.md を更新します。更新をバッチ処理しないでください。

ストーリーボードを設計する前に、完全なナレーティブスクリプトを作成します。このフェーズは純粋に ストーリーテリング に焦点を当てます — 何を言い、どう上手に言うか — ビジュアルスペック、フレーム番号、アニメーションパラメータについて心配することなく。

重要: フルナレーションテキストを作成します — 話される言葉の一言一句。サマリー、箇条書き、またはプレースホルダーを書かないでください。スクリプトは最終的なスポークンコンテンツです。

スクリプトは以下を含む必要があります：

1. コアメッセージ — 1行のサマリー、学習目標
2. ナレーティブ戦略 — script-and-narration.md のテクニックを適用:
   • エントリアングル（質問/シナリオ/チャレンジ/ストーリー）
   • ビデオ全体を通す中核的メタファー
   • 知識足場組みの順序（何が何に依存するか）
   • 感情的カーブ（好奇心 → 理解 → 驚嘆 → 満足感）
3. フルナレーションテキスト — すべてのチャプターの完全な word-for-word スクリプト:
   • 強調マーカーを含める(太字でストレス、イタリックでより柔らかいトーン)
   • [.]（短）、[..]（中）、[...]（長）、[PAUSE] または [BEAT]（劇的）— 時間セマンティクスについては script-and-narration.md パート3を参照 — で一時停止をマーク
   • 各チャプターの後に視覚的意図を追加（1-2文で視聴者が何を見るべきかを記述 — フェーズ2がシーンを設計するのに十分ですが、アニメーションスペックはありません）
4. ペーシングメモ — どこで加速、減速、一時停止するか
5. 自己レビュー — ユーザーに提示する前に script-and-narration.md のチェックリストを実行

品質ゲート: 完全なスクリプトをユーザーに承認用に提示します。ユーザーがナレーティブを明示的に承認するまで、フェーズ2に進まないでください。

スクリプトが最初の理由:

• 「何を伝えるか」と「どう示すか」を分離 — 2つの異なるクリエイティブ活動
• LLMは同時にフレーム範囲を計算しない場合、より良いナレーティブを生成
• 純粋テキストは反復が安く、アニメーションスペック付きストーリーボードは修正が高額
• ユーザーは技術詳細に浸ることなく「ストーリーは良いか?」を簡単にレビューできます

出力: 承認されたスクリプトを remotion_video/script.md として保存

ビデオ構造テンプレート、ナレーティブテクニック、執筆テクニック、TTSメモについては script-and-narration.md を参照してください。

フェーズ2: ストーリーボード設計

⚠️ チェックポイントルール有効: このフェーズの各チェックボックス項目を完了したら、すぐに PROGRESS.md を更新します。更新をバッチ処理しないでください。

承認されたスクリプトを本番対応ストーリーボードに変換します。スクリプトは 何を言うか を提供；ストーリーボードは どう示すか を定義します。

入力: 完了したスクリプト（フェーズ1.5で承認）

タスク:

1. スクリプトチャプターをビジュアルシーンに分割（5-15シーン）
2. スクリプトから各シーンにナレーションテキストを割当
3. 各シーンのビジュアルレイヤーを設計（背景/中景/前景/UI）
4. フレームレベルのアニメーション仕様を追加（spring、easing、タイミング）
5. ビジュアル-ナレーション同期ポイントを定義
6. アセットインベントリを計画（SVGコンポーネント、色、タイポグラフィ）

認知負荷はゼロから作成するよりはるかに低い — ナレーティブはすでに決定されているため、ビジュアル実行に焦点を当てるだけで済みます。

出力: 完了したストーボードを remotion_video/storyboard.md として保存し、設計トレーサビリティと反復参照用に。

テンプレートについては storyboard-template.md を参照してください。 字幕フォーマットとTTSメモについては script-and-narration.md パート4を参照してください。

フェーズ3: ビジュアル設計

⚠️ チェックポイントルール有効: このフェーズの各チェックボックス項目を完了したら、すぐに PROGRESS.md を更新します。更新をバッチ処理しないでください。

Kurzgesagt/回形針スタイルを適用します。具体的なステップ:

1. 色パレット選択 — design-tokens.ts セクション1から選択するか、トピックに合わせてカスタムパレット作成
2. constants.ts 作成 — design-tokens.ts セクション3に従い、COLORS、TYPOGRAPHY、SCENES、NARRATION、推定 AUDIO_SEGMENTS を定義
3. フォント設定 — @remotion/google-fonts から Remotion の loadFont() を使用（参考については design-tokens.ts セクション2を参照）
4. 共有SVGコンポーネント作成 — svg-components.md に従い、再利用可能なビジュアル要素（アイコン、イラスト、装飾要素）を構築
5. シーンレイアウト設計 — visual-principles.md に従い、シーンごとのビジュアルレイヤー（背景/中景/前景/UI）を計画

スタイル原則:

• 微細なグラデーション付きフラットデザイン
• 大胆で彩度の高いカラーパレット
• 角を丸めた幾何学模様（rx/ry）
• クリーンなサンセリフタイポグラフィ

完全なビジュアル標準については style-guide.md を参照してください。 構成とレイアウトについては visual-principles.md を参照してください。

フェーズ4: アニメーション制作

⚠️ チェックポイントルール有効: このフェーズの各チェックボックス項目を完了したら、すぐに PROGRESS.md を更新します。更新をバッチ処理しないでください。ファイルパスを"Files Created"に記録します。

Remotionを使用してシーンを実装します:

1. ビジュアル要素用のSVGコンポーネントを作成
2. すべてのアニメーションに useCurrentFrame() を使用
3. 適切なeasing（自然な動きのためのspring）を適用
4. シーントランジションを追加

字幕&ナレーションルール（フェーズ4.5互換性に重要）:

• すべてのナレーションテキストは constants.ts の NARRATION オブジェクトに保存する 必須 — シーンTSXファイルに直接ハードコードしないでください
• constants.ts に推定 AUDIO_SEGMENTS を作成し、概算タイミングを記載。フェーズ4.5が実際の音声ベースのタイミングで上書きします
• 字幕コンポーネントは AUDIO_SEGMENTS.sceneKey を参照 必須 — ハードコードされたフレーム番号を持つインライン配列を使用しないでください
• AUDIO_SEGMENTS 内の startFrame/endFrame は シーンローカルフレーム番号を使用する必須（各シーンは SCENE_PAD=15 から開始）、グローバルフレーム番号ではなく。AudioLayerと SubtitleSequence の両方がシーンの <Sequence> 内部で実行されるため、useCurrentFrame() はローカルフレーム番号を返します。グローバルフレーム番号を使用すると、後続シーンの字幕が遅延または完全に表示されません
• これにより rebuild-timeline.ts --write フェーズ4.5でタイミングを更新できシーンファイルを変更する必要がなくなります

ビジュアル-ナレーション整列ルール（アニメーション-字幕不同期を防止）:

• ナレーションコンテンツに対応する各ビジュアル要素（アイコン出現、矢印展開、グラフ描画など）、その startFrame は対応する AUDIO_SEGMENTS の startFrame から派生する 必須、「ビジュアルリズム」ハードコードできません
• 正しいパターン: const liftArrowStart = AUDIO_SEGMENTS.forces[0].startFrame;（揚力矢印がナレーションで「揚力」が言われるときに出現）
• 間違いパターン: const liftArrowStart = 30;（感覚で書いたフレーム数、ナレーションと無関係）
• 純粋装飾的アニメーション（背景パーティクル、環境雰囲気）はこの制約を受けません、自由にタイミング設定可
• フェーズ4は推定AUDIO_SEGMENTSを使用；フェーズ4.5 rebuild-timeline が実際の時間を更新した後、コードがハードコード数ではなく変数を参照するため、ビジュアルアニメーションは自動同期します
• animation-guide.md "Narration-Synced Animation" セクションの実装パターンを参照

要素サイズルール（「Thumbnail Syndrome」— 大キャンバス上の小さな要素を防止）:

• 内容がキャンバスを埋めるか確認するため visual-principles.md "Content Area Utilization" を参照（コア内容 ≥ セーフエリア60%）
• コンポーネントのデフォルトサイズは svg-components.md を参照（アイコン≥96px、フロー節≥160px高、ラベル≥40px）
• グラフ/フロー図は内容エリアの大部分を占める必須、1920×1080キャンバス上でサムネイルに縮小されるのを避ける

背景ルール（トランジション中の透明/チェッカーボードフレームを防止）:

• メインコンポジションはすべてのシーンの背後に座り、トランジションに参加しない永続的な <AbsoluteFill> 背景レイヤー（COLORS.background を使用）を 必須 にします
• 各シーンコンポーネントは最初の子要素として独自の単色背景を 必須 にします
• fade() トランジション中、両方のシーンは不透明度が減少 — 永続的な背景なしに、透明フレームがプレビューではチェッカーボード、レンダリングでは黒く表示されます
• animation-guide.md "Preventing Transparent Frames" の実装パターンを参照

ビジュアルリッチネスルール（PPTのような出力を防止）:

• 各シーンは少なくとも1つの 非テキストビジュアルメイン要素（SVGイラスト、グラフ、アニメーション図形等）を 必須 にします。純粋なテキストラベル+ボックスは合格ビジュアルコンテンツではありません
• フロー図/因果鎖は アイコンまたはイラスト とテキストで構成する 必須、純粋な色ボックスでテキストを装飾する不可。svg-components.md "Illustrated Flow Node" パターンを参照
• 各シーンは 環境雰囲気レイヤー を持つべき（パーティクル、光晕、テクスチャ等）、style-guide.md Ambient Effects セクションを参照
• SVGイラストはKurzgesagt スタイルを具現化する必須: 丸角幾何学模様（rx/ry）、フラット化だが階層化（複数パスオーバーレイ）、ソフトグラデーション（linearGradient/radialGradient）、適切なストローク
• visual-principles.md "Show, Don't Tell" 原則を参照: テキストボックスで表現できるコンセプトは図示を使用する
• scene-template.tsx 内のForceDiagramScene SVG飛行機イラストを具象イラストの最低品質標準として参照

色ルール（フェーズ5 style-scan コンプライアンスに重要）:

• すべての色は constants.ts から COLORS オブジェクト経由で参照される 必須（例：COLORS.accent.rose） — TSXファイルに16進値を直接書き込まない
• 唯一の例外は不透明度バリエーション用の rgba()（例：字幕背景用 rgba(0, 0, 0, 0.7)）
• これは style-scan が「色が承認されたパレットにない」という警告を数十件報告する一般的な問題を防止します

完全なconstants.ts構造については design-tokens.ts セクション3を参照（COLORS、SCENES、NARRATION、AUDIO_SEGMENTS、フォント読み込み）。 コンポーネントパターンについては svg-components.md を参照。 タイミングとeasingについては animation-guide.md を参照。

フェーズ4.5: 音声生成

⚠️ チェックポイントルール有効: このフェーズの各チェックボックス項目を完了したら、すぐに PROGRESS.md を更新します。更新をバッチ処理しないでください。

アニメーションコーディング完了後、ビデオ音声を生成してタイムラインを同期します:

1. TTS音声生成 — generate-tts.ts を使用して NARRATIONからテキスト抽出しmp3を生成
2. タイムライン再構築 — rebuild-timeline.ts --write を使用して実際の音声時間に基づき constants.ts を更新
3. アニメーションキーフレーム調整 — newDuration / oldDuration 比に応じてスケーリング
4. 背景音楽追加 — ロイヤリティフリーBGMを public/audio/bgm.mp3 に
5. AudioLayer作成 — ナレーション + BGM を再生するコンポーネント
6. 統合と確認 — AudioLayer は TransitionSeries 外部 に配置する必須

詳細なステップ、コマンドパラメータ、AudioLayerテンプレートについては audio-guide.md を参照。

フェーズ5: 品質保証

⚠️ チェックポイントルール有効: このフェーズの各チェックボックス項目を完了したら、すぐに PROGRESS.md を更新します。更新をバッチ処理しないでください。

コーディング完了後、自動品質確認プロセスを実行します:

1. コード扫描 → スタイルコンプライアンスを確認（フォントサイズ、色、セーフエリア等）
2. スクリーンショットレビュー → キーフレームをレンダリング、ビジュアル確認
3. 自動修正 → チェックレポートに基づき問題を修正、通過まで循環
4. プロジェクト開始 → すべてのチェック通過後、自動的にRemotionプレビューを開始

詳細な確認ステップとルールについては quality-checklist.md を参照。

フェーズ6: 最終エクスポート

プレビューが正しく見えた後、最終ビデオをレンダリングします:

cd remotion_video
npx remotion render src/index.ts <CompositionName> out/video.mp4

オプション:

• --codec h264 （デフォルト） または --codec h265 でファイルサイズ削減
• --quality 80 から 100 （デフォルト: 80）
• --scale 1 （1080p） — ソースアセットが対応している場合は --scale 2 で4K
• デバッグ時は --log verbose を追加

出力ファイルは remotion_video/out/video.mp4 にあります。

ビデオ構造

標準的な教育用ビデオ構造:

1. フック（5-10秒）    - 注意を引く質問または声明
2. イントロ（10-20秒） - トピック紹介
3. コンテンツ（メイン） - コア説明、セグメント分割
4. サマリー（10-20秒） - 主要ポイント
5. アウトロ（5-10秒）  - 呼びかけまたはクロージング

詳細な構造テンプレートについては script-and-narration.md パート1を参照。

主要原則

コンテンツの明確性

• シーンごとに1つのコンセプト
• 段階的に複雑性を構築
• 抽象的なアイデア用にビジュアルメタファー使用

ビジュアルシンプルさ

• スクリーン上の最小要素
• クリアなビジュアルヒエラルキー
• 全体を通して一貫したスタイル

アニメーション目的

• すべてのアニメーションが理解に役立つ
• 装飾的なモーションを回避
• ナレーション速度と同期

リファレンスファイル

ファイル	使用時期
requirements-guide.md	新規ビデオプロジェクト開始時（フェーズ1）
script-and-narration.md	ビデオ構造、スクリプト執筆、ナレーション、字幕/TTS（フェーズ1.5 + 2）
storyboard-template.md	スクリプトをビジュアルシーンに変換（フェーズ2）
style-guide.md	ビジュアル要素設計（フェーズ3 + 4）
visual-principles.md	レイアウトと構成決定（フェーズ3 + 4）
animation-guide.md	アニメーション実装（フェーズ4）
svg-components.md	再利用可能コンポーネント作成（フェーズ4）
audio-guide.md	TTS生成、タイムライン再構築、AudioLayer統合詳細ステップ（フェーズ4.5）
quality-checklist.md	品質保証 + スタイルチェックルール（フェーズ5）
design-tokens.ts	カラーパレット、タイポグラフィプリセット、constants.tsテンプレート（フェーズ3）
progress-template.md	実行進捗トラッキングテンプレート（全流程）
scene-template.tsx	シーンコンポーネントテンプレート（フェーズ4）
subtitle-sequence-template.tsx	字幕シーケンスコンポーネントテンプレート（フェーズ4）
common-icons.tsx	一般的なSVGアイコンコンポーネント（フェーズ4）
generate-tts.ts	字幕抽出 + TTS音声生成スクリプト（フェーズ4.5）
rebuild-timeline.ts	音声時間測定 + タイムライン再構築スクリプト（フェーズ4.5）
style-scan.ts	コードスタイル扫描スクリプト（フェーズ5）
render-keyframes.ts	キーフレーム一括スクリーンショットスクリプト（フェーズ5）
shared.ts	スクリプト共有関数（内部依存、直接呼び出し不要）