アニメーション動画広告は何をしますか？

製品動画の各ショットを、実際の製品素材（スクリーンショット、動画フレーム、エクスポートデータ、実際の数値）をアニメーション化する小さなHTMLページとして構築し、各ページをクリーンなMP4に録画して、ユーザーにクリップのカット方法とナレーション内容を正確に指示するスクリプトドキュメントを提供します。ユーザーは自身のエディタ（Camtasia、Premiere、CapCut...）でクリップを結合し、ナレーションを録音します。

これが実際のアプリを画面録画するよりも優れている理由: すべてのショットが動画用にフレーミング、ペーシング、ズーム調整されています。 flickering、読み込み、プライベートデータの表示がありません。テキストはスマートフォンで十分な大きさです。変更（「その行を短くして」「ズームを遅くして」）は編集と再録画で対応でき、再撮影は不要です。それでも、ピクセルと数値は製品自身のものなので、正直に見えます。

ワークフロー

ストーリーを決定（1メッセージで、そのまま進む）。
実際の素材を収集（製品から）。
ショットごとに1ページを構築（assets/から）。
スクリーンショットでページを確認、修正、繰り返し。
scripts/record.cjsでクリップを録画、コンタクトシートで確認。
スクリプトドキュメントを作成（references/script-doc.md）。
オーディオとラフカット: 音楽（ElevenLabs、生成、またはユーザー自身のもの; references/music.md）、オプションのElevenLabsナレーション（references/voiceover.md）; scripts/roughcut.pyでプレビュー。
クリップ、ドキュメント、プレビューを送信、フィードバックに基づいてショットごとに反復。

すべてをユーザーが所有する1つのフォルダに配置します（例: video/ または video-scripts/）:

<name>-anim/     ページ（ショットごとに1つの.html）、base.css、ロゴ、frames/サブフォルダ
<name>-clips/    録画されたMP4: 01-hook-anim.mp4、02-setup-anim.mp4 ... + README.md
<name>-music/    BGM WAV、ラフカットプレビュー、cuts.json
<Name>.md        スクリプトドキュメント

1. ストーリー

長さ（デフォルト30秒; 同じクリップから45〜60秒のカットも提供）とコールトゥアクションを選択します。

広告が掲載される場所からフレーム形状を選択し、そのサイズでページを構築します（後で16:9をクロップするのは避ける; クロップするとテキストが失われ、ユーザーがすべてのショットを再フレーミングする必要があります）:

配置場所	サイズ
Instagram Reels/Stories, TikTok, YouTube Shorts, Facebook Reels	1080×1920 (9:16)
Instagram/Facebook フィード	1080×1350 (4:5)
LinkedIn または X フィード	1080×1080 (1:1) または 1080×1350
YouTube, ウェブサイト, ランディングページ, プレゼンテーション, 未指定	1920×1080 (16:9)

複数の配置場所がある場合: メインの配置用に構築し、ドキュメントで他の配置用にリフレームする方法を記載します。縦長の場合、プラットフォームが独自のUIを描画する上部約250pxと下部約350pxにテキストを配置しないようにします。次に、以下のアークで6〜9のショット（各1つのアイデア）を概説します:

フック（約3秒）: 問題を、視聴者の言葉で。質問が効果的です（「請求書が30日経っても未払い？さて、どうする？」）。
セットアップ（約4秒）: 開始するのにどれだけ少ない手間で済むか。
コア機能（2〜3ショット、各4〜5秒）: 製品がその役割を果たし、結果が画面に表示される様子。
証明（約3秒）: 実際の数値。大きく、シンプルで、真実。
ワークフローに適合（約3秒）: エクスポート、統合、共有。
エンドカード（約3秒）: ロゴ、一行の約束、CTAボタン、URL。

ポジティブな点を前面に出す。 製品が何をうまく行い、どれだけ簡単かを示します。製品の失敗ケースや回避策（たとえ巧妙なものでも）を中心としたショットは構築しないでください。ツールが間違っているときの対処法を説明する広告は、「よく間違える」と読まれます。ユーザーによる迅速で自信のある修正（「カテゴリが間違っている？クリックして正しいものを選んで、完了」）は問題ありません。エッジケースの仕組みに関するショットは避けてください。

ユーザーがまだ指定していない場合、1つの短いメッセージで概要と前提を述べ、構築を開始します。録画したショットを変更する方が、抽象的に議論するよりもコストがかかりません。

同じメッセージで、オーディオについても尋ねます（ただし、ユーザーがすでに指定していない場合）。そして、ユーザーが決定している間も構築を続けます。オーディオはステップ7まで必要ありません。質問ツールがあれば使用します。最初にElevenLabs MCPが接続されているかどうかを確認します（creative_generate_speech、creative_list_voices、musicノードタイプなどのツール）; 接続されている場合は、それを優先します。

音楽:

ElevenLabs Music（接続時推奨）: あなたは、ユーザーのElevenLabsアカウントでカットに合わせたインストゥルメンタルBGMを生成します。未接続の場合: プロンプトを作成し、ユーザーがelevenlabs.io/musicで生成してファイルを送り返します。
ここで生成: make_bed.pyによって作成された静かでロイヤリティフリーのBGM。無料で即座に利用可能。
自分のトラックを持ち込む: ユーザーがすでに所有またはライセンスしているトラック。

ナレーション:

ElevenLabsボイス（接続時）: あなたがボイスを選んで読み上げを生成し、各ラインをキューに配置します。ユーザーは後で自分で録音することもできます。
自分で録音: ドキュメントのクリーンな読み上げから（ElevenLabsがない場合のデフォルト）。

ElevenLabsはユーザーのアカウントからクレジットを消費します。最初に見積もり（estimate_only）を取得し、質問でコストを伝えます。ユーザーがどれとも指定せずに音楽を依頼した場合、またはステップ7に進んでも回答がない場合、無料のBGMを生成してプレビューに音声をつけ、最終メッセージでElevenLabsプロンプトをすでに作成した状態で質問を繰り返します。

2. 実際の素材

製品のリポジトリ、データフォルダ、エクスポート、データベース、テストフィクスチャ、録画を確認します。各ショットについて、以下を収集します:

画像: 実際のUIのスクリーンショット、または実際の動画から抽出したフレーム（ffmpeg -ss T -i in.mp4 -frames:v N frames/f%03d.jpg）。複数のフレームで動きを作成します。ウェブUI（ローカルHTMLまたはURL）のスクリーンショットを撮るには、scripts/grab.cjsを使用します: フルビューと名前付き要素を3倍で、各要素のボックスをフレーミング用に出力します: node <skill>/scripts/grab.cjs app.html <pages>/shots --size 1280x800 goal=.goal logo="header .logo"。ログインが必要な場合は、ユーザーにスクリーンショットを依頼します（ログインは避ける）。
数値: 製品の出力からの実際の値（時間、カウント、行数）。各値の出所を書き留めます。それはドキュメントの「数値の出所」セクションに記載されます。
位置: ハイライトするものの座標。可能な限りアプリ自身の出力（例: 検出ボックス）からのソース画像のピクセル単位、または画像を表示して測定。

ギャップは普通のことです。オープンに対処します:

ロゴファイルがない場合: 実際のUIスクリーンショット（ヘッダー、アプリアイコン）からクロップするか、製品自身のCSS/SVGから正確に再構築します。ドキュメントでその旨を記載し、実際のファイルを依頼します。
必要な画面が手元にない場合（例: セットアップフォーム）: 製品自身のスタイルで描画し、ドキュメントでそのショットをステージング済みとラベル付けして、ユーザーが実際の画面と交換できるようにします。

統計を決してでっち上げないでください。瞬間をステージングする必要がある場合（劇的なフック）、ドキュメントでラベル付けします。製品自身の用語と主張ルールを尊重します（例: 数値を「保証」や「公式」と呼んではならない製品） — コピーを作成する前に、プロジェクトのドキュメント/メモリでそのようなルールを確認します。

3. ページを構築

assets/base.css、assets/shot.js、assets/shot-template.html、assets/end-card.htmlをページフォルダにコピーします。shot.jsにはすべてのページが使用するヘルパー（show/hide、cursorTo、click、typeText、countUp、frameTo、preload）と自動再生が含まれています。ページの独自スクリプトの前にロードし、ヘルパーをページにコピーしないでください。各ページ:

選択したサイズの固定ステージです。base.cssで--w/--hを設定します（例: 1080px/1920px）。テンプレートは16:9用にレイアウトされているため、他の形状（縦9:16の場合はパネルを垂直に積み重ねる、縦の場合はタイトルをテンプレートの96pxではなく約250px以下から開始する）に合わせて位置を再レイアウトします。テキストサイズは26px以上。タイトルは80〜100px。スマートフォンで視聴されます。
タイムライン全体を保持するトップレベルの async function start() を1つ持ちます（ビート間は await sleep(ms) ）。shot.jsがそれを公開します。URLに#manualがある場合は待機し、通常開かれた場合はフォントと画像の準備ができ次第自動再生するため、ユーザーはダブルクリックでプレビューできます。
後で切り替えるすべての画像をプリロードします（トップレベルでpreload(frames)）。これにより、カメラ上で突然表示されることがなくなります。レコーダーとチェッカーはそれらを待ちます。
保持された完全な状態で終了します（結果が表示され、すべてのテキストがオン）。これにより、エディタは終了付近の任意の場所でトリミングし、最後のフレームを保持できます。
ソース画像に合わせた <svg viewBox="0 0 W H" preserveAspectRatio="xMidYMid slice"> にマークを描画します。これにより、アプリの座標を変換せずにそのまま使用でき、ステージ形状が画像をクロップしても位置が合ったままになります。
製品のように見えます: base.cssのトークン（--accent、--hi、--ok、--ink、フォント）を製品自身の色とフォントに置き換えます。ライトテーマの製品の場合は、テキストの色、.shade、.panel、.bgもライトバージョンに反転します。ライトアプリを中心としたダーク広告は、他の誰かの製品のように見えます。
UIスクリーンショットを.world内のネイティブピクセルサイズで表示します（.world { transform-origin:0 0 }と<img>を自然なCSSサイズに設定）。frameTo(x, y, scale)でフレーミングします。これにより、スクリーンショットの点(x, y)がステージの中心に配置されます。grab.cjsからのボックスが点を提供します。object-fit:coverは使用しません。これは、スクリーンショットの形状がステージと一致しない場合に予測不能にクロップするためです。
製品のテキストを読みやすく保ちます: ステージ上で約22px未満になるUIテキスト（ズームされていないスクリーンショット内の14pxラベル）は、スマートフォンでは読めません。その部分をズームするか、その部分（カード、アラート）を製品自身のスタイルで正確なテキストを使用して読みやすいサイズで再構築し、ドキュメントでどの部分を再構築したかを記載します。

効果的だったショットパターン:

パターン	方法
動作中の製品	フレームシーケンスを33〜40msごとに`<img>`に切り替え、フレームごとにボックス/ラベルを描画、結果行が発生した瞬間にサイドパネルにポップイン。
詳細にズーム	`.world`に詳細の`transform-origin`を設定、`.zoom`を追加（スケール1.5〜1.6、1.2秒イーズ）。
ユーザーがステップを実行	`await cursorTo(button)` 然后 `await click(button)`: カーソルが要素の計測された中心に滑らかに移動、波紋、ボタンが押され、結果が表示。 `typeText(el, text)`で入力（55ms/文字; 入力文字列は約1秒未満に保つ）。
フレームをステップ実行	前/次のボタンをリズムに合わせて押す、フレーム番号表示、決定的なフレームをマーク。
2つのビューが一致	2つの画像を並べて表示、両方で同じ瞬間をマーク、一致を示すバッジ。
証明	テーブル行がスライドイン（120ms間隔）、その後2〜3の統計カード。 `countUp(el, n)`でヒーロー数をカウントアップ（約700ms）。
データ出力	結果リストとファイル/統合パネルが同じビートで埋まる、「ライブ」インジケーター付き。
エンドカード	ラインスイープ、ロゴ、タグライン、CTAボタンポップ、URL。

カーソルは要素を指し、手動で入力した座標は決して使用しないでください: cursorTo(el)はカーソルが移動するときに要素を測定するため、ズーム、再レイアウト、または別のステージ形状によって空のスペースをクリックすることがありません。click(el)は、先端がel上にない場合にエラーをログ出力し、check.cjsはそれを失敗とみなします。要素ではない点にはcursorTo({x, y})のみを使用します。各クリックの瞬間にチェックスクリーンショットを撮ります。着地したクリックは、間違っているときに視聴者が気づく唯一のものです。

shot.jsのshow(el) / hide(el)で表示/非表示を切り替えます。.onは!importantを使用するため、その横に追加された非表示や移動のための他のクラスは黙って効果がなくなります。最初に必ず.onを解除します（それがhideの動作です）。カスタム終了の場合は、el.classList.replace('on', 'my-exit')を使用します。

タイムラインは手際よく保ちます: ビート間は0.3〜0.7秒、タイトルの読み取りは約1秒。各クリップは通常4〜8秒。ステップスルーショットは15秒になることもあります。これは、エディタがトリミングと速度調整を行うためです。

ソースに焼き付けられていて表示すべきでないもの（カメラの日付/時刻、ステータスバー、プライベートな名前）は、.worldを反対側の端からわずかにスケーリングしてクロップします（例: 下端からscale(1.08)）。backdrop-filterで隠すことは避けてください。スクリーンキャストではレンダリングされません。

4. 録画前に確認

node <skill>/scripts/check.cjs <pages-dir> <chk-dir> hook:400:1500:3200 live:800:3000:6000

start()から指定されたミリ秒後にスクリーンショットを撮影し（意図的にstart()を待たない。待つと終了状態しか表示されないため）、ページのエラーを出力します。スクリーンショットを確認します。特に以下を確認:

マークが正しいものに配置されているか（正しい人物にボックス、先行エッジに線、後続の足や傍観者ではない。検出トラックはシーケンス中に他の人に切り替わる可能性があるため、ボックスを結合または手動修正する）;
端で何も切れていないか、テキストが被写体と重なっていないか;
画面上のすべての数値がソースと一致しているか。

5. 録画

node <skill>/scripts/record.cjs <pages-dir> <clips-dir> hook=01-hook-anim=4200,setup=02-setup-anim=5000

page=outName=ms: msの間録画（アニメーションの長さ + 約1秒の保持終了）。各クリップはページのサイズ（--w×--h）、30 fps、H.264 CRF 16、無音で出力されます。check.cjsとroughcut.pyも同じサイズに従うため、縦または正方形のためにスクリプトを編集する必要はありません。Chrome（またはPlaywrightのChromium）とPlaywright（pw.cjsが見つけられない場合、npm i -g playwrightを一度実行）、ffmpegが必要です。

クリップは要求されたmsに約0.3秒を加えた長さで実行されます。最初のフレームはstart()の最初のビート前のページであるため、Inポイントは通常0.1〜0.3秒から始まります。コンタクトシートで読み取ります。

各クリップを視聴せずに確認:

bash <skill>/scripts/sheet.sh <clips-dir>/03-live-anim.mp4 sheet.jpg 2

コンタクトシートを読み取ります: 各ビートのタイミング、つぶれたり切れたりしていないこと、最後のフレームが完全であること。各クリップの有用部分のイン/アウト秒数をメモします。これらはカットテーブルに記載されます。

クリップにNN-name-anim.mp4という名前をストーリー順（代替は04b、04c）で付け、クリップフォルダに短いREADME.mdを作成してリストします。

6. スクリプトドキュメント

references/script-doc.mdに従います。カットテーブル（時間、クリップ、イン〜アウト、速度、表示内容、VO開始、ライン）が核心です。残りは、ユーザーがあなたなしで完了するために必要なものです。ナレーション: 約2.5語/秒、会話調、ショットごとに1行、CTAは声に出して言う（「無料でお試しください。リンクをクリックするか、example.comにアクセスしてください。」）。

ほとんどのソーシャル動画はミュートで視聴されます（ReelsやTikTokも含む）。常にカットテーブルに「画面表示」列を追加し、画面上のテキストがストーリーを単独で伝えるようにします。ナレーションがある場合（Reels、TikTok、Shorts）、エディタの手順で焼き込みキャプションも追加します。縦の安全ゾーンに配置し、タイトルがすでにあるショットにドロップします。

...[翻訳のため省略]

アニメーション動画広告