RemotionとLottieの深い比較：プロダクションチームのプラットフォーム選定ガイド
RemotionとLottieの深い比較：プロダクションチームのプラットフォーム選定ガイド
RemotionとLottieの表面的な比較では本質を見誤ります。この2つはそもそも競合するプロダクトではなく、異なる問題を異なるワークフローで解決するツールです。「どちらが優れているか」ではなく、「自分たちのプロダクション課題に対してどちらが適しているか」が正しい問いです。
この選定を誤ると、WebアプリにAfter Effects依存のパイプラインを組み込んでしまったり、単純なUIアニメーションのためにフルビデオパイプラインを構築する羽目になったりします。本記事ではプロダクションチームがプラットフォーム決定を行うために必要な情報を、アーキテクチャ・データ駆動能力・ワークフロー・パフォーマンス・判断基準の観点から体系的に整理します。
Lottieとは何か
LottieはJSONベースのアニメーションフォーマットとランタイムレンダリングライブラリです。Airbnb発のプロジェクトで、ワークフローは以下のとおりです。
- アニメーターがAdobe After Effectsでアニメーションを制作する
- bodymovinプラグイン（現在はLottieFiles Toolkitとも呼ばれる）がAEコンポジションをJSONファイルにエクスポートする
- そのJSONをLottieレンダリングライブラリ（iOS・Android・Web・React Native向けが存在）がランタイムに読み込む
- ライブラリがJSONを解析し、Canvas 2DまたはSVG要素にリアルタイムで描画する
JSONファイルにはすべてのレイヤー、シェイプ、キーフレーム、エクスプレッション、タイミングが格納されます。Web上ではCanvas 2DまたはSVGレンダラーが選択できます。DotLottieフォーマット（.lottie、ZIP圧縮版）はファイルサイズをさらに削減します。
フォーマットが得意なこと：After Effectsアニメーションを軽量でスケーラブルなランタイムアセットに忠実に変換すること。LottieFilesコミュニティには数十万の無料・有料アニメーションが公開されており、エコシステムとして非常に充実しています。
フォーマットができないこと：Lottieにはデータの概念がありません。アニメーションはエクスポート時に定義された固定の視覚的振り付けです。実行時にデータに基づいて内容を変えたい（異なる数値、異なるテキスト、異なる色）場合は、LottieプレイヤーAPIを通じた制御が必要ですが、APIは限定的で複雑なデータ駆動シナリオには向いていません。
Remotionとは何か
Remotionはリアクトコンポーネントを使ってプログラムで動画を作成するフレームワークです。メンタルモデルは「動画の各フレームがReactのレンダリング結果」です。useCurrentFrame()が現在のフレーム番号を返し、コンポーネントはそのフレームの見た目を表すJSXを返します。RemotionのCLIはヘッドレスChromiumですべてのフレームをレンダリングし、FFmpegでMP4に組み立てます。
パイプラインにデザインツールは存在しません。アニメーション全体がコードです。出力は「ブラウザで動くランタイムアニメーション」ではなく「事前レンダリングされたビデオファイル」です。この違いが本質的です。
フレームワークが得意なこと：プログラムにより内容が変わるデータ駆動動画、高品質なスタンドアロン動画出力（MP4・WebM・GIF）、音声と複数ビジュアルレイヤーと動的テキストを組み合わせた複雑なコンポジション。RemotionはReactなのであらゆるJavaScriptロジック（API呼び出し、数値計算、文字列操作）をアニメーションロジックで使えます。
フレームワークができないこと：最小ロード時間でブラウザのランタイムアニメーションを実行すること。LottieのJSONファイルのようにランタイム依存関係としてアセットを配布することはできません。
アーキテクチャの比較
| 観点 | Lottie | Remotion |
|---|---|---|
| 出力形式 | ランタイム（ブラウザ/アプリで再生） | 事前レンダリングビデオ（MP4/WebM/GIF） |
| レンダリングモデル | クライアントデバイスでリアルタイム描画 | ヘッドレスChromium、サーバーサイド |
| アニメーション制作 | Adobe After Effects + bodymovin | ReactコンポーネントとTypeScript |
| データバインディング | 限定的（スロット、カスタムプロパティ） | フルJavaScript — あらゆるデータソース |
| ファイルサイズ | 小さいJSON（10〜200KB程度） | フルビデオファイル（MBからGB） |
| エンドユーザーのCPU負荷 | 中程度（CPU描画） | ゼロ（ビデオデコードのみ） |
| 音声サポート | なし | あり（<Audio>コンポーネント） |
| テキストカスタマイズ | エクスポート後は限定的 | フレームレベルで完全制御 |
| デザイナーフレンドリー度 | 高い（AEワークフロー） | 低い（コードファースト） |
| バージョン管理 | JSON差分（扱いはやや不便） | TypeScript差分（ネイティブ対応） |
| CI/CD統合 | 手動エクスポートステップが必要 | 完全プログラマティックAPI |
| アニメーション単位コスト | 低い（基本は無料、LottieFilesプレミアムは有料） | レンダリングごとのコンピュートコスト |
デザイナーワークフロー vs デベロッパーワークフロー
日常的な実務で最も影響する違いがここです。
LottieのワークフローはデザイナーファーストPです。 アニメーターやモーションデザイナーがAfter Effectsでアニメーションを制作します。イージングカーブ、レイヤーブレンド、マスク、シェイプアニメーションのすべてを制作者が制御します。開発者の役割はJSONファイルをアプリに統合してLottieプレイヤーAPIを公開することです。デザイナーはコードを触らずに反復できます。モーションデザイナーがクリエイティブを担当し開発者が統合を担当するチームには、最適な役割分担です。
Lottieワークフローの摩擦が生じる場面：
- アニメーションが実際のアプリデータに応答する必要がある場合（数値、ユーザー名、進捗率など）
- アニメーションが頻繁に変更され信頼性の高いエクスポート/デプロイパイプラインが必要な場合
- AEソースファイルが失われてJSONファイルのみが残っている場合（JSONはAEで編集不可）
RemotionのワークフローはデベロッパーファーストPです。 デザインツールはありません。アニメーションはTypeScriptコードです。モーションデザイナーが貢献するにはReactを理解するか、モーション仕様をコードに落とし込む開発者と協働する必要があります。JavaScriptで表現できることなら何でも可能ですが、複雑なイージングや有機的なシェイプアニメーションをコードで書くのはAfter Effectsより手間がかかります。
Remotionワークフローの摩擦が生じる場面：
- デザイナーの微妙なタッチが必要なアニメーション（複雑なイージング、重厚なレイヤーブレンド）
- データバリエーションが不要な一回限りのアニメーション（コードセットアップのコストが見合わない）
- React/TypeScriptのスキルがないチーム
データ駆動能力：Remotionが圧倒する領域
マーケティングキャンペーン動画の自動生成、製品カタログビデオ、パーソナライズされたオンボーディング動画、データビジュアライゼーションレポートなど、プログラムで動画コンテンツを量産するプロダクションチームにとって、Remotionのデータ駆動能力はその最大の価値です。
商品50種のSNS広告キャンペーンを考えてみてください。Lottieであれば、1つのJSONアニメーションをエクスポートしてプレイヤーAPIで商品名と画像を入れ替えます。シンプルなテキスト・画像の置換であれば機能します。しかし商品名の長さによってアニメーションのデュレーションを変えたい、特定の商品では別のレイアウトを使いたいとなると、フォーマットの制限と戦うことになります。
Remotionでは同じキャンペーンがこうなります。
export const ProductAd: React.FC<{
productName: string;
productImage: string;
price: string;
accentColor: string;
}> = ({ productName, productImage, price, accentColor }) => {
// アニメーションロジックがproductNameの長さやaccentColorに適応する
};
各バリアントは異なるプロップスのセットです。バッチレンダリングスクリプトが商品JSONを走査し、50本のMP4をシーケンシャルまたはLambdaで並列レンダリングします。デュレーション、レイアウト、タイポグラフィ、カラーすべてがデータに適応します。JavaScriptで表現できることはすべてアニメーションでできます。制限はありません。
ファイルサイズとパフォーマンス
Lottieのファイルサイズは通常10KBから500KB（アニメーションの複雑さによる）。Lottieプレイヤーライブラリ自体は約50〜100KB（minified）。再生時のCPU使用率はアニメーションの複雑さで大きく変わります。シンプルなシェイプアニメーションは軽量ですが、多数のレイヤーを持つ複雑なAEコンポジションはモバイル端末で想定以上のCPUを消費することがあります。
Remotionの出力ファイルサイズはデュレーションと品質設定に依存します。10秒の1080p MP4は内容の複雑さとコーデック設定によって2〜15MB程度。エンドユーザーのブラウザはハードウェアアクセラレートされたデコーダでビデオを再生します。長尺または複雑なアニメーションではCPUベースのLottieレンダリングより効率的です。
Webのユースケースでは、短いアニメーションの初期ロード時間はLottieに軍配が上がります。長尺または複雑なアニメーションの再生パフォーマンスはRemotionのMP4が優位です。
Lottieが適しているケース
Lottieが正解となる場面：
1. UIマイクロインタラクションを作る。ローディングスピナー、ボタンホバー状態、トグルアニメーション、空状態イラスト、完了チェックマーク、オンボーディングガイド — これらすべてがLottieの本来の生息域です。短い、完結している、セッション中に何度も再生される、データによって変わることがない。
2. デザイナーがアニメーションを所有している。モーションデザイナーが日常的にAfter Effectsを使っており、開発者の統合作業がシンプルであれば、Lottieのワークフローは最も効率的な役割分担です。
3. ファイルサイズが重要。モバイルアプリでKBが重要な場面では、30KBのLottie JSONは3MBのMP4より圧倒的に小さい。
4. ReactコンポーネントツリーにインラインでアニメーションをGU必要がある。LottieはDOM要素に直接レンダリングし、Reactのstateに応答できます。MP4は<video>タグが必要で、自動再生ポリシー、コントロール表示、フルスクリーン動作など独自のUX複雑さがあります。
5. LottieFilesのエコシステムで必要なものが揃う。標準的なアイコンアニメーション、空状態イラスト、ローダーがLottieFilesに良い無料素材がある場合、どのツールでもゼロから作るより使うほうが速い。
Remotionが適しているケース
Remotionが正解となる場面：
1. 動画を大量に生成する。数百・数千件のパーソナライズ動画をバッチ処理するのがRemotionの本来の用途です。renderMedia API、calculateMetadata、Remotion Lambdaで完全な自動動画生成システムが構築できます。
2. コンテンツに音声が必要。Lottieには音声サポートがありません。音楽、ボイスオーバー、効果音と同期するアニメーションにはRemotionが必要です。
3. 出力がファイルとして存在する必要がある。YouTube、LinkedIn、TikTok、Instagram、放送局はLottie JSONを受け付けません。これらのプラットフォームへの配信が目的なら、Remotionが正しい出力フォーマットを生成します。
4. アニメーションロジックにフルJavaScriptが必要。複雑なデータビジュアライゼーション、AI生成テキストのタイプライターアニメーション、レンダリング時にフェッチしたリアルタイムデータ、マルチトラック音声ミキシング — これらはRemotionの領域です。
5. チームはReactネイティブでAfter Effectsの専門知識がない。AEライセンスを管理する必要がなく、bodymovinプラグインの更新も不要で、パイプラインにエクスポートステップもありません。
LottieFilesエコシステムについて
LottieFilesはLottieの価値提案を大きく変えるため、別途言及する価値があります。プラットフォームには数十万の無料・有料Lottieアニメーションが揃っており、本番環境でLottieを使うほとんどのチームは、カスタムAE制作より先にマーケットプレイスから素材を探します。
エコシステムの価値は本物です。一般的なUIパターンであれば、LottieFilesに無料の高品質アニメーションがほぼ必ず存在します。これによりLottieは標準パターンを使うチームにとってほぼゼロコストになります。
Remotionにはフィニッシュドアニメーション相当のマーケットプレイスは現時点では存在しません（RenderCompはコードテンプレートライブラリとして構築中）。価値提案が異なります：完成したアセットをダウンロードするのではなく、コードテンプレートから始めてデータに合わせて改変します。
ハイブリッドの活用
最も洗練されたプロダクションチームは同じプロダクトで両方のツールを使います。
- UIマイクロインタラクション（ローディング状態、ボタンアニメーション、トランジション）→ Lottie
- 生成された動画コンテンツ（オンボーディング動画、キャンペーン素材、データレポート）→ Remotion
これらは同じユースケースで競合するツールではなく、異なる出力ターゲットに対する補完的なツールです。ローディングスピナーにRemotionを使うのは過剰です。2分のデータ駆動マーケティング動画にLottieを使うのはアーキテクチャ上の誤りです。
プロダクションチームの判断フレームワーク
特定のプロジェクトに対してどちらを使うか評価する際の判断ツリーです。
出力に音声が必要か？ → Remotion
アニメーションがWebまたはアプリのUI内でユーザーアクションなしに継続的に動作するか？ → Lottie
アニメーションの内容がデータによって変わるか（異なるテキスト、数値、色、アセット）？ → Remotion（Lottieスロットで対応できるシンプルなテキスト・カラー置換は除く）
アニメーションがUIマイクロインタラクション（3秒以内、ループ、音声なし）か？ → Lottie
出力がダウンロード可能・配布可能なビデオファイルである必要があるか？ → Remotion
主な制作者がAfter Effectsを使いこなしているデザイナーか？ → Lottie
異なるデータで50回以上このアニメーションをレンダリングするか？ → Remotion
チームにReact/TypeScript開発者はいるがAfter Effectsユーザーはいないか？ → Remotion
RenderCompのRemotionテンプレート
チームの評価がRemotionに落ち着いた場合、RenderCompはプロダクションレディなテンプレートを提供しています。SNS広告、製品紹介動画、データビジュアライゼーション、ロワーサード、リリックビデオなど主要なユースケースに対応したテンプレートを揃えており、それぞれにinputPropsスキーマとマルチフォーマットコンポジションが組み込まれています。rendercomp.comでラインナップをご確認ください。
よくある質問
Q1: LottieとRemotionを同じプロジェクトで共存させることはできますか？ はい、まったく問題ありません。多くのプロダクションチームが同じコードベースでUIアニメーションにLottie、生成動画コンテンツにRemotionを使っています。出力ターゲットが異なるため干渉しません。
Q2: Remotionコンポジション内でLottieアニメーションを使えますか？ はい。Remotionはブラウザコンテキストでレンダリングするため、Lottie Webプレイヤーをコンポジションに組み込み、フレーム値で制御することができます。既存のLottieアセットをより大きなプログラマティック動画に組み込みたい場合に有用です。
Q3: Lottieは商用利用に費用がかかりますか？ オープンソースのLottieレンダラーはMITライセンスで無料利用可能です。LottieFiles（プラットフォーム）は無料・有料プランがあります。マーケットプレイスの個別有料アニメーションはクリエイターのライセンス条件に従います。
Q4: Riveはこの2つと比べてどう位置づけられますか？ Riveは第3のカテゴリです。ユーザー入力にランタイムで応答できるステートマシンを持つインタラクティブアニメーションフォーマットです。出力形式はLottieに近いランタイム方式ですが、インタラクティビティモデルははるかに高度です。ゲームライクなUI、インタラクティブオンボーディング、ジェスチャーに応答するアニメーションには3つの中でRiveが最適な場合が多いです。
Q5: Framer Motionは同じカテゴリですか？ Framer MotionはUIトランジションとコンポーネントレベルアニメーションのReactアニメーションライブラリです。ビデオ制作ツールではなく、スタンドアロンビデオファイルを生成しません。CSSアニメーションやGSAPと同じカテゴリ（ランタイムUIアニメーション）に属し、Remotionとは別物です。
Q6: LottieアニメーションをRemotionでビデオに変換できますか？
はい。RemotionコンポジションにLottieプレイヤーを組み込み、frame値で制御し、Remotionが各フレームをビデオとしてレンダリングします。ランタイム再生に対応していないプラットフォーム向けにLottieアニメーションをMP4に変換する際の有効なテクニックです。
Q7: 長期的なプラットフォームサポートの観点ではどちらが安心ですか？ どちらも安定しています。Lottieは広く採用された標準フォーマットで、すべてのプラットフォーム向けSDKを持つ大きなエコシステムがあります。Remotionは専任チームが活発に開発しており、2026年時点でエンタープライズ採用が増えています。どちらも廃止リスクを心配する必要はなく、ユースケースに基づいて選んでください。