Remotionのレンダリングを高速化するパフォーマンスチューニング完全ガイド

Remotionでのローカルレンダリングが遅いと感じているなら、設定の最適化で大幅に改善できる。実測値を元にしたパフォーマンスチューニングの手法を体系的に解説する。

レンダリング速度の基本的な決定要因

1. –concurrency の最適化

最も効果的なパラメータ。CPUコア数に合わせて設定する。

# デフォルト（コア数の半分）
npx remotion render MyComp output.mp4

# フルコアで並列レンダリング
npx remotion render MyComp output.mp4 --concurrency=8

# 実測：5分動画（1920×1080 30fps）
# concurrency=2: 18分
# concurrency=4: 11分
# concurrency=8: 7分
# concurrency=16: 6分（コア数以上は効果が薄い）

2. 開発中はPreviewモードを活用する

# 低解像度でプレビュー（本番は1920×1080）
# remotion.config.tsで設定
import { Config } from "@remotion/cli/config";

Config.setScale(0.5);  // 960×540でプレビュー（4倍速）

3. コンポーネントのメモ化

// BAD: フレームごとに重い計算が走る
export const MyScene = () => {
  const frame = useCurrentFrame();
  const complexData = generateComplexData(); // 毎フレーム実行される
  return 
{/* ... */}
;
};

// GOOD: useMemoで計算結果をキャッシュ
export const MyScene = () => {
  const frame = useCurrentFrame();
  const complexData = useMemo(() => generateComplexData(), []); // 1回だけ
  const value = interpolate(frame, [0, 30], [0, 100]);
  return 
{/* ... */}
;
};

4. 画像・動画アセットのprefetch

// 画像を事前にロードしてレンダリング時のI/O待機をなくす
import { Img, staticFile, prefetch } from "remotion";

// Root.tsxでバンドル時にprefetchを宣言
export const RemotionRoot = () => {
  prefetch(staticFile("hero.jpg"));
  prefetch(staticFile("logo.png"));

  return (
    
  );
};

// コンポーネント内ではstaticFileで参照
export const MyComp = () => (
  
);

5. continueOnTimeoutを使って失敗を減らす

# 外部リソース読み込みタイムアウトで失敗するのを防ぐ
npx remotion render MyComp output.mp4 --timeout=30000

6. コーデックとビットレートの最適化

# 用途別の推奨コーデック設定

# YouTube納品（高品質・大きめファイル）
npx remotion render MyComp output.mp4 --codec=h264 --crf=18

# SNS投稿（小さめファイルサイズ）
npx remotion render MyComp output.mp4 --codec=h264 --crf=28

# 編集素材（ロスレス）
npx remotion render MyComp output.mov --codec=prores --prores-profile=4

# アルファチャンネルが必要な場合
npx remotion render MyComp output.webm --codec=vp8

7. calculateMetadataで動的なdurationを最適化

// 動的なデータによって尺が変わる場合、calculateMetadataで事前計算
import { calculateMetadata } from "remotion";

export const calculateVideoMetadata = calculateMetadata<{ items: string[] }>({
  calculateMetadata: async ({ props }) => {
    const durationInFrames = props.items.length * 30; // 1アイテム = 1秒
    return { durationInFrames };
  },
});

8. バンドルサイズの削減

# バンドル解析
npx remotion bundle --log=verbose 2>&1 | grep "KB|MB"

# 不要なライブラリを除外
# remotion.config.tsで設定
import { Config } from "@remotion/cli/config";
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    externals: {
      ...config.externals,
      "some-large-library": "SomeLargeLibrary", // CDNから読む
    },
  };
});

パフォーマンス計測スクリプト

#!/bin/bash
# render_benchmark.sh - 各設定でのレンダリング時間を計測

COMP="MyComp"
OUTPUT_DIR="./benchmark"
mkdir -p $OUTPUT_DIR

for concurrency in 2 4 8 16; do
  echo "=== concurrency=$concurrency ==="
  start=$(date +%s)
  npx remotion render $COMP "$OUTPUT_DIR/output_c${concurrency}.mp4" 
    --concurrency=$concurrency --quiet
  end=$(date +%s)
  echo "Time: $((end - start))秒"
done

まとめ：優先度順チェックリスト

1. –concurrency をCPUコア数に設定（最大効果）
2. 開発中はConfig.setScale(0.5)で解像度を下げる
3. 重い計算をuseMemoでメモ化する
4. 画像アセットをprefetchで事前読み込みする
5. 大量生成はRemotionLambdaに移行する

これらを順番に適用するだけで、ほとんどのケースでレンダリング時間を半分以下に削減できる。

あわせて読みたい

• Remotion完全ガイド
• Remotion×Three.js で3Dアニメーション動画を生成する【Reac…
• Remotion Lambda でAWS並列レンダリング：大量動画を高速生成する…
• RemotionとAfterEffectsの違い・使い分けガイド：Reactエン…
• 動画DX完全ガイド
• AE×Lottie×Web完全ガイド