著者注：プログラミング Agent で動画を作る方法には、主に2つのアプローチがあります。コードでフレームごとにレンダリングして MP4 を作る方法と、Web プレゼンテーションを生成して画面収録する方法です。この記事では、それぞれの仕組み、成果物、適した用途を比較し、5ステップで選ぶ方法を紹介します。
Claude Code、Cursor、Codex にページやスクリプトを書いてもらうことに慣れた開発者は多い一方で、「プログラミング Agent に直接動画を作らせる」となると、まだためらう人もいるでしょう。よくある疑問は、コードを書く Agent が、どうやってテンポや音声のある、そのまま公開できる動画を作るのかということです。この記事では、コードによるフレーム単位のレンダリングと Web プレゼンテーションの画面収録という2つのアプローチを紹介し、用途に合う方法を判断できるようにします。
この記事は、よくある「AI でワンクリック動画生成」の解説ではありません。どちらのアプローチも、オープンソースのスキル集 garden-skills に実在するスキルを利用します。motion-showreel はコードによるフレーム単位のレンダリング、web-video-presentation は Web プレゼンテーションの画面収録を担当し、それぞれのワークフロー、チェックポイント、成果物が明確に定められています。
この記事でわかること：2つのアプローチの仕組みと限界を理解し、自分の動画プロジェクトに適した方法を5ステップ以内で選べるようになります。また、プログラミング Agent に適切な大規模言語モデルを設定する方法も紹介します。
コーディングエージェントで動画を作る2つの方法：要点
まずは表で、2つの方法の本質的な違いを見てみましょう。簡単に言うと、コードによるフレーム単位のレンダリングは「エージェントがモーションディレクター兼レンダーファームになる」方法。Webプレゼンテーションの画面収録は「エージェントがプレゼン資料を作り、人が録画ボタンを押す」方法です。
| 要点 | コードによるフレーム単位のレンダリング（motion-showreel） | Webプレゼンテーションの画面収録（web-video-presentation） |
|---|---|---|
| 基本原理 | 決定論的な render(t) ページを、時間に沿ってフレームごとにキャプチャ |
Vite + React + TypeScript のWebページをクリックやキーボードで進めながら画面収録 |
| 成果物 | 完成したMP4動画 + 編集可能なソースコード | 収録可能な16:9のWebプレゼンテーションプロジェクト |
| 一般的な長さ | 短編は5〜60秒、チャプター形式の長編は最長約20分 | 解説スクリプトに応じて、チャプターとステップごとに進行 |
| 音声の扱い | 映像、音楽、効果音、ナレーションで1つのタイムラインを共有 | ナレーション音声の合成は任意。画面の1ステップをナレーションの一区切りに対応させる |
| 最適な用途 | 製品プロモーション動画、ロゴのオープニング、動く文字、ループアニメーション | 講義・解説、記事の動画化、製品デモ、技術紹介 |
コードによるフレーム単位のレンダリングを詳しく見る
motion-showreel の鍵は「決定論的」であることです。エージェントが作成したページは render(t) 関数を公開し、時刻 t を指定すると一意に定まるフレームを描画します。レンダラーはフレームレートに従ってこの関数をフレームごとに呼び出し、画面をキャプチャします。同じページから静止画、コンタクトシート、3方向のスタイルボード、プロキシ版、マスター版を生成できるため、提案から完成まで同じソースを使い続けられます。「プレビューはきれいなのに、完成動画では見た目が変わってしまった」という問題も起きません。モーションブラー、スーパーサンプリング、フィルムグレインは、レンダリングパラメーターの切り替えだけで適用できます。
音声については、編集点、強拍、効果音を同じタイムライン上に配置し、数値を共有します。音楽は、依存ライブラリ不要の内蔵シンセサイザーや Tone.js のサンプリングピアノで合成できるほか、ユーザー自身の音源に合わせてビートやドロップを検出することもできます。ナレーションはユーザーが提供したスクリプトだけを読み上げ、映像を実際の音声のタイムスタンプに合わせます。逆ではありません。
Webプレゼンテーションの画面収録を詳しく見る
web-video-presentation は別のアプローチを取ります。動画を「動くプレゼンテーション」として扱う方法です。1920×1080のステージを固定し、ビューポートに合わせて拡大・縮小することで、収録中の画面を安定させます。プレゼンテーションは (chapter, step) カーソルで制御され、クリックまたはキー操作のたびに視覚的なステップが1つ進み、それぞれがナレーションの1文に対応します。
こちらは従来の「原稿を書く → スライドを作る → 収録する」に近い方法です。スキルはまず元の記事をナレーションスクリプトに書き換え、スクリプトの区切りを全画面のシーンに割り当てます。スクリプト、テーマ、アウトライン、実装モード、必要に応じた音声の各段階で必ず作業を止め、ユーザーに確認を求めます。収録時は進行コントロールがマウスを重ねたときだけ表示されるため、ステージをすっきりと保てます。
2つのワークフローを比較：コーディング Agent で動画を作る際の重要な違い
最終的にはどちらも動画ファイルができるため、一見似ているように思えます。しかし、ワークフローを詳しく見ると、人とモデルに求められる役割はまったく異なります。以下の表で、8つの観点から比較してみましょう。
| 比較項目 | コードによるフレーム単位のレンダリング | Webプレゼンテーションの画面録画 |
|---|---|---|
| 人による確認ポイント | 2つ：要件の確認、スタイルフレームの確認 | 5つ：スクリプト、テーマ、アウトライン、実装モード、オプションの音声 |
| スタイル素材 | 43種類のスタイルライブラリ（スイス・エディトリアル、水墨画、シンセウェーブ、ソフト3D、映画のオープニング、国潮など） | 23種類の組み込みテーマ（エディトリアル風、ターミナル風、エンジニアリングの青写真、スイス・インターナショナル・スタイルなど） |
| スタイルの定義範囲 | 外観、動き、カメラワーク、サウンドパレット | 配色、フォント、レイアウトを制御するデザイントークン |
| 音声の生成方法 | Gemini / MiniMax TTSでユーザーのスクリプトのみを読み上げ。実際の録音も利用可能 | 差し替え可能なTTS。MiniMax mmx-cliとOpenAI TTSを内蔵し、ElevenLabs、edge-tts、Azure、Google Cloud、macOS sayの連携スニペットも用意 |
| 音楽・効果音 | 音声とは別のソースを使用し、ナレーション中は自動的に音量を下げる | 主にナレーションを中心とし、BGMは重視しない |
| 品質検証 | サイズ、フレームレート、長さ、フレーム数、ブラックフレーム、ラウドネス、トゥルーピーク、ループのつなぎ目、決定性のすべてがPASS必須 | 画面録画前の人によるプレビューに依存 |
| 人による録画が必要か | 不要。MP4を直接レンダリング | 必要。画面録画ツールでWebページを録画 |
| 現在のバージョン | v0.1.0 | v1.2.2 |
見落とされがちな設計上のポイントとして、motion-showreelは「技術的な検証」と「見た目の評価」を厳密に分けています。前者は機械で検査できる必須項目で、すべてをクリアしなければなりません。後者の評価はユーザーに委ね、最終判断もユーザーが行います。この役割分担により、Agentが「見栄えがいい」と判断しただけで、ブラックフレームやラウドネス超過の問題を見逃すことを防げます。
一方、Webプレゼンテーションの画面録画では、より多くの判断を人に委ねます。5つの確認ポイントは手間がかかるように見えますが、解説動画には欠かせません。スクリプトの言い回しや章立てはコンテンツの品質を左右するため、作者自身が確認するのが望ましいからです。
コーディングエージェントで動画を作る：クイックスタート
ステップ1：スキルをインストールする
どちらのスキルも SKILL.md の仕様に従っており、Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode などの環境にインストールできます。主な方法を下表にまとめました。コマンドはターミナルまたはエージェントの対話画面に直接入力できます。
| インストール方法 | 操作のポイント | おすすめのユーザー |
|---|---|---|
| skills CLI | npx skills add ConardLi/garden-skills -s motion-showreel を実行。-s の後を web-video-presentation に変更することも可能。-a claude-code を追加するとエージェントを指定できる |
どのエージェントでも、1行でインストールしたい人 |
| Claude Code プラグインマーケットプレイス | まず /plugin marketplace add ConardLi/garden-skills を実行し、次に motion-showreel-skills@garden-skills または presentation-skills@garden-skills をインストール |
Claude Code ユーザー |
| Releases のバージョン固定 zip | 対応するバージョンの zip をダウンロードして SHA-256 を検証し、.claude/skills/、.agents/skills/、.codex/skills/ のいずれかに展開 |
CI、オフライン環境、再現性を重視するチーム |
| 手動コピー | リポジトリをクローンし、スキルのディレクトリをプロジェクトのスキルディレクトリにコピー | スキルをカスタマイズしたい開発者 |
ステップ2：エージェントを動かすモデルを準備する
コーディングエージェントによる動画制作の大部分は「コードを書く＋要件を理解する＋画面を確認する」作業です。そのため、モデルのコーディング能力と長いコンテキストを扱う能力が特に重要です。エージェントがカスタムインターフェースに対応していれば、APIキーと base_url の2つを設定するだけです。OpenAI 互換形式の base_url には https://api.apiyi.com/v1 を指定できます。Anthropic 形式の接続先と具体的なパラメータについては、APIYI のドキュメントセンター docs.apiyi.com を確認してください。
ステップ3：明確な要件を一文で伝える
開始時に重要な情報をまとめて伝えると、確認のやり取りを減らせます。コードによるフレーム単位のレンダリングでは、スキルがテーマ、長さ、横画面か縦画面か、音楽と効果音の出所、ナレーションの有無を確認します。一方、Web プレゼンテーションの画面収録では、元となる記事やスクリプトと、おおまかな章立てを用意する必要があります。
- コードによるフレーム単位のレンダリングの依頼例：開発ツールの30秒の横画面プロモーション動画を作成。シンセウェーブ風で、内蔵シンセサイザーによる音楽を使用し、ナレーションなし。
- Web プレゼンテーションの画面収録の依頼例：技術記事を8分の解説動画にする。エンジニアリングの設計図をテーマにし、中国語のナレーションを入れる。
🚀 クイックスタート：まだエージェントにモデルのインターフェースを設定していない場合は、まず APIYI apiyi.com に登録してテスト用クレジットを取得できます。OpenAI と Anthropic の両方のインターフェース形式に対応しているため、Claude Code のようなエージェントや自作スクリプトから直接接続できます。まず短い動画のサンプルを一通り作り、進め方を決めるのに便利です。
ステップ4：チェックポイントでしっかり判断する
コードによるフレーム単位のレンダリングでは、スタイルを指定していない場合、スタイルフレームの段階で明確に異なる3つの方向性が提示されます。完成動画の雰囲気を決めるうえで、この段階が最も低コストで変更できるタイミングです。Web プレゼンテーションの画面収録では、アウトラインを確認してから実装に進むため、章立ての変更はこの時点で行うのが最も効率的です。どちらの方法でも、完成後に作り直すのではなく、主な意見をチェックポイントにまとめて伝えることをおすすめします。
ステップ5：確認と納品
コードによるフレーム単位のレンダリングでは、MP4 と編集可能なソースコードが納品されます。ソースコードを残しておけば、後から文言や配色を変更して再レンダリングするだけで済みます。Web プレゼンテーションの画面収録ではプロジェクトが納品されるため、画面収録ツールを使って章ごとに収録します。必要に応じて、オプションの TTS で生成した音声と収録映像を編集ソフトで合わせます。
動画制作を行うコーディングAgentのモデル選び
この2つのスキル自体は特定のモデルに依存しませんが、実際の仕上がりはAgentを動かす大規模言語モデルに大きく左右されます。以下に、APIYIで呼び出せる関連モデルをまとめました。価格はすべてAPIYIの価格ページ docs.apiyi.com/models に掲載されている実データに基づいています。課金単位や計算方法は、価格ページの表記をご確認ください。
| モデル | 本記事のシナリオでの役割 | APIYI価格（入力 / 出力 / キャッシュ） | 利用可能なプラットフォーム |
|---|---|---|---|
| claude-opus-5-5 | 複雑なアニメーションの構成、長編動画の章立て、主力のコーディング | $4 / $20 / $0.2 | APIYI apiyi.com |
| claude-sonnet-5-5 | 日常的なコーディングの主力、コストパフォーマンスに優れる | $2 / $10 / $0.1 | APIYI apiyi.com |
| kimi-k3.1-pro | 長文のナレーション原稿への書き換え、中国語コンテンツの整理 | $2 / $10 / $0.2 | APIYI apiyi.com |
| deepseek-v4.1-flash | 小規模な修正の一括処理、字幕整理などの軽量タスク | $0.3 / $1.2 / $0.006 | APIYI apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | カバー画像、スタイルの参照画像、動画内の素材を生成 | テキスト入力 $5 / 画像入力 $8、出力 $30 | APIYI apiyi.com |
音声合成については補足が必要です。motion-showreelにはGeminiとMiniMax TTSが、web-video-presentationにはMiniMax mmx-cliとOpenAI TTSが組み込まれています。これらのTTSモデルがAPIYIの価格ページに掲載されていない場合、APIYIでは現在まだ提供していません。今後できるだけ早く提供する予定です。それまではスキルのドキュメントに従って各サービスを直接利用するか、スキルが対応する別のTTSをお使いください。同様に、文心 ERNIEシリーズも現在APIYIでは提供していないため、ワークフローで必要な場合は別途接続する必要があります。
💰 コストを抑えるヒント：動画制作では、Agentが同じブリーフ、スタイル定義、プロジェクトのコードを繰り返し読み込むため、キャッシュのヒット率が高くなりがちです。キャッシュ料金が設定されたモデルを選ぶと、繰り返し修正する際のコストを大幅に抑えられます。APIYIの価格ページ docs.apiyi.com/models でモデルごとに比較してみてください。
5つの質問で判断：プログラミング Agent に動画を作らせるなら、どちらを選ぶ？
ここまで原理とツールを紹介してきました。ここからは、順番に答えるだけで制作方法を選べる5つの質問にまとめます。
- コンテンツの目的は「わかりやすく伝える」こと？それとも「見て楽しませる」こと？ 情報を伝えることが主目的ならWebプレゼンの画面収録、視覚的なインパクトを重視するならコードによるフレーム単位のレンダリングを選びましょう。
- 動画の長さは？ 60秒以内の短編はフレーム単位のレンダリングに向いています。十数分以上の講座や解説なら、Webプレゼンの画面収録のほうがメンテナンスしやすくなります。
- 映像と音声を正確に同期する必要はある？ 音楽の拍に合わせた編集、効果音を入れるタイミングの調整、シームレスなループといった要件を安定して実現できるのは、共通のタイムラインを使うフレーム単位のレンダリングです。
- 手動での画面収録は許容できる？ 完全自動で制作し、CIで繰り返しレンダリングしたいなら、フレーム単位のレンダリングを選びましょう。自分のペースで解説や収録をしたいなら、Webプレゼンの画面収録のほうが柔軟です。
- あとから頻繁に修正する？ どちらの方法でもソースは残りますが、Webプレゼンなら1ページの文章を修正すればすぐに確認できます。一方、フレーム単位のレンダリングでは動画を書き出し直す必要があります。
| 典型的なシーン | おすすめの方法 | 理由 |
|---|---|---|
| 新製品発表の30秒プロモーション動画 | コードによるフレーム単位のレンダリング | スタイルライブラリが豊富で、映像と音声を同じタイムラインで扱え、MP4を直接出力できる |
| ロゴのイントロ / タイトルシーケンス | コードによるフレーム単位のレンダリング | 決定論的なレンダリングにより、毎回同じ結果を出力できる |
| 技術記事の解説動画への変換 | Webプレゼンの画面収録 | ナレーション台本を自動で書き換え、ステップごとに進められる |
| オンライン講座の各章 | Webプレゼンの画面収録 | テーマを統一でき、章立てが明確で、レッスンごとにメンテナンスしやすい |
| ナレーション付きの年間振り返り動画 | コードによるフレーム単位のレンダリング | 実際の音声のタイムスタンプに映像を合わせられ、章立てした長編にも対応できる |
| 製品機能のデモ | Webプレゼンの画面収録 | クリックで進めるため、デモのペースを調整できる |
💡 選び方のヒント：迷ったら、同じ要件を使ってAgentに15秒のサンプル動画と1ページのプレゼンをそれぞれ作らせ、仕上がりと改善にかかるコストを比較してみましょう。APIYI apiyi.com なら、同じキーでClaude、Kimi、DeepSeekなどのモデルを切り替えられるので、プロジェクトにおける各モデルの性能もあわせて比較できます。
よくある質問 FAQ
Q1：「コーディング Agent に動画を作らせる」とはどういうことですか？
Claude Code、Cursor、Codex などのコーディング Agent にコードを書かせ、動画を制作することです。動画生成モデルを直接呼び出すのではなく、Webページ、アニメーション、レンダリングスクリプトを使って映像と音声を構成するため、編集や再現が可能です。
Q2：コードによるフレーム単位のレンダリングと、Webプレゼンテーションの画面録画はどう違いますか？
コードによるフレーム単位のレンダリングは、視覚表現や映像と音声の同期に優れ、MP4を直接出力できますが、比較的短い動画に向いています。Webプレゼンテーションの画面録画は、説明の構成や後からのメンテナンスに強みがありますが、手動での録画が必要です。前者はモーションデザイン制作、後者はプレゼン資料の制作に近いイメージです。
Q3：この2つのスキルの現在のバージョンと、対応する Agent を教えてください。
garden-skills リポジトリの情報によると、motion-showreel は v0.1.0、web-video-presentation は v1.2.2 です。どちらも SKILL.md の仕様に準拠しており、Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode でテスト済みと公式に記載されています。
Q4：この方法はどのような場面に向いていますか？
– **製品マーケティング**：発表会に向けた予告動画、機能の見どころを伝えるモーション。
– **ブランドビジュアル**：ロゴアニメーション、オープニングとエンディング、動くタイポグラフィポスター。
– **知識の発信**：技術記事を解説動画に変換、講座の各章、社内研修。
– **開発者向けコンテンツ**：アーキテクチャの解説、ツールのデモ、オープンソースプロジェクトの紹介。
Q5：コーディング Agent にモデルの API を設定するにはどうすればよいですか？
APIYI の apiyi.com で登録して APIキーを作成し、Agent またはスクリプトにキーと base_url を入力します。APIYI は OpenAI と Anthropic の両方の API 形式に対応しています。具体的なアドレスとパラメータはドキュメントセンターの docs.apiyi.com を、モデルの料金は docs.apiyi.com/models を確認してください。
Q6：ナレーションの原稿を Agent に書かせることはできますか？
2つのスキルでは方針が異なります。motion-showreel の TTS は、Agent が勝手にセリフを書くことを避けるため、ユーザーが提供した原稿のみを読み上げます。一方、web-video-presentation は元の記事をナレーション原稿に書き直しますが、原稿のチェックポイントでユーザーによる確認が必要です。APIYI の kimi-k3.1-pro または claude-sonnet-5-5 で原稿の下書きを作り、自分で内容を確認することもできます。
Q7：この2つの方法には、どのような制約がありますか？
コードによるフレーム単位のレンダリングはブラウザでのフレームごとのキャプチャに依存するため、長い動画ではレンダリングに時間がかかります。複雑な 3D やパーティクル効果を使うと、さらに時間が増えます。Webプレゼンテーションの画面録画は、最終的な品質が録画ツールや操作者に左右され、完全な自動化が困難です。また、一部の内蔵 TTS サービスは別途利用を開始する必要があります。APIYI の料金ページで該当するモデルが見つからない場合は、まだ提供されていません。
Q8：2つの方法を組み合わせることはできますか？
はい。組み合わせて使うことはよくあります。例えば、10秒のオープニングや章の切り替え部分をコードによるフレーム単位のレンダリングで作り、メインの解説部分はWebプレゼンテーションを画面録画して、最後に動画編集ソフトでつなげることができます。どちらもWeb技術をベースにしているため、配色やフォントに同じデザインルールを適用できます。
コーディング Agent で動画を作る際のポイント Key Takeaways
- 2つの方法は本質的に異なる：フレーム単位のレンダリングでは MP4 を直接出力でき、Web プレゼンテーションでは手動の画面収録が必要です。
- フレーム単位のレンダリングは決定性がカギ：同じ
render(t)ページからプレビューとマスターを出力するため、結果を再現できます。 - Web プレゼンテーションは構成がカギ：視覚的なステップとナレーションを1対1で対応させるため、長めの解説に向いています。
- チェックポイントが品質を左右する：視覚優先なら2つ、内容優先なら5つのチェックポイントを設けます。
- 技術的な検収と見た目の評価は分ける：黒フレーム、ラウドネス、フレーム数などの客観的な指標は、すべて PASS する必要があります。
- モデルの選択はコストに影響する：使用するモデルには APIYI からまとめてアクセスでき、価格は docs.apiyi.com/models を参照してください。
まとめ
コーディング Agent で動画を作る際に重要なのは、「できるかどうか」ではなく、適切な方法を選ぶことです。
- コードによるフレーム単位のレンダリング：短編動画、オープニング、テンポのよいビジュアル作品に適しています。音声と映像を同じタイムラインで同期し、完成動画を直接出力できます。
- Web プレゼンテーションの画面収録：解説、講座、記事の動画化に適しています。構成が明確で、メンテナンスもしやすい方法です。
- 5ステップの判断：コンテンツの目的、長さ、音声と映像の同期、画面収録を許容できるか、修正頻度の順に確認することで、方法を選べます。
まずは15秒のサンプル動画で全工程を試し、その後に本番プロジェクトへ広げるのがおすすめです。使用するモデルについては、APIYI apiyi.com を通じて Claude、Kimi、DeepSeek、GPT Image シリーズをまとめて呼び出せます。インターフェースは OpenAI と Anthropic の形式に対応しており、価格は価格ページの実際のデータを参照してください。
📚 参考資料
- GitHub – garden-skills：motion-showreel と web-video-presentation のスキルが収録されたリポジトリ
- リンク：
github.com/ConardLi/garden-skills -
説明：両スキルの README、SKILL.md、インストール方法を収録
-
Agent Skills 仕様：SKILL.md の形式に関する説明
- リンク：
agentskills.io -
説明：スキルのディレクトリ構造と、エージェントが必要に応じてスキルを読み込む仕組みを確認できます
-
APIYI ドキュメントセンター：API連携の説明
- リンク：
docs.apiyi.com -
説明：OpenAI および Anthropic 互換形式の接続パラメータ
-
APIYI モデル料金ページ：各モデルの実際の料金
- リンク：
docs.apiyi.com/models - 説明：本記事の料金データはすべてこのページに準拠しています
著者：APIYI 技術チーム
技術に関するお問い合わせ：APIYI ウェブサイトのトップページからお気軽にお問い合わせください。接続に関する詳しい資料は、docs.apiyi.com のドキュメントセンターをご覧いただけます
