R RenderComp
EN 購入する
remotion 透過背景 アルファチャンネル コンポジット prores pngシーケンス

Remotionの透過背景エクスポート：ProRes 4444・PNGシーケンス・コンポジット合成

Read in English →

Remotionの透過背景エクスポート：ProRes 4444・PNGシーケンス・コンポジット合成

Remotionの機能の中で最も語られることの少ない強みのひとつが、アルファチャンネル付き透過エクスポートだ。これを活用すると、RemotionでレンダリングしたグラフィックをAdobe Premiere Pro、DaVinci Resolve、Final Cut Proなどのプロ用NLE（ノンリニア編集ソフト）でライブ映像の上にクリーンに合成できる。グリーンスクリーンは不要。手動マスク作業も不要。Reactコンポーネントから直接、透過合成素材が生まれる。

これはブロードキャストグラフィックスのプロが日常的に使うワークフローだ。放送局では数百万円のグラフィックシステムから出力された透過素材が、報道番組のライブ映像に重ねて使われている。Remotionはそのパイプラインをコードで、かつオープンソースで再現する。

Remotionにおける透過の仕組み

透過はコンポジションレベルで機能する。アルファチャンネルに対応したコーデックを指定し、コンポジションの背景が不透明でないことを確認した上でエクスポートすれば、Remotionは各ピクセルのアルファ値を正確に書き出す。これはPNG画像が透過情報を持つ仕組みと本質的に同じで、それをフレームごとに連続して行う。

最も重要な制約は：コンポジション自体が不透明な背景を持っていないこと。ルートコンポーネントでAbsoluteFillにbackgroundColorを指定すると、全フレームがべた塗りになりアルファチャンネルに何も載らない。透過は「レンダリングしない領域」に存在する。

2つのエクスポートパス

パス1：ProRes 4444（アルファチャンネル付き）

ProRes 4444はAppleが映像制作・合成ワークフロー向けに設計したプロコーデックだ。12ビットの色深度と16ビットのアルファチャンネルをサポートし、プロの合成パイプラインにおける標準的な中間フォーマットとなっている。

RemotionからProRes 4444を出力するコマンドは以下のとおりだ。

npx remotion render src/index.ts MyComposition out/overlay.mov \
  --codec prores \
  --prores-profile 4444

プログラムから実行する場合はこう書く。

import { renderMedia, selectComposition } from '@remotion/renderer';

await renderMedia({
  composition: await selectComposition({
    serveUrl: BUNDLE_URL,
    id: 'MyComposition',
  }),
  serveUrl: BUNDLE_URL,
  codec: 'prores',
  proResProfile: '4444',
  outputLocation: './out/overlay.mov',
});

出力は.movファイルになる。ProRes 4444はmacOS上でFinal Cut Pro、Premiere、DaVinci Resolveが追加コーデックなしでネイティブに読み込める。Windows環境ではApple ProRes Codecのインストールが必要となる。

ファイルサイズの目安：1920×1080、30秒のProRes 4444コンポジションは800MB〜2.5GB程度になる。バッチ処理ワークフローではストレージ容量の計画が重要だ。

パス2：PNGシーケンス

PNGシーケンスは各フレームを個別のPNGファイルとしてエクスポートする方式で、32ビットRGBAの完全なアルファチャンネルを持つ。プロ用NLE・合成ソフト・モーショングラフィックスツールを問わず、すべてのプラットフォームでサポートされる最も汎用性の高い透過フォーマットだ。

npx remotion render src/index.ts MyComposition out/frames/ \
  --codec png

プログラム実行版：

await renderMedia({
  composition,
  serveUrl: BUNDLE_URL,
  codec: 'png',
  outputLocation: './out/frames/',
});

出力ファイルはframe000000.png、frame000001.pngという命名形式になる。Premiere、Resolve、After Effectsにイメージシーケンスとして読み込み、フレームレートを指定すると、透過付きの映像クリップとして扱われる。

コンポジションで透過を正しく設定する

AbsoluteFillに背景色を設定しない

透過エクスポートを試みる際に最もよくあるミスは、意図せず不透明な背景を設定してしまうことだ。AbsoluteFillはコンポジション全体に広がるdivを生成するヘルパーだが、backgroundColorを付けると全ピクセルが塗りつぶされる。

誤り（不透明な背景が生成される）：

export const MyOverlay: React.FC = () => (
  <AbsoluteFill style={{ backgroundColor: '#000000' }}>
    <LowerThirdText text="速報" />
  </AbsoluteFill>
);

正解（ルートに背景色なし）：

export const MyOverlay: React.FC = () => (
  <AbsoluteFill>
    {/* ここに配置した要素は透明フィールドの上に存在する */}
    <LowerThirdText text="速報" />
  </AbsoluteFill>
);

アニメーション要素（テキストボックス・シェイプ・アイコン）自体はもちろん背景色やグラデーションを持ってよい。それらは要素レベルの背景であり、コンポジション背景ではない。要素が覆っていない領域が透明になる。

rgba()による半透明要素

Remotion合成の強みのひとつは、各要素がrgba()を使って部分的な透明度を持てることだ。rgba(0, 0, 0, 0.8)の背景を持つLower Third帯は80%の不透明な黒として描画され、その周囲のフィールドは完全透明（不透明度0%）になる。これがライブ映像に重ねると理想的に合成される。

const LowerThirdBar: React.FC<{ text: string }> = ({ text }) => (
  <div style={{
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 120,
    backgroundColor: 'rgba(0, 0, 0, 0.78)',
    borderTop: '4px solid #FF4500',
    display: 'flex',
    alignItems: 'center',
    padding: '0 40px',
  }}>
    <span style={{
      fontSize: 36,
      fontWeight: 700,
      color: '#FFFFFF',
      fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif',
    }}>
      {text}
    </span>
  </div>
);

Premiere Proでのコンポジット手順

ProRes 4444（.mov）の場合：

  1. .movファイルをプロジェクトビンにインポート
  2. 映像タイムラインの上位トラックにドラッグ
  3. Premiereはアルファチャンネルを自動認識する（追加設定不要）
  4. 下のトラックの映像が透明部分から透けて見えることを確認

PNGシーケンスの場合：

  1. インポート → frames/フォルダに移動
  2. 先頭フレーム（frame000000.png）を選択
  3. インポートダイアログで**「イメージシーケンス」**にチェック
  4. フレームレートをコンポジション設定に合わせて指定（通常30fpsまたは25fps）
  5. 正しい尺と透過情報を持つクリップとしてビンに読み込まれる

DaVinci Resolveでのコンポジット手順

編集モード（ProRes 4444）：

  1. .movをメディアプールにインポート
  2. ライブ映像をV1トラックに配置
  3. RemotionオーバーレイをV2以上に配置
  4. ResolveはProRes 4444アルファを自動で読み込む（Alphaマットノード不要）

Fusionコンポジットワークフロー： 複雑な合成（クロマキー・モーショントラッキング・3D統合）が必要な場合は、FusionページでRemotionの透過エクスポートをMediaInノードとして取り込む。バックグラウンド映像とのMergeノードに接続すると、Remotionエクスポートのアルファチャンネルがマスクとして自動的に機能する。ロトスコープや手動キーイング作業は一切不要だ。

Final Cut Proでのコンポジット手順

Final Cut ProはProResをネイティブサポートしており、ProRes 4444のアルファチャンネルを追加手順なしで読み込める。

  1. .movをイベントにインポート
  2. タイムラインで映像クリップの上のストーリーラインに配置
  3. Final CutがアルファチャンネルをRe自動認識してコンポジット

PNGシーケンスをFinal Cutに使う場合は、先にCompressorでProRes 4444 .movに変換するか、シーケンスフォルダを直接インポートする（ファイルが連番形式であればFinal Cutがクリップとして検出する）。

主なユースケース

ライブ映像へのLower Third重ね

インタビュー映像・ライブイベント収録・トーキングヘッド動画に、Remotion生成のLower Thirdを重ねることができる。アニメーション付きの名前カード・肩書き表示・放送スタイルのテロップが、正確な透過情報とともにNLEタイムラインに乗る。

最大の強みはデータドリブンな運用だ。50人のプレゼンター名カードをJSONロスターから一括生成し、全員分を5分で出力できる。手作業は一切ない。

モーショングラフィックスオーバーレイ

キネティックタイポグラフィ・ブランドウォーターマーク・コーナーデコレーター・セクション遷移カードなど、Remotionで制作したすべてのアニメーション素材を透過合成でNLEに持ち込める。一度設計すれば複数のタイムラインで使い回しが効く。

バーチャルセット要素

グリーンスクリーン収録の制作では、Remotionがバーチャルセット要素（デスク面・背景画像・下部パネル）をアルファ付きで生成し、キーイング後の映像に重ねることでスタジオセットを必要とせずに高い制作品質を実現できる。

ProRes 4444 vs PNGシーケンス：選択基準

判断要素ProRes 4444PNGシーケンス
ファイルサイズ大（30秒で800MB〜2.5GB）中（30秒で300〜800MB）
色深度12bit + 16bitアルファ8bit RGBA
NLE互換性macOSネイティブ・WinはCodec要全プラットフォーム対応
レンダリング速度速い遅い（1フレーム1ファイル）
推奨用途放送・プロポスプロ最大互換性・クロスプラットフォーム

macOSのプロ映像制作ワークフローでは、ProRes 4444が第一選択肢だ。クロスプラットフォームが必要な場合やProResコーデックの可用性が保証できない環境ではPNGシーケンスが安全な選択肢となる。

グリーンスクリーン回避策を使わない理由

一部のRemotionユーザーがグリーン背景（#00FF00）を設定してNLEでクロマキー処理する回避策を試みることがある。この方法には明確な問題がある。

カラースピル：グリーンの背景色がアニメーション要素のエッジに滲み、緑色のフリンジが合成後の映像に現れる。色の一致問題：アニメーション内にキーカラーに近い色が含まれると誤って除去される。クオリティ低下：クロマキーは必然的に一定のエッジフリンジを生み出し、知覚品質が下がる。

ProRes 4444またはPNGシーケンスを使えば、透明ピクセルはReactコンポーネントでrgba(0,0,0,0)と指定した場所に数学的に正確に存在する。キーイング工程がないため、フリンジアーティファクトは発生しない。

実用的なLower Thirdテンプレート

以下はアニメーション付きLower Thirdの完全なコンポジション実装例だ。ProRes 4444でエクスポートすれば、任意のNLEタイムラインに即座に使用できる。

import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  spring,
  interpolate,
} from 'remotion';

type LowerThirdProps = {
  name: string;
  title: string;
  accentColor?: string;
};

export const LowerThird: React.FC<LowerThirdProps> = ({
  name,
  title,
  accentColor = '#0080FF',
}) => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();

  const entrance = spring({
    frame,
    fps,
    config: { damping: 16, stiffness: 90, mass: 0.8 },
    durationInFrames: 24,
  });

  const exitOpacity = interpolate(
    frame,
    [durationInFrames - 18, durationInFrames],
    [1, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const translateX = interpolate(entrance, [0, 1], [-500, 0]);
  const titleOpacity = interpolate(frame, [12, 28], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    // AbsoluteFillに背景色を設定しない（透明フィールド）
    <AbsoluteFill>
      <div style={{
        position: 'absolute',
        bottom: 100,
        left: 80,
        transform: `translateX(${translateX}px)`,
        opacity: exitOpacity,
        fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif',
      }}>
        {/* アクセントライン */}
        <div style={{
          width: 4,
          height: '100%',
          backgroundColor: accentColor,
          position: 'absolute',
          left: 0,
          top: 0,
          borderRadius: 2,
        }} />

        {/* コンテンツ */}
        <div style={{
          backgroundColor: 'rgba(0, 0, 0, 0.82)',
          padding: '14px 28px 14px 20px',
          borderRadius: '0 8px 8px 0',
          display: 'flex',
          flexDirection: 'column',
          gap: 4,
          minWidth: 320,
        }}>
          <div style={{ fontSize: 28, fontWeight: 700, color: '#FFFFFF' }}>
            {name}
          </div>
          <div style={{ fontSize: 15, color: accentColor, fontWeight: 500, opacity: titleOpacity }}>
            {title}
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};

RenderCompの透過オーバーレイテンプレート

アルファチャンネルを正しく扱うコンポジションを一から構築するには、半透明レイヤー間のアルファ値の相互作用、グラデーションのプリマルチプライ問題、アニメーション不透明度のクランプ処理など細部の調整に時間がかかる。

RenderComp では、透過エクスポートに特化したRemotionコンポジションのコレクションを提供している。Lower Third、ブロードキャストオーバーレイ、キネティックタイトルカード、コーナーデコレーターを含むすべてのテンプレートがProRes 4444出力向けに設定済みで、Premiere・Resolve・Final Cutでの合成品質を検証済みだ。

FAQ

Q: H.264やH.265で透過エクスポートはできますか？ A: H.264はアルファチャンネルをサポートしていません。H.265（HEVC）にはAppleが対応しているHEVC+Alphaバリアントが存在しますが、2026年時点でRemotionは実装していません。透過エクスポートにはProRes 4444またはPNGシーケンスを使用してください。最終納品がH.264のみという制約がある場合は、NLE上で透過素材を背景映像に合成してから最終的にH.264でエクスポートするワークフローを採用してください。

Q: エクスポートが実際にアルファチャンネルを持っているか確認する方法は？ A: PNGシーケンスの場合、任意のフレームをMac標準のプレビューアプリで開くと、透明領域がチェッカーボードパターンで表示されます。ProRes 4444の場合、macOSのQuickTime Playerで開くと透明部分が灰色のチェッカーボードとして見えます。または、After EffectsやFinal Cut Proで有色ソリッドレイヤーの上に乗せて確認するのが最も確実な方法です。

Q: Remotion Lambdaを使ったクラウドレンダリングでも透過エクスポートは機能しますか？ A: はい。Remotion LambdaはローカルレンダリングとまったくJSONく同じコーデックオプションをサポートしており、proresコーデックと4444プロファイルも使用可能です。出力はS3バケットにアップロードされます。ProRes 4444はファイルサイズが大きいため、大量処理ではS3転送コストとデータ転送量を考慮してください。

Q: ブラー効果を透過背景に適用すると暗いハローが出てしまいます。どう解消しますか？ A: これはプリマルチプライドアルファに起因するアーティファクトです。NLEのインポート設定でアルファチャンネルタイプを「ストレート（マットなし）」に設定することで解決します。DaVinci ResolveではClip Attributes、Premiere ProではFootageを解釈ダイアログで設定できます。また、ブラー効果自体をRemotionコンポーネント内でCSSのfilter: blur()ではなく、要素のbox-shadowやtext-shadowで代替することでこの問題を回避できる場合もあります。

Q: PNGシーケンスのファイル数が数千枚になります。どう管理すればよいですか？ A: 各レンダリング結果を日付+名前のサブディレクトリ（例：out/2026-06-05_lower-thirds/）に格納することを推奨します。確認後は長期保存用にFFmpegを使ってProRes 4444の.movファイルに変換すると、数千ファイルが1つの.movに集約されます（ffmpeg -framerate 30 -i frame%06d.png -c:v prores -profile:v 4444 output.mov）。

Q: 複数の透過レイヤーを独立したファイルとして書き出してNLE上で重ねることはできますか？ A: 可能です。要素ごと（Lower Third帯・テキスト・ロゴバグなど）に別々のRemotionコンポジションを作成し、それぞれを独立した.movとしてエクスポートすることで、NLEのコンポジター側でブレンドモードや重なり順を完全にコントロールできます。複雑なモーショングラフィックスシーケンスで、要素が異なるタイムラインのレイヤーと相互作用する必要がある場合に特に有効です。

販売中

1,000以上のRemotionテンプレートを一括入手

買い切り（一括払い）・サブスクなし・生涯アップデート無料。TypeScript製。

料金プランを見る →