Claude Opus 4.8 × Remotion で「デプロイってなに？」子供向け解説動画を作ってみた
Claude Opus 4.8 × Remotion で「デプロイってなに？」子供向け解説動画を作ってみた
はじめに
きっかけは X（旧 Twitter）でした。GitHub について子供向けに解説している動画が流れてきて、「これ、自分でも作ってみたい」と一気に火が付きました。
題材は GitHub ではなく、エンジニアでなくても分かる「デプロイってなに？」にしてみます。手段は、Claude Opus 4.8 にコードを書かせて Remotion で動画を作るという方法。見かけた動画に倣って、今回は "子供でもわかる" を目指します。
AI にコードを書かせるだけで、ナレーションも BGM も付いた動画が本当に完成するのか——手を動かしながら追っていきます。
検証はすべて実機（Apple Silicon Mac）で行い、推測の箇所は明記しています。
Remotion とは
Remotion は、React のコードで動画を組み立てるフレームワークです。1フレームを React コンポーネントとして描画し、アニメーションは JavaScript の関数で制御します。最終的に Puppeteer がフレームごとに描画し、MP4 として書き出します。
ポイントは、生成 AI が映像を「生み出す」のではなく、こちらが設計図（コード）を書く点です。Sora のような映像生成とは別物で、思った通りのカチッとした説明動画を作れます。
検証時のバージョンは Remotion 4.0.471 です。
⚠️ ライセンス注意：Remotion は3名までのチームは無料ですが、4名以上の企業で利用する場合は商用ライセンスが必要です（インストール時のログにも
Remotion is free for teams of up to 3.と表示されます）。業務利用の際は必ず確認してください。
環境構築
プロジェクト作成は次のコマンドです。
npm create video@latest deploy-cookie -- --template blank cd deploy-cookie npm
対話形式でいくつか選択肢が出ます。今回は次のように選びました。
テンプレート：Blank（真っさらなキャンバス）
TailwindCSS：No（アニメは数値制御中心でインライン style を使うため）
Agent skills：Yes ← これが今回の肝
インストール先：All detected agents（Recommended）／Project／Symlink
Agent skills を Yes にすると、remotion-best-practices というスキルがプロジェクトに入ります。これは、Claude Code のような AI エージェントが Remotion の作法（fps の扱い、interpolate()／spring() の使い方、<Sequence> のタイミング管理など）を理解した上でコードを書けるようにするためのガイドです。後述しますが、これを入れたおかげで実装精度がかなり上がりました。
構成・台本づくり
「子供でもわかる」を成立させるために、一貫したたとえ話で全編を統一しました。採用したのは「おうちで焼いたクッキーをお店に並べる」というストーリーです。
シーン | 内容 | 対応する技術 |
|---|---|---|
S1 | デプロイってなに？（おうちのクッキー） | コードを書いた状態 |
S2 | おうち vs お店 | ローカル → 本番＝デプロイ |
S3 | 運ぶ方法は5つ | 導入 |
S4 | 手で運ぶ | 手動デプロイ |
S5 | まほうのポスト | PaaS（git push 自動公開） |
S6 | なんでも箱 | コンテナ（Docker） |
S7 | よんだら来るおてつだいさん | サーバーレス |
S8 | じどうベルトコンベア | CI/CD |
S9 | まとめ | 規模で選ぶ |
Claude Code で実装
台本を仕様書（ブリーフ）にまとめ、Claude Code に渡して実装してもらいました。指示したのは、解像度・fps・配色・フォント・各シーンのフレーム範囲・アニメーション方針などです。
結果、全9シーンが <Sequence> で配置され、共通の字幕コンポーネントや背景コンポーネントに分割された状態で一気に生成されました。アニメーションはすべて spring() / interpolate() で実装され、CSS トランジションは未使用です（Remotion ではフレームベースで制御するのが作法のため）。
印象的だったのは、Claude Code が実装後に自分で静止画（still）を書き出して目視確認していた点です。「シュン！」というフラッシュ演出やキャラの登場など、動きのある瞬間のフレームを自分でレンダリングして検証していました。remotion-best-practices スキルの効果が出ていたと考えられます。
ナレーションを追加（VOICEVOX）
字幕だけでは子供には読みづらいので、ナレーション音声を追加しました。使ったのは無料の音声合成ソフト VOICEVOX（v0.25.2） で、キャラクターは落ち着いた声の「東北ずん子（ノーマル）」を選びました。
余談ですが、YouTube の解説動画やゆっくり実況でよく耳にする「ずんだもん」。あの声が VOICEVOX で出せるのかと、今回触れて初めて知りました。調べてみると、ずんだもん自体は VOICEVOX 発祥ではなく、2011 年の東日本大震災後に始まった「東北ずん子・ずんだもんプロジェクト」（東北応援キャラ）が出自とのこと。2021 年に VOICEVOX の音声ライブラリとして登場したことで一気に広まったそうで、普段なんとなく聞いていた声のルーツが分かって少し得した気分です。
VOICEVOX を起動するとローカルに API サーバー（http://localhost:50021）が立ちます。Claude Code に次の流れで音声を生成させました。
/speakersでキャラの style id を取得（東北ずん子ノーマル＝107）各シーンの字幕テキストを
audio_query→synthesisで音声合成public/audio/に s1〜s9.wav として保存各シーン先頭に
<Html5Audio>で配置
⚠️ 商用利用の注意：VOICEVOX ソフト自体は商用利用無料ですが、音声はキャラごとの規約に従う必要があります。東北ずん子の場合、「VOICEVOX：東北ずん子」のようなクレジット表記をすれば商用・非商用とも無料で利用できます。逆にクレジット表記をしない商用利用は有償ライセンス（1キャラあたり数十万円）になります。なお立ち絵（イラスト）は声とは別規約なので、今回は声のみを使用しました。最新の規約は必ず公式（zunko.jp）で確認してください。
クレジット表記は念のため動画自体（S9 の隅）に焼き込みました。説明欄だけだと、動画が単体で出回ったときに表記が消えてしまうためです。
BGM を追加
BGM は Pixabay の Music から、子供向けの明るい曲（"Kids Happy" 系）を選びました。Pixabay は基本的に Content License（商用利用可・クレジット不要）ですが、曲ごとにアーティストが条件を付けている場合があるため、詳細ページのライセンス表記を確認しています。また、AI 生成を示すロボットアイコンが付いていない曲（人が制作した曲）を選びました。
ダウンロードした mp3 を public/bgm.mp3 に配置し、<Html5Audio volume={0.12} loop /> で全体に薄く流しています。ナレーションが埋もれないよう、音量はかなり小さめにしました。
書き出し（レンダリング）
最後に MP4 として書き出します。
結果は次の通りでした。
コーデック：H.264 / Concurrency 4x
フレーム数：2680（約89秒）
レンダリング：約46秒
エンコード：約10秒
出力：out.mp4（12MB）
1080p の H.264 MP4 なので、そのまま YouTube にアップロードできます。
できあがった動画
そして完成したのがこちらです。コードを書かせるところから始めて、ナレーションも BGM も付いた解説動画が、最終的にこの形になりました。
ただ、見返して正直に思ったのは——子供向けにたとえ話へ振り切ったぶん、逆にわかりにくくなったかも、ということ。たとえと本物の用語を両方覚えることになり、肝心の「デプロイって何？」が薄まってしまう。わかりやすくしようとして、かえって遠回りだったのかもしれません。
⭐ ハマりポイントまとめ
今回実際に踏んだ／確認したポイントです。これから試す方の参考になればと思います。
1. Remotion の商用ライセンス 4名以上の企業利用は商用ライセンスが必要。検証段階でも頭に入れておくべき点です。
2. macOS の Gatekeeper 警告（VOICEVOX 起動時） ダウンロードした VOICEVOX を開こうとすると「開発元を確認できない」と表示され、ブロックされます。「ゴミ箱に入れる」を押さず、「システム設定 → プライバシーとセキュリティ → このまま開く」から許可します。また Apple Silicon Mac では、ダウンロード時に対応モードを CPU (Apple) にしないと Rosetta 経由になり遅くなります。
3. VOICEVOX キャラの商用利用規約 前述の通り、クレジット表記が条件。キャラによって規約が異なるので、選んだキャラの規約確認は必須です。
4. Audio → Html5Audio へのリネーム Remotion 4.0.471 では Audio コンポーネントが Html5Audio にリネームされていました（旧名は非推奨）。Claude Code は最新仕様に従って Html5Audio を使ってくれました。
5. ffmpeg なし環境での音声尺の測定 今回の環境には ffmpeg が入っていませんでした。Claude Code は WAV ヘッダを直接パースして秒数を算出するという方法で対応していました。なお、レンダリング（書き出し）自体は Remotion が ffmpeg を内蔵しているため、システムに ffmpeg がなくても問題なく通ります。
6. 尺がナレーションに合わせて自動調整された 当初は175秒（5250フレーム）の構成でしたが、ナレーション音声の実尺（合計82秒ほど）に合わせて、各シーンを「音声の長さ＋0.8秒の余韻」に再計算した結果、全体は 約89秒（2680フレーム） に縮みました。音声を主役にする場合、尺は読み上げ時間に引っ張られる点に注意が必要です。
7. フォント読み込みの警告 Zen Maru Gothic の読み込みで「476回のネットワークリクエストを行った」という警告が出ました。レンダリングは成功しますが、loadFont() で読み込むウェイトやサブセットを絞れば警告は消せます。
まとめ
「AI にコードを書かせて、コードから動画を作る」という Opus 4.8 × Remotion のワークフローは、想像以上にスムーズでした。特に、Agent skills を入れることで Claude Code が Remotion の作法を理解し、自己検証まで行ってくれたのが大きかったです。
向いているのは、図解・解説・データ可視化のように「設計図がはっきりしている動画」です。実写やリッチな映像表現には不向きですが、技術解説や社内説明では、コードで動画を管理できる（Git でバージョン管理できる・差分修正が効く）メリットが効いてきます。
コスト面では、VOICEVOX も Pixabay も無料、レンダリングもローカルで完結するため、実質的な追加費用はかかりませんでした（Remotion の商用ライセンスを除く）。
そして、内容の「わかりやすさ」は、ツールの性能とはまた別の、作り手側の設計力にかかっている——動画が手軽に作れるようになったからこそ、そこが次の課題だと感じた検証でした。
クレジット：VOICEVOX：東北ずん子 / BGM：Pixabay
はじめに
きっかけは X（旧 Twitter）でした。GitHub について子供向けに解説している動画が流れてきて、「これ、自分でも作ってみたい」と一気に火が付きました。
題材は GitHub ではなく、エンジニアでなくても分かる「デプロイってなに？」にしてみます。手段は、Claude Opus 4.8 にコードを書かせて Remotion で動画を作るという方法。見かけた動画に倣って、今回は "子供でもわかる" を目指します。
AI にコードを書かせるだけで、ナレーションも BGM も付いた動画が本当に完成するのか——手を動かしながら追っていきます。
検証はすべて実機（Apple Silicon Mac）で行い、推測の箇所は明記しています。
Remotion とは
Remotion は、React のコードで動画を組み立てるフレームワークです。1フレームを React コンポーネントとして描画し、アニメーションは JavaScript の関数で制御します。最終的に Puppeteer がフレームごとに描画し、MP4 として書き出します。
ポイントは、生成 AI が映像を「生み出す」のではなく、こちらが設計図（コード）を書く点です。Sora のような映像生成とは別物で、思った通りのカチッとした説明動画を作れます。
検証時のバージョンは Remotion 4.0.471 です。
⚠️ ライセンス注意：Remotion は3名までのチームは無料ですが、4名以上の企業で利用する場合は商用ライセンスが必要です（インストール時のログにも
Remotion is free for teams of up to 3.と表示されます）。業務利用の際は必ず確認してください。
環境構築
プロジェクト作成は次のコマンドです。
npm create video@latest deploy-cookie -- --template blank cd deploy-cookie npm
対話形式でいくつか選択肢が出ます。今回は次のように選びました。
テンプレート：Blank（真っさらなキャンバス）
TailwindCSS：No（アニメは数値制御中心でインライン style を使うため）
Agent skills：Yes ← これが今回の肝
インストール先：All detected agents（Recommended）／Project／Symlink
Agent skills を Yes にすると、remotion-best-practices というスキルがプロジェクトに入ります。これは、Claude Code のような AI エージェントが Remotion の作法（fps の扱い、interpolate()／spring() の使い方、<Sequence> のタイミング管理など）を理解した上でコードを書けるようにするためのガイドです。後述しますが、これを入れたおかげで実装精度がかなり上がりました。
構成・台本づくり
「子供でもわかる」を成立させるために、一貫したたとえ話で全編を統一しました。採用したのは「おうちで焼いたクッキーをお店に並べる」というストーリーです。
シーン | 内容 | 対応する技術 |
|---|---|---|
S1 | デプロイってなに？（おうちのクッキー） | コードを書いた状態 |
S2 | おうち vs お店 | ローカル → 本番＝デプロイ |
S3 | 運ぶ方法は5つ | 導入 |
S4 | 手で運ぶ | 手動デプロイ |
S5 | まほうのポスト | PaaS（git push 自動公開） |
S6 | なんでも箱 | コンテナ（Docker） |
S7 | よんだら来るおてつだいさん | サーバーレス |
S8 | じどうベルトコンベア | CI/CD |
S9 | まとめ | 規模で選ぶ |
Claude Code で実装
台本を仕様書（ブリーフ）にまとめ、Claude Code に渡して実装してもらいました。指示したのは、解像度・fps・配色・フォント・各シーンのフレーム範囲・アニメーション方針などです。
結果、全9シーンが <Sequence> で配置され、共通の字幕コンポーネントや背景コンポーネントに分割された状態で一気に生成されました。アニメーションはすべて spring() / interpolate() で実装され、CSS トランジションは未使用です（Remotion ではフレームベースで制御するのが作法のため）。
印象的だったのは、Claude Code が実装後に自分で静止画（still）を書き出して目視確認していた点です。「シュン！」というフラッシュ演出やキャラの登場など、動きのある瞬間のフレームを自分でレンダリングして検証していました。remotion-best-practices スキルの効果が出ていたと考えられます。
ナレーションを追加（VOICEVOX）
字幕だけでは子供には読みづらいので、ナレーション音声を追加しました。使ったのは無料の音声合成ソフト VOICEVOX（v0.25.2） で、キャラクターは落ち着いた声の「東北ずん子（ノーマル）」を選びました。
余談ですが、YouTube の解説動画やゆっくり実況でよく耳にする「ずんだもん」。あの声が VOICEVOX で出せるのかと、今回触れて初めて知りました。調べてみると、ずんだもん自体は VOICEVOX 発祥ではなく、2011 年の東日本大震災後に始まった「東北ずん子・ずんだもんプロジェクト」（東北応援キャラ）が出自とのこと。2021 年に VOICEVOX の音声ライブラリとして登場したことで一気に広まったそうで、普段なんとなく聞いていた声のルーツが分かって少し得した気分です。
VOICEVOX を起動するとローカルに API サーバー（http://localhost:50021）が立ちます。Claude Code に次の流れで音声を生成させました。
/speakersでキャラの style id を取得（東北ずん子ノーマル＝107）各シーンの字幕テキストを
audio_query→synthesisで音声合成public/audio/に s1〜s9.wav として保存各シーン先頭に
<Html5Audio>で配置
⚠️ 商用利用の注意：VOICEVOX ソフト自体は商用利用無料ですが、音声はキャラごとの規約に従う必要があります。東北ずん子の場合、「VOICEVOX：東北ずん子」のようなクレジット表記をすれば商用・非商用とも無料で利用できます。逆にクレジット表記をしない商用利用は有償ライセンス（1キャラあたり数十万円）になります。なお立ち絵（イラスト）は声とは別規約なので、今回は声のみを使用しました。最新の規約は必ず公式（zunko.jp）で確認してください。
クレジット表記は念のため動画自体（S9 の隅）に焼き込みました。説明欄だけだと、動画が単体で出回ったときに表記が消えてしまうためです。
BGM を追加
BGM は Pixabay の Music から、子供向けの明るい曲（"Kids Happy" 系）を選びました。Pixabay は基本的に Content License（商用利用可・クレジット不要）ですが、曲ごとにアーティストが条件を付けている場合があるため、詳細ページのライセンス表記を確認しています。また、AI 生成を示すロボットアイコンが付いていない曲（人が制作した曲）を選びました。
ダウンロードした mp3 を public/bgm.mp3 に配置し、<Html5Audio volume={0.12} loop /> で全体に薄く流しています。ナレーションが埋もれないよう、音量はかなり小さめにしました。
書き出し（レンダリング）
最後に MP4 として書き出します。
結果は次の通りでした。
コーデック：H.264 / Concurrency 4x
フレーム数：2680（約89秒）
レンダリング：約46秒
エンコード：約10秒
出力：out.mp4（12MB）
1080p の H.264 MP4 なので、そのまま YouTube にアップロードできます。
できあがった動画
そして完成したのがこちらです。コードを書かせるところから始めて、ナレーションも BGM も付いた解説動画が、最終的にこの形になりました。
ただ、見返して正直に思ったのは——子供向けにたとえ話へ振り切ったぶん、逆にわかりにくくなったかも、ということ。たとえと本物の用語を両方覚えることになり、肝心の「デプロイって何？」が薄まってしまう。わかりやすくしようとして、かえって遠回りだったのかもしれません。
⭐ ハマりポイントまとめ
今回実際に踏んだ／確認したポイントです。これから試す方の参考になればと思います。
1. Remotion の商用ライセンス 4名以上の企業利用は商用ライセンスが必要。検証段階でも頭に入れておくべき点です。
2. macOS の Gatekeeper 警告（VOICEVOX 起動時） ダウンロードした VOICEVOX を開こうとすると「開発元を確認できない」と表示され、ブロックされます。「ゴミ箱に入れる」を押さず、「システム設定 → プライバシーとセキュリティ → このまま開く」から許可します。また Apple Silicon Mac では、ダウンロード時に対応モードを CPU (Apple) にしないと Rosetta 経由になり遅くなります。
3. VOICEVOX キャラの商用利用規約 前述の通り、クレジット表記が条件。キャラによって規約が異なるので、選んだキャラの規約確認は必須です。
4. Audio → Html5Audio へのリネーム Remotion 4.0.471 では Audio コンポーネントが Html5Audio にリネームされていました（旧名は非推奨）。Claude Code は最新仕様に従って Html5Audio を使ってくれました。
5. ffmpeg なし環境での音声尺の測定 今回の環境には ffmpeg が入っていませんでした。Claude Code は WAV ヘッダを直接パースして秒数を算出するという方法で対応していました。なお、レンダリング（書き出し）自体は Remotion が ffmpeg を内蔵しているため、システムに ffmpeg がなくても問題なく通ります。
6. 尺がナレーションに合わせて自動調整された 当初は175秒（5250フレーム）の構成でしたが、ナレーション音声の実尺（合計82秒ほど）に合わせて、各シーンを「音声の長さ＋0.8秒の余韻」に再計算した結果、全体は 約89秒（2680フレーム） に縮みました。音声を主役にする場合、尺は読み上げ時間に引っ張られる点に注意が必要です。
7. フォント読み込みの警告 Zen Maru Gothic の読み込みで「476回のネットワークリクエストを行った」という警告が出ました。レンダリングは成功しますが、loadFont() で読み込むウェイトやサブセットを絞れば警告は消せます。
まとめ
「AI にコードを書かせて、コードから動画を作る」という Opus 4.8 × Remotion のワークフローは、想像以上にスムーズでした。特に、Agent skills を入れることで Claude Code が Remotion の作法を理解し、自己検証まで行ってくれたのが大きかったです。
向いているのは、図解・解説・データ可視化のように「設計図がはっきりしている動画」です。実写やリッチな映像表現には不向きですが、技術解説や社内説明では、コードで動画を管理できる（Git でバージョン管理できる・差分修正が効く）メリットが効いてきます。
コスト面では、VOICEVOX も Pixabay も無料、レンダリングもローカルで完結するため、実質的な追加費用はかかりませんでした（Remotion の商用ライセンスを除く）。
そして、内容の「わかりやすさ」は、ツールの性能とはまた別の、作り手側の設計力にかかっている——動画が手軽に作れるようになったからこそ、そこが次の課題だと感じた検証でした。
クレジット：VOICEVOX：東北ずん子 / BGM：Pixabay
