Talking-Head B-Roll：話した内容からモーショングラフィックを描く

トーキングヘッド用Bロール

ユーザーの録画は既に完成しています。言葉と伝え方は最終版です。トーキングヘッドだけでは見ていて退屈なので、映像の仕事は、発話の各セクションごとに、何を映すかを決めることです。音声は決して止まらず、変化するのは映像だけです。

録画は決してカット、移動、トリミング、スケーリングされません。あなたが制作するものはすべて、その上に描画されるレイヤーです。スピーカーを表示する部分は透明に、グラフィックで覆う部分は不透明になります。scripts/render.mjs はそのレイヤーを録画の上に重ね、音声を保持します。

一気に作成してください。録画や適切なデフォルト値が答えられる質問はせず、選択した内容を納品時にリスト化してください。録画ファイルがあるフォルダで作業し、スクリプトはそこから実行します。出力も同じフォルダに作成されます。以下で、<skill> はこのスキルのフォルダ（このファイルがあるフォルダ）を指します。

1. 文字起こし

node <skill>/scripts/transcribe.mjs talk.mp4            # → transcript.json、各行の開始時刻と終了時刻を表示

このスクリプトは、動画のサイズ、フレームレート、長さ（これらはページに使用します）と、文の終わりで区切られた文字起こしを表示し、transcript.json にすべての単語のタイムスタンプを記録します。何かを決定する前に、文字起こし全体を読んでください。ローカルに whisper.cpp がインストールされている場合はそれを使用し、そうでない場合は ELEVENLABS_API_KEY を使用します。どちらもない場合は、設定方法が表示されます。ポーズはオーディオ自体から取得されるため、文と文の間のギャップはスピーカーが実際に停止している場所であり、文内の時間は数分の一秒の精度です。文字起こしが数字を聞き間違える可能性があります。もし、その数字が話されている内容と整合しない場合は、画面に表示せず、納品時にその旨を伝えてください。

2. 計画：3つの処理方法

A. スピーカー。動画のみで、その上に何も重ねません。人物が中心となる場面で使用します。冒頭の一言、個人的な意見やストーリー、感情的なビート、行動喚起、締めの言葉など。

B. オーバーレイ。動画は表示したまま、その上に透明なモーションレイヤーを重ねます。キーワードや短いフレーズ、カウントアップする数字、アイコン、矢印、ロゴ、アイテムが一つずつ追加される短いリストなど。発言に具体的なものが一つあり、スピーカーを見る価値もある場合に使用します。オーバーレイは端や上部3分の1、下部3分の1に配置し、スピーカーの顔にかからないようにします。一度に画面に表示するアイデアは一つだけ。発言が次に移る時に消えます。

C. カバー。不透明な全画面モーションシーンでスピーカーを隠し、音声はそのまま流します。顔で語るよりも映像で示した方が良い発言に使用します。数字と比較、プロセスや一連の手順、仕組みの説明、製品やインターフェース、3つ以上の要素があるものなど。モーションは発言を説明するものであり、装飾であってはなりません。

文字起こしを文または節の末尾で分割します。各行にA、B、Cのいずれかを割り当て、理由を一文で説明し、BまたはCで何を表示するかを述べます。次にリズムを確認します。

• オープニングはAで、視聴者が人物と対面できるようにします。クロージングもAで。
• Aが約8秒以上続かないようにします。BまたはCで区切ります。
• Cのセクションは約3〜8秒に抑えます。Cのセクションの間にはスピーカーに戻り、映像がナレーション付きスライドショーにならないようにします。
• 処理方法の変更は行の境界でのみ行い、単語の途中では決して行いません。オーバーレイの出現タイミングは、それが説明する単語に合わせます。
• すべての行で変更するよりも、処理方法は少なく、明確にすることを優先します。

完全な焼き付けキャプションはこのスキルの対象外です。ユーザーから依頼があった場合のみ追加してください。Bオーバーレイのテキストは、話されている文ではなく、いくつかのキーワードです。

画面上のテキストは、スピーカーが実際に話した単語、または文字起こしやユーザーの資料からの数字や名前を使用します。数値、主張、引用をでっち上げないでください。

3. ページを構築する

<skill>/templates/b-roll.html を録画ファイルの隣に page.html としてコピーし、以下を設定します。

• VIDEO、W × H（動画の形状。1920 × 1080、または縦向きの場合は1080 × 1920。4Kファイルでも1920 × 1080のページを維持できます）、FPS、DURATION を、transcribe.mjs が出力した値に設定します。
• FACE：スピーカーの頭の位置（髪を含み、周りに少し余裕を持たせる）を、フレームに対する割合で指定します。node <skill>/scripts/render.mjs page.html face --stills 2s,20s --face を実行すると、録画と共にボックスが表示されます。すべての静止画で頭がボックス内に収まるまで調整します。
• SCENES：BまたはCのセクションごとに1エントリ。{ from, to, kind: 'overlay' | 'cover', draw } の形式で、時刻は transcript.json の単語タイムスタンプから取得します。SCENESに含まれないすべての部分がAになります。2つのシーンが連続しても構いません（一方の to が次の from と等しい場合）。スピーカーがわずかに見えると、ちらつきのように見えます。
• 各シーンに1つの draw(t, s) 関数。その発言の内容に合わせて記述します。テンプレートには2つの例（キーワードカードとカウントアップする数字）がありますが、これは構造を示すものであり、見た目を決めるものではありません。s.in と s.out は開始と終了のタイミング、s.now は動画内の時刻で、表示する単語に合わせて出現タイミングを調整するために使用します。

サーフェスはデフォルトでLIGHT（明るい）に設定します。暗くするのは、(a) ユーザーやブランドから明示的に依頼された場合、または (b) 主題が本質的に暗いサーフェス上にある場合（ターミナル/コード、夜空、映画館など）のみです。ネオンオン�ブラックは、あらゆるAI動画の決まりきったデフォルトです。依頼なしにそれを選択するのはデザインの失敗です。

フォント：使用するウェイトごとに1つのGoogle Fonts <link> を追加し、描画するすべてのフォントを FONTS にリストします。これにより、フォールバックフォントでレンダリングされるのを防ぎます（レンダリングにはフォントを読み込むためのネットワークアクセスが必要です）。

4. チェックする

node <skill>/scripts/render.mjs page.html --check                 # 計画を文字起こしとピクセルに対してチェック
node <skill>/scripts/render.mjs page.html film.jpg --sheet 1      # 動画全体を1秒1フレームで、録画の上に重ねて表示
node <skill>/scripts/render.mjs page.html shot --stills 12s,20s   # フルフレーム。テキストとスペーシングを確認するため

--check は合格しなければなりません。すべてのカバーがスピーカーを完全に隠していること、オーバーレイが FACE 領域に侵入していないこと、すべてのシーンが単語と単語の間で開始・終了していること、シーン外に何も描画されていないこと、テキストがフレームからはみ出したり他のテキストに重なっていないこと。テキストがフレーム端から3%以内にある場合、一部のプレーヤーでトリミングされる可能性があるため警告を出します。また、各セクションで何が話されているかのタイムラインを表示し、リズムに関する警告を出します（スピーカーのみが長時間続く、カバーが3秒未満または8秒超、カバーが連続する、オープニングまたはクロージングがスピーカーではないなど）。ただし、理由がある場合は警告を許容できるので、その理由を述べてください。

グラフィックがそのセクションの発言内容と一致しているか、テキストが判読可能か、カードやチャートの線からはみ出していないかは、このチェックでは判断できません。シートを見て流れを確認し、各シーンの静止画を見てテキストを確認してください。修正して、問題がなくなるまで再度確認します。

5. レンダリングと納品

node <skill>/scripts/render.mjs page.html film.mp4        # 完成した動画：録画、その上にBロール、元の音声
node <skill>/scripts/render.mjs page.html b-roll.mov      # Bロールのみ、アルファチャンネル付き：Premiere Pro、Resolve、Final Cut用のProRes 4444
node <skill>/scripts/render.mjs page.html b-roll.webm     # 同様にアルファ付きVP9：小型で、ブラウザやOBS用

film.mp4、ページ（ブラウザで開くと音声付きで動画を再生し、シーンをスクラブできます）、および計画を短い表（時刻、発言内容、処理方法、画面に表示されるもの）として納品します。ユーザーがPremiere Pro、DaVinci Resolve、Final Cutで編集する場合は、アルファレイヤーも提供します（.mov ファイル。ProResは大きく、1080pで約5 MB/秒です）。これは録画の上のトラックに、0から配置します。依頼されていないが選択した内容があれば、それも説明します。

必要なもの：Node 18+、作業フォルダまたはその上位フォルダ（またはスキル自身のフォルダまたはその上位）に npm i playwright-core、ffmpeg、Chrome（または npx playwright install chromium）、文字起こし用のwhisper.cppまたはElevenLabsキー。