remotion-video-composition

Remotion による動画コンポジション制作

Remotion を実際に納品する動画のコンポジションレイヤーとして使う場合に、このスキルを使用してください。対象には、生成メディアを使った解説動画、製品動画、SNS 向けバリエーション、データ連動型動画、画面デモの合成、字幕付きのトーク動画の再編集、React コード、アセット、字幕、音声、納品メタデータを再現可能な動画パッケージにまとめるあらゆるレンダリングが含まれます。

これは制作向けのスキルであり、単なるコーディング手順ではありません。Remotion は、別の場所で生成されることもあるメディアを組み立て、仕上げるための決定論的なエンジンとして扱ってください。

情報の確認状況と変動性

以下の情報は、特に記載がない限り、2026-07-11 に一次資料で確認したものです。

• コンポジションのプロパティ、アセット、静的ファイル、メディアコンポーネント、レンダラー API、スキーマ、動的メタデータ、乱数、パフォーマンス、字幕、ライセンスに関する Remotion のドキュメント：https://www.remotion.dev/docs/
• ストリームのマッピング、コーデック、フィルター、フィルターグラフに関する FFmpeg の公式ドキュメント：https://ffmpeg.org/ffmpeg.html および https://ffmpeg.org/ffmpeg-filters.html
• 字幕と点滅に関する W3C/WAI の WCAG ガイダンス：https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html および https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html
• 時間指定テキストキューに関する W3C WebVTT 仕様：https://www.w3.org/TR/webvtt1/
• 出所情報マニフェストに関する C2PA 仕様と Content Credentials ガイダンス：https://spec.c2pa.org/ および https://c2pa.org/

変動する情報：Remotion パッケージのバージョン、API の利用可否、ライセンスと料金、クラウドレンダリングの制限、ブラウザーレンダラーの状況、パッケージの非推奨化、SNS プラットフォームの納品仕様、字幕ファイルの要件、AI やプロバイダーの利用権。制作時にこれらを再確認し、プロジェクトの引き継ぎ資料に確認日を記録してください。

制作方針

動画をタイムライン上の決定論的な React として表現できる場合、Remotion は特に力を発揮します。

• ブランドに合わせたモーショングラフィックス
• 生成画像や生成クリップの組み立て
• チャート、統計、データを使った動画
• ナレーション付きの字幕動画
• バリエーションの一括生成
• プログラムによる製品紹介や画面デモのレイアウト
• フレーム単位で確認できるレビュー用書き出し

クリエイティブ上の判断が欠けている部分を補うために、Remotion を使わないでください。コードを書く前に、ブリーフ、ビジュアルシステム、アセット一覧、字幕の方針、音声プラン、目標アスペクト比、尺、納品要件を確定してください。

推測せず、必要に応じてエスカレーションしてください。

• エンコード、字幕、ライセンスが対象プラットフォームや法的な利用権によって決まる場合。
• クライアントから C2PA 署名、EIDR/ISAN/放送用メタデータ、組合所属の出演者に関する制約、音楽の権利処理、規制対象の主張が求められる場合。
• 素材に第三者の知的財産、肖像、商標、非公開データが含まれる可能性がある場合、またはモデル出力のライセンス条件が不明確な場合。
• 自動生成された字幕や翻訳が、安全、法務、医療、金融、または一般公開される主張に影響する場合。
• 点滅、光過敏のリスク、未成年者、政治的説得、合成された肖像、アクセシビリティに関する義務が重大な場合。

受け入れ要件

構成作業を始める前に、以下を収集するか、明確にしてください。

1. 成果物：最終的なランタイム、アスペクト比、解像度、フレームレート、音声チャンネル、コンテナ／コーデック、プラットフォーム、言語、焼き込み字幕が必要かどうか。
2. 対象者と目的：視聴環境、ブランドのトーン、行動喚起、アクセシビリティのニーズ、レビューのプロセス。
3. タイムライン：開始時刻と終了時刻を秒数およびフレーム数で指定した、正確なシーンまたはビート。
4. メディア一覧：すべての画像、動画、音声ステム、フォント、ロゴ、字幕ファイル、データファイル、元のトランスクリプト。
5. 権利と来歴：出所、所有者、ライセンス／許可、制限事項、モデル／プロバイダー、プロンプト、シード、生成日、変更履歴、Content Credentials が必要かどうか。
6. 品質基準：参照するルック、動きの強さ、文字の密度、セーフエリア、色／コントラストの制約、指定がある場合はラウドネスの目標値、バリエーションのルール。
7. 承認段階：最終レンダリングの前にユーザー／クライアントが承認する必要のあるもの。

ユーザーから「動画を作って」といった漠然とした依頼しかない場合は、まず簡潔な提案を提示し、結果に大きく影響する未決定事項を確認してください。構成要件が整うまでは、アセットを大量に必要とする実装を始めないでください。

プロジェクトのアーキテクチャ

制作要件がコードに反映されるように、コンポジションプロジェクトを作成します。

推奨する構成：

project/
+- package.json
+- remotion.config.ts
+- public/
|  +- assets/
|  |  +- image/
|  |  +- video/
|  |  +- audio/
|  |  +- fonts/
|  |  +- captions/
|  +- provenance/
+- src/
|  +- Root.tsx
|  +- compositions/
|  +- scenes/
|  +- components/
|  +- data/
|  +- styles/
|  +- utils/
+- review/
+- renders/
+- handoff/

クリエイティブデータとレンダリングの仕組みは分けてください。

• src/Root.tsx でコンポジションを登録します。
• src/data/*.json または型付きモジュールで、シーン、バリエーション、字幕、アセット参照を定義します。
• src/scenes/* で、データに基づいて個々のシーンをレンダリングします。
• src/components/* には、シーン固有の判断ではなく、再利用可能なレイアウトのプリミティブを配置します。
• public/assets/* には、staticFile() で使用する確定済みメディアを格納します。
• handoff/ には、最終出力、字幕のサイドカーファイル、ステム、来歴台帳、レンダリングメモを格納します。

すべてのアセット、シーン、字幕トラック、バリエーションに安定した識別子を使用してください。これらの ID はコードのリファクタリング後も維持し、ファイル名、レビューメモ、来歴記録に使用してください。

コンポジションの登録とタイミングモデル

Remotion では、コンポジションはレンダリング可能な動画であり、durationInFrames、fps、width、height などのプロパティを指定して登録します。これらの値は明示し、コンポーネント内に散在させず、制作要件から導出してください。

以下を使用します。

• <Composition> でレンダリング可能な動画を登録します。
• <Sequence> または <Series> でタイムライン上にシーンを配置します。
• useCurrentFrame() でフレームを基準にしたアニメーションを作成します。
• useVideoConfig() で fps、durationInFrames、width、height を取得します。
• 入力データから期間、寸法、fps、コーデック、props を計算する必要がある場合は、calculateMetadata() を使用します。

フレーム計算：

export const secondsToFrames = (seconds: number, fps: number) =>
  Math.round(seconds * fps);

すべての箇所で同じヘルパーを使用してください。23.976 や 29.97 などの正確な放送用フレームレートでは、小数の秒数を繰り返し変換するのではなく、編集決定リストから整数のフレーム数としてタイミングを表現するかどうかを決めてください。

シーンが連続する場合は、フレームの長さを累積して from の値を計算し、ハードコードしないでください。ハードコードしたフレームオフセットを使用できるのは、レビュー後の小規模な単発コンポジションに限ります。

例：

import {Composition, Series} from 'remotion';
import {z} from 'zod';
import {MainVideo} from './compositions/MainVideo';
import {projectSchema, defaultProject} from './data/project';

export const RemotionRoot = () => (
  <Composition
    id="MainVideo"
    component={MainVideo}
    fps={30}
    width={1920}
    height={1080}
    durationInFrames={defaultProject.totalFrames}
    defaultProps={defaultProject}
    schema={projectSchema}
    calculateMetadata={({props}) => ({
      durationInFrames: props.scenes.reduce((sum, s) => sum + s.frames, 0),
      props,
    })}
  />
);

レンダリングに使用する場合、Remotion の入力 props は JSON にシリアライズ可能である必要があります。バリエーションデータには Zod スキーマを使用し、不正なレンダリングがフレーム生成前に失敗するようにしてください。

アスペクト比、解像度、安全領域

レイアウトに入る前に、基準となる構図のターゲットを選択します。

• 横向き：ウェブプレーヤーやプレゼンテーションでは、一般的に16:9です。
• 縦向き：スマートフォン向けのフィードでは、一般的に9:16です。
• 正方形や縦長のバリエーションは、明示的に求められた場合にのみ使用します。

1つのマスタークロップをあらゆる用途で使えると想定しないでください。次のいずれかの方法で構成します。

• シーンデータを共有しながら、アスペクト比ごとに別々の構図を用意する。
• または、width と height からキャンバス領域を導き出すレイアウトシステムを使用する。

安全領域の定数を使用し、それに沿ってデザインします。

export const makeSafeArea = (width: number, height: number) => ({
  x: Math.round(width * 0.07),
  y: Math.round(height * 0.07),
  w: Math.round(width * 0.86),
  h: Math.round(height * 0.86),
});

プラットフォーム固有の仕様で別途指定されていない限り、重要なテキスト、ロゴ、キャプション、行動喚起は安全領域内に収めてください。プラットフォームのUIオーバーレイは変更されるため、エクスポート時に最新のプラットフォームテンプレートまたはクライアントへの納品仕様を再確認してください。

アセットの管理

アセットを使用してコーディングを始める前に、入力を確定します。

アセットごとに、次の情報を記録します。

• 安定したアセットID。
• public/assets 配下のローカルパス。
• ソースのパスまたはURL。
• SHA-256などのチェックサム。
• 作成者／所有者。
• ライセンスまたは使用許可。
• 該当する場合は、生成に使用したプロバイダー／モデル／バージョン。
• 該当する場合は、プロンプト、シード、パラメーター、生成日。
• インポート前に行った変換。
• 使用制限と必要な帰属表示。
• アセットにC2PA／Content Credentialsが含まれているか、および変換後も保持されているか。

プロジェクトの public/ ディレクトリ内のファイルには、Remotionの staticFile() を使用します。これにより、壊れやすい絶対パスを避けられ、Studioとレンダリング環境の両方で動作します。埋め込み動画については、インストール済みのRemotionのバージョンを確認し、そのバージョンで推奨されている最新のメディアコンポーネントを選択してください。現在のドキュメントでは、新しいコードには @remotion/media の <Video> が推奨されています。一方、FFmpegを利用したフレーム抽出動作が特に必要な場合は、引き続き <OffthreadVideo> が役立ちます。

最終的な構図に必要な依存ファイルを、一時フォルダー、ダウンロードフォルダー、クラウドURL、外部ドライブに残さないでください。リモートURLの使用は手早い調査に限り、本番のレンダリングでは、パイプラインでリモート取得が明示的に必要とされ、変更されないバージョンが記録される場合を除き、固定したローカルコピーを使用してください。

すべてのメディアファイルを事前確認します。

• 寸法、長さ、フレームレート、コーデック、アルファ、カラープロファイル／HDR、音声チャンネルを確認します。
• クリップにミュートまたはミックスすべき音声が含まれているか確認します。
• ブラウザーまたはレンダラーで問題が発生するアセットは、必要に応じてFFmpegでトランスコードするか、プロキシを作成します。
• ユーザー向けの説明ではなく、IDに基づいて命名を統一します。
• フォントのライセンスを確認し、同梱します。

キャプションと字幕

キャプションの方針は、制作上の判断事項です。

• サイドカーカプション：動画と一緒に配信する SRT または WebVTT。
• 焼き込みキャプション：ネイティブキャプションを利用できない、または使用したくないプラットフォームやスタイル向けに、映像に直接描画します。
• 両方：ソーシャルメディアやアクセシビリティ対応の引き継ぎでは一般的です。

意味のある音声を含む、事前に録画された同期メディアについては、WCAG 1.2.2 で、話された内容と意味のある非音声情報を表すキャプションが求められます。動画の理解に効果音、話者の識別、または音楽の合図が必要な場合は、会話のみの字幕を提供しないでください。

推奨ワークフロー：

1. 文字起こしを作成または取り込みます。
2. キューまたは単語単位でタイミングを合わせます。
3. 名前、用語、数字、主張、翻訳を人の目で確認します。
4. コンポジションで使用する正規化済みのキャプション形式に変換します。
5. セーフエリア、コントラスト、読書速度、テロップとの重なりを確認してから、焼き込みキャプションをレンダリングします。
6. プラットフォームまたはクライアントがネイティブキャプションを利用できる場合は、サイドカー形式の SRT/VTT を書き出します。

Remotion は @remotion/captions を通じてキャプションユーティリティを提供しています。SRT の解析や TikTok 形式の分割などのヘルパーに依存する前に、インストール済みパッケージと API のバージョンを再確認してください。

キャプションのデザインルール：

• プラットフォームのオーバーレイにより異なる配置が必要な場合を除き、キャプションはタイトルセーフ／アクションセーフエリア内に配置します。
• 口元、商品、UI コントロール、重要なグラフのラベルを覆わないようにします。
• さまざまな映像でも読みやすいよう、高いコントラストを確保し、背景を十分に分離します。
• 意図的で、読みやすい場合を除き、単語ごとに切り替わるカラオケ形式は避けます。
• 意味がある場合は、たとえば [door closes] や [music swells] のような非音声の合図を含めます。
• 多言語で出力する場合、改行とテキストの拡張は後回しにせず、デザイン上の課題として扱います。

オーディオミキシングとステム

オーディオはステム単位で計画します。

• ナレーション／会話
• 音楽
• 効果音
• ソースクリップの音声
• 任意のアクセシビリティ用または音声解説用トラック

Remotion では、映像と同じフレームタイムラインを使ってオーディオを同期します。<Sequence> でステムの開始を遅らせ、メディアコンポーネントの volume プロパティで、固定またはフレームごとに変化する音量を設定します。複数のオーディオタグをミックスできますが、最終レンダリングはオーディオツールを使って確認してください。映像のプレビューだけでは不十分です。

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

• 音楽や効果音の上でも、ナレーションが明瞭に聞き取れるようにします。
• 話し声の下では音楽をフェードダウンし、無音部分では元に戻します。
• ミックス全体でクリッピングが発生しないようにします。
• 意図的に音声を急に切り替える場合を除き、シーンのカットをまたいで環境音が途切れないようにします。
• クライアントがローカライズ、修正、またはコンプライアンスレビューを必要とする可能性がある場合は、引き渡し時にステムを分けた状態で保持します。

ポストミックスやラウドネス確認に FFmpeg を使用する場合は、loudnorm、amix、atrim、afade などのフィルターについて、公式のフィルタードキュメントを参照してください。あらゆる用途に適用できる LUFS 目標値をハードコードしないでください。プラットフォーム、放送、ポッドキャスト、クライアントの仕様によって異なります。仕様が不明な場合は、選択した目標値を制作上の仮定として明記してください。

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

アニメーションは決定論的なフレームベースにします。

• useCurrentFrame() と useVideoConfig() を使用します。
• 物理的に自然な表示には spring() を使用します。
• 値のマッピングには interpolate() と interpolateColors() を使用します。
• 決定論的なバリエーションには Remotion の random(seed) を使用します。
• Math.random()、Date.now()、レンダリング中に結果が不安定なネットワークフェッチ、ブラウザーのタイミングに依存するレイアウトは避けます。

メッセージに合わせて動きを設計します。

• 視聴者が必要とする順序で情報を表示します。
• トランジションは構成を明確にするために使い、すべてのカットを装飾するためには使いません。
• 強調したい場面にのみ、大きな動きを使います。
• 動きの強さをブランドや視聴者に合わせます。
• 小さな文字が読みにくくなる動きは避けます。

シーンのトランジションでは、まずカットが概念的、空間的、リズミカル、あるいは純粋に編集上のものかを判断します。そのうえで、適切なトランジションの種類を選びます。

• ストレートカット：最も速く、情報量の多い場面に適していることが多い手法です。
• フェード／ディゾルブ：話題の切り替えや時間の経過を柔らかく表現します。
• スライド／ワイプ：空間的、または UI のような動きを表現します。
• スケール／ズーム：階層の変化や情報の表示を表現します。
• マッチカット：シーンをまたいで形、色、動きを維持します。
• オーディオ主導のトランジション：音楽や SFX によって映像のカットを演出します。

@remotion/transitions やその他のトランジションパッケージを使用する場合は、制作時に最新の API とバージョンを確認してください。

テキスト、レイアウト、ビジュアルシステム

テキストはデザインするメディアとして扱います。

• 場当たり的にフォントサイズを決めず、文字サイズのスケールを使います。
• 行の長さを制限します。
• タイトル、セクションラベル、キャプション、注釈、統計、出典注記、CTA のスタイルを定義します。
• 重要なテキストはセーフエリア内に配置します。
• 翻訳後に文字数が増えることを考慮してローカライズします。
• 必要に応じて、事実に関する主張には出典注記を含めます。

構成の寸法に応じて調整されるレイアウトプリミティブを使います。

• Frame：背景とセーフエリアを設定します。
• Grid または Stack：間隔を調整します。
• CaptionLayer：キャプションの位置を確保します。
• BrandBug：ロゴの配置を調整します。
• SceneChrome：シーンラベル、出典注記、進行状況インジケーターを任意で表示します。
• MediaSlot：画像や動画のフィット／トリミング方法を指定します。

CSS のレスポンシブ動作だけに頼らないでください。複数のフレームとアスペクト比でレビュー用の静止画をレンダリングし、テキストの欠け、見えないオーバーレイ、UI と競合するキャプションがないか確認します。

データ駆動のバリエーション

クリエイティブシステムを明確に定義すれば、Remotion はバリエーションの一括生成に適しています。

次の項目を変更する場合は、バリエーションを使います。

• コピー、言語、音声、キャプション
• 製品のスクリーンショットや生成画像
• 統計、名前、オファー、日付
• アスペクト比
• ロゴ／ブランドテーマ
• CTA やローカライズ

バリエーションのルール：

• すべてのレンダリング入力を JSON にシリアライズ可能な props に保持します。
• レンダリング前にスキーマで props を検証します。
• シーン数やキャプションの長さが異なる場合は、データから再生時間を算出します。
• 安定したアセット ID とバリエーション ID を使用します。
• 各出力と props、アセット、キャプション、来歴台帳の項目を対応付けたレンダリングマニフェストを作成します。
• 動画を一括レンダリングする前に、決定論的な静止画をレンダリングします。

代表的なバリエーションが、ビジュアル、キャプション、音声、アクセシビリティのレビューに合格するまでは、多数のバリエーションを一括レンダリングしないでください。

レンダリングとエクスポート

環境に合ったレンダリング方法を使用します。

• ローカルのオペレーター向けワークフローには CLI レンダリングを使用します。
• Node/Bun からプログラムでレンダリングする場合は、@remotion/renderer の renderMedia() を使用します。
• クラウド／サーバーでのレンダリングは、Remotion の最新の SSR／クラウド関連ドキュメント、ライセンス、インフラストラクチャの制限を確認してから行います。

納品仕様に基づいて出力設定を選びます。

• コンテナーとコーデック
• 解像度とフレームレート
• 音声コーデック／サンプルレート／チャンネル
• CRF またはビットレートの制約
• アルファ要件
• サムネイル／静止画の要件
• 字幕のサイドカーファイル形式
• ファイル名の規則とバージョン

Remotion の renderMedia() と CLI レンダリングでは、コーデックと出力先を指定できます。Remotion の品質ガイダンスでは、対応コーデックの主要な品質制御として CRF が挙げられています。一方、基盤となるコーデックとフィルターの動作は FFmpeg のドキュメントに準拠します。通常、圧縮率を下げると品質とファイルサイズが増加します。エクスポート後は必ず映像を目視で確認してください。

最終出力の前に、再現性のあるレビュー用エクスポートを行います。

• 主要なフレームのコンタクトシート：最初のフレーム、各シーンの開始位置、各字幕スタイル、各 CTA、各トランジションの中間点
• ファイルサイズが重要な場合は、レビュー用に低解像度のウォーターマーク付きプレビューを作成します。
• 動きが最も激しい部分を含む短い区間をフル解像度で出力します。
• 重大な問題が解消されてから、最終版をフルレンダリングします。

レンダリングに失敗した場合は、原因を分類します。

• コード／ビルドエラー
• アセットの欠落またはパスの誤り
• メディアのデコード／トランスコードの問題
• メモリ／並行処理の問題
• フォント／レンダリングの不一致
• 音声ミックスの問題
• プラットフォーム／コーデックの非互換性

そのうえで、むやみに再試行するのではなく、該当する問題の種類を解決します。

パフォーマンスと信頼性

本格的なレンダリングの前に、以下を行います。

• パッケージのバージョンを固定するか、インストール済みのバージョンを記録します。
• 利用可能であれば、型チェック／Lint／ビルドを実行します。
• すべてのアセットが public/ に存在することを確認します。
• レンダリング時の取得処理が、変更される可能性のある外部サービスに依存していないことを確認します。
• 巨大な入力プロパティを減らし、大きなデータやメディアはファイルとして保存します。
• フル動画の前に静止フレームをレンダリングして、レイアウトをデバッグします。
• ハードウェアとメモリに応じて並行処理数を選びます。
• 長時間のレンダリングの前に、代表的な区間を一つテストします。

以下は避けてください。

• フレームごとのネットワークリクエスト
• より小さな制作アセットで済む場合に、大きすぎる画像をデコードすること
• 不必要に深い DOM 構造や負荷の高い CSS エフェクト
• テストされていない、多数の要素へのアニメーション付きぼかし／影／フィルターの適用
• 上限のない画像／動画要素
• プロパティ内の大きな base64 データ
• 非決定的なタイマーやランダム値

データ取得に calculateMetadata() を使用する場合は、Remotion の最新のガイダンスに従い、並行処理数の多いレンダリングでレート制限対象のリクエストを繰り返さないようにします。実用的であれば、取得したデータをプロジェクトファイルにキャッシュするか、固定します。

アクセシビリティと安全性の確認

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

• 字幕：意味のある音声が事前収録されている場合は字幕を付けます。必要に応じて、意味のある非音声の音や話者の文脈も字幕に含めます。
• 読みやすさ：再生速度に合わせて、対象デバイスで字幕やタイトルのテキストを読めることを確認します。
• コントラスト：あらゆる背景上で、テキストや UI オーバーレイが判読できる状態を保ちます。
• 点滅：1 秒間に 3 回を超えて点滅するコンテンツは、WCAG の一般的な点滅基準／赤色点滅基準を下回る場合を除き、避けます。判断に迷う場合は、点滅を減らす、コントラストを下げる、シーケンスを遅くする、またはエフェクトを削除します。
• 動きへの過敏さ：不必要な揺れ、急速なズーム、ストロボ状の背景を避けます。依頼があれば、より穏やかなバージョンを用意します。
• 音声：クリッピング、不快なピーク、急激な音量変化がないことを確認します。
• 音声解説または代替手段：重要な視覚情報がメインの音声で伝わらない場合は、特にアクセシビリティ規制の対象となる納品物について、音声解説またはテキストによる代替手段の要否を検討します。

自動チェックは、字幕、点滅のリスク、内容の理解度に関する人による確認の代わりにはなりません。

出所、ライセンス、コンテンツ認証情報

最終ファイルに C2PA 署名がなくても、出所台帳を管理してください。

台帳に最低限記録する項目：

{
  "project_id": "example-video",
  "verified_on": "2026-07-11",
  "outputs": [
    {
      "id": "main-16x9-v03",
      "path": "handoff/main-16x9-v03.mp4",
      "sha256": "..."
    }
  ],
  "assets": [
    {
      "id": "hero-image-01",
      "local_path": "public/assets/image/hero-image-01.png",
      "source": "generated",
      "provider": "example-provider",
      "model": "example-model",
      "prompt_or_brief": "stored in secure project notes",
      "seed": "12345",
      "license_or_permission": "client approved for this campaign",
      "restrictions": "no standalone resale",
      "sha256": "..."
    }
  ],
  "software": {
    "remotion": "record installed version",
    "ffmpeg": "record installed version"
  },
  "human_approvals": [
    {
      "scope": "final render",
      "approver": "client/contact",
      "date": "YYYY-MM-DD"
    }
  ]
}

C2PA コンテンツ認証情報は、マニフェスト、アサーション、クレーム、署名、素材を中心に構成された技術的な出所標準です。クライアントが C2PA を必要としている場合は、最新の C2PA 対応ツールチェーンを使用し、書き出しからプラットフォームへのアップロードまでの過程で認証情報が保持されることを確認してください。プラットフォームがメタデータを削除する場合は、署名済みのソース／出力と別途台帳を引き継ぎ資料に含めてください。C2PA が真実性を証明すると示唆してはいけません。C2PA が記録するのは出所に関するクレームであり、その信頼性は署名者とチェーンに左右されます。

次の場合は、クライアント、弁護士、またはプラットフォームの担当者にエスカレーションしてください。

• ライセンス条件が不明確である、または意図した用途と矛盾する場合
• 生成された肖像、音声、ロゴ、音楽、または商標の権利が関係する場合
• クレジット表記が必要だが、プラットフォームのレイアウトでは対応できない場合
• AI プロバイダーの出力条件や安全性ポリシーが公開に影響する場合
• 合成または編集されたメディアにラベル付けが必要な場合
• 規制対象の表現が字幕、ナレーション、映像、またはメタデータに含まれる場合

QA チェックリスト

最終引き継ぎの前に、以下を実施してください。

1. 構成の要件：尺、fps、寸法、アスペクト比、バリエーション一覧がブリーフと一致していること。
2. タイムライン：シーンの境界、トランジション、字幕のタイミング、音声キューがフレーム単位で正確であること。
3. メディアの管理：参照されているすべてのファイルがローカルに存在し、チェックサムが取得され、出所が記録されていること。
4. 映像レビュー：キーフレームのコンタクトシートで、レイアウト、セーフエリア、クロップ、ブランド、テキスト、CTA に問題がないこと。
5. モーションレビュー：トランジションが意味を支えており、意図しない揺れ、カクつき、過剰なアニメーションがないこと。
6. 字幕レビュー：文字起こしの正確性、句読点、話者の手がかり、非音声の手がかり、改行、翻訳に問題がないこと。
7. 音声レビュー：聞き取りやすさ、ミックス、フェード、同期、クリッピング、ラウドネスの前提に問題がないこと。
8. アクセシビリティレビュー：字幕、コントラスト、点滅、モーションへの過敏性、音声解説の要否について確認が済んでいるか、エスカレーションされていること。
9. 再現性：レビュー用静止画を再レンダリングした結果が想定と一致すること。ランダム性、ネットワーク、時刻への依存がないこと。
10. エンコードレビュー：最終ファイルが対象プレーヤーで開き、コーデック、コンテナ、音声の設定が納品要件と一致していること。
11. 出所レビュー：台帳、ライセンス、承認、バージョン、プロンプト／シード、ソースに関する注記が揃っていること。
12. 引き継ぎレビュー：最終ファイル、サイドカー、ステム、ソースパッケージ、レンダリング時の注記、残存リスクが含まれていること。

納品時の引き継ぎ

以下を納品してください。

• 最終動画ファイル
• 字幕のサイドカーファイル（ある場合）
• 字幕の焼き込み状況
• サムネイル／静止画の書き出しデータ
• 合意した音声ステムまたは最終ミックス
• Remotion のソースプロジェクト、またはアーカイブしたソースバンドル
• 正確なレンダリングコマンド、またはスクリプトのエントリーポイント
• パッケージのロックファイルとソフトウェアのバージョンに関する注記
• 出所／ライセンス台帳
• 既知の制限と再確認済みの変動し得る情報を記載した QA レポート
• クライアントの承認記録、または未決定事項の一覧

引き継ぎを受けた別のエージェントやエンジニアが、どのアセット、プロパティ、設定を使用したか推測することなく、レンダリングを再現できるようにしてください。

例：Remotion で組み立てる生成メディアの解説動画

ユーザーの依頼：「生成画像、ナレーション、音楽、字幕、CTA を使って、60 秒の縦型解説動画を作成してください。」

適切な進め方：

1. 1080x1920、30 fps、60 seconds、言語、字幕スタイル、ブランドカラー、音楽のソースを確認します。
2. 生成画像を public/assets/image/ に、ナレーションと音楽を public/assets/audio/ に保存して固定します。
3. 5 つのシーンを含む project.json を作成します。各シーンには、長さ、画像アセット ID、ナレーションのセグメント、見出し、字幕キューの範囲、トランジションスタイルを設定します。
4. width={1080}、height={1920}、fps={30} を指定して VerticalExplainer を登録し、durationInFrames はシーンから算出します。
5. シーンの順序には <Series> を、オーバーレイ、音声キュー、字幕レイヤーには <Sequence> を使用します。
6. 生成クリップには、現在推奨されている Remotion の動画コンポーネントを使用します。FFmpeg を利用した抽出が適している場合は OffthreadVideo に切り替えます。それ以外の場合は、静止画に Img を使用し、再現性のあるカメラワークを加えます。
7. コンタクトシートをレンダリングします。シーンの開始、見出しの表示、字幕の多いフレーム、トランジションの中間点、最後の CTA を確認します。
8. 全体をレンダリングする前に、字幕と点滅を確認します。
9. MP4 に加えて、SRT/VTT、出所記録、ソースバンドルを出力します。

シーンデータの例：

{
  "id": "scene-03-proof",
  "frames": 360,
  "image": "workflow-diagram-01",
  "narration": "vo-03-proof",
  "headline": "The hidden cost is handoff friction",
  "captionCueIds": ["c011", "c012", "c013"],
  "motion": {"type": "slow-push", "intensity": 0.18},
  "transitionOut": "match-cut-line"
}

実装のスケッチ例：

const Scene = ({scene}: {scene: SceneData}) => {
  const frame = useCurrentFrame();
  const {fps, width, height} = useVideoConfig();
  const safe = makeSafeArea(width, height);
  const reveal = spring({frame, fps, config: {damping: 18}});

  return (
    <AbsoluteFill style={{backgroundColor: '#080A12'}}>
      <KenBurnsImage assetId={scene.image} motion={scene.motion} />
      <Headline text={scene.headline} progress={reveal} safe={safe} />
      <CaptionLayer cueIds={scene.captionCueIds} safe={safe} />
    </AbsoluteFill>
  );
};

この方法が有効な理由：Remotion が再現性のあるタイムラインを制御し、生成メディアは固定され、追跡可能な状態に保たれます。エージェントは、すべてのアセットを再生成せずに、コピー、字幕、タイミング、レイアウトを修正できます。

注意すべきよくある問題：プラットフォームの UI に隠れるほど字幕が低い、縦型のクロップに対して画像の解像度が低い、音楽がナレーションをかき消す、翻訳版でテキストが長くなる、AI の生成設定が記録されていない、といった点です。

例：データ駆動型のバリアントキャンペーン

ユーザーの依頼：「同じ構成で、顧客セグメントごとに指標、スクリーンショット、CTA を変えた短い製品アップデート動画を 40 本作成してください。」

適切な進め方：

1. まず代表的なバリアントを 1 つ作成します。
2. スキーマ検証付きで VariantProps を定義します。
3. バリアントデータを JSON に保存し、すべてのアセットに安定した ID を付けます。
4. 長いローカライズ済みコピーを含むバリアントでは、calculateMetadata() を使って動画の長さを延長します。
5. 動画を一括生成する前に、各バリアントの最初のフレーム、指標の表示、CTA の静止画をレンダリングします。
6. 各出力を入力プロパティおよび記録項目に対応付けるレンダリングマニフェストを作成します。

バリアントプロパティの形状の例：

const variantSchema = z.object({
  variantId: z.string(),
  locale: z.string(),
  segmentName: z.string(),
  metrics: z.array(z.object({
    label: z.string(),
    value: z.string(),
    sourceNote: z.string().optional(),
  })),
  screenshotAssetId: z.string(),
  cta: z.string(),
  captionTrack: z.string(),
});

バッチ処理のルール：スキーマ、アセットの存在、字幕のタイミング、安全領域の静止画レビューのいずれかでバリアントが失敗した場合は、バッチ処理を停止し、データまたはレイアウトを修正します。問題のある動画 40 本を速くレンダリングしてはいけません。