educational-video-creator

教育動画クリエイター

Remotion を使って、Kurzgesagt／回形针のビジュアルスタイルを取り入れたプロ品質の教育動画を作成します。

前提条件

このスキルで Remotion を技術的に実装するには、remotion-best-practices が必要です。

確認してインストールしてください（フェーズ 1 の開始前に必ず完了してください）：

# Check if already installed, install if not
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 (provides ffprobe for audio duration measurement)
brew install ffmpeg        # macOS
# apt install ffmpeg       # Linux

# edge-tts (Python TTS engine for narration generation)
pip install edge-tts

プロジェクトのセットアップ

このスキルでは、現在のワークスペース内にある専用の remotion_video サブディレクトリに動画を作成します。

初回セットアップ（推奨 — 非対話型）：

# Create video project directory
mkdir -p remotion_video
cd remotion_video

# Initialize without interactive prompts
npm init -y
npm install remotion @remotion/cli @remotion/google-fonts @remotion/transitions react react-dom
npm install -D typescript @types/react

# Create minimal project structure
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  # Ensure dependencies are installed

プロジェクト構成：

your-workspace/
├── remotion_video/           # Video project root
│   ├── src/
│   │   ├── Root.tsx          # Main composition registry
│   │   └── YourVideo/        # Video-specific components
│   │       ├── index.tsx
│   │       ├── scenes/
│   │       └── components/
│   ├── public/               # Static assets
│   └── package.json
└── ... (other workspace files)

クイックスタート

1. プロジェクトをセットアップする → 必要に応じて remotion_video ディレクトリを作成します
2. 要件を収集する → トピック、対象者、動画の長さを確認します
3. 台本を作成する → ストーリー展開とテンポを備えたナラティブを完成させます
4. ストーリーボードを作成する → 台本をアニメーション仕様付きの映像シーンに分割します
5. ビジュアルをデザインする → スタイルガイドを適用し、SVG コンポーネントを作成します
6. アニメーションを実装する → Remotion でシーンをコーディングします
7. 品質を保証する → 自動チェック、自動修正、プレビューの自動起動を行います

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

会話の各ターンでは、コンテキストの喪失（圧縮や新しいセッション）が発生する場合があります。作業を始める前に、必ず次の手順を実行してください。

1. remotion_video/PROGRESS.md が存在するか確認します
   • 存在する場合 → 現在のフェーズと最後に完了した手順を確認するため、最後まで読みます
   • 存在しない場合 → 新しいプロジェクトです。フェーズ 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」セクション（Current Phase と Current Step）を更新します
3. その後に限り、次の項目へ進みます

複数の項目をまとめて処理してはいけません。項目を 1 つ完了 → 更新を 1 回 → 次の項目へ進みます。

フェーズ移行ゲート

新しいフェーズを開始する前に、必ず次の操作を行ってください。

1. PROGRESS.md を読み、前のフェーズの項目がすべて [x] になっていることを確認します
2. 「Current Phase」を新しいフェーズに更新します
3. 前のフェーズに未チェックの項目がある場合は、先に完了させます

ワークフロー

フェーズ 1：要件の確認

⚠️ 最初に：［前提条件］(#prerequisites)のセクションを完了してください（remotion-best-practices スキルをインストールして読みます）。次に、progress-template.mdからremotion_video/PROGRESS.mdを作成し、Project Infoを記入します。

開始する前に、次の重要な詳細をユーザーに確認してください。

• トピック：どのような概念やテーマを説明しますか？
• 視聴者：誰が視聴しますか？（子ども／大人、初心者／専門家）
• 言語：中国語／英語／その他？
• 長さ：短編（1～3分）、中編（3～5分）、長編（5～10分）のどれですか？
• 要点：視聴者に何を学んでもらう必要がありますか？

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

フェーズ 1.5：台本の作成

⚠️ チェックポイントルールが適用されます：このフェーズの各チェックボックス項目を完了するたびに、直ちにPROGRESS.mdを更新してください。更新をまとめて行わないでください。

絵コンテを作成する前に、完全なナレーション台本を書いてください。このフェーズでは、ビジュアルの仕様、フレーム番号、アニメーションのパラメーターは考慮せず、ストーリーテリング、つまり何をどのように伝えるかにのみ集中します。

重要：ナレーションの全文、つまり実際に読み上げるすべての言葉を書いてください。要約、箇条書き、プレースホルダーは書かないでください。台本には、最終的に読み上げる内容を記載します。

台本には次の内容を含めてください。

1. 中心となるメッセージ — 1行の要約、学習目標
2. ナラティブ戦略 — script-and-narration.mdの手法を適用します。
   • 導入の切り口（質問／シナリオ／課題／物語）
   • 動画全体を通して使う中心的な比喩
   • 知識を積み上げる順序（何が何を前提とするか）
   • 感情の流れ（好奇心 → 理解 → 驚き → 満足）
3. ナレーション全文 — 各章で読み上げる内容を、一語一句すべて記載します。
   • 強調マーカーを含めます（強く読む箇所は太字、柔らかいトーンで読む箇所は斜体）。
   • [.]（短い）、[..]（中程度）、[...]（長い）、[PAUSE]または[BEAT]（ドラマチックな間）を使ってポーズを示します。長さの意味については、script-and-narration.mdのパート3を参照してください。
   • 各章の後に、ビジュアルの意図を追加します（視聴者に何を見せるべきかを説明する1～2文。フェーズ2でシーンを設計するのに十分な内容とし、アニメーションの仕様は含めません）。
4. ペース配分のメモ — 速度を上げる、落とす、間を置く箇所
5. セルフレビュー — ユーザーに提示する前に、script-and-narration.mdのチェックリストを確認します。

品質ゲート：完全な台本をユーザーに提示し、承認を得てください。ユーザーがナラティブを明確に承認するまで、フェーズ2に進まないでください。

台本を先に作成する理由：

• 「何を伝えるか」と「どう見せるか」を切り分けます。これは異なる創作活動です。
• フレーム範囲を同時に計算しないほうが、LLMはより優れたナラティブを作成できます。
• テキストだけなら修正のコストが低く、アニメーション仕様付きの絵コンテは修正にコストがかかります。
• 技術的な詳細を読み込まなくても、「ストーリーは良いか」をユーザーが簡単に確認できます。

出力：承認された台本をremotion_video/script.mdとして保存します。

動画構成のテンプレート、ナラティブの手法、文章作成のテクニック、TTSに関するメモについては、script-and-narration.mdを参照してください。

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

⚠️ チェックポイントルールが有効です：このフェーズのチェックボックス項目を1つ完了するたびに、すぐに PROGRESS.md を更新してください。更新をまとめて行わないでください。

承認済みのスクリプトを、制作にすぐ使えるストーリーボードに変換します。スクリプトが示すのは何を話すかであり、ストーリーボードが定義するのはどのように見せるかです。

入力：完成したスクリプト（フェーズ 1.5 で承認済み）

タスク：

1. スクリプトの章をビジュアルシーン（5～15シーン）に分割する
2. スクリプトのナレーションテキストを各シーンに割り当てる
3. 各シーンのビジュアルレイヤー（背景／中景／前景／UI）を設計する
4. フレーム単位のアニメーション仕様（スプリング、イージング、タイミング）を追加する
5. ビジュアルとナレーションの同期ポイントを定義する
6. アセットの一覧（SVG コンポーネント、色、タイポグラフィ）を計画する

物語はすでに決まっているため、すべてをゼロから作成する場合に比べて認知負荷は大幅に低く、ビジュアルの制作に集中するだけで済みます。

出力：完成したストーリーボードを remotion_video/storyboard.md に保存し、デザインの追跡と反復作業の参照に使用します。

テンプレートについては storyboard-template.md を参照してください。 字幕のフォーマットと TTS に関する注意事項については、script-and-narration.md のパート 4 を参照してください。

フェーズ 3：ビジュアルデザイン

⚠️ チェックポイントルールが有効です：このフェーズのチェックボックス項目を1つ完了するたびに、すぐに PROGRESS.md を更新してください。更新をまとめて行わないでください。

Kurzgesagt／ペーパークリップのスタイルを適用します。具体的な手順：

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

スタイルの原則：

• 控えめなグラデーションを取り入れたフラットデザイン
• 大胆で彩度の高いカラーパレット
• 角を丸めた幾何学図形（rx/ry）
• すっきりとしたサンセリフ体のタイポグラフィ

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

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

⚠️ チェックポイントルールが有効です：このフェーズのチェックボックス項目を1つ完了するたびに、すぐに PROGRESS.md を更新してください。更新をまとめて行わないでください。「Files Created」に重要なファイルパスを記録してください。

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

1. ビジュアル要素の SVG コンポーネントを作成する
2. すべてのアニメーションに useCurrentFrame() を使用する
3. 適切なイージングを適用する（自然な動きにはスプリングを使用）
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() が返すのはローカルフレーム番号です。グローバルフレーム番号を使用すると、後続シーンの字幕が遅れて表示されたり、まったく表示されなくなったりします
• これにより、フェーズ 4.5 の rebuild-timeline.ts --write が、シーンファイルを変更せずにタイミングを更新できるようになります ナレーションとビジュアルの同期ルール（アニメーションと字幕のずれを防止）：
• ナレーションの内容に対応する各ビジュアル要素（アイコンの表示、矢印の展開、グラフの描画など）の startFrame は、必ず対応する AUDIO_SEGMENTS セグメントの startFrame から導出してください。「ビジュアルのテンポ」を基準にハードコードしてはいけません
• 正しい例：const liftArrowStart = AUDIO_SEGMENTS.forces[0].startFrame;（ナレーションで「揚力」と言うときに揚力の矢印が表示されます）
• 誤った例：const liftArrowStart = 30;（感覚でフレーム数を書いており、ナレーションと無関係です）
• 純粋に装飾目的のアニメーション（背景のパーティクル、環境演出）はこの制約の対象外で、自由にタイミングを設定できます
• Phase 4 では推定した AUDIO_SEGMENTS を使用します。Phase 4.5 の rebuild-timeline で実際の時間に更新すると、コードはハードコードされた数値ではなく変数を参照しているため、ビジュアルアニメーションは自動的に同期します
• 実装パターンについては、animation-guide.md の「ナレーションに同期するアニメーション」セクションを参照してください

要素のサイズ設定ルール（「サムネイル症候群」—大きなキャンバス上で要素が小さくなる問題を防止）：

• コンテンツがキャンバスを埋めるよう、visual-principles.md の「コンテンツ領域の活用」を参照してください（主要コンテンツは安全領域の 60% 以上）
• コンポーネントの標準サイズについては svg-components.md を参照してください（アイコンは 96px 以上、フローノードは高さ 160px 以上、ラベルは 40px 以上）
• グラフやフローチャートはコンテンツ領域の大部分を占めるようにし、1920×1080 のキャンバス上でサムネイルのように縮小しないでください

背景のルール（トランジション中に透明／市松模様のフレームが表示される問題を防止）：

• メインコンポジションには、すべてのシーンの背後に配置され、トランジションに参加しない、永続的な <AbsoluteFill> 背景レイヤー（COLORS.background を使用）を必ず設けてください
• 各シーンコンポーネントにも、最初の子要素として単色の背景を必ず設けてください
• fade() トランジション中は両方のシーンの不透明度が下がります。永続的な背景がないと、プレビューでは市松模様、レンダリングでは黒の透明フレームが表示されます
• 実装パターンについては、animation-guide.md の「透明フレームの防止」を参照してください

ビジュアルの豊かさに関するルール（PowerPoint のような出力を防止）：

• 各シーンには、文字以外のビジュアルの主要要素（SVG イラスト、グラフ、アニメーショングラフィックなど）を少なくとも 1 つ含めてください。文字ラベルと四角形だけでは、適切なビジュアルコンテンツとは言えません
• フローチャートや因果関係の図では、文字と組み合わせてアイコンまたはイラストを使用してください。文字を入れた単色の四角形だけで構成しないでください。svg-components.md の「イラスト付きフローノード」パターンを参照してください
• 各シーンには、style-guide.md の「環境エフェクト」セクションを参考に、環境演出レイヤー（パーティクル、光彩、テクスチャなど）を設けてください
• SVG イラストは Kurzgesagt スタイルを取り入れてください。角を丸めた幾何学形状（rx/ry）、フラットでありながら奥行きのある表現（複数の path の重ね合わせ）、柔らかなグラデーション（linearGradient/radialGradient）、適切なストロークを使用します
• visual-principles.md の「見せて、語らない」原則を参照してください。図で表現できる概念を、文字入りの四角形で表現しないでください
• 具体的なイラストの最低品質基準として、scene-template.tsx の ForceDiagramScene にある SVG の飛行機イラストを参照してください

色のルール（Phase 5 の style-scan 準拠に不可欠）：

• すべての色は constants.ts の COLORS オブジェクト（例：COLORS.accent.rose）を介して参照してください。TSX ファイルに HEX 値を直接記述してはいけません
• 例外は、不透明度を変えるための rgba()（例：字幕の背景に使う rgba(0, 0, 0, 0.7)）のみです
• これにより、style-scan で「承認済みパレットにない色」という警告が大量に報告されるよくある問題を防げます

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

Phase 4.5: 音声の生成

⚠️ チェックポイントルールが有効です：このフェーズの各チェック項目を完了したら、すぐに PROGRESS.md を更新してください。更新をまとめて行わないでください。

アニメーションのコーディングが完了したら、動画の音声を生成してタイムラインを同期します：

1. TTS 音声を生成 — generate-tts.ts を使って NARRATION からテキストを抽出し、mp3 を生成します
2. タイムラインを再構築 — rebuild-timeline.ts --write を使って、実際の音声の長さに基づき constants.ts を更新します
3. アニメーションのキーフレームを調整 — newDuration / oldDuration の比率に合わせてスケールします
4. BGM を追加 — ロイヤリティフリーの BGM を public/audio/bgm.mp3 に配置します
5. AudioLayer を作成 — ナレーションと BGM を再生するコンポーネントを作成します
6. 統合して検証 — AudioLayer は必ず TransitionSeries の外側に配置してください

詳細な手順、コマンドの引数、AudioLayer のテンプレートについては audio-guide.md を参照してください。

Phase 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）。ソースアセットが対応している場合は、4K用に --scale 2 を使用します
• レンダリングの問題をデバッグする場合は、--log verbose を追加します

出力ファイルは remotion_video/out/video.mp4 に保存されます。

動画の構成

標準的な教育動画の構成：

1. Hook (5-10s)      - Attention-grabbing question or statement
2. Intro (10-20s)    - Topic introduction
3. Content (main)    - Core explanation, broken into segments
4. Summary (10-20s)  - Key takeaways
5. Outro (5-10s)     - Call to action or closing

詳しい構成テンプレートについては、script-and-narration.md のパート 1 を参照してください。

主な原則

コンテンツの明確さ

• 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	スクリプト共有関数（内部依存。直接呼び出す必要はありません）