hyperframes-video-composition

HyperFrames 動画コンポジション

画像、クリップ、ナレーション、音楽、キャプション、UI キャプチャ、生成アセット、ブランド素材を組み合わせて完成した HyperFrames 動画を制作する場合は、このスキルを使用してください。HyperFrames は単なるコードの出力先ではなく、制作コンポジションの実行環境として扱います。素材の受け入れ、フレームとデザインの仕様策定、メディアの管理、タイミング調整、品質確認、出所の記録、納品までをエージェントが担います。

このスキルは特定のプロバイダーに依存しません。画像、動画、TTS、音楽モデルの選定は行いません。承認済みのアセットとクリエイティブ上の決定事項を、決定論的な HTML/CSS/JS/HyperFrames のコンポジションにする方法を説明します。

ソースの状況

以下の記載事実は、特に記載がない限り、2026-07-11 に検証した次のソースに基づいています。

• HyperFrames の公式ドキュメントとリポジトリ：はじめに、クイックスタート、プロンプトガイド、GitHub リポジトリ、および CLI、core、engine、producer 向けのローカル HyperFrames パッケージ README。
• ローカルの OpenMontage HyperFrames ブリッジ：C:\Users\ishan\Documents\OpenMontage\skills\core\hyperframes.md、tools\video\hyperframes_compose.py、lib\hyperframes_style_bridge.py。
• WCAG 2.2 クイックリファレンス：キャプション、音声解説、コントラスト、音声制御、点滅、非テキストコントラスト：W3C WCAG 2.2 クイックリファレンス。
• ブラウザーのメディア動作：MDN 自動再生ガイド、MDN <video>、MDN <audio>。
• 出所に関する用語：C2PA 技術仕様、C2PA の概要。

変わりやすい情報：HyperFrames CLI コマンド、パッケージ名、Node/FFmpeg の要件、レジストリのブロック名、クラウドレンダリングのサポート、ブラウザーのキャプチャ動作、各プラットフォームの納品仕様、ソーシャルプラットフォームのセーフエリアは変更される可能性があります。制作時には、インストール済みパッケージのドキュメント、npx hyperframes --help、npx hyperframes doctor、納品先プラットフォームのドキュメントを再確認してください。

制作上の方針

自身のメモやクライアントへの進捗報告では、次の3種類の情報を区別してください。

• ドキュメントで確認された事実：公式またはローカルのドキュメント、あるいは標準規格に記載された動作や要件。
• 実証的な観察結果：プレビュー、レンダリング、ffprobe、フレームのサンプリング、文字起こし、手動レビューによって、このプロジェクトで確認したこと。
• 制作上の経験則：出力の改善に役立つ実用的なルールであり、正式な要件ではないもの。

権利、ライセンス、プライバシー、肖像、クライアントのブランド承認、プラットフォームのポリシー、医療・法律・金融に関する主張、政治的説得、規制対象の広告、未検証の出所が関わる場合は、推測せずにエスカレーションしてください。法律上の助言は行わず、リスクを特定したうえで、クライアント、法律顧問、プラットフォーム、または権利者の承認を求めてください。

1. インテーク：構成の要件を固める

HTML を作成する前に、次の項目を含む簡潔な構成ブリーフを作成します。

• 目的：動画を通じて視聴者に理解してほしいこと、感じてほしいこと、または行動してほしいこと。
• 対象者と視聴状況：どこで、どのように視聴されるか。
• 納品物：アスペクト比、解像度、尺、fps、音声の有無、字幕の要件、透過オーバーレイの要件、必要なファイル形式。
• 実行環境：HyperFrames。HTML/CSS/JS による構成、シーク可能なブラウザーアニメーション、キネティックタイポグラフィ、UI モーション、生成メディアの組み立て、またはレジストリ／ブロック形式の構成が作品に適している理由を記します。
• 入力素材：承認済み素材、作成する生成素材、ブランド素材、台本、元映像、字幕、音声ステム、フォント、データ、参考資料、権利上の制約。
• レビューの段階：台本／ビートプラン、デザインフレーム、ラフプレビュー、音声／字幕の確認、最終レンダリング。
• 必須事項：ブランドルール、免責事項、アクセシビリティ目標、プラットフォームのルール、クライアントの承認、禁止されている表現。

依頼内容がまだ曖昧な場合は、結果を大きく左右する項目だけを確認します。尺、アスペクト比／プラットフォーム、ナレーション主導かテキスト主導か、ブランド／スタイルの参考資料、元素材の使用が承認済みかどうかです。

2. タイムラインの前にフレームを設計する

HyperFrames のコンポジションでは、ブラウザーフレームを動画としてキャプチャします。スクロールするページではなく、カメラで撮影する画面として設計します。

コーディングの前に、フレーム／デザイン仕様を作成します。

• キャンバス：幅、高さ、fps、アスペクト比、安全領域、塗り足しの方針。
• ビジュアルシステム：背景、前景、アクセントカラー、書体、文字サイズの段階、角丸、線幅、シャドウ、テクスチャ／粒子、モーションの強さ。
• レイアウトの文法：グリッド、マージン、タイトル領域、ローワーサード、字幕レール、ロゴ領域、製品／デバイス領域、チャート／データ領域。
• シーンの密度：画面上の最大語数、同時に表示する主張の最大数、読み取りに必要な最短表示時間、階層のルール。
• モーションの文法：登場、強調、トランジション、退出、カメラ／視差、該当する場合はモーション低減版。
• 音声の文法：ナレーションの役割、音楽の役割、効果音の抑制、無音の間、ステム名、クライアントが指定している場合は目標ラウドネスの方針。
• アクセシビリティ目標：音声の字幕、コントラスト目標、危険な点滅の回避、色だけで重要な情報を伝えないこと、必要に応じたトランスクリプトまたは代替説明。

プラットフォーム向けの納品物では、UI オーバーレイと字幕のための安全領域を確保します。プラットフォームの安全領域の寸法は変更される可能性があるものとして扱い、最終的なトリミングと納品の前に、対象プラットフォームの最新のクリエイター／広告仕様を再確認します。

3. シーン構成

作品を、時間で区切られたシーンとレイヤーとして計画します。シーンプランには、次の項目を含めると便利です。

• scene_id：変更されないケバブケースの識別子。
• start、duration、end：秒単位の値。fps に基づいて求めたフレーム値との整合性を確認します。
• purpose：フック、導入、根拠、デモ、トランジション、CTA、免責事項など。
• visual：何を表示するか、その理由。
• text：プレースホルダーではなく、画面に表示する正確な文言。
• media：素材 ID とその使用方法。
• audio：ナレーションのセグメント、音楽のキュー、効果音、無音、ステムのダッキング。
• animation：登場、強調、トランジション、退出、主要なビート。
• accessibility：字幕テキスト、コントラストのリスク、点滅のリスク、説明の必要性。
• qa：このシーンのプレビュー／レンダリングで確認する項目。

数の多い短いカットより、少数の印象的なシーンを優先します。SNS やローンチ向けの作品では、最初の 1～2 秒を本当のフックとして構成します。ブリーフで求められていない限り、冒頭をロゴ表示に使わないでください。

4. HyperFrames のオーサリング契約

HyperFrames について確認されている事実：

• HyperFrames では、動画を HTML として定義します。要素では data-start や data-duration などのタイミング属性を使用し、レイアウトやタイムラインの順序付けには data-track-index を使用できます。
• 現在のクイックスタートでは、タイミング付き要素に data-start、data-duration、data-track-index とともに class="clip" が必要とされています。インストール済みの CLI やプロジェクトのドキュメントに別の指示がない限り、タイミング付きの視覚要素にはこのクラスを付けてください。
• HyperFrames は、npx hyperframes preview によるブラウザーでのプレビューと、npx hyperframes render による MP4 へのレンダリングに対応しています。
• ローカルおよび公式ドキュメントでは、Node.js 22+ と FFmpeg が要件とされています。npx hyperframes doctor で確認してください。
• コアパッケージには、パーサー、ジェネレーター、タイミングのコンパイル、リンティング、ランタイムサポート、シーク可能なアニメーションランタイム向けのフレームアダプターが含まれています。
• エンジン／プロデューサーのレンダリング経路では、ヘッドレス Chrome と FFmpeg を使ってフレームをキャプチャし、動画をエンコードして、音声をミックスします。

オーサリングのルール：

• 明確な data-composition-id、明示的なキャンバスサイズ、決定論的な初期状態を備えた単一のルートコンポジションを使用してください。
• 固定サイズの動画キャンバス内では、絶対配置または厳密なグリッドを使用してください。ビューポートの既定値に依存してページフローが予期せず変化するのを避けてください。
• タイミング付きの視覚要素にはそれぞれ、安定した ID またはクラス、開始時刻、再生時間を指定してください。重ね合わせを行う場合は、トラックインデックスも指定してください。
• メディアはプロジェクトのワークスペース内に相対パスで配置してください。一時ファイル、変更される可能性のある外部 URL、別のランタイムの公開フォルダーは参照しないでください。
• ページ読み込み後、アニメーションのタイムラインを同期的に登録してください。制限のないタイマー、ネットワークの競合、ユーザー操作に依存しないでください。
• すべてのループに上限を設定してください。GSAP の無限リピート、壁時計の時間だけに依存するアニメーション、シードを保存しないランダム値、非同期のタイムライン構築は、決定論的なキャプチャを妨げます。
• 最終レンダリングの再現性が必要な場合は、外部スクリプトのバージョンを固定するか、ローカルに同梱してください。

ルート構成の例：

<main id="stage" data-composition-id="launch-hero" data-start="0" data-width="1920" data-height="1080">
  <section class="scene scene-01 clip" data-start="0" data-duration="5" data-track-index="0">
    <video class="bg clip" data-start="0" data-duration="5" data-track-index="0" src="./assets/hero-loop.mp4" muted playsinline></video>
    <h1 id="headline" class="clip" data-start="0.4" data-duration="3.8" data-track-index="2">Ship the impossible demo</h1>
    <p id="subline" class="clip" data-start="1.2" data-duration="3" data-track-index="2">A launch reel assembled from approved product captures.</p>
  </section>

  <audio data-start="0" data-duration="5" data-track-index="10" data-volume="0.45" src="./assets/music-bed.wav"></audio>

  <script src="./vendor/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#headline", { opacity: 0, y: 48, duration: 0.55, ease: "power3.out" }, 0.4);
    tl.from("#subline", { opacity: 0, y: 24, duration: 0.45, ease: "power2.out" }, 1.2);
    window.__timelines = window.__timelines || {};
    window.__timelines["launch-hero"] = tl;
  </script>
</main>

これは構成の一例であり、必須のテンプレートではありません。

5. メディアの取り込みと管理

コンポジションに取り込むすべてのアセットは、HTML から参照する前にアセットレコードを作成する必要があります。

アセットマニフェストの必須フィールド：

• asset_id：シーンプランや HTML のコメントまたはメタデータで使用する安定した ID。
• type：画像、動画、音声、音楽、ナレーション、効果音、フォント、データ、ロゴ、キャプション、LUT、トランスクリプトなど。
• source：ユーザー提供、生成、ライセンス済みストック、パブリックドメイン、ファーストパーティーによるキャプチャ、合成、派生のいずれか。
• path：ワークスペースからの相対パスとローカルの絶対パス。
• rights_status：承認済み、承認待ち、制限あり、不明、またはポリシーに基づき生成済みのいずれか。
• generation_metadata：生成した場合のプロバイダー／モデル／バージョン／プロンプト／シード／設定。
• transformations：トリミング、クロップ、リサイズ、色変換、ノイズ除去、アップスケーリング、トランスコード、ノーマライズ、背景除去。
• technical：幅、高さ、fps、再生時間、コーデック、サンプルレート、チャンネル数、アルファ、判明している場合は色空間。
• scene_links：使用されているシーン ID。
• provenance：親アセット、チェックサム、利用可能な場合は C2PA／コンテンツクレデンシャルのステータス、台帳の行。

制作時の実地確認：

• ステージングする前に、すべての動画／音声アセットに対して ffprobe または同等のツールを実行してください。
• 背景に全画面表示する動画については、CSS を疑う前に、ソースの有効解像度を確認してください。レターボックス付きの低解像度ソースを 1920x1080 のコンテナーにアップスケーリングしても、映像内に黒い余白が見える場合があります。
• ブラウザーでのキャプチャが停止またはフリーズする場合は、容量の大きいストック／ソースクリップを、レンダリングに適した H.264、固定 fps、短いキーフレーム間隔、faststart で再エンコードしてください。マニフェストには元ファイルと変換後ファイルの両方のパスを記録してください。
• 最終的な HTML では、リモートのメディア URL を避けてください。レンダリングや監査が外部サーバーに依存しないよう、ファイルをダウンロードするか、ローカルに固定してください。
• HyperFrames プロジェクトのルートからの相対パスを使用してください。

6. タイムライン、尺、アスペクト比、fps

時間を監査可能な契約として扱います。

• アニメーションを始める前に、マスター fps を決めます。ツールチェーンと納品要件でサポートされている場合に限り、24／30／60 を使用します。本番制作時に、プロデューサー／CLI の最新のサポート状況を確認してください。
• すべてのシーンの開始時刻と尺をフレーム境界に変換します：frame = round(seconds * fps)。小数を使う場合は、累積ドリフトに注意してください。
• シーンの開始、終了、音声セグメント、キャプションセグメント、トランジションのオーバーラップを含むタイムライン表を用意します。
• CSS のトランジションの尺がシーンの尺を意図せず超えないようにしてください。
• シーンがオーバーラップするトランジションを使う場合は、アニメーションコードに隠すのではなく、計画と HTML に明示してください。
• 複数のアスペクト比を使う場合は、レイアウト仕様を別々に作成します。ブリーフで明示的に許可されていない限り、16:9 から 9:16 への単純な中央クロップに頼らないでください。

安全な制作上の目安：対象プラットフォームの仕様でより広いセーフエリアが必要とされていない限り、重要なテキストやロゴのために、フレームの幅／高さの少なくとも 5～10% をアクションセーフマージンとして確保してください。縦型ソーシャル動画では、最新のプラットフォーム仕様を確認したうえで、キャプションやプラットフォーム UI のオーバーレイ用に余分なスペースを確保します。

7. アニメーションとトランジション

HyperFrames では、シーク可能でフレームごとに決定論的なアニメーションが効果を発揮します。

階層を明確にするためにアニメーションを使います。

• 登場：今、何が重要かを示します。
• 強調：アクティブなアイデア、数値、製品機能、または根拠に注目を促します。
• トランジション：次のビートへと視聴者を導きます。
• 退出：キャンバスをクリアし、視覚的な残骸を残さないようにします。

効果的な動きのパターン：

• キネティックタイポグラフィ：単語／行の表示、マスクワイプ、スケール／パースペクティブによるインパクト、タイミングを合わせた強調。
• 製品／UI の動き：カーソルの軌跡、フォーカスリング、デバイスのパン、段階的な情報開示、コールアウトライン。
• データの動き：最初に軸、次にマークの表示、その後に注釈、最後に要点。
• 雰囲気を演出する動き：粒子、光のスイープ、パララックス、または粒子表現を、強度を抑えて適用し、範囲を限定して邪魔にならないようにします。

避けるべきこと：

• 保存されたシードを使わないランダムな動き。
• 点滅に関するレビューを行わないフラッシュカット、ストロボ、高コントラストの反転。
• 読ませる必要がある間にテキストを判読不能にする動き。
• 無限ループや、壁時計の時間だけに依存するタイムライン。
• ナレーションやキャプションと競合する装飾的なアニメーション。

トランジションは、意味に合った種類を選びます。

• ハードカット：緊迫感、コメディ、リストのテンポ。
• マッチカット：同じオブジェクト、形、UI 要素、またはフレーズをシーン間でつなぎます。
• ワイプ／マスク：製品やデータの表示、ページ間の移動。
• クロスフェード：回想、柔らかさ、振り返り。
• 白／黒のフラッシュ：フラッシュセーフで、物語上の必然性がある場合に限ります。

8. タイポグラフィ、レイアウト、キャプション

HyperFrames では、テキストが主なビジュアル要素となることがよくあります。

タイポグラフィのルール：

• ロゴや指定されたブランドアートワークを除き、ラスタライズされたテキストよりライブテキストを優先します。
• 最大行長を設定し、意図的に改行します。ヒーロー部分の行をブラウザーの折り返し任せにしないでください。
• タイトル、主張、根拠、キャプション、ラベル、免責事項など、明確な階層を設けます。
• キャプションはマーケティングコピーと視覚的に区別します。
• 重要なテキストを画面の極端な端に配置しないでください。
• クリーンなデザインフレームだけでなく、実際の背景フレーム上であらゆるテキストの状態をテストします。

WCAG 2.2 のアクセシビリティと読みやすさに関する事実：

• 音声付きの事前収録された同期メディアには、テキストのメディア代替物であることが明確な場合を除き、キャプションが必要です。
• WCAG AA における通常テキストの最低コントラスト比は 4.5:1、大きなテキストのしきい値は 3:1 です。
• 非テキストの視覚情報と UI コンポーネントの境界には十分なコントラストが必要です。該当する場合は、WCAG AA の基準値として少なくとも 3:1 を使用します。
• 一般的なフラッシュおよび赤色フラッシュのしきい値を下回る場合を除き、コンテンツを 1 秒間に 3 回を超えて点滅させてはいけません。制作における最も安全なルールは、1 秒間に 3 回を超える点滅を避けることです。

キャプション制作：

• 配信方法に応じて、オープンキャプション、クローズドキャプションのサイドカーファイル、またはその両方を選択します。ソーシャルフィードでは焼き込み／オープンキャプションの方が安全です。サイドカーファイルは、アクセシブルなプレーヤーやローカライズに適しています。
• 音声に意味を伝える役割がある場合、キャプションには台詞と重要な非音声を含める必要があります。
• キャプションは発話と同期させ、読みやすくし、プラットフォームのオーバーレイに重ならないようにします。
• ワード単位のキャプションを使用する場合は、文字起こしのタイムスタンプを信頼するだけでなく、レンダリング後に実際に視聴してタイミングを確認します。
• キャプションを動画に焼き込む場合でも、正規の文字起こし／字幕ファイルをアセット台帳に保管します。

9. オーディオ、ステム、同期

オーディオは、正体不明の 1 つのファイルではなく、ステムとして構成します。

• ナレーション／台詞のステム。
• 音楽のステム。
• 効果音のステム。
• 使用する場合は環境音のステム。
• 最終ミックス。

各ステムについて、ソース、権利、長さ、測定した場合はラウドネス／ノーマライズ値、サンプルレート、シーンとの対応を記録します。ナレーションを生成する場合は、スクリプトのテキスト、音声／プロバイダー／モデル／バージョン／設定、承認状況を保存します。

ブラウザー／メディアに関する事実：

• HTML の <audio> は音声コンテンツを埋め込みます。HTML の <video> は動画再生用のメディアプレーヤーを埋め込みます。
• ブラウザーの自動再生ルールにより、音声付きの自動再生は制限されています。ミュートされた動画や音声トラックのない動画は、音声付きの自動再生とは異なる扱いになります。HyperFrames のレンダリングツールはキャプチャ用にメディアを制御しますが、構成では背景動画に muted や playsinline などの適切なブラウザーメディア属性を使用してください。

制作上のヒューリスティック：

• まず音声をミックスします。作品が意図的に音楽主導でない限り、音楽はナレーションを支え、かき消さないようにします。
• ナレーション中は音楽をダッキングし、映像のみの場面では音量を戻します。
• クリック、出現、トランジション、衝撃、通知など、意味のある出来事に効果音を控えめに使用します。
• 最終的な音声の長さが動画の長さと一致し、各ステムが意図したシーンより前後にずれて始まらないことを確認します。
• レンダリング後、承認済みのスクリプトおよびキャプションファイルと照らし合わせてナレーションを書き起こすか、抜き取り確認します。

10. 決定論的なプレビュー、検証、レンダリング

HyperFrames のループをゲートシーケンスとして実行します。

1. ブラウザー作業を開始する前に、明示的なタイミング属性を依存関係なしでローカルチェックする必要がある場合は、同梱の静的プリフライトを実行します：python scripts/audit_timeline.py index.html --duration 30 --fps 30。
2. 起動時、またはレンダリングの動作が変わったときに、環境を確認するため npx hyperframes doctor を実行します。
3. HyperFrames 固有の静的コンポジションに関する指摘を確認するため、npx hyperframes lint を実行します。
4. インストール済みの CLI またはプロジェクトのワークフローで利用できる場合は、npx hyperframes validate を実行します。ブラウザーの状態に関する問題を、レンダリングだけに頼って確認しないでください。
5. npx hyperframes preview を実行し、代表的なフレームをスクラブして確認します：最初のフレーム、シーンの境界、テキストが密集する箇所、データ／チャートの場面、キャプションが多い場面、背景動画のシーン、CTA／免責事項、最後のフレーム。
6. lint／検証とプレビューのチェックに合格するか、文書化された例外が承認された後にのみレンダリングします。
7. レンダリング後のプローブ：長さ、解像度、fps、コーデック／コンテナ、音声ストリーム、フレームサンプル、黒い／フリーズしたフレーム、テキストの切れ、キャプションの同期、音声ミックス。

同梱の静的タイムラインプリフライト

このパッケージには、ローカルの HyperFrames コンポジション HTML をプリフライトするための、Python 3.11 以降の標準ライブラリのみを使う CLI scripts/audit_timeline.py が含まれています。HTML は html.parser で解析します。JavaScript の実行、ブラウザーの操作、リモートアセットの取得、CSS レイアウトの評価、アニメーションタイムラインの検査、メディアのデコード、レンダリングの正しさの証明は行いません。

HyperFrames の lint／validate／preview の前に、タイミング属性を持つ要素の安定した JSON インベントリと、決定論的な静的チェック結果が必要な場合に実行します。対象は次のとおりです。

• 有限の非負数値である data-start 値。
• タイミング付きクリップ／メディアに設定された、有限の正数値である data-duration 値。
• タイミング付きクリップ／メディアでトラックが必要な場合の、整数かつ非負の data-track-index 値。
• タイミング付きの視覚要素に設定された class="clip"。ただし、data-composition-id を持つコンポジションルートにはルートメタデータを設定できます。
• HTML ID の重複。
• オプションの --duration を超えるタイミング付き要素の終了位置。
• --fps を明示した場合のフレーム境界との整列。許容誤差は --tolerance で設定できます。

このコマンドは、status、summary、inventory、findings を含む、ソート済みの JSON を出力します。指摘には、安定した severity、code、element、location、message フィールドが含まれます。終了コードは、エラーがない場合は 0、重大度が error の静的指摘がある場合、または --warnings-as-errors により警告がエラー扱いになった場合は 2、入力ファイルが見つからない／読み取れない場合など、解析または操作に失敗した場合は 3 です。プロジェクトでフレーム単位の正確なタイミングが必須とされていない限り、警告は本番レビューの対象として扱ってください。

このプリフライトは、あくまで初期段階のガードレールです。npx hyperframes lint、npx hyperframes validate、ブラウザープレビュー／スクラブ、レンダリング、レンダリング後のメディアプローブ、人による QA の代わりにはなりません。HyperFrames には、この静的プリフライトでは意図的に扱っていない、ランタイム固有のルールが追加される場合もあります。

インストール済みの CLI でこれらのコマンド名が異なる場合は、npx hyperframes --help を再確認し、相当するコマンドを使用してください。レンダリングレポートには、正確なコマンド、パッケージのバージョン、環境を記録します。

動画の多いコンポジションでは、ヘッドレス Chrome またはメディアのデコードが停止する場合、並列処理数／ワーカー数を減らしてください。これは経験に基づく対処として扱い、何が失敗したか、何を変更したか、変更前後の結果を記録します。

11. ブラウザー／レンダリングの QA チェックリスト

最終納品前に、以下を確認します。

• タイムライン：合計尺、シーンの境界、トランジションの重なり、予期しない空白フレームがないこと。
• キャンバス：正しいアスペクト比、解像度、fps、ピクセルセーフなテキスト、予想外のクロップがないこと。
• メディア：すべての素材が意図した品質で表示されること、ファイルの欠落がないこと、リモート依存がないこと、意図しないレターボックスがないこと、フリーズフレームがないこと。
• タイポグラフィ：実際の背景上で読みやすいこと、正しいフォントフォールバック、行末に孤立した単語がないこと、ディセンダーが切れていないこと、免責事項が読めること。
• キャプション：正確で、同期しており、完全で、安全領域に収まり、他のテキストと競合していないこと。
• オーディオ：音声がクリップしていないこと、ステムが欠落していないこと、音楽がダッキングされていること、SFX が注意をそらさないこと、最終尺が映像と一致していること。
• アクセシビリティ：コントラストに問題がないか、例外が記録されていること、点滅に問題がないこと、色だけで意味を伝えていないこと、必要に応じてトランスクリプト／キャプションが含まれていること。
• プロベナンス：マニフェストが完全であること、生成された素材にラベルが付いていること、ユーザー提供素材が承認済みであること、ソース／変換のチェーンが保持されていること。
• 納品：正しいファイル名、形式、コーデック、アスペクト比、サムネイル／ポスターフレーム、サイドカー、引き継ぎメモが揃っていること。

指摘事項を分類します。

• 重大：権利／同意が不明；安全でない点滅；必要なキャプションの欠落；承認のないランタイムでの差し替え；承認済み仕様と異なるレンダリング；メディアの破損／欠落；必須テキストが読めない；虚偽または未承認の主張。
• 大：キャプションのタイミングずれ；コントラスト不足；オーディオミックスが音声を覆い隠す；レイアウト／クロップの問題が見える；非対応のプラットフォーム形式；プロベナンス項目が不完全。
• 小：イージングのわずかな調整不足、軽微なテクスチャ、必須ではないフレームの見栄え。

重大な指摘事項がある状態では納品しないでください。大きな指摘事項がある場合は、クライアントがトレードオフを明示的に受け入れた場合に限り納品します。

12. プロベナンス台帳とコンテンツクレデンシャル

C2PA は、アサーション、クレーム、署名、素材をアセットに結び付けることができるプロベナンスデータとして、Content Credentials／C2PA マニフェストを定義しています。すべてのワークフローやプラットフォームで埋め込みクレデンシャルが保持されるとは限らないため、以下の両方を維持します。

• 機械可読／人間可読なプロジェクトのプロベナンス台帳。
• ツールチェーンが対応し、クライアントが希望する場合は、埋め込みまたはサイドカー形式の C2PA／コンテンツクレデンシャルデータ。

台帳に含める最低限の項目：

• 最終レンダリング ID とチェックサム。
• 素材アセット ID、ソース、権利ステータス、チェックサム。
• AI 生成アセットの生成メタデータ。
• 変換手順と使用ツール。
• 承認と日付。
• C2PA／コンテンツクレデンシャルのステータス：あり、検証済み、なし、変換によって削除、非対応、または未確認。

ソースアセットがプロベナンスを主張していても、検証に失敗した場合は、認証済みであるかのように黙って扱わないでください。検証失敗を明記し、その主張が信頼性、ニュース価値、コンプライアンス、またはクライアントの承認に影響する場合は、エスカレーションしてください。

13. 納品時の引き継ぎ

MP4 だけではなく、納品パケットを提供します。

• 最終レンダリングのパス（複数可）、チェックサム、尺、解像度、fps、コーデック／コンテナー、オーディオ形式。
• 必要に応じてキャプション／字幕／トランスクリプトのサイドカー。
• 要望があればサムネイル／ポスターフレーム。
• アセットマニフェストとプロベナンス台帳。
• コマンド、HyperFrames／パッケージのバージョン、環境、警告、QA ステータスを記載したレンダリングレポート。
• 既知の制限、承認済みの例外、残存リスク。
• 再レンダリング手順：正確なソースワークスペース、コマンドの実行順、パッケージ／バージョンに関する注意事項、必要なローカルアセット。

プラットフォームにアップロードする場合は、エクスポートの直前に、現在の対象仕様を再確認します。アスペクト比、最大尺、ファイルサイズ、コーデック、オーディオ要件、キャプションのサイドカー、安全領域、開示ラベル、広告ポリシーを確認してください。これらは変わりやすい情報として扱ってください。

14. 例：ナレーション付き製品ローンチリール

作成例：承認済みの製品画面キャプチャ、生成した抽象的な背景、ナレーション、音楽、オープンキャプションを使って、30秒の16:9ローンチリールを作成します。

手順：

1. 受け付け時に、1920x1080、30 fps、30秒、MP4、オープンキャプション、承認済みの製品スクリーンショット、ブランドカラー、未承認の顧客ロゴを使用しないことを確定します。
2. フレーム仕様では、右側に製品／デバイス領域、左側に動きのある見出し領域、下部にキャプション用レール、プラットフォームのオーバーレイと重ならないCTA領域を定義します。
3. シーン構成：
   • 0-3秒：抽象的なモーション背景とともにフック／タイトルを表示します。
   • 3-10秒：1つのUIキャプチャとコールアウトで製品の課題を示します。
   • 10-18秒：3つのテンポの速いUI演出で機能を実証します。
   • 18-25秒：承認されている場合は、成果／顧客に配慮した指標を示します。
   • 25-30秒：CTAとロゴを表示します。
4. アセットマニフェストには、スクリーンショット、生成した背景ループ、ナレーション音声、音楽音声、キャプションファイル、フォントファイル、チェックサム、承認情報を保存します。
5. HTMLでは、時間指定セクション、相対アセットパス、範囲を限定したGSAPタイムライン、ミュートされたplaysinline背景動画、個別のキャプション要素を使用します。
6. QAゲートではdoctor/lint/validate/preview/render/probeを実行し、特にUIの視認性、キャプション用レール、顧客ロゴの混入がないこと、安全でない点滅がないことを確認します。

想定される失敗と対処法：

• キャプションと見出しの文言がぶつかる：見出しの密度を下げるか、キャプションを固定レールに移動します。
• 背景動画によってテキストのコントラストが不十分になる：全体を暗くするのではなく、テキストの背後に局所的なスクリーンを追加します。
• 製品スクリーンショットが小さすぎる：同時に表示するUIパネルを減らし、アニメーション付きのズームやコールアウトを使用します。
• ナレーションと映像がずれる：音声を引き伸ばすのではなく、承認済みのナレーション音声に合わせてシーンの開始時刻を調整します。

15. 例：音楽主体のキネティックタイポグラフィの短い演出

作成例：ナレーションなしで、承認済みの音楽のアクセントに同期する、8秒の正方形または縦型ソーシャル向け短編動画を作成します。

手順：

1. 音楽音声を分析してビートのアクセントを見つけるか、ビートの時刻を手動で記録します。
2. 大きな文字、1つのアクセントカラー、十分なネガティブスペースを使い、小さな文字を避けたシンプルなフレーム仕様を作成します。
3. タイムラインをスクリプトとして使用します。テキストの表示をそれぞれビートに合わせ、トランジションは短く、範囲を限定します。
4. ボーカルや意味のある話し言葉がある場合に限りキャプションを使用します。それ以外の場合は、配信先で必要とされる場合に備え、アクセシビリティ用の短いタイトル／説明をサイドカーファイルに含めます。
5. ビートに同期したカットが誤って安全な点滅の閾値を超えることがあるため、点滅チェックを実行します。

想定される失敗と対処法：

• 8秒に対して語数が多すぎる：各ビートで読み取れる量まで文言を削ります。
• 派手な反転が安全でない：全画面をすばやく点滅させるのではなく、動き、スケール、マスク、色の保持を使用します。
• 書き出し時のクロップで文字が崩れる：クロップで対応するのではなく、正方形用と縦型用をそれぞれ別にデザインします。

16. 例：生成メディアを使った解説動画の組み立て

作成例：AI生成の静止画／動画クリップ、ナレーション、キャプション、図表、音楽を組み合わせて、60秒の解説動画を作成します。

手順：

1. 生成アセットは素材として扱い、完全なプロンプト、モデル／バージョン／設定、可能な場合はシード、承認情報を記録します。
2. アセットではなく、主張を軸にシーンを構成します。各シーンには、伝えるべき要点と、中心となるビジュアルのアイデアが1つ必要です。
3. 編集レイヤーにはHyperFramesを使用します。アニメーション付きタイトル、図表のラベル、コールアウト、キャプション、トランジション、音声ミックス、最終QAを含めます。
4. キャプションを動画に焼き込む場合でも、トランスクリプトとキャプションファイルを用意します。
5. 事実に関する主張、実在の人物／出来事の合成描写、医療／法律／金融に関する主張、著作権で保護されたビジュアル／参照素材から派生したビジュアルには、承認が必要であることを明示します。

想定される失敗と対処法：

• アセット間でスタイルにばらつきがある：CSSによる処理、カラーオーバーレイ、一貫したクロップ、控えめなトランジションで統一します。元の素材が使えない場合にのみ再生成します。
• 生成クリップのfps／解像度にばらつきがある：ステージング前に、共通のレンダリングプロファイルに合わせてトランスコードします。
• 来歴情報が不完全である：不足しているモデル／ソース／権利に関する項目を解決するか、明示的に承認するまで、最終納品を保留します。