R RenderComp
EN 購入する
remotion motion-canvas 比較 プログラマティック動画 typescript

Remotion vs Motion Canvas — コードベース動画制作ツール徹底比較

Read in English →

Remotion vs Motion Canvas — コードベース動画制作ツール徹底比較

タイムラインエディタではなくコードで動画を作りたい。そう考えたとき、候補として必ず名前が挙がるのが Remotion と Motion Canvas の2つです。どちらもTypeScriptファーストで、バージョン管理できるソースコードから決定論的にフレームを描画します。「500個のキーフレームをドラッグするくらいならループを書きたい」という開発者を惹きつける点も共通しています。

しかし表面的な類似とは裏腹に、この2つはまったく異なるメンタルモデルの上に設計されています。そしてどちらが自分のプロジェクトに合うかを決めるのは、機能一覧の比較表よりも、このメンタルモデルの違いです。この記事では、設計思想・開発体験・音声ワークフロー・レンダリングパイプライン・エコシステム・ライセンスを順に比較していきます。

テンプレート駆動のSaaS型レンダリングサービスとの比較を探している方は、Remotion vs Creatomate 比較記事をご覧ください。After EffectsやLottieとの比較はこちらの記事で扱っています。

2つの設計思想 — Reactコンポーネント vs ジェネレーターベースのタイムライン

Remotion — すべてのフレームは「フレーム番号の純関数」

Remotionは動画を「変化する入力が現在のフレーム番号だけのReactアプリケーション」として扱います。useCurrentFrame() でフレーム番号を読み取り、それを視覚プロパティにマッピングします。隠れた再生ヘッドの状態は存在しません。フレーム90は、シークして表示しても、再生で通過しても、サーバーでレンダリングしても、まったく同じ絵になります。

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

export const SlideInTitle: React.FC<{ title: string }> = ({ title }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, fps], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });
  const translateY = interpolate(frame, [0, fps], [40, 0], {
    extrapolateRight: 'clamp',
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        background: '#0a0a0a',
      }}
    >
      <h1
        style={{
          fontFamily: '-apple-system, "Segoe UI", Roboto, sans-serif',
          fontSize: 96,
          fontWeight: 800,
          color: '#ffffff',
          opacity,
          transform: `translateY(${translateY}px)`,
        }}
      >
        {title}
      </h1>
    </AbsoluteFill>
  );
};

これは宣言的なモデルです。「時間の関数としてフレームがどう見えるか」を記述し、アニメーションの状態は蓄積されず、毎フレームゼロから再計算されます。この性質こそが、Remotionを複数サーバーへ安全に並列化できる理由です。どのマシンでも、フレーム0〜3,999を経由せずにいきなりフレーム4,000をレンダリングできます。

Motion Canvas — アニメーションは「前に進むプログラム」

Motion Canvasはアニメーションをジェネレーター関数として記述します。yield* のひとつひとつがタイムラインを進めます。「このプロパティを1秒かけてトゥイーンし、次に待機し、次に2つのトゥイーンを並行実行する」——コードが絵コンテのように上から下へ読めます。

import { makeScene2D, Rect } from '@motion-canvas/2d';
import { all, createRef, waitFor } from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  const box = createRef<Rect>();

  view.add(<Rect ref={box} width={240} height={240} fill={'#0B84FF'} radius={16} />);

  yield* box().position.x(300, 1);       // xを1秒かけて300へトゥイーン
  yield* all(
    box().rotation(90, 0.6),             // この2つは並行実行される
    box().scale(1.4, 0.6),
  );
  yield* waitFor(0.5);                    // 0.5秒待機
});

これは命令的フローのモデルです。プログラムの実行に伴って時間が経過します。順序は文の並びで暗黙的に決まり、並行実行は all() で明示します。注意すべき点として、Motion Canvasはシーングラフの構築にJSX構文を使いますが、Reactではありません。Rect や Txt、Layout といったコンポーネントは、リアクティブなシグナルベースのプロパティを持つMotion Canvas独自のノード型であり、Reactコンポーネントではありません。

どちらのモデルが客観的に優れている、ということはありません。ジェネレーター型は、ナレーションに沿って直線的に進むシーケンスでは驚くほど読みやすい。一方React型は、出力をデータから計算する場面——props配列のループ、条件分岐するシーン、レンダリングごとに構造が変わるレイアウト——で強さを発揮します。

開発体験 — JSX宣言型 vs 命令的フローAPI

Remotion

npx create-video@latest でプロジェクトを雛形生成し、npx remotion studio でブラウザベースのStudioが開きます。タイムラインのシーク、propsのライブ編集、コード変更のホットリロードが揃っています。すでにReactを書いているチームなら、新しく学ぶことはわずかなフック（useCurrentFrame・useVideoConfig）とコンポーネント（AbsoluteFill・Sequence）だけです。

時間配置は <Sequence> で行い、物理演算ベースのモーションには spring() を使います。

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

const PopInLabel: React.FC<{ label: string }> = ({ label }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const scale = spring({
    frame,
    fps,
    config: { mass: 0.6, stiffness: 180, damping: 14 },
  });

  return (
    <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
      <h2
        style={{
          fontFamily: '-apple-system, "Segoe UI", Roboto, sans-serif',
          fontSize: 72,
          fontWeight: 800,
          color: '#ffffff',
          transform: `scale(${scale})`,
        }}
      >
        {label}
      </h2>
    </AbsoluteFill>
  );
};

export const ThreeScenes: React.FC = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ background: '#111' }}>
      <Sequence durationInFrames={2 * fps}>
        <PopInLabel label="シーン 1" />
      </Sequence>
      <Sequence from={2 * fps} durationInFrames={2 * fps}>
        <PopInLabel label="シーン 2" />
      </Sequence>
      <Sequence from={4 * fps}>
        <PopInLabel label="シーン 3" />
      </Sequence>
    </AbsoluteFill>
  );
};

useCurrentFrame() は各 <Sequence> の内部でゼロにリセットされるため、同じコンポーネントがどのシーンでも新規にアニメーションします。「時間配置はラッパーで、アニメーションは子で」というこのコンポーザビリティがRemotionのエルゴノミクスの核心です（<Sequence> の詳しい使い方はSequenceタイミング解説記事にまとめています）。

摩擦になる点も挙げておきます。秒ではなくフレームで考える必要があること（fps を掛ける）、CSSのtransition/animationはタイムラインを追従しないため使えないこと、そしてスタガー（時間差）配置にはMotion Canvasなら yield* を並べるだけで済むところを計算式が必要になることです。

Motion Canvas

Motion Canvasはライブラリと一緒にWebベースのエディタを同梱しています。再生コントロール付きのタイムライン、レンダリングプレビュー、そして最大の特徴であるタイムイベント——ジェネレーターコード内の名前付きマーカーで、その長さをソースコードに触れずにエディタUI上でドラッグ調整できます。「アニメーションをナレーションの拍にぴったり合わせる」作業が、再コンパイルの往復ではなく視覚的な操作になります。

状態管理はシグナルで行います。ノードが購読するリアクティブな値で、シグナルを変更すると派生するすべてのプロパティが更新されます。ReactというよりSolidJSに近い、エレガントなシステムです。

代償もあります。ノードセットはMotion Canvas独自のもので、任意のReactコンポーネントやチャートライブラリを投げ込むことはできません。描画面はDOM/CSSエンジン全体ではなくHTML canvasです。Reactエコシステムの知識は概念としては活きますが、そのままは持ち込めません。

音声・ナレーション・同期のサポート比較

Remotion

Remotionでは音声はタイムラインの一級市民です。現行の <Audio> コンポーネントは @remotion/media パッケージにあり、映像と同じ <Sequence> プリミティブで配置します。つまり字幕・ナレーション・アニメーションがひとつのタイミングモデルを共有します。

import { AbsoluteFill, Sequence, staticFile, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { Audio } from '@remotion/media';

const CAPTIONS = [
  { text: 'まずパッケージをインストールします。', fromSeconds: 0.4, durationSeconds: 2.2 },
  { text: '次にコンポーネントをインポートします。', fromSeconds: 2.8, durationSeconds: 2.4 },
  { text: 'そして最初の動画をレンダリングします。', fromSeconds: 5.4, durationSeconds: 2.6 },
];

export const NarratedIntro: React.FC = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ background: '#0a0a0a' }}>
      <Audio
        src={staticFile('voiceover.mp3')}
        volume={(f) => interpolate(f, [0, 15], [0, 1], { extrapolateRight: 'clamp' })}
      />
      {CAPTIONS.map((caption) => (
        <Sequence
          key={caption.text}
          from={Math.round(caption.fromSeconds * fps)}
          durationInFrames={Math.round(caption.durationSeconds * fps)}
        >
          <Caption text={caption.text} />
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

const Caption: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 8], [0, 1], { extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill style={{ justifyContent: 'flex-end', alignItems: 'center', paddingBottom: 120 }}>
      <p
        style={{
          fontFamily: '"Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif',
          fontSize: 48,
          fontWeight: 700,
          color: '#fff',
          opacity,
        }}
      >
        {text}
      </p>
    </AbsoluteFill>
  );
};

字幕タイミングがただのデータである点が重要です。文字起こしAPI、TTSサービスの単語タイムスタンプ、動画ごとのJSONファイル——どこから来てもかまいません。複数トラック（ナレーション・BGM・効果音）は複数の <Audio> 要素として共存し、フレーム精度のボリュームオートメーションが書けます。API全体の詳細はAudioコンポーネント完全ガイドを参照してください。

Motion Canvas

Motion Canvasはエディタ中心のアプローチを取ります。プロジェクトに音声トラックを添付すると、エディタが波形をタイムラインに直接表示します。タイムイベントと組み合わせると、卓越した手動同期ワークフローが生まれます。ナレーションのピークが見え、マーカーをドラッグすれば、アニメーションが拍に着地する。録音済みの音声に対して人間がペーシングを追い込むナレーション付き解説動画なら、このループはコード上でフレーム番号を編集するより明確に速いです。

裏返しはプログラマティックな音声処理です。文字起こしデータから字幕タイミングを駆動する、マルチトラックのミックスをコードで組み立てる、それぞれ異なるナレーションファイルを持つ動画を1,000本生成する——こうしたワークフローはMotion Canvasのエディタファーストなモデルの守備範囲外です。音声タイミングが「耳」ではなく「データ」として届くなら、Remotionのモデルのほうが適合します。

レンダリングとエクスポート — サーバーレンダリング・Lambda・ブラウザ書き出し

ここが両ツールの最も鋭い実務上の違いです。

Remotionはサーバーサイドレンダリングを主要ユースケースとして設計されています。

  • CLI / Node.js — npx remotion render または @remotion/renderer APIで、CIを含む任意のマシンでレンダリングできます。「デプロイごとにレンダリング」「APIリクエストごとにレンダリング」といった自動パイプラインが素直に組めます。
  • 分散クラウドレンダリング — @remotion/lambda は1本のレンダリングを多数のAWS Lambda関数に分割して並行実行し、結果を結合します。数分の処理が数秒になります。@remotion/cloudrun はGoogle Cloudで同じモデルを提供します。セットアップ手順はLambdaクラウドレンダリングガイドにまとめています。
  • レンダリングなしのブラウザ内再生 — @remotion/player はコンポジションをReactアプリ内でライブ再生されるコンポーネントとして埋め込めます。レンダリング前のプレビューに便利です（詳細はPlayer埋め込みガイド）。

Motion Canvasのレンダリングはブラウザベースのエディタを経由します。プロジェクトを開き、レンダーボタンを押し、画像シーケンスまたは動画（エンコードはFFmpegエクスポーター）を書き出す流れです。動画を1本ずつ作る個人制作——このツールのホームグラウンド——なら、これで十分に実用的です。しかし、ヘッドレスで無人のサーバーレンダリングは第一級のドキュメント化されたワークフローではなく、必要とするチームはブラウザ自動化やコミュニティツールに頼ることになります。要件に「MP4を返すAPIエンドポイント」が含まれるなら、この違いだけで比較の決着がつくことがほとんどです。

エコシステム — テンプレート・パッケージ・コミュニティ規模

Remotionのエコシステムのほうが大幅に大きいです。公式パッケージだけでもトランジション（@remotion/transitions）、シェイプ、ノイズ、GIF、Lottie、Three.js / React Three Fiber、メディアパース、字幕、そしてLambda / Cloud Runレンダラーまでカバーしています。さらに、Remotionのフレームは本物のブラウザエンジンが描画する本物のDOMなので、チャートライブラリ・SVGツール・レイアウトシステムなど、Reactエコシステムのほぼすべてがコンポジション内で動きます。オープンソースのスターターから本番品質の商用ライブラリまで、テンプレートの選択肢も成熟しています。

Motion Canvasのコミュニティは小規模ながら熱心です。コアの @motion-canvas/2d パッケージはシェイプ・テキスト・レイアウト・画像・動画ノード・コードハイライトコンポーネントをカバーしており、特にアニメーションするコードブロックはプログラミング解説動画において最高峰と言える完成度です。一方、サードパーティのパッケージやテンプレートははるかに少なく、ノードシステムが独自であるため、汎用JavaScriptライブラリとの統合はコンポーネントレベルではなくデータレベルにとどまります。

「自分の問題を誰かがすでに踏んでいるか」でリスクを測るチームにとって、Remotionのコミュニティ規模と本番実績の長さは実質的なアドバンテージです。

ライセンスと商用利用の違い

両者のライセンスモデルは構造的に異なります。コミットする前に理解しておくべきポイントです。

  • Motion Canvas は MITライセンスです。商用を含むあらゆる用途で自由に使え、企業規模による条件はありません。
  • Remotion は標準的なOSSライセンスではなく、独自のRemotionライセンスによるソースアベイラブルです。個人と一定規模までの企業は無償で使えますが、ライセンスに定める基準を超える企業にはカンパニーライセンスが必要です。正確な条件は remotion.dev/license が唯一の正本です。二次情報の要約に頼らず必ず原文を確認してください。なお、カンパニーライセンスは公式パッケージエコシステム全体をカバーします。

どちらのモデルもプロジェクトの途中で驚くべきことではありません。パイプラインを組んでからではなく、組む前に自組織がどこに該当するかを確認しておきましょう。

プロジェクトタイプ別の選び方

プロジェクトタイプ向いているツール理由
手作業で作るナレーション付き解説・教育動画Motion Canvasタイムライン内波形での同期、タイムイベント、絵コンテ的なジェネレーターフロー
アニメーションするコード付きのプログラミング解説動画Motion Canvas専用設計のコードアニメーションコンポーネント
デザインシステムに基づく製品・マーケティング動画RemotionCSSとReactコンポーネントの完全な再利用、ブランドトークンをpropsとして注入
データ駆動の動画（チャート・ダッシュボード・レポート）Remotionレイアウトをデータから計算、Reactのチャートパターンをそのまま活用
大規模な自動生成（ユーザー別・商品別の動画）Remotionサーバーレンダリング、Lambda並列化、props-as-API
Webアプリに埋め込むライブプレビュー付き動画Remotion@remotion/player でコンポジションをReactに直接埋め込み
週1本ペースの個人制作、パイプライン不要どちらでも書いていて楽しいメンタルモデルで選ぶ

この表の背後にあるパターンはこうです——Motion Canvasは「人間が1本の動画を対話的に作り込む」ことに最適化され、Remotionは「システムが動画をプログラマティックに生産する」ことに最適化されています。 どちらも本来の領域の外へ引き伸ばせますが、ツールの重心から離れるほどワークアラウンドが積み上がっていきます。

よくある質問（FAQ）

Q: Motion CanvasはReact製ですか？

いいえ。シーングラフの構築にJSX構文を使いますが、ランタイムはMotion Canvas独自のノードとシグナルのシステムであり、Reactではありません。Reactのコンポーネント・フック・ライブラリはMotion Canvasのシーン内では動作しません。

Q: Motion CanvasはサーバーやAPIから動画をレンダリングできますか？

第一級のワークフローとしては提供されていません。レンダリングはブラウザベースのエディタを通じて行い、動画エンコードはFFmpegエクスポーターが担当します。無人のサーバーサイドレンダリングにはコミュニティツールかブラウザ自動化が必要です。RemotionはCLI・Node.js API・Lambda / Cloud Runパッケージによるサーバーレンダリングをネイティブにサポートしています。

Q: 学習が簡単なのはどちらですか？

すでにReactを知っているならRemotionです。概念がほぼ一対一で持ち越せます。Reactもジェネレーターもよく知らない場合は、コードがアニメーションの再生順そのままに実行されるMotion Canvasの直線的な yield* フローのほうが、アニメーションロジックへの入門としては優しいと言えます。

Q: Motion Canvasは商用プロジェクトで無料ですか？

はい。MITライセンスで、企業規模に紐づく制約はありません。Remotionは個人と一定規模までの企業は無償で、remotion.dev/license に定める基準を超える場合はカンパニーライセンスが必要です。

Q: 一方からもう一方へプロジェクトを移行できますか？

作り直しになります。概念の対応関係はあります——Motion Canvasのトゥイーンは useCurrentFrame() に対する interpolate() や spring() に、連続する yield* ブロックは <Sequence> のオフセットにマッピングできます——が、自動変換ツールは存在せず、シーングラフAPIには互換性がありません。

Q: どちらも決定論的にレンダリングされますか？

はい。どちらもソースコードからフレームを再計算するため、同じコードは同じ動画を生成します。Remotionのより厳格な関数型モデル（フレームはフレーム番号の純関数）は、それに加えて1本のレンダリングを多数のマシンに分割することを可能にしています。

まとめ

RemotionとMotion Canvasはどちらも優れたツールであり、第一印象ほど直接の競合ではありません。

  • Motion Canvasは職人の道具です。ジェネレーターベースのタイムライン、波形同期とドラッグ可能なタイムイベントを備えたエディタ、MITライセンス。手作業で作り込むナレーション付き解説動画に理想的です。
  • Remotionはエンジニアリングプラットフォームです。useCurrentFrame() で駆動するReactコンポーネント、データ駆動レイアウト、第一級のサーバー / Lambdaレンダリング、そしてReactができることをすべて継承するエコシステム。

人間が動画を作るならMotion Canvasを。システムが動画を作るならRemotionを。

Remotionで作るなら、白紙から始める必要はありません。

RenderComp では、本番投入可能なRemotionテンプレートのライブラリを公開しています。イントロ、ローワーサード、データビジュアライゼーション、SNSフォーマット、製品ショーケース——すべて型付きpropsを備えた編集可能なTypeScriptソースとして提供され、そのままレンダリングパイプラインに組み込めます。

販売中

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

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

料金プランを見る →

関連記事

Remotion vs Manim — 数学・科学解説動画にはどちらを使うべきか

Remotion無料テンプレートの探し方・見極め方——オープンソースの活用限界と有料テンプレートへの移行判断

Remotion TypeScript セットアップ完全ガイド（2026年版）