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

Motion Video Directorでモーショングラフィックスと編集済み動画を作成

Claude Code、Codex、またはCursorでMotion Video Directorをインストールして使用し、After EffectsやPremiere Proを使わずに、動画全体の企画、アニメーション、編集、音声、サウンドデザイン、プレビュー、レンダリングをローカルで行う方法を学びます。

約12分で読了
Motion Video Directorでモーショングラフィックスと編集済み動画を作成

Motion Video Directorは、コーディングエージェントをモーションデザイナー、動画編集者、ディレクター、サウンドデザイナーに変える制作スキルです。コードからアニメーション付きの解説動画を作成したり、トーキングヘッド映像を編集したり、ナレーション原稿を準備したり、効果音を同期したり、縦型、ワイドスクリーン、正方形形式の最終MP4動画をレンダリングしたりできます。

このプロジェクトでは、ヘルパースクリプトとともにSKILL.mdの制作プレイブックを使用します。完全な動画をすぐにレンダリングするのではなく、エージェントは原稿、プラン、プレビューについて承認ゲートに従います。

Motion Video Directorプロジェクトのプレビュー

Motion Video Directorでできること

このスキルは、完全に生成するモーショングラフィックスと、既存映像をベースにした編集の両方に対応します。アニメーションはCanvas、SVG、Three.js、GSAPで作成でき、映像プロジェクトではカット、パンチズーム、キャプション、Bロール、被写体の背後に配置するテキストなどを組み合わせられます。

  • モーショングラフィックス: キネティックタイポグラフィ、UIモックアップ、カーソルアニメーション、ステッカー、パーティクル、Lottie要素、3Dシーンを作成します。
  • 映像編集: カット、キャプション、パンチズーム、スピードランプ、被写体の切り抜きを使ってトーキングヘッド映像を編集します。
  • ナレーション計画: ElevenLabs向けに設計された原稿を作成し、ショットを単語単位のタイミングに合わせます。
  • サウンドデザイン: フレーム同期したライザー、インパクト、ウーシュを追加し、ナレーション中の音量を下げ、プラットフォーム向けのラウドネスを目標値に調整します。
  • ローカルレンダリング: コード、ヘッドレスChrome、ffmpegを使い、9:16、16:9、1:1形式のMP4動画を書き出します。

スキルをインストールする

オプション1: クイックインストール

推奨されるインストール方法はnpx skillsコマンドを使用する方法です。プロジェクトフォルダーから実行します。

npx skills add Miftahul-Islam-Efaz/Motion-graphics-skill

Node.jsがインストールされている必要があります。インストーラーが使用するエージェントを尋ね、適切な場所にスキルをコピーします。この方法は、Claude Code、Codex、Cursorなど、スキルに対応した他のエージェントでも利用できます。

オプション2: Claude Codeプラグイン

Claude Code内でマーケットプレースのエントリとプラグインをインストールします。

/plugin marketplace add Miftahul-Islam-Efaz/Motion-graphics-skill
/plugin install motion-video-director@motion-graphics-skill

インストールが完了したら、Claude Codeを再起動します。

オプション3: 手動インストール

  1. CodeとDownload ZIPを使ってリポジトリをダウンロードし、解凍します。
  2. プロジェクト全体で使用する場合は、skills/motion-video-directorフォルダーを~/.claude/skills/にコピーします。
  3. 特定のプロジェクトだけで使用する場合は、プロジェクト内の.claude/skills/にコピーします。
  4. Claude Codeを再起動します。

Windowsでは、グローバルなClaude Codeスキルディレクトリは通常C:\Users\<you>\.claude\skills\です。Codex、Cursor、その他の互換エージェントでは、フォルダーをプロジェクトにコピーし、次の指示を与えます。

Read skills/motion-video-director/SKILL.md and follow it for this video project.

環境を確認する

Motion Video Directorには、Node.js 18以降、ffmpeg、ffprobe、ヘッドレスChromeを備えたPlaywrightが必要です。オプションのPythonツールを追加すると、文字起こし、被写体の切り抜き、ステム分離を利用できます。

  • 必須: Node.js 18以降、ffmpeg、ffprobe、ヘッドレスChromeを備えたPlaywright。
  • オプション: faster-whisper、rembg、demucsを備えたPython 3.10以降。
  • オプションの連携: ElevenLabs、Firecrawl、Freesound、Pexels、Pixabay、LottieFiles用のAPIキーまたはMCPサーバー。

次の事前チェック用スクリプトを実行すると、インストール済みの依存関係と不足している依存関係を確認できます。

bash skills/motion-video-director/scripts/preflight.sh

APIキーは、gitの対象外となるローカルの.envファイルに保存します。リポジトリには、空のキー欄を持つ環境ファイルを作成するcreate_env.shと、既存のキーファイルを整った.envに変換するnormalize_env.pyも用意されています。

最初の動画を作成する

スキルをインストールしたら、作りたい動画を自然言語で説明します。用意できる場合は、ビジュアルリファレンスを添付してください。例:

私のSaaS向けに、30秒の9:16ローンチリールを作成してください。リファレンスを添付します。

既存映像をベースにした編集を依頼することもできます。

素材のトーキングヘッド映像を、キャプション、パンチズーム、Bロール付きのリールに編集してください。

プロダクト中心のプロジェクトでは、希望するスタイルと長さを伝えます。

私たちのダッシュボードを紹介する45秒のプロダクト解説動画を作成してください。クリーンなUIアニメーションと控えめなサウンドデザインで。

制作ワークフローに従う

エージェントは段階的なプロセスを使用するため、最終レンダリング前に重要な決定を確認できます。

  1. ブリーフ: エージェントがリファレンス、ストーリー、対象ユーザー、形式、長さを収集します。
  2. ナレーション原稿: ElevenLabsに貼り付けて使える原稿を作成します。MP3を生成して送り返します。
  3. ストーリーボード: すべてのショットをナレーションの言葉に合わせてタイミング調整します。
  4. 制作: シーンをコードでアニメーション化し、提供された映像があれば編集します。
  5. プレビュー: 各シーンのコンタクトシートをレンダリングし、全体のレンダリング前に問題を見つけられるようにします。
  6. レンダリングとミックス: サウンドデザインとラウドネス正規化を施した最終動画を書き出し、その後、品質保証チェックリストを実行します。

最終レンダリングの前に、スクリプト、プラン、プレビューを承認します。ワークフローは進行状況を PROGRESS.md に記録するため、新しいセッションでも前回停止したところから作業を続けられます。

主な制作機能を確認する

演出とテンポ

このプレイブックでは、最初の3秒のフック、テンポ、ショットの種類、Jカット、Lカット、マッチカット、行動喚起の構成を扱います。また、テンポの速いリールから抑制の効いた企業動画まで、5段階の編集強度を定義しています。

アニメーションとモーショングラフィックス

生成ビジュアル向けに、このスキルはキネティックタイポグラフィ、3Dテキスト、UIモックアップ、カーソルアニメーション、ステッカー、パーティクル、Lottieコンテンツ、Three.jsによる製品ショットに対応しています。イージング、スタッガリング、オーバーシュートなどのアニメーション原則も適用します。

映像素材と被写体の処理

撮影済みの映像には、RVMやSAM2などのツールを使って、パンチズーム、キャプション、スピードランプ、被写体の切り抜きを追加できます。編集内容に応じて、被写体の背後にキャプションを配置することも可能です。

色、レイアウト、アクセシビリティ

ガイダンスには、60-30-10の配色アプローチ、WCAGコントラスト、9:16プラットフォーム向けのセーフゾーンが含まれています。これらを考慮することで、プラットフォーム固有の形式でも重要なテキストやビジュアル要素を読みやすく保てます。

ナレーションとサウンド

ナレーションのスクリプトはElevenLabs向けに準備し、faster-whisperで単語ごとのタイムスタンプを取得できます。サウンドデザインには、各フレームに同期したライザー、インパクト、ウーシュを使用でき、音声の下ではダッキングを行い、-14 LUFS、-1.5 dBTPを目標ミックスとします。

ヘルパースクリプトを使う

リポジトリには、制作ワークフローを支援する複数のスクリプトが含まれています。

  • preflight.sh はNode.js、ffmpeg、Playwright、Pythonツール、APIキーを確認します。
  • preview.mjs は指定した時間範囲をコンタクトシートにレンダリングし、すばやく確認できるようにします。
  • analyze_ref.sh は参照動画をフレーム、カット、音声に分解します。
  • create_env.sh は、APIキーの空欄を含む .env ファイルを作成します。
  • normalize_env.py は既存のキー ファイルを整理された .env に変換します。

より良い結果を得るための高度なヒント

  • 早い段階で参考資料を提供する: ビジュアルの例を添付し、ブリーフとストーリーボードに意図したスタイルを反映させます。
  • 納品形式を指定する: 動画を9:16、16:9、1:1のどれにするかを示し、希望する長さも記載します。
  • 段階的に確認する: スクリプト、ストーリーボード、コンタクトシートのプレビューという承認ゲートを使い、フルレンダリング前に問題を見つけます。
  • ソース素材を整理しておく: 映像、音声、ロゴ、フォント、その他の参考素材を明確に識別し、エージェントが正確に組み込めるようにします。
  • 必要に応じてオプションツールを使う: 文字起こしには faster-whisper、切り抜きには rembg、ステム分離には demucs を追加します。
  • 構築前に環境を確認する: 最初にpreflightスクリプトを実行し、プロジェクト後半でレンダリング依存関係の不足が判明するのを避けます。
  • 進行状況ログから再開する: 新しいセッションで作業を再開するときは、PROGRESS.md を確認します。

まとめ

Motion Video Directorは、Claude Code、Codex、Cursor、その他のターミナル対応コーディングエージェントを使って、完成度の高い動画を構造的に制作する方法を提供します。スキルをインストールし、プロジェクトを説明し、スクリプトとストーリーボードを確認して、プレビューを点検すれば、ローカルのレンダリングワークフローで最終動画を生成できます。After EffectsやPremiere Proを必要とせず、コードで生成するモーショングラフィックスと編集済み映像の両方に対応しています。