Communitygithub.com

reference-motion-video (リファレンスモーションビデオ)

リファレンス動画と実際のプロダクト画面から、製品ローンチフィルム、説明動画、デモウォークスルー、ティーザーを企画・制作します。HTMLとGSAPを内蔵フレームレンダラーと組み合わせ、映像の合図に合わせて作曲された音楽を使用します。

reference-motion-video (リファレンスモーションビデオ) とは?

このスキルは、製品のローンチフィルム、コンセプト説明動画、デモウォークスルー、ユースケースビネットなどの短編動画を、リファレンス動画と実際の製品画面のキャプチャから企画、制作するための包括的なツールです。HTMLとGSAPアニメーションをベースとした独自のフレームレンダリングエンジンと、映像の各イベント(カット、ワードポップ、タイピングなど)のタイミングに合わせて音楽を自動生成・ミキシングする作曲エンジンを組み合わせています。10のセクションタイプ(intro, groove, breath など)と9つのキュータイプに基づき、映像の流れに完全に同期した音楽スコアを生成します。ワークフローは、インタビューによる企画書作成、プランニング、実際のアプリ画面のキャプチャ、ナレーション(オプション)、作曲、レンダリング、品質チェック(同期、ラウドネス、主観評価)、納品までをカバーします。Claude Code、Cursor、Codex などのAIエージェント環境で動作するよう設計されており、開発者やプロダクトマネージャーがプロフェッショナルな製品動画を効率的に制作するのを支援します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add csm-kr/reference-motion-video

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

リファレンスモーションビデオ

フィルムはHTMLであり、そのキューのリストがスコアです。 可視となるすべてのイベントは、映像を動かす定数の隣にキューを登録します。フィルムの各ストレッチは、その目的によって名前付けられたセクションです。パレットはそれらの情報を、各フレームにヒットしストーリーを演じる音楽に変換します。問題が述べられている間はリズムなし、製品が機能するときはグルーヴ、見せ場の前にはブレス、製品が意図的に停止するときはドラムアウト、ロゴでデッドストップ。

実例:examples/claude-code/(共有ステージ上で実行可能なローンチ、説明、デモフィルム。それぞれ異なるパレットを使用)、examples/moments-v2.html(36秒の連続ショット広告)、examples/ads/(Moments広告:ドラム、オーケストラ、バイオリン)。Momentsの楽曲はプロダクトアセットとパス調整が必要です。これらはリファレンスであり、すぐにレンダリングできるデモではありません。

過去のフィルムを決定づけたルール

  1. フィット最優先。 音楽は製品のムードに合致し、映像の流れを演じなければなりません。ブラインドA/Bテスト(KIBO v4.5、30秒、同じ映像、同じラウドネス)では、映像に合わせて作曲されたスコアが、ビートマッチされすべてのマシンメトリクスで優れていたフリーのストックエレクトロポップトラックよりも選ばれました。「2つ目は合わない」という理由で。作曲がデフォルトです。ライブラリトラックはユーザーが明示的に選択した場合のみ使用します(references/music.md)。
  2. すべてのキューに、そのフレームで音を。 カットはビートに着地し、単語はオフビートでポップし、最大の見せ場には最大のヒットを。
  3. 実際の映像と実際の出力のみ。 モーショングラフィックスはフレーム付けと説明を行います。機能を偽装してはいけません。高速再生や待ちカットは画面上にラベル表示(「ライブアプリ・1×」、「… 待ちカット」、「▶▶ 高速再生」)、合成音声にはタグを付け、すべての数値の下にソースを表示します。
  4. 音声優先。 ナレーションまたは会話がある場合、音楽はその邪魔をしてはいけません(references/music.md「ミックス」参照)。
  5. マシンゲートは必要条件であって十分条件ではない。 同期、ラウドネス、STTはすべて、合わない音楽に対してもパスする可能性があります。人間がブラインドリスニングで判断します。
  6. 質問してから決定する。 リクエストとリポジトリだけでは答えられないことのみを質問し、推奨する答えを先に提示します。それ以外は決定し、その旨を伝えます。

ワークフロー

0. セットアップ確認(作業開始前)

各行について「ok」または「missing」とその修正方法を報告します。キーの値を出力してはいけません。

  • Google Chrome(レンダラーはインストール済みのChromeを駆動します:バンドルされたChromiumはH.264をデコードできません)、ffmpeg(rubberband付き)、Node ≥ 20、スキルディレクトリから npm ci --prefix engine --ignore-scripts を実行済みであること。
  • Python 3.12 に numpy、scipy、soundfile、pytest がインストールされていること(スキルディレクトリから uv venv --python 3.12 .venv、次に uv pip install --python .venv/bin/python -r requirements.txt)。
  • サンプル:スキルディレクトリから bash engine/fetch_samples.sh core を実行(VSCO-2-CE CC0 パーカッション、金管、マレット;PixabayライセンスのSFX)。次に bash engine/fetch_samples.sh piano を実行(soft_pulse 用:Salamander Grand Piano、CC-BY 3.0;使用時はクレジットを記載)。パレットはサンプルがない場合に合成にフォールバックしますが、ピアノのフォールバックはセクションバランスチェックに失敗する可能性があります。完全なテストスイートには両方のセットを使用してください。
  • ナレーションが必要な場合のみ、ナレーションプロバイダーとその認証情報(references/voice.md)。3つの実行可能サンプルにはAPIキーは不要です。ナレーション、文字起こし、アプリキャプチャのクライアントはバンドルされていません。利用可能なツールを使用し、必要に応じて選択したプロバイダーの最新ドキュメントを確認してください。
  • 空きディスク容量:レンダリングはフレームをパイプ処理します(PNGダンプは行いません)が、サンプルライブラリとテイクには数GBの空きが必要です。

1. インテークインタビュー → 1ページのブリーフ(計画前に承認)

リクエストとリポジトリが提供しないコンテキストのみを質問します。環境の質問ツール、またはそれが利用できない場合はプレーンチャットを使用します。関連する質問をグループ化し、推奨オプションを最初に提示し、既に与えられた回答を再利用します。

  1. 目的: どのような種類のフィルムか(ローンチ、コンセプト説明、デモウォークスルー、ユースケースビネット、マニフェスト)、誰が見るか、どこで公開されるか(YouTube、コンテスト、ソーシャル)、視聴者に何をしてもらいたいか、締め切り、審査基準があれば。
  2. メッセージと証拠: 覚えておくべき1文、3つの証拠とそのソース、言ってはいけないこと。
  3. 形式とサウンド: 長さとフォーマット(16:9、9:16、カットダウン)、画面、キャプション、音声の言語;音楽のリファレンスリンクまたはムード(目的に合う下の表のパレットを提案し、さらに「リファレンスリンクあり」オプションも);ナレーションの有無、どのような声か。
  4. ソースとルール: 実際のアプリを録画できるか(URL、ログイン、デモデータ、2台のデバイス)、人物が登場するか、ブランドアセット、コンテストルール、サードパーティIP。 ブリーフを読み上げて確認を得ます。video/BRIEF.md に書き込みます。

2. ジャンルとリファレンス

ジャンルのビートテンプレートと測定ターゲットを references/genres.md から選択します(5ジャンルにわたる16の公式リファレンス、ショット長、カードあたりの単語数、ボイスオーバーペース、製品とロゴの出現タイミングを含む)。選択したリファレンスを /watch で視聴します。その音楽を engine/ref-analyze.py で測定します。連続ショット広告の場合は、references/transitions.md と references/youtube-analysis.md を参照します。

3. 計画 → video/PLAN.md(構築前に承認)

BPMグリッド上のビートシート(100 BPM = ビート0.6秒、30fpsで18フレーム;ドロップはダウンビートに配置):時間 | 小節 | シーン | 画面上のテキスト | フッテージ | セクション種類 | キュー | 音声。ヒーローオブジェクト(フィルム内を移動しロゴに着地する製品の1要素)、永続フレーム、およびすべての主張とその証拠ファイルに名前を付けます。

4. 実際の画面をキャプチャ

references/capture.md:製品に必要な場合、実際のアプリから2台のデバイスでライブテイクを取得します(CDPスクリーンキャストフレームとウォールクロックスタンプ、電話のマイクに流す合成顧客音声、ページからタップしたAIの応答)。これを一定フレームレートのMP4に変換して1つのクロックに乗せ、タイムマップ([[フィルム時間t, テイク時間t], ...]:等間隔は1倍速、フラットランはホールド、1ms間隔の2ポイントはカット)を介してフィルムで再生します。環境で利用可能なブラウザツールを使用します。references/aside-capture.md にAside固有の実装があります。ターミナルまたはツールの出力:実際の出力を再タイプセットします(Claude Codeサンプルのように)。決して作り出してはいけません。

5. ナレーション(オプション)

references/voice.md:選択したTTSプロバイダーまたは提供された録音を使用し、テイクを試聴し、単語の正確さとペース(英語のデモでは155~170 wpmが開始点)で選択し、音声をストレッチする前に文言やポーズを調整します。ソースでクリーンアップし、各行をそのスロットのワードバジェットに書き込みます。

6. コンポジションを構築

  • 固定された1920×1080の #stage;すべてのモーションは1つのポーズされたGSAPタイムラインから;タイピング、カウンター、ヒーロードット、ビデオテイクは __seek(t) 内で時間のみから評価されます。CSSアニメーション、setTimeout、requestAnimationFrame はモーションに使用してはいけません。fromTo は immediateRender: false が必要です。
  • エンジンとの契約:window.__duration、__seek(t)、__ready、__cues、__sections、__bpm、__T。examples/claude-code/stage.js(キュー、セクション、ワードポップ、タイピング、カウンター、ターミナルカード、ヒーロードット)または examples/moments-v2.html(実際の画面上の仮想カメラ)から開始します。
  • 何かを可視にするすべての定数の隣にキューを登録します。すべてのストレッチを目的別のセクションでマークします(下の表)。
  • キャプション:話されたラインのために読みやすいスロットを確保し、他のコンテンツがそれを妨げないようにします。合成スピーカーとそのプロバイダーを識別し、ブリーフが必要とする場合は翻訳を追加し、同じキャプションリストから .srt を書き出します。
  • フルレンダリング前に静止画をチェック:node engine/stills.mjs index.html out/stills 1.7 3.6 ...

7. 音楽:映像に合わせて作曲

node engine/cues.mjs > cues.json                      # duration, bpm, T, cues, sections
python engine/compose.py cues.json score.wav --palette bright_demo [--narr narr.js --narr-root .]

compose.py はスコアを書き、音声を音声優先でミックスし、-14 LUFS(トゥルーピーク -1 dBTP未満)にマスタリングし、同期ゲート自体を実行します:33ms以内に可聴オンセットがないキューは、パレットの強調音が追加され、ミックスがやり直されます(最大2回)。レポートには追加された内容がリストされます。選択する前に試聴: 2つまたは3つの適合するパレットで同じ15~30秒のストレッチをレンダリングし、人間がブラインドで選びます。詳細、ミックスルール、ライブラリトラックパス:references/music.md

8. レンダリング

node engine/render.mjs index.html out/film.mp4 --fps 30 --audio score.wav(JPEG q95フレームをx264にパイプ:PNGよりも約10倍高速;YouTubeフラグ:Highプロファイル、フレームレートの半分のGOP、BT.709タグ、AAC 48kHz 384kbps)。ドラフト用の短い範囲:--from 10 --to 16。Chromeは1ページに約18の異なるビデオをロードします。動かないテイクには静止画を使用します。

9. ゲート(すべて最終ファイルに対して)

references/qa.md。最終MP4で同期をチェックします(python engine/synccheck.py out/film.mp4 cues.json:すべてのキューが33ms以内、確率ベースラインとともに読み取られます)、ラウドネス、トゥルーピーク、静止画、トランジション、および人間のリスニング判断。音声、キャプション、QR、リビジョンチェックは、それらの機能が存在する場合にのみ、環境で利用可能なツールを使用して適用します。実行されていないチェックをパスしたと報告してはいけません。クラウド理解度テストはオプションであり、ユーザーがそのサービスにフィルムを送信することを選択した場合に限ります。

10. 納品

ブリーフの長さとフォーマットで納品します。通常はH.264 MP4、キャプションがある場合は .srt サイドカー、サムネイルまたはカットダウンがリクエストされた場合はそれらも。組み込みのステージとレンダラーは1920×1080です。他のアスペクト比には、レンダラーフラグではなく明示的な適応が必要です。実際に実行されたチェックとその証拠を報告します。公開は、ユーザーが既にリクエストしていない限り、別のアクションです。

目的別セクション

種類使用箇所(映像が...)音楽
intro問題を述べている、製品が動作する前リズムなし:パッドのみ、キューサウンドのみ
tease製品を起動させる、最初の要求スパースなグルーヴ(バックビートなし、トップパーカッションまたはメロディーなし)
build結果を出そうとしている、再突入前のフィルセクション終わりへのクレッシェンド
groove製品の動作を示している(エネルギー 0.5~1.2)エネルギー e のフルグルーヴ
light密度の高い行やテキストだらけのカードを含むメロディックフィギュアなしのグルーヴ
muffled深刻な事実、統計、問題を述べているローパスされたグルーヴ、次のセクションに向けて開く
breath見せ場の前に1ビート保持するほぼ無音;ヒーローオブジェクトの音のみが鳴る
stop製品が意図的に動作していないことを示す(安全停止、制限)ドラムアウト、ホールドされたパッド
endエンドカード無音
riser(オーバーレイ)着地に向けて上昇するセクション終わりで終了するライザー

すべてのパレットが応答するキュータイプ:drop(見せ場)、reentry、final(ロゴ、その後デッドストップ)、break(停止開始)、cut(チャプター用 big)、tap、tapTouch、pop、word、chip、node、num、count、fill、bar、key(タイピング)、dot(ヒーローオブジェクト自身の音)。

パレット(engine/palettes/)

パレット適合サウンド由来
bright_demoデモウォークスルー、親しみやすいコンシューマー/SaaSアプリ、音声主導100 BPMのFメジャーポップ:パンチのあるキック、クラップとスナップ、シェイカーとタンバリン、マリンバ(VSCOサンプルまたは合成)、プラッキーなベース、エアリーなパッド、水滴のヒーローサウンドKIBO v4.5 (A2-bright)、オーナーが選択;ブラインドA/Bに勝利
drums_launchローンチフィルムと広告、プロダクト発表、音楽主導100 BPMのDマイナーライブキット:VSCOキック、スネアとゴースト、ハイハット、コンガ、カウベル、シンコペーションベース、ミュートギタースカンク、トランペットとホーンスタブMoments 50秒ドラム広告(Apple MacBook Air M5フィルム後)、オーナーの好きなスタイル
soft_pulseコンセプト説明、図解、ナレーション主体のフィルム96 BPMのCメジャー:サンプリングピアノ、チューニングされたマリンバキューサウンド、ソフトキット、ベースとパッド;エネルギーとともにレイヤーが入り、図が構築されるにつれてキューノートが上昇examples/claude-code/explainer 用

スタンドアロンスクリプトとして存在し、パレットインターフェースに移植予定:ピアノとベル(engine/score.py、Moments v2)、バンド(engine/score_band.py、B2Bプロモ)、オーケストラとソロバイオリン(examples/ads/orch、examples/ads/violin)。パレットを追加するには、engine/palettes/__init__.py に従い、その名前を tests/test_compose.py に追加します。テストは、パレットがセクション文法を実行することを証明します(イントロでキックなし、無音のブレスとエンドカード、ストップでドラムアウト、すべてのキューが聞こえる、-14 LUFS)。

ファイル

  • engine/:render.mjs、cues.mjs、stills.mjs、compose.py + palettes/、audio.py(バス、サンプラー、ルーム)、synccheck.py、beatmap.py と bedmix.py(ライブラリトラックパス)、ref-analyze.py、music-analyze.py、fetch_samples.sh。
  • references/:genres.md、music.md、voice.md、capture.md、qa.md、transitions.md、youtube-analysis.md、aside-capture.md、ads/。
  • tests/:python -m pytest -q tests/(ビートマップ、ライブラリミックス、同期ゲート、すべてのパレットのセクション文法)。

ブリーフと提出の制約

  • リクエストされた長さ、言語、アスペクト比、公開先を使用します。コンテストの場合は、実際のルールを読み、ffprobe で長さを確認します。過去のコンテストの制限を継承してはいけません。
  • 機能の主張には実際の製品映像または実際の出力を表示し、ユーザーのブランドおよびアセットの許可を尊重します。Claude Codeサンプルのように、別の製品に関する非公式サンプルであることを明示します。
  • まずローカルで納品物を準備します。ユーザーが宛先と可視性を承認した場合にのみアップロードします。

関連スキル