remotion-render-config

Remotion レンダリング設定

Remotion の動画レンダリングで使用する、動画出力設定、コーデックパラメーター、フォーマットオプション、品質設定を定義したレンダリング設定ドキュメントを生成します。このスキルの対象は、レンダリング／エクスポート設定のみです。

このスキルでできること

次の項目のレンダリング設定を生成します。

1. 出力フォーマット — MP4、WebM、ProRes など
2. コーデック設定 — H.264、H.265、VP9 のパラメーター
3. 品質設定 — CRF、ビットレート、圧縮レベル
4. 解像度 — 出力サイズとスケーリング
5. プラットフォーム最適化 — YouTube、Twitter、Instagram のプリセット

対象範囲

対象範囲：

• レンダリングコマンドの設定
• コーデックとフォーマットの選択
• 品質と圧縮の設定
• プラットフォーム固有の最適化
• 出力ファイルのパラメーター

対象範囲外：

• コンポジションの実装（/remotion-composition を使用）
• シーンのロジック（/remotion-component-gen を使用）
• アニメーションのパラメーター（/remotion-animation を使用）
• アセット管理（/remotion-asset-coordinator を使用）

入力／出力フォーマット

入力フォーマット：対象プラットフォーム／品質要件

レンダリング対象の仕様を受け付けます。

自然言語：

Render for YouTube at high quality with H.264 codec

構造化フォーマット：

## Render Requirements

**Target Platform:** YouTube
**Quality Level:** High
**Format:** MP4 (H.264)
**Resolution:** 1920x1080
**Frame Rate:** 30 fps
**Additional:** Upload-ready, optimized file size

出力フォーマット：RENDER_CONFIG.md

レンダリング設定ドキュメント一式を生成します。

# Render Configuration: ProductDemo

## Status
✅ Render settings defined
⏳ Ready for video render

## Render Command

```bash
npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

設定の詳細

出力フォーマット

• コンテナ： MP4
• 動画コーデック： H.264（x264）
• 音声コーデック： AAC
• ピクセルフォーマット： yuv420p（最大限の互換性を確保）

品質設定

• CRF： 18（高品質、約15～20 MB／分）
• 音声ビットレート： 320 kbps（高品質）
• プリセット： medium（速度と品質のバランス）

解像度

• 出力： 1920x1080（16:9）
• フレームレート： 30 fps
• 長さ： 30秒（900フレーム）

プラットフォーム：YouTube

YouTube へのアップロードに最適化：

• ✅ H.264 コーデック（広くサポートされています）
• ✅ yuv420p ピクセルフォーマット（必須）
• ✅ AAC 音声（推奨）
• ✅ CRF 18（高品質で、ファイルサイズも適切）
• ✅ メタデータに対応

推定ファイルサイズ： 約45～60 MB

その他のレンダリングオプション

Web 配信用（ファイルサイズを縮小）

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=23 \
  --audio-bitrate=192k

ファイルサイズ：約25～35 MB

最高品質（アーカイブ用）

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=15 \
  --audio-bitrate=320k \
  --preset=slower

ファイルサイズ：約80～100 MB

高速プレビューレンダリング

npx remotion render \
  src/index.tsx \
  ProductDemo \
  preview.mp4 \
  --crf=28 \
  --preset=ultrafast

ファイルサイズ：約15～20 MB

レンダリングのワークフロー

1. テストレンダリング（最初の3秒）：

   npx remotion render src/index.tsx ProductDemo test.mp4 --frames=0-90
   

2. 進捗を表示しながら全体をレンダリング：

   npx remotion render src/index.tsx ProductDemo output.mp4 --codec=h264 --crf=18
   

3. 出力を確認：

   • ファイルサイズを確認
   • 動画プレーヤーで再生
   • 音声の同期を確認
   • 品質を確認

4. プラットフォームにアップロード（YouTube など）

次のステップ

1. テストレンダリングを実行して、タイミングと品質を確認します
2. ファイルサイズが大きすぎる／小さすぎる場合は、CRF を調整します
3. 準備ができたら、全体をレンダリングします
4. 対象プラットフォームにアップロードします

トラブルシューティング

ファイルサイズが大きすぎる場合：

• CRF を上げます（Web 用なら23～28）
• 音声ビットレートを下げます（192k または128k）

品質に問題がある場合：

• CRF を下げます（より高品質にするなら15～17）
• より遅いプリセットを使用します（slow、slower）

レンダリングが遅い場合：

• より速いプリセットを使用します（fast、veryfast）
• テスト中は解像度を一時的に下げます

チェックリスト

• コーデックを選択済み
• 品質設定を定義済み
• プラットフォームに合わせて最適化済み
• レンダリングコマンドを生成済み
• テストレンダリングを完了
• 全体のレンダリングを完了
• 出力を確認済み

## Codec Reference

### H.264 (Most Compatible)

Best for: YouTube, web delivery, social media

```bash
--codec=h264
--crf=18          # Quality (lower = better, 15-28 typical)
--pixel-format=yuv420p
--audio-codec=aac
--audio-bitrate=320k

品質レベル：

• CRF 15～17：最高品質（ファイルサイズ大）
• CRF 18～20：高品質（推奨）
• CRF 21～23：良好（Web 配信用）
• CRF 24～28：許容範囲（プレビュー／ドラフト用）

H.265（HEVC）— より高い圧縮率

最適な用途：最新のプラットフォーム、ファイルサイズの縮小、4K 動画

--codec=h265
--crf=23
--pixel-format=yuv420p10le

注： どこでもサポートされているわけではありませんが、同じ品質でファイルサイズを約50％縮小できます。

VP9（オープンソース）

最適な用途：WebM フォーマット、Web 配信、Chrome／Firefox

--codec=vp9
--crf=30
--pixel-format=yuv420p

ProRes（プロ向け）

最適な用途：動画編集、最高品質、圧縮なし

--codec=prores
--prores-profile=3  # HQ profile

警告： ファイルサイズが非常に大きくなります（約1～2 GB／分）。

品質とファイルサイズの目安

30 fps の 1080p 動画（30 秒）の場合：

CRF	品質	ファイルサイズ	用途
15	最高	80-100 MB	アーカイブ、編集
18	高	45-60 MB	YouTube、高品質
21	良好	30-40 MB	Web、ソーシャルメディア
23	許容範囲	20-30 MB	Web 配信
28	プレビュー	10-15 MB	下書き、テスト

プラットフォーム別プリセット

YouTube

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

仕様：

• 解像度：1920x1080 以上
• フレームレート：24、25、30、48、50、または 60 fps
• コーデック：H.264 または H.265
• 音声：AAC-LC、320 kbps

Twitter/X

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

仕様：

• 最大長：2:20（140 秒）
• 最大ファイルサイズ：512 MB
• 解像度：最大 1920x1200 または 1200x1920

Instagram フィード

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

仕様：

• 最大長：60 秒
• 解像度：1080x1080（1:1）または 1080x1350（4:5）
• フレームレート：30 fps
• コーデック：H.264

Instagram リール／ストーリーズ

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

仕様：

• 解像度：1080x1920（9:16）
• 最大長：90 秒（リール）、15 秒（ストーリーズ）
• フレームレート：30 fps

TikTok

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

仕様：

• 解像度：1080x1920（9:16）
• 最大長：10 分
• 最大ファイルサイズ：287.6 MB
• フレームレート：30 または 60 fps

LinkedIn

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

仕様：

• 最大ファイルサイズ：5 GB
• 解像度：256x144～4096x2304
• フレームレート：10～60 fps

高度なレンダリングオプション

並列処理（レンダリングの高速化）

--concurrency=8  # Use 8 CPU cores

画像シーケンス（後処理用）

--sequence
--image-format=png

After Effects、Premiere などで使用する PNG シーケンスを出力します。

特定のフレーム範囲

--frames=30-90  # Render frames 30-90 only

出力サイズの変更

--scale=0.5  # Render at 50% resolution (960x540)

簡易プレビューに便利です。

既存ファイルを上書き

--overwrite

カスタム出力名

npx remotion render src/index.tsx VideoName "output/final-video.mp4"

環境変数

# Number of CPU cores to use
export REMOTION_CONCURRENCY=8

# Disable browser sandbox (Docker)
export REMOTION_DISABLE_CHROMIUM_SANDBOX=true

# Set custom Chromium path
export REMOTION_CHROMIUM_PATH=/path/to/chromium

レンダリング設定ファイル

remotion.config.ts を作成します：

import { Config } from "@remotion/cli/config";

Config.setCodec("h264");
Config.setCrf(18);
Config.setPixelFormat("yuv420p");
Config.setAudioBitrate("320k");
Config.setAudioCodec("aac");
Config.setConcurrency(8);
Config.setOverwriteOutput(true);

次に、以下を実行してレンダリングします：

npx remotion render

レンダリングスクリプト

package.json に追加します：

{
  "scripts": {
    "render:preview": "remotion render src/index.tsx VideoName preview.mp4 --crf=28 --preset=ultrafast",
    "render:draft": "remotion render src/index.tsx VideoName draft.mp4 --crf=23",
    "render:final": "remotion render src/index.tsx VideoName output.mp4 --codec=h264 --crf=18",
    "render:youtube": "remotion render src/index.tsx VideoName youtube.mp4 --codec=h264 --crf=18 --audio-bitrate=320k"
  }
}

使用方法：

npm run render:youtube

レンダリングのパフォーマンス向上のヒント

1. 並列処理を使用してすべての CPU コアを活用します
2. レンダリング中は他のアプリケーションを終了します
3. SSD を使用してファイル入出力を高速化します
4. レンダリングが遅すぎる場合は、コンポジションの複雑さを下げます
5. 全体をレンダリングする前に、短い範囲でテストレンダリングを行います
6. 透過が必要な場合は、image-format prop を使用します

品質確認チェックリスト

レンダリング後：

• ファイルがエラーなく再生される
• 音声と映像が同期している
• 映像品質が期待どおりである
• ファイルサイズがプラットフォームに適している
• エンコードによるアーティファクトが見られない
• 色が正しく表示される
• テキストが読みやすい
• アニメーションが滑らかである

統合ワークフロー

1. 他のスキルを使ってコンポジションを完成させます
2. このスキルを使用してレンダリング設定を生成します → RENDER_CONFIG.md
3. テストレンダリングを実行します（最初の数秒）
4. 品質とタイミングを確認します
5. 全体をレンダリングします
6. 対象のプラットフォームにアップロードします

他のスキルとの連携

このスキルはパイプラインの最終ステップです：

remotion-render-config (this skill)
    ↓ outputs: RENDER_CONFIG.md
    ↓ used after: All implementation is complete
    ↓ produces: Final video file

連携するスキル：

• /remotion-scaffold — 完成したプロジェクトをレンダリングします
• /remotion-composition — 構造化されたコンポジションをレンダリングします
• /remotion-component-gen — 実装済みのシーンをレンダリングします
• /remotion-spec-translator — 最終ステップとしてこのスキルを実行します

---

このスキルでは、対象プラットフォームに最適化された高品質な動画を出力できる、本番環境向けのレンダリング設定を提供します。