# Claude CodeとCodexで製品紹介動画を作る video-shotcraftで絵コンテから実画面・音入りMP4まで進める

- 媒体: 知能圏（CHINOUKEN）
- 公開日: 2026-08-21
- カテゴリー: エージェント・ソフトウェア
- タグ: Claude Code、Codex、動画制作、Agent Skills
- 想定読了時間: 約22分
- 調査基準日: 2026年8月21日
- 出典: 21件（末尾の「参照リンク」に番号順で記載）
- ページ: https://www.chinouken.com/articles/video-shotcraft-agent-video-skill
- このMarkdown: https://www.chinouken.com/articles/video-shotcraft-agent-video-skill.md
- 利用条件: 引用する場合は出典として「知能圏（chinouken.com）」と該当ページのURLを明記してください。本文の再配布は行わず、要約や引用の範囲で使ってください。

video-shotcraftは、Claude CodeやCodexへ製品紹介動画の作り方を追加するAIエージェント用Skillです。知能圏の短い動画を実際に作り、文章の依頼からMP4まで進められる原理と、用途の異なる動画制作Skillの選び方を整理します。

![製品理解から動きの選択を経て実装と検査へ進み 動画制作の判断を再利用可能な制作手順へまとめる流れ](https://www.chinouken.com/images/articles/video-shotcraft-agent-video-skill/hero.png)

*作例、コード、品質基準を一つの制作手順へまとめ、製品ごとに再利用します。*

## 一言の依頼を制作工程へ変える

動画制作Skillを使うと、利用者は「この製品の30秒プロモーションを作ってください」のように目的から依頼できます。エージェントは対象のWebサイトやデスクトップ製品を調べ、見せる機能、視聴者、公開先、画面比率、音楽、扱ってよいデータを整理してから、絵コンテと動画コードを作ります。利用者が各フレームの座標や緩急を最初から指定する必要はありません。

この便利さには、エージェントが製品のソースコード、実行中の画面、画像、音声、シェルへアクセスできることが必要です。実画面を撮る段階では、公開用のデモデータと、顧客名、個人情報、社内情報、APIキーなどを区別しなければなりません。さらに、他社の映像表現を参照しても、映像、ロゴ、音源をそのまま転載してよいとは限りません。

そこでvideo-shotcraftは、制作を「何でも自動で決める一回の処理」にせず、判断と検査の地点を工程へ入れています。エージェントは、目的と制約を確認し、制作モードを選び、製品のデザイン規則を抜き出し、機能ごとにショットを割り当てます。その後で安全な画面素材を収集し、動画を実装し、静止画と完成映像を確認し、音を合わせてから成果物と未解決事項を返す流れです。

この設計によって減るのは、毎回ゼロから制作手順を説明し、似た動きを試行錯誤し、検査項目を思い出す作業です。企画の優先順位、公開してよい情報、ブランドからどこまで離れてよいか、最終的に採用するかという判断は人に残ります。

## 知能圏のショート動画を一つ作ってみる

[動画: 知能圏の画面骨格と文字が3D空間から飛来して組み上がる6.2秒のショート動画](https://www.chinouken.com/videos/video-shotcraft/chinouken-assemble-then-type-flyin.mp4)

*assemble-then-type-flyinの運動を、知能圏の配色・ロゴ・コピーへ適応した実作例です。音声を再生すると三つの着地音も確認できます。*

仕組みを読むだけでは実用性を判断しにくいため、ショットカードを一つ指定し、知能圏の6.2秒のブランド動画を実際に作りました。元になった[video-shotcraftの公式テンプレート](https://github.com/Vincentwei1021/video-shotcraft/tree/main/template)と、動きを検索できる[モーションGallery](https://vincentwei1021.github.io/video-shotcraft/library.html)は公開されており、利用者は完成イメージを見てからカード名を選べます。

今回選んだ`assemble-then-type-flyin`は、文字のない画面骨格が四方から集まり、その後に見出しやラベルの各文字が3D空間から回転しながら定位置へ着地するカードです。

作例からの変更は配色だけにとどめず、知能圏のサイトから濃い青緑、ミント、水色、角丸、格子、ロゴを取り出し、見出しを「AIと その先を読む。」、右側の領域を「AI・ソフトウェア・GPU・電力」へ置き換えました。一方で、六つの画面骨格が入る順番、文字が動き始める時点、文字ごとの奥行きと回転、緩急はカードの実装を保っています。

カード本来の動きは1920×1080、30fpsで156フレーム、約5.2秒です。ただし最後の文字が着地した直後に映像を終えると、ブランド名と日本語の見出しを読む時間がほとんど残りません。今回は運動部分を短縮せず、完成画面を30フレーム、1秒だけ追加して全体を186フレームにしました。骨格の集合、文字の開始、最終着地には同梱の効果音を一つずつ置き、BGMとナレーションは入れていません。

静止画は20、70、125、155、185フレーム目を書き出し、途中の文字が画面外で切れないか、最終画面の日本語が読めるか、ロゴと右側の情報が重ならないかを確認しました。下の動画が完成版です。再レンダーできるRemotionのソースコードも記事と同じリポジトリへ保存しています。

この試作で分かったのは、カード名を選ぶだけで完成するのではなく、「何をカードから固定し、何を対象ブランドへ合わせるか」を分ける必要があることです。運動の意味とタイミングは再利用できても、コピーの長さ、文字の可読性、完成後の静止時間、効果音の強さは実際の素材で検査し直します。Skillの価値は、この適応と検査の順序まで作業へ含める点にあります。

## Skillが動画制作を進められる原理

文章の依頼から動画まで進められるのは、AIモデル、Skill、作業環境、Remotionが役割を分けてつながるためです。AIモデルは目的を解釈して次の操作を選び、Skillは制作の順序と判断基準を渡します。シェルやブラウザは素材収集、コード変更、静止画、動画の書き出しを実行し、Remotionは各時点の画面を同じ規則から計算します。

Agent Skillsの仕様では、最初から全資料をAIモデルへ渡しません。起動時にはSkillの名前と説明だけを読み、仕事に関係すると判断したときに`SKILL.md`を読みます。参照資料、スクリプト、テンプレート、画像や音声などの素材は、さらに必要になった段階で読み込む仕組みです。この段階的な読み込みによって、152枚のカードと多数の実装例を持つSkillでも、今回使うカードと検査基準だけを現在の仕事へ持ち込めます。

動画の時間はコード上で扱えます。Remotionでは、現在のフレーム番号と毎秒のフレーム数から時刻を求め、Reactの部品がその時点の位置、透明度、文字、画像、音量を返す構造です。関係を簡略化すると、`時刻 = frame / fps`、`画面 = f(frame, 入力, 素材)`です。現在時刻や毎回変わる乱数を使わなければ、同じ入力とフレームから同じ画面を再現できます。

エージェントは、この性質を検査にも使います。重要なフレームをPNGとして書き出し、文字切れ、重なり、構図を確認した後、全フレームと音声をMP4へまとめます。失敗した箇所は、フレーム番号とコードへ戻って修正できます。動画生成モデルのように完成映像を一度に推論するのではなく、制作判断、素材、時間、検査結果をファイルとして往復できることが、コーディングエージェントとRemotionの相性を支えています。

## Skillと動画生成モデルの役割

video-shotcraftは、AIエージェントが読む制作能力のパッケージです。映像フレームを作るAIモデルとは担当が異なります。中心にある`SKILL.md`は、いつ使うか、どの資料を読むか、どの順で作業するか、どの状態を完成とみなすかを定めます。周囲に、詳細な工程、ショットカード、実装例、テンプレート、効果音、検査基準が置かれています。

Claude Codeの公式文書では、Skillは`SKILL.md`と任意の参照資料、スクリプト、作例をまとめたディレクトリです。必要になったときに本文を読み込み、手順や専門知識を現在の仕事へ適用します。Codexの公式文書も、Skillを指示、資料、任意のスクリプトをまとめた再利用可能な作業形式として説明しています。

同じ「AIで動画を作る」という言葉でも、担当する範囲は異なります。

| 種類 | 主な入力 | 作るもの | 得意な範囲 |
| --- | --- | --- | --- |
| 動画生成モデル | 文章、画像、既存動画 | 新しい映像フレーム | 実写風の場面、人物、物理表現、短い映像素材 |
| Remotion | Reactの部品、画像、音声、フレーム値 | 再現可能な動画コードと映像 | 文字、製品画面、図、数値、時間制御、量産 |
| Remotion公式Skill | 作りたい動画とRemotion工程 | Remotionの実装 | 構文、字幕、描画、書き出しなどの技術的な定石 |
| video-shotcraft | 製品、見せたい機能、制作条件 | 絵コンテ、素材、Remotion工程、音、完成映像 | 製品紹介動画の演出選択から検査まで |
| 動画編集アプリ | 素材と編集操作 | 編集プロジェクトと完成映像 | 人が時間軸を見ながら細部を調整する作業 |

表の五つの道具は組み合わせて使えます。video-shotcraftが演出と制作手順を決め、Remotionが文字や画面をフレーム単位で合成し、一部の背景だけを動画生成モデルで作り、最後に剪映や別の編集アプリで微調整する構成も可能です。

## 152枚のショットカードと209本の作例

video-shotcraftの特徴は、抽象的な「映画のように」という指示を、選べるショットへ分解した点です。2026年8月21日に確認したリポジトリには、152枚のショットレシピカード、209種類のスタイル、209本のモーションプレビューがあります。カードには用途、画面の動き、推奨時間、エネルギー、調整値、実装上の注意、失敗しやすい箇所が記録されています。

一枚のカードが記録しているのは完成動画ではなく、複数のカードを空間へ配る動き、一覧の行を順に組み立てる動き、製品画面へ近づいて一機能を見せる動きといった、再利用できる「一ショットの文法」です。利用者はGalleryでプレビューを見てカード名を選べます。エージェントは製品の機能と必要な画面状態を照合し、どの文法が説明に合うかを判断します。

各カードには、文章の説明と調整済みのRemotion実装があります。Skillは、Galleryの索引でスタイル名を確認し、カード全文と対応するTSXコードを読んでから適用するよう求めています。カード名から似た動きを書き直す方法では失われる、緩急、動作時間、マスクを外す時点、既知の不具合回避まで再利用するためです。

この構造は、プロンプト集より部品ライブラリに近いものです。文章だけの作例は、モデルが意味を解釈し直すたびに動きが変わります。コード、プレビュー、注意事項が同じ名前で結び付いていれば、エージェントは見た目と実装を照合しながら適応できます。

## 制作モードを選ぶ

完全な製品動画には、既存テンプレート、自主制作、共同制作の三つの入口があります。利用者がモードを指定していない場合、Skillはまず対象製品を読み取り専用で調べ、各方式の適性を説明してから選択を求めます。

| 制作モード | 何を固定するか | 人が確認する地点 | 向く場面 |
| --- | --- | --- | --- |
| Ink Pressテンプレート | 36.2秒、10ショットの構成と運動 | 対象製品と差し替え内容 | 早く一定の構成へ載せたい |
| 自主自由制作 | 利用者の要件だけを制約にし、構成はエージェントが決める | 不足情報や危険な操作 | 方向選びから実装までまとめて任せたい |
| 共同制作 | 製品概要、視覚方向、機能とショットの対応、絵コンテを順に固める | 各節目で利用者が承認 | ブランドや見せ方へ強く関与したい |

これとは別に、カードを一つ指定して単独の動きを作る使い方があります。製品動画全体を作らず、「この機能へ`row-embed`の動きを使う」と依頼できます。この入口は、既存のWebサイトや動画へ一つだけ印象的なショットを追加したい場合に向きます。

三つのモードで共通するのは、テンプレートの色や書体をそのまま移植しないことです。Skillは、対象製品のソースコードや表示結果から、書体、字の大きさ、余白、角丸、背景色、強調色、情報密度を抜き出し、動画全体の設計規則へします。ショットカードから借りるのは動きの構造と調整値で、画面の外観はあくまで対象製品が基準です。

## 実画面を2.5Dの映像へ変える

製品紹介では、見栄えと事実の一致が同じ画面に求められます。video-shotcraftは既存製品の画面を見せる場合、似た画面を手書きで再現する方法より、実際のページを撮影する方法を優先します。架空の画面を美しく作れても、ボタン名、数値、配置、機能の有無が製品と違えばデモとして誤解を招くためです。

素材収集では、全体の高解像度画像、個別要素を切り出した透過画像、各要素の位置と大きさを記録した座標データを作ります。Remotion側では、全体画像をページ面として置き、切り出したカードやボタンを同じ座標系へ重ねます。そこへ仮想カメラの移動、奥行き、傾き、影を加えると、平面のWeb画面を壊さずに2.5Dの動きを表現できます。

この工程ではデータの凍結が重要です。リアルタイムの利用状況や顧客情報が表示される画面をそのまま撮ると、完成映像へ情報が残ります。Skillは、公開デモであることを確認したデータだけを使い、顧客、個人、社内、認証情報、時々刻々と変わる値は、撮影前に架空データへ置き換えるか匿名化するよう定めています。

## Remotionとエージェントの相性

Remotionは、Reactの部品へ現在のフレーム番号を渡し、各フレームの画面を計算して動画にする仕組みです。幅、高さ、総フレーム数、毎秒のフレーム数を決め、文字、画像、音声、3D表現をWeb技術で組み立てます。動画の時間を数値とコードとして扱えるため、エージェントはファイルを読み、値を変更し、コマンドで静止画やMP4を書き出せます。

通常の動画編集画面では人が時間軸を見ながら要素をつかんで移動しますが、コード中心の工程では「240フレーム目から30フレームで入場し、15フレーム静止する」という状態を差分として記録できます。字幕や配色をデータから差し替え、同じ構成で複数版を書き出す処理にも向きます。

video-shotcraftは再現性をさらに厳しくし、`Math.random()`や現在時刻に依存する描画を避け、固定した疑似乱数を使うよう求めています。同じフレームを再び書き出したときに粒子や揺れが変わると、比較と検査が難しくなるためです。

映像品質には、コード化に加えて目と耳による検査が必要です。緩急の値が正しくても、構図が窮屈、文字が小さい、情報が速すぎる、音が動きとずれることはあります。エージェントが編集可能な状態と、映像として良い状態は別々に検査します。

## 音と静止時間を工程へ入れる

製品動画の印象は、要素が動いている時間だけでなく、動きが終わって読める時間で決まります。video-shotcraftは、ブランド名が落ち着いた後に1秒以上、複数要素の動きが終わった後に0.5秒ほどの静止を確保するなど、呼吸のためのフレームを最初から予算に入れておく設計です。

音楽を使う場合は、先に拍と実際の打音を分析し、カットや大きな着地を合わせます。効果音は、運動、着地、文字入力、紙、カメラなど16種類の用途から選び、映像内の具体的な動作へフレーム単位で割り当てます。リポジトリに同梱されているのは、5曲の背景音楽候補と149個の効果音です。

この音響設計は、音源を足す作業より、タイミングを記録して検査できる形にする作業です。映像の尺を変えた後は音の位置も確認し、完成版は背景音楽ありと背景音楽なしの二種類を書き出します。公開先で別の音楽を使うときに、同じ映像と効果音を保ったまま差し替えるためです。

## 静止画と完成映像を往復して検査する

エージェントは各ショットを実装した直後に、指定したフレームを静止画として書き出します。文字の鮮明さ、画面外へのはみ出し、構図、要素の重なりを確認し、修正後は動画全体を書き出してつなぎ目と音を見直します。問題のある数秒だけを見る工程と、全体の流れを見る工程の二段構えです。

最終検査では、製品の見せるべき機能がそろっているか、選んだショットカードの動きを保っているか、映像と音の品質、公開してよいデータかを確認します。Skillは制作者と別の文脈で最終確認する手順も持っています。作った本人の見慣れによって、文字の小ささや一瞬の破綻を見落とす可能性があるためです。

完成後には、通常のMP4に加えて剪映の編集可能な下書きへ書き出す経路があります。公式資料では、macOS版剪映11.2で、ショット単位の映像、編集可能な字幕、効果音と背景音楽の別トラックを検証済みとしています。Windows版の書き出しコードもありますが、実機検証は済んでいないと明記されています。

## 動画制作Skillは用途ごとに分かれる

公開されている動画制作Skillは、同じRemotionを使っていても、固定する制作知識が異なります。Remotion自身の公式Skillは、新規作成、Reactによる動画部品、字幕、書き出し、地図、動画アプリ化など、Remotionを正しく扱うための技術的な定石を分割して提供しています。特定の広告表現より、ほかの動画Skillが参照できる実装の土台です。

video-shotcraftは、その土台へ製品紹介の演出と制作管理を追加します。ほかにも、手元の素材を構成表へ入れて組み立てるSkill、ナレーションと多言語版を中心にするSkill、生成した静止画や動画を場面表から合成するSkill、実行結果を改変できない形で映像へするSkillがあります。

| Skill | 制作の起点 | 固定している知識 | 向く動画 |
| --- | --- | --- | --- |
| Remotion Agent Skills | 作りたい構成や既存プロジェクト | フレーム制御、字幕、音声、描画、書き出し | Remotion動画全般の実装 |
| video-shotcraft | 製品と見せたい機能 | ショットカード、実画面収集、音響、映像検査 | Web・デスクトップ製品の短いプロモーション |
| remotion-video-skill | 製品のコードと紹介したい機能 | 画面部品、遷移、音楽同期、書き出し | コードベースから作る簡潔な製品紹介 |
| claude-remotion-skill | 画像、録画、ナレーション、音楽のフォルダー | 構成表、再利用部品、音声尺の計測 | 素材がそろった複数場面の動画 |
| AI Motion Graphics | 場面とナレーションを記したCSV | 作風の固定、生成素材、音声、音楽、Remotion合成 | 生成映像を含む解説型モーショングラフィックス |
| remotion-product-video-animation | 台本とナレーション | HTML絵コンテ、多言語化、文字切れと音画の検査 | ナレーション中心の製品解説と多言語版 |
| ccvideo | 実際のAPIやコマンド実行 | 生の実行記録から表示値を再構築する検証 | CLIやAPIの結果を事実に基づいて見せる動画 |

Skillを増やせば自動的に品質が上がるわけではありません。一般的なRemotion実装、全体の制作工程、特定用途の検証という役割を分け、同じ判断を複数のSkillへ持たせない方が扱いやすくなります。今回確認したコミュニティ制作のSkillは、公開リポジトリの文書とコードを調べた段階で、同一条件による制作時間や映像品質の比較試験はしていません。

## 導入前に確認する制約

video-shotcraftはWebとデスクトップ製品の短いプロモーションを主対象にしています。人物中心の実写広告、長編ドキュメンタリー、物語映像を自動で撮影する道具ではありません。ショットカード単体は別用途へ転用できますが、全体の工程は製品画面、文字、機能説明を中心に設計されています。

導入後も制作時間はゼロになりません。対象製品を安全に起動し、表示データを整え、画面を撮り、Remotionの依存関係を導入し、静止画と映像を書き出す計算時間が必要です。低性能のLinux環境では同時処理数やブラウザ実行ファイルの指定が必要になる場合があります。公式Remotionも、2026年8月時点でmacOS 15以降などの動作条件を案内しています。

ライセンスも部品ごとに確認します。video-shotcraft本体はApache License 2.0ですが、同梱音源には各音源の条件があり、Remotionには独自の利用条件があります。Remotion公式は商用利用の条件と料金を別ページで案内しているため、企業利用では組織規模と用途を確認する必要があります。

今回の調査では、リポジトリの構成と手順、同梱作例を確認しましたが、同じ製品を複数のSkillで制作した所要時間、費用、視聴者評価の比較実験はしていません。「209本の作例があること」と「どの製品でも公開品質の動画が自動で完成すること」は同じ主張ではありません。対象製品との相性と最終検査は残ります。

## 制作知識を実行可能な形で保存する

video-shotcraftが示しているのは、生成AIへ長い指示を与える方法より、制作知識を実行可能な形で保存する方法です。絵コンテの順序、画面の撮り方、ショットの目的、調整済みのコード、音の付け方、失敗例、検査方法を一つのSkillへ結び付けると、エージェントは過去の制作判断を次の製品へ持ち込めます。

ここからは筆者の見立てです。動画制作Skillは、映像作家の判断をすべて置き換える方向より、反復できる判断を部品へし、人が重要な選択へ時間を使う方向で価値が出ます。実画面の収集、版違いの書き出し、字幕の差し替え、静止画検査は自動化しやすい一方、何を一番見せるか、どこで間を取るか、ブランドらしいか、公開してよいかは文脈ごとの判断です。

動画をコードで作れるようになった次の段階では、良い制作工程を、作例、検査、権利、データ管理まで含めて再利用します。video-shotcraftは、AIエージェント用Skillが単なるプロンプト集から、制作チームの工程と資産を持つパッケージへ広がる具体例です。

## 参照リンク

1. [Vincentwei1021: video-shotcraft](https://github.com/Vincentwei1021/video-shotcraft)
2. [Vincentwei1021: video-shotcraft 日本語README](https://github.com/Vincentwei1021/video-shotcraft/blob/main/README_JA.md)
3. [Vincentwei1021: video-shotcraft SKILL.md](https://github.com/Vincentwei1021/video-shotcraft/blob/main/SKILL.md)
4. [Vincentwei1021: video-shotcraft production pipeline](https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/pipeline.md)
5. [Vincentwei1021: video-shotcraft aesthetic rules](https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/aesthetic-rules.md)
6. [Vincentwei1021: video-shotcraft Gallery library index](https://github.com/Vincentwei1021/video-shotcraft/blob/main/gallery/api/library.json)
7. [Vincentwei1021: JianYing project export](https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/jianying-export.md)
8. [Vincentwei1021: video-shotcraft Apache License 2.0](https://github.com/Vincentwei1021/video-shotcraft/blob/main/LICENSE)
9. [Anthropic: Extend Claude with skills](https://code.claude.com/docs/en/slash-commands)
10. [OpenAI: Build skills](https://learn.chatgpt.com/docs/build-skills)
11. [Agent Skills: Specification](https://agentskills.io/specification)
12. [OpenAI: From model to agent: Equipping the Responses API with a computer environment](https://openai.com/index/equip-responses-api-computer-environment/)
13. [Remotion: Creating a new project](https://www.remotion.dev/docs/)
14. [Remotion: The fundamentals](https://www.remotion.dev/docs/the-fundamentals)
15. [Remotion: Remotion Agent Skills](https://github.com/remotion-dev/remotion/blob/main/packages/skills/README.md)
16. [Remotion: License and terms](https://www.remotion.dev/docs/license)
17. [vLX42: remotion-video-skill](https://github.com/vLX42/remotion-video-skill)
18. [AmazingAng: ccvideo](https://github.com/AmazingAng/ccvideo)
19. [cmak34: claude-remotion-skill](https://github.com/cmak34/claude-remotion-skill)
20. [docusphere: claude-skill-motion-graphics](https://github.com/docusphere/claude-skill-motion-graphics)
21. [ihueni: remotion-product-video-animation](https://github.com/ihueni/remotion-product-video-animation)

2026年8月21日時点の公式資料を確認しています。仕様は更新される可能性があります。

---

© 知能圏 https://www.chinouken.com/articles/video-shotcraft-agent-video-skill