前回までに、以下の環境を整えてきました。
前回作成したデータは、あくまで動作確認用のテストデータです。
Remotionプロジェクト内に docs/ や data/ のフォルダを用意し、そこに test-script.md や scenes.json などを作成するところまで確認しました。
今回は、そのテストデータから一歩進めて、実際のYouTube動画制作で使うための台本データを作っていきます。
ここでいきなりCodexにRemotionの実装を頼むのではなく、まずは動画の中身を整理します。
今回使うのは、通常のClaudeチャットです。
Claudeには、YouTube用の台本、字幕案、シーン構成案を作成してもらいます。
ただし、ここで大切なのは、Claudeにプロジェクト内のファイルを直接編集させないことです。
Claudeは、文章を作る担当。
Gemini Agentは、その文章を docs/ や data/ に整理する担当。
Codexは、整理されたデータを読み取り、Remotionで映像化する担当。
このように役割を分けておくことで、どのAIが何をしているのか分かりやすくなります。
あとから台本を修正したいとき、字幕だけ直したいとき、Remotionの表示だけ調整したいときにも、作業範囲が混ざりにくくなります。
そのため今回は、まず PROJECT_RULES.md に、AIごとの役割分担とClaudeの出力形式を追記します。
さらに、前回までに作成したテスト用の台本や試作用データをいったん整理し、今回のClaude台本生成テストを空の状態から始められるようにします。
今回の流れは以下の通りです。
-
-
- PROJECT_RULES.md に役割分担とClaudeの出力形式を追記する
- 前回までのテスト用・試作用データを整理する
- AntigravityのAgent欄でClaudeを選択する
- 動画テーマをClaudeに伝える
- Claudeの出力内容を確認する
- Claudeの出力をGemini Agentに渡す準備をする
- Gemini Agentに制作データのファイル化を依頼する
- Gemini Agentが作成したファイルを確認する
- 次回、Codexで src/ 配下の表示実装へ進む
-
ここまでできると、動画の企画から台本作成、字幕データ化、シーン構成の整理までを、かなりスムーズに進められるようになります。
今回は、Codexで映像を作る前の準備段階です。つまり、Remotionに表示させる前に、動画の中身となる「台本・字幕・シーン構成」を整える回になります。
PROJECT_RULES.md に役割分担とClaudeの出力形式を追記する
まず、前回作成したPROJECT_RULES.mdファイルに追記します。
このルールは、AIごとの作業範囲を明確にするためのものです。文章を作るAI、ファイルを整理するAI、実装するAIを分けることで、作業の混乱を防ぎます。
※前回のファイルに上書き保存しました。
# Project Rules このプロジェクトでは、複数のAIを使ってRemotion動画制作を進めます。 ただし、すべてのAIに同じ作業をさせると、ファイルの上書きや役割の混乱が起きやすくなります。 そのため、このプロジェクトでは、AIごとに担当範囲を分けて作業します。 --- ## 役割分担 ### ChatGPT / Claude（通常のチャット） ChatGPT / Claude は、主に文章作成を担当します。 担当する内容は以下です。 - 企画 - 台本 - 章構成 - ナレーション表現 - YouTubeタイトル - サムネ文言 - 字幕案 - シーン構成案 通常のチャットで作成した文章は、そのままプロジェクト内のファイルに自動反映しません。 内容を確認したうえで、手動またはGemini Agent経由で反映します。 --- ## Claudeの出力形式 Claudeに台本作成を依頼する場合は、出力形式を固定します。 Claudeの出力は、以下の3つに分けます。 ### 1. docs/scripts/ に入れる台本本文 YouTube動画で読み上げるための本文です。 ナレーションとして自然に読める文章にします。 ### 2. data/subtitles/ に入れる字幕案 字幕として表示しやすいように、短めの文に分けます。 必要に応じて、あとでSRT形式に整理できる形にします。 ### 3. data/scenes.json に変換しやすいシーン構成 映像化しやすいように、シーン単位で内容を整理します。 各シーンには、以下のような情報を含めます。 - scene_id - title - narration - subtitle - visual_image - duration_seconds この段階では、Claudeはファイルを直接編集しません。 あくまで、Remotionで使うための文章データを作成する役割です。 --- ### Gemini Agent（Antigravity上のAgent） Gemini Agent は、Antigravity上で制作データを整理する担当です。 担当する内容は以下です。 - docs/ 配下の台本ファイル作成・整理 - data/ 配下の字幕データ作成・整理 - scenes.json の作成・整理 - フォルダ構成の提案や作成 Gemini Agent は、Claudeで作成した文章の内容を大きく書き換えず、ファイルとして整理します。 原則として、src/ 配下のRemotion実装は編集しません。 --- ### Codex（今後の実装担当） Codex は、Remotionの実装を担当します。 担当する内容は以下です。 - React / TypeScript の実装 - src/ 配下の編集 - data/ 配下のJSONやSRTの読み取り - 字幕表示 - シーン切り替え - 映像レイアウトの作成 Codexは、docs/ 配下の台本本文を原則編集しません。 台本や字幕の内容を変更したい場合は、先にChatGPT / Claudeで文章を修正し、その後Gemini Agentでdata/側を整理します。 --- ### Antigravity Antigravity は、作業フォルダ全体を管理する場所です。 担当する内容は以下です。 - プロジェクトフォルダの管理 - ブラウザプレビューの確認 - ターミナル操作 - Gemini Agentとのやり取り - Codexによる編集結果の確認 Antigravity上で作業するときは、どのAIがどのファイルを編集しているのかを確認しながら進めます。 --- ## 基本の作業フロー このプロジェクトでは、以下の順番で作業します。 1. ChatGPT / Claude で企画・台本・字幕案・シーン構成を作成する 2. 内容を人間が確認する 3. Gemini Agent に依頼して、 docs/ と data/ 配下にファイルとして整理する 4. scenes.json や subtitles の内容を確認する 5. Codex に依頼して、 data/ の内容を読み取るRemotion実装を作成する 6. Antigravityでプレビューを確認する 7. 必要に応じて、台本・字幕・実装を分けて修正する
【禁止事項】このプロジェクトでは、以下の点に注意します。
- 複数のAIエージェントが同時に同じファイルを編集しない
- ChatGPT / Claude の通常チャットで、プロジェクト内ファイルを直接編集しない
- Gemini Agent は、原則として src/ 配下を編集しない
- Codex は、原則として docs/ 配下の台本本文を編集しない
- src/ と data/ の両方をまたぐ大規模変更は、作業前に目的を確認する
- 自動実行コマンドは、内容を確認してから実行する
- Claudeで作成した文章は、内容を確認してから手動またはAgent経由で反映する
前回までのテスト用・試作用データを整理する
前回までに作成した test-script.md や scenes.json、
さらに試作として作成した nagasaki.md は、あくまで練習用データです。
今回はClaudeで台本生成を試し、Gemini AgentでRemotion用データとして整理する流れを確認したいので、
いったん古い台本・字幕・シーンデータを削除して、空の状態から進めます。
ただし、プロジェクト本体やフォルダ構成は残します。
消すのは、docs/scripts/ や data/ 配下にある前回の試作ファイルだけです。
消してよいもの
私の環境では、消してよい候補はこのあたりです。
docs/scripts/test-script.md docs/scripts/nagasaki.md data/scenes.json data/subtitles/ 内のテスト字幕ファイル
消さない方がいいもの
docs/scripts/ フォルダ data/ フォルダ data/subtitles/ フォルダ PROJECT_RULES.md .agent / .agents / .gemini 系の rules や SKILL.md src/ public/ package.json node_modules/
フォルダ構成は残して、中身のテストデータだけ消すイメージです。
Agentに頼む場合の指示文
この内容を、Agentに依頼します。
前回までに作成したテスト用・試作用の制作データを整理してください。 削除してよい対象は以下です。 - docs/scripts/test-script.md - docs/scripts/nagasaki.md - data/scenes.json - data/subtitles/ 内にあるテスト用字幕ファイル 注意事項： - docs/scripts/ フォルダ自体は削除しないでください。 - data/ フォルダ自体は削除しないでください。 - data/subtitles/ フォルダ自体は削除しないでください。 - src/ 配下は編集しないでください。 - PROJECT_RULES.md は削除・編集しないでください。 - .agent、.agents、.gemini 配下の rules や SKILL.md は削除しないでください。 - package.json、node_modules、public は触らないでください。 目的は、前回までのテストデータを消して、 今回のClaude台本生成テストを空の状態から始められるようにすることです。
確認メッセージが表示されるので、削除対象のファイルを確認後、Runを押します。
AntigravityのAgent欄でClaudeを選択する
前回までのテストデータを整理できたので、ここから今回の本題に入ります。
今回は、CodexでRemotionの実装に進む前に、まず動画の中身となる台本データを作成します。
そのため、AntigravityのAgent欄で Claude を選択します。
ここで注意したいのは、今回のClaudeの役割です。
Claudeには、プロジェクト内のファイルを直接編集してもらうのではなく、YouTube動画用の文章を作成してもらいます。
具体的には、以下の3つです。
– 台本本文
– 字幕案
– シーン構成案
この3つを先に作っておくことで、あとからGemini Agentに依頼して、docs/ や data/ 配下に整理しやすくなります。
また、CodexにRemotion実装を依頼するときも、すでに台本・字幕・シーン構成が用意されているため、src/ 側の実装に集中しやすくなります。
つまり今回のClaudeは、動画制作の「文章設計」を担当する位置づけです。
AntigravityのAgent欄でClaudeを選択したら、次に動画テーマを伝えて、台本・字幕案・シーン構成案をまとめて作成してもらいます。
動画テーマをClaudeに伝える
今回は、一般的なテーマでClaudeに台本生成を依頼してみます。
今回は、Remotionで動画化する前提のYouTube用データを作成したいです。 ただし、今回はファイルの作成・編集・削除は行わず、チャット上に文章として出力してください。 docs/、data/、src/ 配下のファイルは直接編集しないでください。 今回の動画テーマは、 「なぜ人は、やらなきゃいけないことを先延ばししてしまうのか」 です。 歴史動画ではなく、一般的な教養・生活改善系のテーマとして作成してください。 動画尺は、3〜5分程度を想定します。 目的は、あとでGemini Agentに渡して、 以下のように整理しやすいデータを作ることです。 1. docs/scripts/ に入れる台本本文 2. data/subtitles/ に入れる字幕案 3. data/scenes.json に変換しやすいシーン構成案 出力形式は、必ず以下の3つに分けてください。 --- ## 1. 台本本文 YouTube動画のナレーションとして、そのまま読める文章にしてください。 条件： - 冒頭に視聴者の興味を引くフックを入れる - 専門的すぎず、一般の人にも分かりやすくする - 生活の中で思い当たる例を入れる - 最後は「まず小さく始める」方向で前向きに締める - 3〜5分程度の動画になる長さにする --- ## 2. 字幕案 台本本文をもとに、画面に表示しやすい短めの字幕文に分けてください。 条件： - 1行は短め - 読みやすい文にする - あとでSRT形式にしやすいように、番号付きで出力する - タイムコードは不要です --- ## 3. シーン構成案 Remotionで動画化しやすいように、シーン単位で整理してください。 各シーンには、以下の項目を入れてください。 - scene_id - title - narration - subtitle - visual_image - duration_seconds visual_image には、画面に出すイメージを文章で書いてください。 実際の画像生成はしません。 --- 注意： 今回は実装ではなく、台本生成テストです。 React / TypeScript / Remotion のコードは書かないでください。 scenes.json形式そのものに完全変換する必要はありませんが、あとでJSON化しやすい形にしてください。
Claudeの出力内容を確認する
Claudeに指示文を送ると、台本本文・字幕案・シーン構成案をまとめて出力してくれました。
この段階ではまだファイルは作成せず、まずはチャット上で内容を確認します。
ここで重要なのは、Claudeにはまだファイルを編集させていない点です。
Claudeの役割は、あくまで文章の作成です。
このあと内容を確認し、問題がなければGemini Agentに渡して、docs/scripts/、data/subtitles/、data/scenes.json に整理してもらいます。
つまり、
Claudeで文章を作る
Gemini Agentでファイル化する
CodexでRemotion実装を行う
という流れです。
このように分けておくことで、台本の修正、字幕の調整、Remotion側の表示実装を、それぞれ別々に管理しやすくなります。
出力された内容を見ると、シーンごとに narration、subtitle、visual_image、duration_seconds などが整理されています。
この形にしておくと、あとで data/scenes.json に変換しやすくなります。
また、字幕案も別で用意しておけば、data/subtitles/ 配下に .srt 形式として保存しやすくなります。
今回の出力では、合計尺も約270秒、つまり約4分30秒として整理されていました。
Remotionで動画化する前提としては、短すぎず長すぎず、ちょうどよい長さです。
Claudeの出力をGemini Agentに渡す準備をする
Claudeで台本本文・字幕案・シーン構成案を作成できたので、次はこの内容をGemini Agentに渡す準備をします。
ここで大切なのは、Claudeの出力をそのままプロジェクトに反映しないことです。
まずは人間が内容を確認します。
今回確認するポイントは、以下です。
– 台本本文が動画として自然に読めるか
– 字幕案が短く区切られているか
– シーン構成案がRemotionで使いやすい形になっているか
– visual_image に映像イメージが書かれているか
– duration_seconds が極端に長すぎたり短すぎたりしないか
今回のClaude出力では、合計尺が約270秒、つまり約4分30秒になっていました。
内容に大きな問題がなければ、この出力をGemini Agentに渡して、実際のプロジェクトファイルとして整理してもらいます。
このときGemini Agentにお願いするのは、文章の書き直しではなく、ファイル化です。
つまり、Claudeが作った内容をもとに、
– docs/scripts/ に台本本文を保存する
– data/subtitles/ に字幕データを保存する
– data/scenes.json にシーン構成を保存する
という作業をしてもらいます。
ここでも、src/ 配下はまだ編集しません。
Remotionの表示実装は、次回Codexに任せる予定です。
今回はあくまで、Codexに渡す前の制作データを整える工程です。
Gemini Agentに制作データのファイル化を依頼する
実際には、以下のような文面をGemini Agentに貼り付けました。
ポイントは、Gemini Agentに「台本を書き直してもらう」のではなく、
Claudeで作成した内容を、Remotion用のファイルとして整理してもらうことです。
また、src/ 配下はまだ編集しないように明記しています。
今回はCodexに実装を任せる前段階なので、
Gemini Agentには docs/ と data/ 配下の制作データだけを作成してもらいます。
Claudeで作成した台本本文・字幕案・シーン構成案をもとに、Remotion用の制作データとして整理してください。 今回はファイル化のみを行います。 台本の内容を大きく書き換えないでください。 作成・更新する場所は以下です。 1. docs/scripts/procrastination.md - Claudeの「台本本文」をMarkdown形式で保存してください。 2. data/subtitles/procrastination.srt - Claudeの「字幕案」をもとに、SRT形式で保存してください。 - タイムコードは、動画全体が約4分30秒になるように自然に割り振ってください。 3. data/scenes.json - Claudeの「シーン構成案」をもとに、JSON形式で保存してください。 - 各シーンには以下の項目を含めてください。 - scene_id - title - narration - subtitle - visual_image - duration_seconds 注意事項： - src/ 配下は編集しないでください。 - public/ 配下は編集しないでください。 - PROJECT_RULES.md は編集しないでください。 - package.json は編集しないでください。 - node_modules は触らないでください。 - Claudeの文章は大きく変更せず、ファイルとして整理してください。 - scenes.json は後でCodexが読み取りやすい構造にしてください。 目的は、次回CodexにRemotion実装を依頼する前に、docs/ と data/ 配下へ制作データを準備することです。 以下にClaudeの出力を貼ります。 --- ## 1. 台本本文 ここにClaudeが作った台本本文…… ## 2. 字幕案 1. ここに字幕案…… 2. ここに字幕案…… ## 3. シーン構成案 scene_id: opening title: ... narration: ... subtitle: ... visual_image: ... duration_seconds: ...
実際に使う場合は「以下にClaudeの出力を貼ります。」という案内文はそのままでも構いません。
その下にある「—」の線より下のサンプル部分を削除し、そこにClaudeの出力内容をそのまま貼り付けます。
Agentがファイルを作成すると、すぐに確定されるわけではなく、変更内容を確認する画面が表示されます。
画面上部の Accept Changes は、現在開いているファイルの変更を受け入れるボタンです。
右下の Accept all は、Agentが今回変更したファイルをまとめて受け入れるボタンです。
今回は、docs/scripts/procrastination.md、data/subtitles/procrastination.srt、data/scenes.json の3つだけが変更対象だったため、内容を確認して Accept all を押しました。
Gemini Agentが作成したファイルを確認する
Gemini Agentによって、docs/scripts/procrastination.md、data/subtitles/procrastination.srt、data/scenes.json が作成されました。
この画面では、Antigravity上で作成されたファイルと内容を確認しています。
今回できたこと
今回は、CodexでRemotion実装に進む前の準備として、ClaudeでYouTube用の台本・字幕案・シーン構成案を作成し、それをGemini Agentでプロジェクト内のファイルとして整理しました。
作成されたファイルは、以下の3つです。
– docs/scripts/procrastination.md
– data/subtitles/procrastination.srt
– data/scenes.json
前回までのテストデータとは違い、今回はClaudeで作成した内容をもとに、実際の制作フローに近い形でデータを準備できました。
ただし、今回行ったのはあくまで制作データの準備です。
まだ src/ 配下のRemotion実装は行っていないため、作成した台本や字幕を動画として表示する処理は次回に回します。
次回はCodexに依頼して、今回作成した data/scenes.json や data/subtitles/procrastination.srt を読み取り、Remotion上に表示する実装へ進みます。
コメント