Antigravity＋CodexでRemotion動画を作る実践記録｜章タイトル・背景画像・YouTube風テロップまで表示してみた

前回は、ClaudeでYouTube用の台本・字幕案・シーン構成案を作成し、それをGemini AgentでRemotion用の制作データとして整理しました。

作成したファイルは、主に以下の3つです。

– docs/scripts/procrastination.md
– data/subtitles/procrastination.srt
– data/scenes.json

ここまでで、動画の中身となる台本・字幕・シーン構成は準備できました。
ただし、まだRemotion側の表示実装は行っていません。
つまり、データは用意できていますが、それを画面に表示するための src/ 配下の実装はこれからです。

今回は、AntigravityにCodex拡張機能を導入し、前回作成した制作データをRemotion上に表示するところまで進めます。
まずはCodexのインストールと初期設定を行い、PROJECT_RULES.mdを読ませて作業範囲を確認します。
その後、data/scenes.json や字幕データをもとに、章タイトル・字幕・背景画像・YouTube風テロップを表示する実装へ進みます。

実際の作業では、文字化けや表示崩れも出てきたため、その都度確認しながら調整していきます。

Codex拡張機能をインストールする
Antigravity内でCodexを起動する
PROJECT_RULES.mdを読ませる
文字化け修正後、Codex実装へ戻る
表示された内容を確認し、見た目を調整する
Visualを画像差し込み用の設定に変更する
画像を配置してRemotion Studioで確認する
背景画像は表示されたが、まだ静止画に近い
背景画像とテロップ表示を確認する
章タイトルを冒頭だけ表示する
字幕ではなくYouTube風テロップにする
一度、通常テロップが消えてしまった
通常テロップも表示され、動画らしくなった
テロップは音声を作ってから合わせる
Google Cloud TTSは参考ルートとして紹介します
まずはVrewで音声を作る方が分かりやすい
字幕とテロップは分けて考える

Codex拡張機能をインストールする

まず、Antigravity左側の拡張機能アイコンを開きます。
検索欄に「Codex」と入力すると、拡張機能の一覧に「Codex – OpenAI’s coding agent」が表示されました。
今回は、このCodex拡張機能をインストールして使っていきます。
表示されたCodex拡張機能の右側にある「Install」を押します。

Installを押すと、提供元を信頼するか確認する画面が表示されました。
これは、Antigravityで初めて openai 提供の拡張機能をインストールするために表示される確認です。
内容としては、「この拡張機能はopenaiが公開しているものですが、サードパーティ製拡張機能なので、信頼できる場合のみインストールしてください」という意味です。
今回はCodex拡張機能を使うため、内容を確認したうえで「Trust Publisher & Install」を押して進めます。

Codex拡張機能をインストールしたあと、すぐに右側のCodexパネルが表示されない場合があります。
その場合は、画面上部に追加されたCodexのアイコンをクリックします。
今回の環境では、上部のCodexアイコンを押すことで、右側にCodexパネルが表示されました。
Codexパネルが開くと、「Sign in with ChatGPT」というボタンが表示されます。
今回はChatGPTアカウントで使うため、「Sign in with ChatGPT」をクリックして進めます。

「Sign in with ChatGPT」を押すと、OpenAIの認証ページを外部ブラウザで開くか確認されます。
表示されているURLが auth.openai.com になっていることを確認し、「Open」を押して進めます。

OpenAIの認証ページが開くので、普段使っているChatGPTアカウントでサインインします。
メールアドレスでログインする場合は、メールアドレスを入力して続行します。
GoogleアカウントやAppleアカウントでChatGPTを使っている場合は、それぞれのボタンからログインします。
サインインが完了すると、「Signed in to Codex」と表示されます。
この画面が表示されれば、Codexへのサインインは完了です。
ブラウザのページは閉じて、Antigravityに戻ります。

Antigravity内でCodexを起動する

サインインが完了してAntigravityに戻ると、右側にCodexの画面が表示されます。
この画面が表示されれば、Antigravity内でCodexを使う準備はできています。
今回は、右下に表示されている「Next」を押して、Codexの初期設定を進めます。
Codexは、プロジェクト内のファイルを読み取り、必要に応じて編集やコマンド実行もできるエージェントです。
そのため、いきなり実装を依頼するのではなく、次の工程でまず PROJECT_RULES.md を読ませて、このプロジェクトでの作業ルールを確認してもらいます。

次に、Codexの案内画面が表示されました。
この画面では、Codexに作業を渡すとクラウド上でも処理できることが説明されています。
今回はまずAntigravity内のプロジェクトで作業を進めたいので、内容を確認して「Next」を押します。

次に、TODOコメントをCodexのタスクに変換できるという案内画面が表示されました。
これは、コード内に書いたTODOをCodexへ作業依頼として渡せる機能の説明です。
今回はTODOから依頼するのではなく、Codexに直接指示文を送って作業してもらうため、内容を確認して「Next」を押します。

Codexの初期案内では、Codexがコードを書いたりコマンドを実行したりできること、ただし間違える可能性もあるため、生成されたコードや実行内容を確認しながら進める必要があることが説明されています。
今回は、Codexに自由にすべてを任せるのではなく、PROJECT_RULES.md を読ませたうえで、src/ 配下だけを編集対象にして進めます。
内容を確認したら「Next」を押します。

初期案内を進めると、CodexでGPT-5.5を使えるという案内が表示されました。
今回はこのままCodexで作業を進めるため、「Try GPT-5.5 now」を押して進めます。
ここまでで、Codex拡張機能のインストールとサインイン、初期設定が完了しました。

Codexを使う前に、「Set up Agent sandbox to continue」という表示が出ました。
これは、Codexが作業できる範囲を設定するための画面です。
Codexはプロジェクト内のファイルを読み取ったり、必要に応じて編集したりできるため、最初に安全用の設定を行います。
今回は、標準の「Default permissions」のまま進めます。
Default permissionsでは、基本的に現在のワークスペース内で作業し、必要な場合は確認を求める設定になっています。
表示された「Set up」を押して、Codexを使う準備を進めます。

最後に、CodexのAgent sandboxを設定している途中で、Windowsの確認画面が表示されました。
内容は、「このアプリがデバイスに変更を加えることを許可しますか？」というものです。
表示元は Node.js になっていました。
今回はCodexのセットアップ中に表示された確認だったため、内容を確認したうえで「はい」を押して進めました。

PROJECT_RULES.mdを読ませる

Codexを使う準備ができたので、いよいよ実装に進みます。
ただし、ここでいきなり「Remotionで表示して」と依頼するのではなく、まずは PROJECT_RULES.md を読ませます。
このプロジェクトでは、Claude、Gemini Agent、Codexの役割を分けています。
Claudeは台本や字幕案を作る担当。
Gemini Agentは、その内容を docs/ や data/ に整理する担当。
Codexは、整理されたデータを読み取り、src/ 配下のRemotion実装を担当します。
そのため、Codexにも最初に PROJECT_RULES.md を確認してもらい、どのファイルを編集してよいのかを理解してもらいます。
今回はまだ実装を始めず、まずはルールと現在の構成を確認してもらうところから始めます。

Codexパネルが右側に表示されました。
下部に「Ask Codex anything」と表示されている入力欄があるので、ここにCodexへの指示文を入力します。
今回はいきなり実装を依頼せず、まず PROJECT_RULES.md を読ませて、作業範囲を確認してもらいます。

依頼文

このプロジェクトでは、PROJECT_RULES.md の内容に従って作業してください。
まず PROJECT_RULES.md を読んでください。
今回は、前回作成した以下の制作データを使います。

- data/scenes.json
- data/subtitles/procrastination.srt
- docs/scripts/procrastination.md

この制作データを読み取り、Remotionで表示できるように src/ 配下の実装を進めたいです。
ただし、まだ編集は始めないでください。
まずは、現在のプロジェクト構成と PROJECT_RULES.md の内容を確認し、今回の作業でどのファイルを編集する必要がありそうかを説明してください。

注意事項：

- src/ 配下以外は、原則として編集しないでください。
- docs/ 配下の台本本文は編集しないでください。
- data/ 配下の scenes.json や subtitles は、今回は読み取り専用として扱ってください。
- いきなりコード変更を始めず、まず確認結果だけを教えてください。

Codexに PROJECT_RULES.md を読ませたところ、今回は編集せず、まずプロジェクト構成を確認してくれました。
確認結果として、Codexは src/ 配下が主な編集対象であること、data/ や docs/ は基本的に読み取り用として扱うことを理解していました。
一方で、data/scenes.json がJSONとしては有効なものの、日本語部分が文字化けしていることも分かりました。
このまま実装に進むと、Remotion Studio上に表示される章タイトルや字幕が文字化けする可能性があります。
そのため、ここではCodexにすぐ実装を依頼せず、いったんAntigravity上のClaude Agentに戻して data/scenes.json の文字化けを修正します。
Codexは src/ 配下の実装担当。
Antigravity上のClaude Agentは、data/ 配下の制作データ整理担当。
この役割分担を守ることで、どのAIがどのファイルを直しているのかが分かりやすくなります。

Codexの確認で文字化けが見つかった

Codexに PROJECT_RULES.md を読ませたところ、data/scenes.json がJSONとしては有効なものの、日本語部分が文字化けしていることも分かりましたのでAntigravity上のClaude Agentに以下内容で修正依頼しています。

※Claude Agentに戻って依頼するので、Codexパネルを閉じて、画面右上の「Open Agent Manager」から通常のAgent画面を開きます。

依頼文

Codexで確認したところ、data/scenes.json はJSONとしては有効ですが、日本語の文字列が文字化けしていることが分かりました。

今回は、data/scenes.json の文字化けを修正してください。

修正に使う参考ファイルは以下です。

- docs/scripts/procrastination.md
- data/subtitles/procrastination.srt
- data/scenes.json

作業内容：

- data/scenes.json の構造はできるだけ維持してください。
- video_id、title、duration_seconds、duration_frames、fps、scenes の構造は残してください。
- 各シーンの scene_id、start_seconds、end_seconds、duration_seconds はできるだけ維持してください。
- title、narration、subtitle、visual_image の日本語が文字化けしている場合は、docs/scripts/procrastination.md と data/subtitles/procrastination.srt を参考に、自然な日本語に修正してください。

注意事項：

- src/ 配下は編集しないでください。
- docs/scripts/procrastination.md は編集しないでください。
- data/subtitles/procrastination.srt は編集しないでください。
- 今回は data/scenes.json の文字化け修正だけを行ってください。

目的は、次にCodexでRemotion実装を進める前に、data/scenes.json を正しい日本語で読み取れる状態にすることです。

1.途中で「Our servers are experiencing high traffic right now, please try again in a minute.」というエラーが表示されました。
これは、サーバーが混雑しているため、少し待ってから再試行してくださいという意味です。
今回は作業内容の問題ではなく、一時的な混雑によるエラーなので、少し待ってから「Retry」を押して再実行します。

2.次に、Agentが data/scenes.json の中身を確認するためのコマンド実行「Get-Content “data\scenes.json” -Raw -Encoding utf8 …」を求めてきました。
今回表示された Get-Content コマンドは、ファイル内容を読み取って確認するためのもので、ファイルを編集するものではありません。
内容を確認し、問題なさそうだったので「Run」を押して進めます。

3.続いて、data/scenes.jsonの先頭部分を確認するためのコマンド実行「Get-Content “data\scenes.json” -Raw -Encoding utf8 | Out-String …」を求められました。
※今回の Get-Content コマンドは、ファイルの内容を読み取って表示するだけのものです。
削除や上書きではないため、内容を確認して「Run」を押します。

4.途中で「Our servers are experiencing high traffic right now, please try again in a minute.」というエラーが表示されました。
これは、サーバーが混雑しているため、少し待ってから再試行してくださいという意味です。
作業内容の問題ではなく、一時的な混雑によるエラーなので、少し待ってから Retry を押して再実行します。

5.確認で、data/scenes.json はShift-JIS（CP932）で保存されている可能性があり、UTF-8として読み込むことで文字化けしていると分かりました。
そこで、Agentが data/scenes.json をShift-JISとして読み込み、UTF-8で保存し直すコマンドを提案してきました。
今回は対象が data/scenes.json のみで、文字コードを変換する処理だったため、内容を確認して「Run」を押します。

6.文字コードの変換が完了すると、「Done」と表示されました。
続いて、変換後の data/scenes.json をUTF-8として読み直し、文字化けが直っているか確認するコマンドが表示されました。
このコマンドはファイルを読み取るだけなので、内容を確認して「Run」を押します。

7.続いて、data/scenes.json の先頭バイトを確認するコマンドが表示されました。
これは、変換後のファイルがUTF-8として保存されているか、BOMの有無などを確認するためのものです。
ファイルを編集するコマンドではなく、状態確認のための読み取りコマンドなので、内容を確認して Run を押します。

8.文字コード変換後、再度確認しようとしたところ、Agent側で「Our servers are experiencing high traffic right now」というエラーが表示されました。
これは、サーバーが混雑しているため、少し待ってから再試行してくださいという意味です。
ただし、直前の処理で「Done」と表示されていたため、文字コード変換自体は完了している可能性があります。
そこで今回は、Retryを繰り返すのではなく、data/scenes.json を直接開いて、日本語が正常に表示されているか確認します。

「Agent terminated due to error」と表示され、Agentがエラーで終了しました。
いったん処理を止めるため、「Dismiss」を押して中断します。

9.文字コード変換を試しましたが、data/scenes.json の日本語部分が大きく文字化けしてしまいました。
この状態のままCodexに実装を依頼すると、Remotion Studio上にも文字化けしたタイトルや字幕が表示される可能性があります。
そのため、ここでは無理に文字コード変換で直そうとせず、正常に読めている docs/scripts/procrastination.md と data/subtitles/procrastination.srt をもとに、data/scenes.json を作り直すことにしました。

依頼文

data/scenes.json が文字化けしてしまったため、作り直してください。

参考にするファイルは以下です。

- docs/scripts/procrastination.md
- data/subtitles/procrastination.srt

作業内容：

- data/scenes.json を新しく作り直してください。
- 日本語が文字化けしないように、UTF-8で保存してください。
- JSONとして正しい形式にしてください。
- 既存の data/scenes.json の文字化けした本文は使わず、docs/scripts/procrastination.md と data/subtitles/procrastination.srt を参考にしてください。

構造は以下を維持してください。

{
  "video_id": "procrastination-01",
  "title": "...",
  "duration_seconds": 270,
  "duration_frames": 8100,
  "fps": 30,
  "scenes": [
    {
      "scene_id": "...",
      "title": "...",
      "start_seconds": 0,
      "end_seconds": 20,
      "duration_seconds": 20,
      "narration": "...",
      "subtitle": "...",
      "visual_image": "..."
    }
  ]
}

注意事項：

- src/ 配下は編集しないでください。
- docs/scripts/procrastination.md は編集しないでください。
- data/subtitles/procrastination.srt は編集しないでください。
- 今回は data/scenes.json の再作成だけを行ってください。
- Codex実装に進む前に、まず data/scenes.json を正しい日本語で読める状態に戻すことが目的です。

10.再作成を依頼したところ、途中でサーバー混雑のエラーが表示されました。
ただし、画面には scenes.json が変更対象として表示されていたため、すぐにRetryする前に、いったん data/scenes.json を開いて内容を確認します。
日本語が正常に戻っていればそのまま進めます。
まだ文字化けしている場合は、Retryを押して再実行します。

11.修正後の差分を見ると、赤い行には文字化けした古い内容、緑の行には修正後の日本語が表示されていました。
この段階ではまだ変更は確定していません。
まず文字コード確認のコマンドを Run で実行し、問題がなければ「Accept all」を押して、修正内容を反映します。

12.data/scenes.json の日本語が正常に表示されるようになったため、最後に文字コードの確認コマンドが表示されました。
このコマンドはファイルを書き換えるものではなく、UTF-8として正しく読めるか確認するためのものです。
内容を確認し、Runを押して最終確認します。

13.次に、Pythonが使えるか確認するための `python –version` コマンドが表示されました。
これはPythonのバージョンを確認するだけのコマンドで、ファイルを編集するものではありません。
内容を確認して、Runを押して進めます。

14.Pythonの確認では「Python was not found」と表示されましたが、今回のRemotion環境で重要なのはNode.jsです。
続いて、Node.jsが使えるか確認するために `node –version` コマンドが表示されました。
これはNode.jsのバージョンを確認するだけのコマンドなので、内容を確認して Run を押します。

15.途中で「maximum output token limit」と「high traffic」のエラーが表示されました。
これは、Agentの出力が長くなりすぎたことと、サーバー混雑が重なった状態です。
この場合、Retryを繰り返すより、いったんDismissで閉じて、data/scenes.jsonを直接確認します。

16.data/scenes.json を確認すると、subtitle の中に \n が入っている箇所がありました。
これは文字化けではなく、JSON内で改行を表す記号です。
たとえば \n が入っている部分は、実際の表示では改行として扱われます。
そのため、日本語が正しく読めていて、JSONの構造が崩れていなければ問題ありません。

日本語が正常に表示されていれば、文字化け修正は完了として進めます。

文字化け修正後、Codex実装へ戻る

data/scenes.json の文字化けを修正し、内容を確認しました。
subtitle の中に \n が入っている箇所もありますが、これは文字化けではなく、JSON内で改行を表す記号です。
日本語が正しく読めていて、JSONの構造も崩れていなければ問題ありません。
これで、Codexに実装を依頼する前のデータ確認ができました。
次は、Codexに戻って、data/scenes.json と data/subtitles/procrastination.srt を読み取り、Remotion上に章タイトルや字幕を表示する実装へ進みます。

Codexへの依頼文

data/scenes.json の文字化け修正が完了しました。

これから Remotion の表示実装を進めてください。

使用するファイルは以下です。

- data/scenes.json
- data/subtitles/procrastination.srt

編集対象は src/ 配下だけにしてください。

実装したい内容：

- data/scenes.json を読み取る
- 現在の再生時間に合わせてシーンを切り替える
- 章タイトルを表示する
- 字幕を表示する
- visual_image の内容をもとに、簡単な背景や説明テキストを表示する

注意事項：

- docs/ 配下は編集しないでください。
- data/ 配下は編集しないでください。
- PROJECT_RULES.md は編集しないでください。
- package.json や tsconfig.json は、必要がある場合でも勝手に編集せず、先に相談してください。
- まずは src/ 配下だけで実装できる範囲で進めてください。

実装後、変更したファイルと内容を説明してください。

Codexに実装を依頼すると、src/ 配下のファイルだけを編集して、Remotion上に表示するための実装を作成してくれました。

今回変更されたのは、以下の4ファイルです。

– src/Composition.tsx
– src/Root.tsx
– src/declarations.d.ts
– src/procrastinationSrt.ts

data/scenes.json を読み取り、現在の再生時間に合わせてシーンを切り替える処理や、章タイトル・字幕表示の実装が追加されています。
また、npm.cmd run lint も通っているため、TypeScript / ESLint の確認も問題なさそうです。
画面には Web preview が表示され、Remotion Studio の URL は http://localhost:3000 になっていました。
次に、Web preview の Open を押して、実際にRemotion Studio上で表示を確認します。
なお、Remotion Studioを確認するには、my-video フォルダで npm run dev を実行し、ローカルサーバーを起動しておく必要があります。
※もし Web preview が表示されない場合や、localhost:3000 が開けない場合は、ターミナルで cd my-video コマンドでフォルダに移動し、npm run dev を実行してから確認します。

表示された内容を確認し、見た目を調整する

Remotion Studioで確認すると、data/scenes.json の内容をもとに、章タイトルと字幕が表示されました。
これで、前回作成したシーン構成データと字幕データを、Remotion上に表示するところまでは成功です。
ただし、実際に画面を確認してみると、いくつか調整したい点も出てきました。
まず、字幕の改行位置です。
一部の字幕で、

「今日はタイトルだけ書く」と決め
る。

のように、文の途中で不自然に改行されている箇所がありました。
これは文字化けではなく、字幕ボックスの幅やフォントサイズ、折り返し設定によるものです。
そのため、Codexに依頼して、字幕が自然に読めるように表示調整してもらいます。
もう一つ気になったのが、右上に表示されていた「Visual」という枠です。
この中には、data/scenes.json の visual_image に入っている内容が表示されていました。
ただし、visual_image は本来、視聴者に見せるテキストではありません。
これは、今後の映像制作で背景画像や演出を考えるための内部メモとして使うものです。
そのため、完成形の画面では Visual 枠を非表示にし、画面には章タイトルと字幕を中心に表示する方針にします。
今回は、以下の3点をCodexに追加で依頼します。

章タイトルの改行調整
字幕の改行位置を自然にする
右上のVisual枠を非表示にする

依頼文

Remotion Studioで表示確認したところ、章タイトルと字幕は表示できています。

ただし、以下の3点を調整したいです。

1. 章タイトルの改行位置を自然にしたい
2. 字幕の改行位置を自然にしたい
3. 右上の Visual 枠を非表示にしたい

src/ 配下だけを編集して対応してください。
data/ 配下、docs/ 配下、PROJECT_RULES.md は編集しないでください。

【1. 章タイトルの改行調整】

現在、章タイトルが以下のように不自然な位置で改行されています。

例：
フック（先延ば
しあるある）

日本語として読みやすくなるように、章タイトルの表示を調整してください。

希望する修正内容：

- 章タイトルの表示エリアを広げる
- フォントサイズを必要に応じて少し小さくする
- 日本語の単語の途中で不自然に改行されにくくする
- 1行または2行で自然に読めるようにする
- 画面からはみ出さないようにする

【2. 字幕の改行調整】

現在、字幕が以下のように不自然な位置で改行されることがあります。

例：
「今日はタイトルだけ書く」と決め
る。

日本語として読みやすくなるように、字幕表示を調整してください。

希望する修正内容：

- 字幕ボックスの横幅を少し広げる
- フォントサイズを必要に応じて少し小さくする
- 文の途中で不自然に折り返されにくくする
- 1行または2行で自然に読めるようにする
- 画面下部からはみ出さないようにする

【3. Visual枠の非表示】

右上に表示されている「Visual」枠は、視聴者に見せるものではありません。

data/scenes.json の visual_image は、今後の映像制作・背景画像・演出指示に使うための内部メモとして扱ってください。

希望する修正内容：

- 右上の Visual ボックスを表示しない
- visual_image の内容を画面上にテキスト表示しない
- 章タイトルと字幕を中心に表示する
- visual_image のデータ自体は削除しない

修正後、変更したファイルと内容を説明してください。

修正後は、右上に表示されていた Visual 枠が消え、章番号・章タイトル・字幕だけのシンプルな画面になりました。
また、章タイトルや字幕の不自然な改行も改善され、読みやすい表示になっています。
章番号はタイトルの上に配置され、現在どのシーンを見ているのかも分かりやすくなりました。

Visual欄は、画面にそのまま表示するための文章ではなく、各シーンで使う映像・画像のイメージをまとめた制作指示として使います。
この内容をもとに画像を作成し、Remotion側ではその画像を差し込む形にすると、見た目がすっきりして動画としても自然になります。

Visualを画像差し込み用の設定に変更する

Codexに以下の内容で追加依頼します

Visualから画像生成用プロンプトを作る
各シーンの画像ファイル名を決める
画像がまだなくても仮の背景で先に実装する
後で画像を置いたら差し替わるようにしておく

data/scenes.json の visual_image を参考にして、各シーンの画像生成用プロンプト案と画像ファイル名一覧を作ってください。

そのうえで、Remotion側は以下のように実装してください。

目的：
- visual_image の内容は、画面上にそのまま表示しない
- visual_image は、今後画像生成に使うための制作メモとして扱う
- 画像がまだ未配置でも、仮背景で動画が表示されるようにする
- 後で public/assets/... に画像を置いたら、各シーンの背景画像として差し替わる構成にする

実装してほしいこと：

- data/scenes.json の各 scene_id を確認する
- 各シーンに対応する画像ファイル名を決める
- 画像の保存先フォルダを決める
  例：public/assets/procrastination/
- 画像が未配置なら、グラデーションなどの仮背景を表示する
- 画像が配置されたら、その画像を背景として表示する
- 右上などに出ていた Visual 枠は表示しない
- タイトルと字幕は表示する
- タイトルや字幕の改行が不自然なら調整する
- 章番号、章タイトル、字幕、進捗バーは残す

注意事項：

- 編集対象は src/ 配下だけにしてください。
- data/ 配下は読み取り専用として扱ってください。
- docs/ 配下は編集しないでください。
- PROJECT_RULES.md は編集しないでください。
- package.json や tsconfig.json は勝手に編集しないでください。
- 既存の字幕やナレーション本文は変更しないでください。

最後に、以下をまとめて報告してください。

1. 修正ファイル一覧
2. 画像の保存先フォルダ
3. 各シーンの画像ファイル名一覧
4. 各シーンの画像生成用プロンプト一覧
5. 画像未配置時にどのように表示されるか

Remotion Studioで表示を確認したところ、右上に表示されていた Visual 枠は非表示になりました。

さらに今回は、data/scenes.json の visual_image をもとに、各シーンで使う画像ファイル名と画像生成用プロンプトもCodexに整理してもらいました。

ただし、この時点ではまだ画像ファイル自体は用意していません。
そのため、画像が未配置の場合はシーンごとのグラデーション背景を表示し、後から画像を配置したら自動で背景画像に切り替わる構成にしています。
今回Codexが編集したファイルは、以下の2つです。

src/Composition.tsx
src/sceneImages.ts

src/Composition.tsx では、各シーンの背景画像パスを参照し、画像がない場合は仮背景を表示する処理が追加されました。
src/sceneImages.ts では、scene_id ごとの画像ファイル名、保存先パス、画像生成用プロンプト案が整理されています。
画像の保存先は、以下のフォルダです。

public/assets/procrastination/

今後、このフォルダに指定されたファイル名で画像を置けば、Remotion側で自動的に背景画像として表示されるようになります。

画像ファイル名一覧

hook: hook-smartphone-desk.png
cause-emotion: cause-emotion-avoidance.png
brain-mechanism: brain-mechanism-reward-balance.png
solution-intro: solution-intro-system-not-willpower.png
tip-two-minutes: tip-two-minutes-checklist.png
tip-small-steps: tip-small-steps-breakdown.png
tip-self-compassion: tip-self-compassion-next-step.png
closing: closing-first-step-dawn.png

画像生成用プロンプトも整理してもらう

Codexには、各 scene_id に対応する画像生成用プロンプトも作成してもらいました。
たとえば hook シーンでは、以下のようなプロンプトです。

夜の部屋、デスクランプだけが照らす机。スマホを見つめる人物のシルエット、背後には積まれた書類と付箋。焦りと現実逃避が同時に伝わる、落ち着いたシネマティックな解説動画背景。文字なし、16:9。

このように、visual_image の内容をもとに、画像生成に使いやすい文章へ変換しておくと、あとから背景画像を作るときに便利です。

画像ファイルは .png のまま使うことにしたため、Codexに src/sceneImages.ts の画像パスを .webp から .png に変更してもらいます。
また、保存先となる public/assets/procrastination/ フォルダがまだ存在しなかったため、このフォルダも作成してもらうように依頼しました。
画像ファイル自体はあとで手動で配置します。
依頼文

画像ファイルを .webp ではなく .png で保存することにしました。

そのため、以下を対応してください。

1. public/assets/procrastination/ フォルダが存在しない場合は作成してください。
2. src/sceneImages.ts の画像パスを、すべて .webp から .png に変更してください。
3. 保存先フォルダは以下にしてください。

public/assets/procrastination/

注意：
- data/ 配下は編集しないでください。
- docs/ 配下は編集しないでください。
- PROJECT_RULES.md は編集しないでください。
- 既存の字幕やシーンデータの内容は変更しないでください。
- 今回は、画像保存先フォルダの準備と、src/ 側の画像パス修正だけを行ってください。

画像ファイルはあとで手動で public/assets/procrastination/ に配置します。

画像を配置してRemotion Studioで確認する

Codexに画像パスを .png に変更してもらい、保存先フォルダも作成できたので、次に画像ファイルを配置します。

保存先は以下です。

public/assets/procrastination/

この中に、Codexが指定したファイル名で画像を入れていきます。
たとえば、hookシーンで使う画像なら以下のように配置します。

public/assets/procrastination/hook-smartphone-desk.png

ここで注意したいのは、ファイル名を完全に一致させることです。
たとえば、Codex側で指定されているファイル名が、

hook-smartphone-desk.png

であれば、実際のファイル名も同じにします。

hook-smartphone-desk.webp.png

のように拡張子が二重になっていると、Remotion側が画像を見つけられない可能性があります。
画像ファイルを配置したら、Remotion Studioで表示を確認します。

背景画像は表示されたが、まだ静止画に近い

画像を配置すると、Remotion Studio上で各シーンの背景画像が表示されるようになりました。
ただし、この段階では背景画像は基本的に静止画です。
Remotion側でズームやパンのような動きを付けることはできますが、画像の中の人物や物が自然に動くわけではありません。
そのため、まずは背景画像を使いながら、Remotion側で以下のような演出を追加していく方針にします。

背景画像をゆっくりズームさせる
シーン切り替え時にフェードを入れる
章タイトルを冒頭だけ表示する
重要な言葉を短いテロップとして表示する
進捗バーを表示する

静止画そのものを大きく動かすのではなく、テロップやタイトル、フェード演出を組み合わせて、動画らしく見せる方向です。

背景画像とテロップ表示を確認する

ここで改めて整理すると、Visual欄は画面に表示するための文章ではなく、背景画像や背景動画を作るための制作メモです。

Remotion Studioで確認すると、右上に「Visual」という枠が表示されていました。
これは、data/scenes.json の visual_image に入っている内容です。
ただし、visual_image は視聴者にそのまま見せる文章ではありません。
本来は、背景画像や背景動画を作るための制作メモとして使うものです。
そのため、画面上には表示せず、内部データとして残す形にします。
Codexには、Visual枠を非表示にし、画面には章タイトル・テロップ・背景画像を中心に表示するよう依頼しました。

右上に表示されている Visual 枠は、視聴者に見せるものではありません。

data/scenes.json の visual_image は、今後の背景画像・背景動画を作るための制作メモとして扱ってください。

src/ 配下だけを編集して、Visual 枠を非表示にしてください。

注意：
- data/ 配下は編集しないでください。
- docs/ 配下は編集しないでください。
- PROJECT_RULES.md は編集しないでください。
- visual_image のデータ自体は削除しないでください。
- 画面上に visual_image の内容をテキスト表示しないでください。

章タイトルを冒頭だけ表示する

次に気になったのが、章タイトルの表示です。
最初の実装では、章タイトルがそのシーンの間ずっと表示されていました。
しかし、YouTube動画として見る場合、章タイトルがずっと出ていると少し画面が固定されて見えます。
そこで、章タイトルはシーンの冒頭だけ表示し、その後はフェードアウトするように調整します。
イメージとしては、各シーンの始まりに、

06
解決策② タスクを小さく分解する

のように表示し、数秒後に自然に消える形です。
Codexには、以下のように依頼しました。

章タイトルの表示を調整してください。

現在は章タイトルがそのシーンの間ずっと表示されています。

これを、各シーンの冒頭だけ表示する形にしてください。

希望する内容：

- 章タイトルはシーン開始から2〜3秒程度だけ表示する
- その後はフェードアウトする
- 章番号も章タイトルと一緒に冒頭だけ表示する
- 章タイトルをシーンの最後まで表示し続けない
- 背景画像、進捗バー、通常テロップは残す
- Visualの内容は画面に表示しない

注意：
- src/ 配下だけを編集してください。
- data/ 配下は編集しないでください。
- docs/ 配下は編集しないでください。
- PROJECT_RULES.md は編集しないでください。

これで、章タイトルはシーン冒頭だけ表示されるようになりました。

字幕ではなくYouTube風テロップにする

次に調整したのが、テロップ表示です。
最初の表示では、画面下に字幕カードのような帯が出ていました。
ただ、今回作りたいのは映画字幕のような常時表示ではなく、YouTube動画でよく見る短い強調テロップです。
読み上げ用の台本や字幕全文をそのまま表示すると、画面が重くなり、視聴者が文字を読むだけの動画になってしまいます。
そこで、重要な言葉だけを短く表示する形に変更します。

現在の表示は、字幕カードのように見えています。

今回は、YouTube動画でよく使う短い強調テロップにしたいです。

希望する内容：

- 長文をそのまま表示しない
- 1〜2行の短い言葉だけを表示する
- 黒い字幕帯を常時表示しない
- 白文字を基本にする
- 濃い青または黒系の太い縁取りを付ける
- 影を付けて読みやすくする
- 表示時に少し拡大しながら出す
- 消えるときはフェードアウトする
- 章タイトルとは別に、通常テロップも表示する
- data/subtitles/procrastination.srt や narration の長文をそのまま表示しない
- 必要であれば src/ 配下に telop 用の短い文言データを作成してください

注意：
- src/ 配下だけを編集してください。
- data/ 配下は編集しないでください。
- docs/ 配下は編集しないでください。
- PROJECT_RULES.md は編集しないでください。

一度、通常テロップが消えてしまった

ここで一度、うまくいかない部分が出ました。
章タイトルは冒頭だけ表示されるようになったのですが、その後に出るはずの通常テロップが表示されなくなってしまいました。
画面には章タイトルだけが表示され、シーン途中のテロップが出ていない状態です。
これは、Codexが「章タイトルを冒頭だけ表示する」という指示を反映する中で、通常テロップの表示条件まで厳しくしてしまった可能性があります。
そこで、次のように追加で伝えました。

章タイトルは冒頭だけ表示されるようになりました。

ただし、現在は冒頭のテロップだけが表示されていて、シーン途中の通常テロップが表示されていません。

修正してください。

目的：

- 章タイトルはシーン冒頭だけ表示する
- 章タイトルが消えた後も、通常テロップを表示する
- 通常テロップは src/telops.ts の内容を使う
- テロップはYouTube風の強調文字として表示する

確認してほしいこと：

1. 章タイトル表示中だけでなく、シーン内の通常テロップ表示時間にも telop が表示されること
2. src/telops.ts のデータが実際に画面表示に使われていること
3. テロップ表示条件が厳しすぎて、章タイトル以外が非表示になっていないか確認すること
4. 必要であれば src/Composition.tsx のテロップ描画ロジックを修正すること

注意：
- src/ 配下だけを編集してください。
- data/ 配下は編集しないでください。
- docs/ 配下は編集しないでください。
- PROJECT_RULES.md は編集しないでください。

通常テロップも表示され、動画らしくなった

追加で修正してもらったところ、章タイトルとは別に、シーン途中の通常テロップも表示されるようになりました。
これで、かなり動画らしい見た目になってきました。
章タイトルはシーンの冒頭で表示され、その後は短いテロップがテンポよく表示されます。
最初のように、字幕カードがずっと出続ける形ではなく、重要な言葉だけが画面に出るようになったため、YouTube動画らしい印象に近づきました。

特に、以下のような短い言葉がテロップとして出ると、視聴者の目線を引きやすくなります。

やらなきゃと思っていても
なぜか動けない

気づいたら
スマホを見ている

意志が弱いから
ではない

同じ文字が長く出続けると、画面が止まって見えてしまいます。
そのため、テロップは短く、数秒ごとに切り替わる方が見やすいです。
今回の調整で、背景画像、章タイトル、通常テロップ、進捗バーがそろい、最初の静止画スライドのような状態から、かなり動画らしい表示に近づきました。

テロップは音声を作ってから合わせる

ここまで試してみて分かったのは、動画制作では「台本 → 字幕 → 音声」の順番よりも、「台本 → 音声 → テロップ」の順番の方が自然だということです。
最初は、台本から先にSRTやテロップ案を作っていました。
しかし、実際にAI音声を生成してみると、読み上げの速度や間、読み間違いの修正によって、元の字幕タイミングとは少しずつズレていきました。
特に、Google Cloud TTSで音声を作り直したあと、鉤括弧を外したり、「方」を「ほう」と読ませるように調整したことで、音声のリズムが変わりました。
そのため、先に作ったSRTやテロップ案をそのまま使うと、映像上ではズレが出やすくなります。

今回の経験から、今後は次の流れにするのがよさそうだと感じました。

1. 台本を作る
2. 音声を作る
3. 音声を基準に字幕やテロップを作る
4. Remotionで映像に反映する

つまり、完成した音声を基準にして、字幕やテロップを後から整える流れです。

Google Cloud TTSは参考ルートとして紹介します

Google Cloud Text-to-Speechでも、ナレーション音声を作成することはできました。
実際にGoogle Cloud TTSで生成した音声は自然で、落ち着いた解説動画にも使いやすそうでした。
ただし、実際に使うまでには、Google Cloudへの登録、Text-to-Speech APIの有効化、Google Cloud CLIのインストール、ADC認証など、いくつか設定が必要でした。
特に今回は、サービスアカウントJSONキーの作成がブロックされたため、ADC方式に切り替える必要がありました。
音声の品質は良かったものの、初めて使う人には少し設定が複雑です。
そのため、この記事ではGoogle Cloud TTSを「試したい方向けの参考ルート」として紹介する程度に留めます。

Google Cloud TTSを試したい方は、以下から確認できます。

https://cloud.google.com/text-to-speech?hl=ja

料金や無料枠については、必ず公式ページで確認してください。

https://cloud.google.com/text-to-speech/pricing?hl=ja

ADC方式で進める場合は、Google Cloud CLIも必要になります。

https://cloud.google.com/sdk/docs/install-sdk?hl=ja

まずはVrewで音声を作る方が分かりやすい

今回いろいろ試した結果、最初の動画制作では、Vrewで台本から音声を作る方法が一番分かりやすそうです。
Vrewであれば、台本を読み込んでAI音声を作成し、その音声に合わせた字幕も確認できます。
また、読み間違いがある箇所はVrew上で発音を調整できます。
たとえば、「方」を「ほう」と読ませたい場合なども、Vrew側で修正してから音声を書き出せます。

流れとしては、以下のようになります。

台本を作成
↓
Vrewに台本を読み込む
↓
AI音声を作成
↓
発音や間を調整
↓
MP3で音声を書き出す
↓
必要に応じてSRTも書き出す
↓
Remotionに音声とテロップを反映

Remotion側では、すでに以下の音声ファイルを読み込む実装ができています。

public/assets/procrastination/narration.mp3

そのため、Vrewで書き出した音声を narration.mp3 という名前にして、この場所へ配置すれば、Remotion上でナレーション音声として再生できます。

字幕とテロップは分けて考える

ここで大事なのは、字幕とテロップを分けて考えることです。
Vrewで作るSRTは、音声に合った字幕タイミングを確認するために使えます。
一方で、YouTube風テロップは、ナレーション全文をそのまま表示するものではありません。
視聴者に印象づけたい言葉だけを、短く、強く、テンポよく表示するための演出です。

そのため、今後は次のように役割を分けます。

SRT
→ 音声に合った字幕タイミングの基準

YouTube風テロップ
→ 重要な言葉だけを短く見せる演出

この分け方にすると、全文字幕のように画面が重くならず、YouTube動画らしいテンポを作りやすくなります。