メインコンテンツへ移動
AIチュートリアル

Motion Video Kitで高品質なAIビジネスCMを制作する

Motion Video Kitのインストール方法、Claude CodeなどのLLMとの使い方、ビジネスCMの企画、モーションと音声のガイドラインの適用方法、そして独立した批評役によるGauntletループで実際のレンダリングを改善する方法を学びます。

Motion Video Kitで高品質なAIビジネスCMを制作する

Motion Video Kitとは?

Motion Video Kitは、実在するビジネス向けのプレミアムなローンチスタイルのコマーシャルを制作するためのClaude Codeスキルです。AI生成映像、HTMLとGSAPで構築したモーション、選択的なThree.jsシーン、測定可能な品質チェック、独立したレビュー工程を組み合わせています。

このキットは、他の大規模言語モデルで通常のコンテキストとして使用することもできます。ガイダンスは、28本のプロフェッショナルなSaaSローンチフィルムの分析と、独立した批評を5回重ねて改良したサンプルコマーシャルに基づいています。リポジトリには独自の分析と参考映像へのリンクが含まれていますが、それらの映像の素材自体を再配布するものではありません。

Motion Video KitはレンダリングにHyperFramesを使用すると最も効果を発揮しますが、その原則、プロンプト、品質チェックはレンダラーに依存しません。

主な機能

  • Gauntletレビュー・ループ:制作者と審査役を分離し、新しい批評者に実際のレンダリング結果を評価させ、指摘事項を項目ごとに検証し、作業を台帳に記録します。
  • モーション文法:6つのモーションルール、再利用可能な16のメカニズムのカタログ、ペーシングのガイダンス、28本の参考映像に関するノートを提供します。
  • 品質管理:フリーズした時間、ラウドネス、コントラスト、ブランドカラーなどの測定可能なチェックに加え、映像面とビジネス面の承認基準を扱います。
  • 音声ガイダンス:購入者の顧客に合う音楽の選び方、控えめな効果音の使い方、定義したミックス目標に近づける方法を説明します。
  • ビジネス・プレイブック:購入の根拠、価格アンカー、パイロット提案のテンプレート、誠実さに関するルールを備えた、商用分野別の資料を収録しています。
  • Three.jsパターン:決定論的でシーク可能なシーン、投影コールアウト付きの分解レイヤー、3Dコンテキストに配置した写真、アニメーションするオプションパッチ、リアリズムチェックリストを文書化しています。
  • スクリプトとテンプレート:フリーズ時間の測定、ラウドネス分析、コンタクトシート作成、効果音の弱化、候補選定、ゲイン解決、コンポーネント単体テスト、投影オーバーレイのためのユーティリティを収録しています。

前提条件

付属のスクリプトにはffmpegとffprobeが必要です。FFmpegのインストール環境には、ラウドネス分析用のebur128フィルターが含まれていなければなりません。

Node.js 22以降とHyperFramesは任意です。付属のcomponent-labテンプレートを使用する際には便利ですが、プロジェクトのワークフロー、プロンプト、レビュー基準を適用するために必須ではありません。

必要なツールを確認する

ffmpeg -version
ffprobe -version
ffmpeg -filters

ラウドネス測定ツールを使用する前に、フィルターの出力を確認し、ebur128が利用可能であることを確認してください。

Claude CodeにMotion Video Kitをインストールする

ステップ1:リポジトリをクローンする

git clone https://github.com/echris6/motion-video-kit.git

ステップ2:スキルをグローバルまたはローカルにインストールする

すべてのClaude Codeプロジェクトでスキルを利用できるようにするには、ユーザーレベルのスキルディレクトリにコピーします:

cp -r motion-video-kit/business-motion-film ~/.claude/skills/

1つのプロジェクトだけにインストールするには、そのプロジェクトのローカルスキルディレクトリにコピーします:

cp -r motion-video-kit/business-motion-film <your-project>/.claude/skills/

インストール後、Claude Codeにビジネス向けコマーシャル、サンプルリール、または解説動画の制作を依頼できます。既存の映像を提供してレビューを依頼することもできます。

別のLLMでキットを使う

このプロジェクトはClaude Codeに限定されません。別のLLMで使用する場合は、business-motion-film/SKILL.mdの内容をモデルのコンテキストに入れ、タスクに関連する参考ファイルだけを追加します。

たとえば、トランジションとペーシングの設計にはmotion-grammar.md、サウンドトラックの計画にはaudio.md、レンダリングした映像の評価にはcritic-prompts.mdを含めます。この選択的な方法により、プロジェクトの中核ルールを維持しながら、コンテキストを集中させられます。

リポジトリの構成を理解する

business-motion-film/
  SKILL.md
  references/
    gauntlet.md
    critic-prompts.md
    motion-grammar.md
    launch-film-notes.md
    quality-bar.md
    audio.md
    business-offers.md
    three-js-patterns.md
    case-study-alder.md
  scripts/
  templates/
    component-lab.html
    projected-overlays.js

SKILL.mdは、主要なワークフローと妥協できない要件を定義します。referencesディレクトリには、制作、ビジネス、モーション、音声、Three.js、レビューに関する詳細なガイダンスが含まれています。scriptsディレクトリには測定およびメディア処理用のユーティリティがあり、templatesには分離されたコンポーネントラボと投影オーバーレイモジュールが用意されています。

最初のコマーシャルを制作する

ステップ1:ビジネスと成果物を定義する

具体的なブリーフから始めます。実在するビジネス、宣伝する製品またはサービス、想定するオーディエンス、成果物がコマーシャル、サンプルリール、解説動画のいずれであるかを明確にします。

最初の依頼には、次のような内容が役立ちます:

このビジネス向けにローンチスタイルのコマーシャルを制作してください。Motion Video Kitを使って、ビジュアルの方向性、モーション計画、音声の方針、制作ワークフロー、品質レビュー計画を策定してください。

可能な限り、実際のブランド素材、承認済みのメッセージ、製品に関する事実を提供してください。顧客の成果を捏造したり、生成された人物や場所を本物の証拠として描写したりするようモデルに求めないでください。

ステップ2:シーンを構築する前にモーションを計画する

references/motion-grammar.mdを使用して、モーションの仕組みを選び、テンポを設定します。このキットには6つの基本ルールと16種類の再利用可能な仕組みがあり、恣意的に動きを加えるのではなく、意図的な選択ができます。

スタイル上の参考資料が必要な場合は、references/launch-film-notes.mdを参照してください。ここには文章による考察と28本のオリジナル映像へのリンクが含まれています。これらのメモは分析と演出の参考に使用してください。リポジトリは、参照されている映像を再利用する権利を付与するものではありません。

ステップ3:各ショットの制作手法を選ぶ

シーンの要件に応じて手法を組み合わせます:

  • オリジナルの映像素材が必要な場合は、AI生成映像を使用します。
  • 精密なコードベースのモーションには、HTMLとGSAPを使用します。
  • 空間レイヤー、3Dコンテキスト、投影型コールアウト、またはオプションパッチがコンセプトに役立つ場合に限り、Three.jsを選択的に使用します。
  • 独立したコンポーネントラボを使い、完全な映像に統合する前に個々のコンポーネントを洗練します。

すべてのショットでThree.jsを既定の手法として扱うことは避けてください。リポジトリではThree.jsを選択的なツールとして位置付け、技術的には impressive でも視覚的に説得力のない結果を防ぐためのリアリズムチェックリストを提供しています。

ステップ4:サウンドトラックを設計する

音楽、効果音、ミックスレベルを選ぶ際は、references/audio.mdを参照してください。単に流行しているという理由で曲を選ぶのではなく、購入者の顧客層に音楽を合わせます。重要な動きを補強しつつミックスを圧迫しないよう、効果音は控えめで明瞭に保ちます。

付属のスクリプトは、効果音を和らげたり、候補を特定したり、ゲインを調整したり、ラウドネスを測定したりするのに役立ちます。READMEには各スクリプトのコマンドラインオプションが指定されていないため、実行前に該当するスクリプトを確認し、文書化されたインターフェースに従ってください。

ステップ5:レンダリングして測定する

ストーリーボードやソースコードだけで判断せず、実際の出力を確認してください。提供されているツールと品質基準の指針を使い、次の項目を確認します:

  • 停止している、または視覚的に動きのない時間。
  • 音声のラウドネス。
  • コントラストと可読性。
  • ブランドカラーの正しい使用。
  • 映像の完成度とビジネスへの適合性。

コンタクトシートを使うと、映像全体のテンポ、構図、視覚的な反復、弱いフレームを確認しやすくなります。

Gauntlet品質ループを実行する

GauntletはMotion Video Kitの中核を成す要素です。その重要な原則は、作成者と審査者は同じではないということです。映像を組み立てた人またはモデルだけで、完成したかどうかを判断すべきではありません。

  1. 現在のバージョンをレンダリングする:説明や意図した動作に頼らず、実際の映像を批評者に提示します。
  2. 新しい批評者を使う:作品の制作を担当していない評価者からレビューを得ます。
  3. 指摘を記録する:問題、判断、変更の台帳を維持します。
  4. 映像を修正する:レンダリング結果とプロジェクトの品質基準によって裏付けられた問題に対処します。
  5. 各項目を検証する:主張された修正が新しいレンダリングで個別に確認できる、または測定できることを確認します。
  6. 必要に応じて繰り返す:測定、映像、ビジネスの出荷基準を満たすまで続けます。

コンポーネントレビュー、映像全体のレビュー、検証、ストーリーボード批評に使えるプロンプトは、references/critic-prompts.mdに用意されています。references/case-study-alder.mdの実例では、より広範なプロセスを完全なプロジェクトに適用した方法を紹介しています。

基本的な使用例

広告制作プランを作成する

Motion Video Kitを使用して、この実在する企業向けのプレミアム広告の制作プランを作成してください。コンセプト、シーン構成、モーションの仕組み、音声演出、レンダリング方法、測定可能なチェック項目、Gauntletレビューの段階を含めてください。

既存のレンダリング結果をレビューする

Motion Video Kitの品質基準と映像全体の批評プロセスを使って、このレンダリング済み広告をレビューしてください。測定可能な問題と視覚的またはビジネス上の懸念を分け、その後、項目別の検証台帳を作成してください。

Three.jsシーンを評価する

キットの決定論的レンダリング契約とリアリズムチェックリストを使って、このThree.jsシーンを評価してください。シーク可能かどうか、また空間レイヤー、コールアウト、写真要素が視覚的な信頼性を保っているかを確認してください。

応用のヒント

Three.jsシーンを決定論的かつシーク可能にする

本番レンダリングでは、特定の時点における状態を再現できるシーンを構築します。決定論的でシーク可能な動作により、制御されていないリアルタイム状態に依存するモーションよりも、フレーム生成、デバッグ、改訂、レビューの信頼性が高まります。

難しいコンポーネントは分離して開発する

templates/component-lab.htmlを使い、完全な映像の外部で個々のモーションコンポーネントを作業します。コンポーネントを分離すると反復時間が短縮され、統合前にタイミング、可読性、構図を比較しやすくなります。

投影オーバーレイは慎重に使う

templates/projected-overlays.jsモジュールは、空間シーンに関連するオーバーレイ作業をサポートします。シーン要素との接続を保つ必要がある投影型コールアウトや注釈を構築する際は、文書化されたThree.jsパターンと組み合わせてください。

レビューの根拠を具体的に保つ

批評者には、視認できるフレーム、タイミングの範囲、または測定結果を示すよう求めます。その後、新しいレンダリングに対して各修正を検証します。これにより、修正台帳が確認されていない変更の主張リストになるのを防げます。

客観的なチェックと主観的なチェックを分ける

静止、音量、コントラスト、ブランドカラーの使用は、体系的に確認できます。スタイル、リアリティ、説得力、クライアントへの適合性については、視覚面とビジネス面の判断も必要です。優れたレビュープロセスでは、どちらか一方で代替するのではなく、この2つのカテゴリーを組み合わせます。

プロジェクトの誠実性に関するルールに従う

AI生成画像を実在の顧客、完了した案件、または実証済みの成果として決して提示しないでください。生成素材には適切なラベルを付け、概念を示すビジュアルと、事実に基づくビジネス上の証拠を明確に区別してください。

商用価格データを再確認する

リポジトリに記載されている市場価格は、公開されている掲載情報を2026年9月時点でスナップショットとしてまとめたものです。見積もり、提案書、またはパイロットオファーを作成する前に、現在の価格を再確認してください。スタジオのポートフォリオから引用されている実績値は、各スタジオが主張する数値であり、その点を踏まえて扱う必要があります。

まとめ

Motion Video Kitは、単なるビジュアルスタイルガイドではありません。ローンチ向けのコマーシャルを制作するための制作ガイダンス、再利用可能なモーションパターン、音声に関する実践、ビジネス上のポジショニング、測定可能なチェック項目、独立した批評家の視点によるワークフローを組み合わせています。Claude Codeのスキルとしてインストールするか、そのファイルを別のLLMに提供し、公開前にGauntletで実際の各レンダーを評価してください。

リポジトリのテキスト、スクリプト、テンプレートはMITライセンスの下で利用できます。リンク先の参考映像に関する権利は、それぞれの所有者に帰属します。