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

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

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

あなたの「作りたい」を叶えるAdobeの動画ツール

初心者からプロまで。目的に合わせて最適な制作方法が見つかります

1まずは無料で始めるなら Adobe Express

豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。

Adobe Expressを無料で試す

2プロ品質を求めるなら テンプレート活用

「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。

Framed Lower Third無料ダウンロード

Text Messages 3無料ダウンロード

Material Design Intro無料ダウンロード

Static VHS Screen and Text Effects無料ダウンロード

3本格的な編集に挑戦するなら Creative Cloud

テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。

• Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
• After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。

これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。

コンプリートプランを見る

あなたの「作りたい」を叶えるAdobeの動画ツール

1無料で手軽に始める

豊富なテンプレートとAI機能で、SNS投稿やショート動画の作成に最適です。

Adobe Expressを試す

2プロ品質の本格編集へ

Premiere ProやAfter Effectsで、テンプレート活用から本格的な映像制作まで挑戦できます。

3か月半額で始める

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に移行する

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

あなたの「作りたい」を叶えるAdobeの動画ツール

初心者からプロまで。目的に合わせて最適な制作方法が見つかります

1まずは無料で始めるなら Adobe Express

豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。

Adobe Expressを無料で試す

2プロ品質を求めるなら テンプレート活用

「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。

Framed Lower Third無料ダウンロード

Text Messages 3無料ダウンロード

Material Design Intro無料ダウンロード

Static VHS Screen and Text Effects無料ダウンロード

3本格的な編集に挑戦するなら Creative Cloud

テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。

• Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
• After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。

これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。

コンプリートプランを見る

あなたの「作りたい」を叶えるAdobeの動画ツール

1無料で手軽に始める

豊富なテンプレートとAI機能で、SNS投稿やショート動画の作成に最適です。

Adobe Expressを試す

2プロ品質の本格編集へ

Premiere ProやAfter Effectsで、テンプレート活用から本格的な映像制作まで挑戦できます。

3か月半額で始める