Remotion レンダリング

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

レンダリングと反復ループを駆動します。コンポジションをMP4に変換し、自然言語によるフィードバックを受け取り、それに対応する最小限の編集を行い、再レンダリングします。コストのかかる障害モードはその逆のループ、つまりコピーの微調整のためにシーンファイル全体を書き換えたり、確認のたびにフル品質で再レンダリングしたりすることであり、承認された作業と、Remotion を利用する価値を生み出す反復速度を損なうことになります。

操作手順

ステップ 1: 入力の収集

• コンポジションID（src/Root.tsx 内の <Composition> の id。ファイル名ではありません）とエントリポイント（registerRoot を呼び出すファイル。通常は src/index.ts）
• ターゲット：プラットフォーム/アスペクト比（ランドスケープ 16:9、バーティカル 9:16、スクエア）、解像度（1080p デフォルト、4K はリクエスト時のみ）、透明度の必要性
• マシンのコア数（同時実行数用）と、これが1回のレンダリングか、反復セッションか、バッチか

ステップ 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

コーデックルール:

• ソーシャル/ウェブ配信は 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）、ユーザーが即座にプレビューできるようにします。承認用のフルレンダリングは取っておきます。

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

外科的編集 vs 書き換え：変更が値、プロップ、色、または1シーンのタイミングである場合はその場で編集します。シーンの「構造」が変わる場合（シーンの追加/削除/並べ替え）のみ書き換え、構造的なオーサリングは（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

1回のレンダリングにローカルで数分かかる場合や、バッチが大きい場合は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"}'

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

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

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

成果物

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

禁止事項

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

品質基準

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

エスカレーション

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