Remotion レンダリングは何をしますか？

レンダリングとイテレーションのループを駆動します。コンポジションを MP4 に変換し、自然言語でのフィードバックを受け取り、それを満たす最小限の編集を行い、再レンダリングします。コストのかかる失敗パターンは、逆のループ、つまりコピーの微調整のためにシーンファイル全体を書き換えたり、確認のたびにフル品質でレンダリングし直したりすることです。これにより、承認済みの作業が破壊され、Remotion を使う価値であるイテレーション速度が損なわれます。

操作手順

ステップ 1: 入力情報の収集

コンポジション ID（src/Root.tsx 内の <Composition> の id。ファイル名ではありません）とエントリポイント（registerRoot を呼び出すファイル。通常は src/index.ts）。
ターゲット: プラットフォーム/アスペクト（横長 16:9、縦長 9:16、正方形）、解像度（デフォルトは 1080p。4K はリクエストがあった場合のみ）、透過が必要かどうか。
マシンのコア数（同時実行数用）と、これが単一のレンダリング、イテレーションセッション、バッチのいずれであるか。

ステップ 2: 基本レンダリング

npx remotion render src/index.ts <CompositionId> out/video.mp4

デフォルトの出力は、コンポジション自身の幅/高さ/fps での H.264 MP4 です。Remotion は必要に応じて out/ ディレクトリを作成します。

ステップ 3: 解像度、fps、コーデックプリセット

解像度と fps は <Composition>（width/height/fps）に設定します。ソースで変更してください。フラグはスケーリングとコンテナにのみ使用します。

# 1080p 横長 - コンポジションは 1920x1080@30 で作成
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - 1080p キャンバスをアップスケール。レイアウトは変更しない
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# 9:16 縦長 - 1080x1920 で作成されたコンポジションをレンダリング
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

コーデックルール:

ソーシャル/Web 配信は H.264 MP4（デフォルト）のままにします。最大の互換性を確保。
透過: --codec=vp8 または vp9（WebM）、または編集パイプライン用に --codec=prores（アルファ対応）。H.264 はアルファを扱えません。
真の 60fps は、コンポジションで fps={60} を設定し、それに合わせてフレーム数をスケーリングします。フラグのみで fps を変更すると、フレーム単位でタイミング設定されたすべてのアニメーションが同期しなくなります。

ステップ 4: 同時実行数のチューニング

レンダリングは CPU バウンドです（各フレームはヘッドレス Chromium のスクリーンショット）。デフォルトはおおよそコア数の半分です。明示的にチューニングするのが最も簡単なローカル高速化手段です。

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

物理コア数から始めます（--concurrency=50% でパーセンテージ指定可能）。マシンがスワップやサーマルスロットリングを起こした場合は減らします。最適値を超えると、Chromium タブが増えるほど処理が遅くなり、速くなりません。

ステップ 5: イテレーティブな改良ループの実行

Studio を起動したままにしておき（npx remotion studio、http://localhost:3000）、ユーザーが即座にプレビューできるようにします。フルレンダリングは承認時にのみ予約します。

ユーザーが Studio でプレビューし、平易な言葉でフィードバックを提供します。
そのフィードバックを外科的な編集に変換します。関連する値のみを変更します。
- "速すぎる" → interpolate の入力範囲を広げる、または spring の damping を上げる。
- "ロゴをもっと目立たせたい" → spring の damping を下げる / オーバーシュートを追加。
- "CTA のコピーを変更" → prop / defaultProps を編集し、他は触らない。
- "アクセントカラーを変更" → colors オブジェクトの 1 つの hex 値を変更。
- "最後の機能をもう少し長く表示" → その <Sequence> の durationInFrames を増やし、かつコンポジションの合計 durationInFrames を再計算する。
再レンダリングするか、視覚的な確認のために Studio のホットリロードを利用します。

外科的編集 vs 書き換え: 変更が値、prop、色、または単一シーンのタイミングである場合はその場で編集します。シーンの構造が変更される場合（シーンの追加/削除/並べ替え、構造的なオーサリングは remotion-compose に任せる）のみ書き換えます。デフォルトは外科的にします。これにより承認済みのすべての作業が保持されます。

ステップ 6: バッチバリアント

コンポジションがデータ駆動型であるため、N 個のバリアント = JSON ファイル内の N 個のプロップセットになります。

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props はインライン JSON またはファイルパスを受け取ります。数個以上のバリアントの場合は、JSON を読み取りエントリごとにシェルアウトする小さな Node スクリプトを作成するか、型安全なループのために @remotion/renderer の renderMedia() を使用します。コピーと色のローカライズや A/B テストは、JSON を編集するだけで行えます。

ステップ 7: ローカルがボトルネックになった場合の Lambda

単一のレンダリングにローカルで数分かかる場合、またはバッチが大きい場合に Lambda を使用します。サーバーレスワーカーにフレームを分散処理させます。それ以外の場合は、ローカルの方がシンプルで無料です。

npx remotion lambda functions deploy            # AWS アカウント/リージョンごとに 1 回
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

AWS 認証情報と、Remotion の Lambda セットアップに従った IAM 権限が必要です。

ステップ 8: 3 つの一般的な障害のトラブルシューティング

フレーム数不一致 - アニメーションが途中で途切れるか、クリップに不要な末尾が付く。原因: <Sequence> の duration が変更されたが、コンポジションの合計が変更されていない。修正: 合計をシーケンスの合計と等しくする。タイミング編集のたびに再計算する。これが最も一般的なレンダリングの驚きです。
staticFile() 参照の欠落 - レンダリングが失敗するか、アセットが空白になる。原因: アセットがパスでインポートされているか、public/ の外部にある。修正: public/assets/ に配置し、staticFile("assets/<name>") で参照する。
フォントのフラッシュ/フォールバック - テキストが間違ったフォントでレンダリングされるか、ずれる。原因: @remotion/google-fonts の loadFont() が欠落しているか、呼び出しが遅すぎる。修正: loadFont() をモジュールのトップレベルで呼び出し、返された fontFamily を適用する。レンダリングはフォントを待機するようになります。

成果物

要求されたプリセットで out/ にレンダリングされたファイル。さらに、イテレーションセッションの場合は、ループの提案（調整可能な要素（ペーシング、コピー、色、タイミング）を挙げ、フィードバックに基づいて再レンダリングする）を行います。バッチの場合は、バリアントの JSON とバリアントごとの出力ファイル。

禁止事項

値レベルの変更のためにシーンファイルを書き換えないでください。外科的な編集は承認済みの作業を保持します。
フラグのみで fps を変更しないでください。コンポジションで設定し、フレーム数を再スケーリングしてください。
シーケンスの duration を変更したら、コンポジションの合計 durationInFrames を再計算せずに変更しないでください。
イテレーションごとにフルレンダリングしないでください。Studio のホットリロードがプレビューループです。承認時にレンダリングします。
スワップやサーマルスロットリングが発生しているマシンで、同時実行数を物理コア数以上に増やさないでください。
ローカルレンダリングが数秒で完了する場合に Lambda を使用しないでください。AWS のセットアップとコストが無駄になります。
ここで新しいシーンを作成したり、コンポジションを再構築したりしないでください。それは remotion-compose の役割です。

品質基準

出力は、要求された解像度/アスペクト/fps で再生され、不要な末尾や早期の途切れがないこと（コンポジションの合計 duration がシーケンスの合計と一致すること）。
アセットとフォントが最初のフレームから正しくレンダリングされていること。フォールバックフォントのフラッシュや空白のアセットがないこと。
イテレーションでは、フィードバックが必要とする行のみが変更されていること。以前に承認されたものはすべてそのままであること。
バッチ出力は、プロップセットによってのみ異なること。

エスカレーション

シーンのオーサリング、アニメーションデザイン、コンポーネント構造は remotion-compose へ。プロジェクトのスキャフォールディングは remotion-setup へ。スコアリングとオーディオのタイミング調整は sound-and-music-sync へ。

Remotion レンダリング