--- title: "RiveとLottieの違いを比較｜料金・ランタイムサイズ・Unity対応・相互変換で選ぶ【2026年10月】" url: "https://www.issoh.co.jp/tech/details/4461/" published: 2024-12-10 updated: 2026-10-16 categories: ["プラットフォーム"] publisher: "株式会社一創" --- # RiveとLottieの違いを比較｜料金・ランタイムサイズ・Unity対応・相互変換で選ぶ【2026年10月】 RiveとLottieは、どちらもWebやアプリにベクターアニメーションを組み込むための仕組みです。Lottieは「After Effectsなどで作った動きを再生する」形式として広く普及し、Riveは「ユーザー操作やアプリのデータに反応する動き」をエディタ1つで作り込む道具として伸びてきました。2025年秋以降は、Lottie側がLottie Creatorでステートマシンを作れるようになり、Rive側は書き出しの有料化と入力APIの世代交代を進めたため、数年前の比較記事の結論はそのまま使えません。本記事では2026年10月16日時点の公式ドキュメント・料金ページ・npmレジストリをもとに、料金、ランタイムの配布サイズ（実測）、インタラクティブ性、Unity対応、相互変換の可否を並べ、用途別にどちらを選ぶかを示します。 ## まとめ：RiveとLottieの選び方 結論は、**決まった動きを再生するならLottie、状態やデータで動きを切り替えるならRive**です。ただし判断を左右する条件が2025年以降に変わっています。 - **料金**：Lottieは公開されたアニメーション形式で、lottie-webやdotlottie-webのプレイヤーはMITライセンスで無料。Riveもランタイムは無料（MIT）だが、無料プランの書き出しファイルはRiveのスプラッシュ画面が再生される。消すにはCadet（年払いで月9ドル／月払いで月17ドル）以上が要る。 - **Webの初期ロード**：`.riv`ファイル自体は小さくても、Webランタイムは重い。実測では`@rive-app/canvas`がgzip後で約0.98MB、`lottie-web`の軽量版は約46KB。アニメーションが1〜2個だけのページならLottieのほうが軽く済む。 - **インタラクティブ性**：dotLottieもステートマシンを持てるようになったが、Webプレイヤーの該当APIは型定義で`@experimental`のまま。データバインディングまで含めた作り込みはRiveが先行している。 - **Unity**：Riveは公式ランタイムをUnity Asset Storeで配布している。LottieFilesの公式プレイヤーにUnity向けは無く、有志実装に頼ることになる。 - **移行**：Lottie→RiveのインポートはEnterprise限定になった。Rive→LottieはLottieFilesの変換ツールで再生部分だけ移せる。どちらの方向も、インタラクションは作り直しが前提。 ## RiveとLottieの成り立ちとファイル形式 両者はどちらもベクターベースで、動画やGIFより解像度に左右されにくい点は共通しています。違うのは、アニメーションを「どこで作り、何に書き出し、どう動かすか」です。 ### Lottie：After Effects書き出しのJSONとdotLottie Lottieの起点は、Hernan Torrisi氏が2015年に作ったAfter Effects用の書き出しプラグイン「Bodymovin」とWebプレイヤーです。Airbnbが[iOS・Android向けプレイヤーを加えてLottieとして公開](https://rive.app/blog/founder-of-lottie-hernan-torrisi-joins-rive)しました。中身は人が読めるJSON（`.json`）で、LottieFilesが策定した`.lottie`（dotLottie）はJSONと画像などのアセットをZIPでまとめたパッケージです。dotLottieは[ステートマシンをファイル内のs/ディレクトリにJSONで持てる](https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/state-machines)ため、対話の定義も1ファイルで運べます。作成ツールはAfter Effects＋Bodymovinのほか、ブラウザで動くLottie Creatorがあります。形式の標準化も進んでおり、Linux Foundation傘下のLottie Animation Communityが[2024年9月17日にLottie JSONの仕様1.0を公開](https://www.linuxfoundation.org/press/lottie-animation-community-announces-lottie-v1.0-specification)しました。 ### Rive：エディタ一体のバイナリ形式.riv Riveはデザイン・アニメーション・ステートマシン・データバインディングをRive Editorの中で組み、バイナリの`.riv`に書き出します。Web・iOS・Android・Flutter・React Native・Unity・Unrealなどのランタイムは、共通のC++ランタイムを土台にしており、MITライセンスで公開されています。なお、2023年10月にはLottieの生みの親であるTorrisi氏がRiveに参加しています。 ## RiveとLottieの比較表（2026年10月時点） | 項目 | Lottie | Rive | | ------------ | -------------------------------------- | ------------------------ | | 制作ツール | After Effects＋Bodymovin／Lottie Creator | Rive Editor | | ファイル形式 | .json／.lottie（ZIP） | .riv（バイナリ） | | プレイヤーのライセンス | MIT | MIT | | 制作側の料金 | AE等の費用。LottieFilesは有料プランあり | 無料〜。スプラッシュなし書き出しは有料 | | 対話の仕組み | dotLottieステートマシン | ステートマシン＋データバインディング | | Web版の最新 | lottie-web 5.13.0／dotlottie-web 0.81.0 | @rive-app/canvas 2.44.2 | | npm週間DL数 | lottie-web 約792万 | @rive-app/canvas 約126万 | | Unity公式ランタイム | なし | あり（Asset Store） | | 相手形式の取り込み | .rivを取り込み可 | LottieインポートはEnterprise限定 | 週間ダウンロード数は[npmのダウンロード統計API](https://api.npmjs.org/downloads/point/last-week/lottie-web)で2026年10月6日〜12日の1週間を取得した値です。`lottie-web`は`@rive-app/canvas`の6倍以上ですが、これは2つのパッケージの比で、モバイルやゲームエンジンを含む製品全体の採用規模を示すものではありません。「lottie-webは週約30万」とする比較記事もありますが、実測とは桁が違います。 ## Riveの料金プランと無料でできる範囲 「rive 料金」で調べる人がまず確認すべきなのは、2025年10月20日の改定です。Riveは[CEOのGuido Rosso氏の告知](https://rive.app/blog/rive-s-new-9-mo-plan)で「Editorは無料のまま、書き出しは有料プランへ移す」とし、月9ドル（年払い）のCadetを新設しました。同じ告知で、ランタイムはMITのまま、ランタイム料金は取らず、書き出したファイルはずっと動き続けると明言しています。 2026年10月16日時点の[料金ページ](https://rive.app/pricing)では、無料プランでも`.riv`を書き出せますが、そのファイルはRiveのスプラッシュ画面を再生します。製品にRiveのスプラッシュを表示したくない場合は、Cadet以上が必要です。ただしRiveのドキュメントの一部ページは今も「書き出しは有料プラン」と書いているため、契約前に料金ページの表記を確認してください。 | プラン | 料金ページ（1席・月） | 月払い（1席） | 主な条件 | | ---------- | ----------- | --------- | ----------------------- | | Free | 0ドル | 0ドル | スプラッシュ付き書き出し・共同編集3ファイル | | Cadet | 9ドル | 17ドル | スプラッシュなし・ファイル無制限・最大3席 | | Voyager | 32ドル | 39ドル | Libraries・埋め込みURL・最大25席 | | Enterprise | 120ドル | なし（年払いのみ） | 年商1,000万ドル以上・SSO・SOC2 | 料金ページの金額は年払いを前提にした1席あたりの月額で、月払いの列は[Riveの料金ドキュメント](https://rive.app/docs/account-admin/pricing)の値です。ドキュメントの年額はCadetが108ドル（月9ドル相当）、Enterpriseが1,440ドル（月120ドル相当）で料金ページと一致しますが、Voyagerは年304ドル（月約25ドル相当）とされ、料金ページの32ドルと食い違っています。Voyagerを年払いで契約するときは決済画面の金額を確かめてください。表から読み取れる注意点は次の3つです。 - **Cadetは3席まで**：4人以上で同じワークスペースを使うとVoyagerになる。 - **Lottieインポートは最上位だけ**：Lottie資産をRiveへ取り込む機能はEnterprise向けで、既存のVoyager利用者だけが継続して使える。 - **学生プランは別枠**：有効な学生メールなどで申請する割引プランがあるが、商用利用とチームでの共同作業は対象外。学校や非営利団体はCadetかVoyagerを使う。 ### Lottieの料金：形式とプレイヤーは無料、LottieFilesのサービスは有料 Lottie側でお金がかかるのは制作環境です。`lottie-web`も`@lottiefiles/dotlottie-web`もMITライセンスで、再生に費用はかかりません。After Effectsで作るならAdobeの契約が必要で、LottieFilesのホスティング・Lottie Creator・素材ライブラリなどを使うなら[LottieFilesの有料プラン](https://lottiefiles.com/pricing)（年払いでIndividualが1ユーザー月19.99ドル、Teamが24.99ドル）などから選びます。商用案件では、[公式のプラン選択ガイド](https://help.lottiefiles.com/choosing-the-right-plan-for-you)がIndividualを非商用向けとしているため、Team以上の条件を確認してください。LottieもRiveもランタイムによる再生自体は無料で、費用の違いは制作ツールや書き出し条件、ホスティングなどにあります。 ## Webランタイムの配布サイズを実測（npm・2026年10月16日） 「Riveのほうが軽い」という評価はたいてい`.riv`ファイルの小ささを指し、Webで読み込むランタイム本体の重さは別の話です。npmから各パッケージの最新版を`npm pack`で取得し、表に示した配布ファイルの生サイズと`gzip -9`後のサイズを測りました。単位は1KB＝1,000バイトで、アニメーション素材やビルド後の変更分は含みません。 | パッケージ（版） | 主なファイル | 生サイズ | gzip後 | | ---------------------------- | --------------------------- | ------------- | ----------- | | lottie-web 5.13.0 | lottie.min.js | 306KB | 76KB | | lottie-web 5.13.0 | lottie\_light.min.js（SVGのみ） | 168KB | 46KB | | dotlottie-web 0.81.0 | index.js＋wasm | 165KB＋1,238KB | 33KB＋496KB | | @rive-app/canvas 2.44.2 | rive.js＋rive.wasm | 570KB＋2,057KB | 125KB＋849KB | | @rive-app/canvas-lite 2.44.2 | rive.js＋rive.wasm | 490KB＋772KB | 109KB＋314KB | | @rive-app/webgl2 2.44.2 | rive.js＋rive.wasm | 559KB＋2,179KB | 121KB＋902KB | gzip後の合計で比べると、`lottie-web`の軽量版が約46KB、dotLottieのWebプレイヤーが約529KB、Riveの標準パッケージが約974KBです。CDNの圧縮方式（Brotliなど）やキャッシュで実際の転送量は変わりますが、桁の関係は動きません。「Riveのwasmは約200KB、dotLottieは約50KB」とする比較記事もありますが、現行版の実測とは4〜10倍ずれています。 - **アニメーション1〜2個のLP・ブログ**：再生だけなら`lottie-web`の軽量版が最も軽い。Riveのランタイム約1MBは、`.riv`が数十KB小さいことでは取り返せない。 - **テキストと音声を使わないRive**：`@rive-app/canvas-lite`は同じAPIで約423KBまで下がる。READMEによると、lite版はRiveのテキストを描画せず、音声も再生しない（ファイルにテキストが含まれていてもエラーにはならない）。 - **画面全体を多数のアニメーションで作るアプリ**：ランタイムは1回読めば共有できるため、2個目以降の差は素材の合計サイズと描画性能で決まる。同じ素材を両形式で用意し、対象端末で比べて選ぶ。 ### アニメーションファイルのサイズ：ベンダー比較の条件差 ファイル単体のサイズは、作り方で大きく変わります。Riveは[Lottieをインポートしたファイルが267KB、同じ見た目をRiveのボーンとステートマシンで作り直すと16KB](https://rive.app/blog/why-importing-lotties-isn-t-the-workflow-rive-was-built-for)だった例を挙げています。一方でLottieFilesは[dotLottieは元のJSONより最大80%小さく、.rivとの差は実用上ほぼ問題にならない](https://lottiefiles.com/blog/lottie-animations/lottiefiles-or-rive)と主張しています。どちらも自社に有利な例なので、採用前に自分の素材を両方の形式で書き出して比べるのが確実です。 ## インタラクティブ性：Riveのデータバインディングと dotLottie のステートマシン 「Lottieは再生専用」という説明は、もう当てはまりません。dotLottieプレイヤーは[2023年9月の2.4.0でステートマシンに対応](https://lottiefiles.com/blog/working-with-lottie-animations/dotlottie-v2-4-0-state-machine-support)し、2025年9月23日にはLottie Creatorの中でステートマシンを作れるようになりました。dotLottieのステートマシンは、状態（`PlaybackState`など）、遷移とガード条件、ポインター操作などのインタラクション、入力（Numeric・String・Boolean・Event）を`.lottie`の中に定義し、プレイヤーがそれを解釈します。[対応に必要な版](https://docs.lottiefiles.com/en/format/dotlottie/interactivity)はWebの`@lottiefiles/dotlottie-web`が0.30.0以上、Reactの`dotlottie-react`が0.8.0以上、iOS・Androidのプレイヤーが0.3.0以上です。 ただし成熟度には差があります。LottieFilesの[機能一覧](https://docs.lottiefiles.com/en/runtimes/overview/features)には「ステートマシン対応は開発初期段階で、機能とAPIはプラットフォームごとに異なる場合がある」と書かれており、`@lottiefiles/dotlottie-web` 0.81.0の型定義でも`stateMachineLoad`などのメソッドに`@experimental`が付いています。Riveの[2025年12月4日のブログ](https://rive.app/blog/why-importing-lotties-isn-t-the-workflow-rive-was-built-for)も、dotLottieのステートマシン対応を認めたうえで、Lottieは「再生ファイルに後からロジックを足す」、Riveは「アニメーションの中にロジックを組み込む」と対比しています。 Rive側では入力APIが世代交代しています。`@rive-app/canvas` 2.44.2の型定義では、従来のステートマシン入力（`stateMachineInputs`）に「将来のメジャー版で削除するのでデータバインディングを使うこと」という`@deprecated`注記が付いています。いまRiveで新しく作るなら、ボタンの状態や数値はView Modelのプロパティとしてエディタで定義し、コードからは`viewModelInstance`経由で値を書き換えます。数年前の記事にある`stateMachineInputs()`のコード例は、動いても非推奨の書き方です。 ## UnityでのRiveとLottie 「lottie unity」「rive unity」で調べると突き当たるのが、Unity対応の非対称です。 ### Rive：公式ランタイムをAsset Storeで配布 Riveは[2026年1月15日にUnityランタイムをUnity Asset Storeで配布開始](https://rive.app/blog/rive-for-unity-updated-and-in-the-unity-asset-store)し、レスポンシブレイアウト、データバインディング、仮想化スクロール、ベクターとラスターの両対応を加えました。[公式ドキュメント](https://rive.app/docs/game-runtimes/unity/unity)によると、対応するのはUnity 2021以降のLTS（Unity 6を含む）で、描画はWebGL、Mac・iOSのMetal、WindowsのD3D11・D3D12・OpenGL・Vulkan、AndroidのOpenGL・Vulkan、Ubuntu 24.04以降（x86\_64）のVulkanに対応しています。家庭用ゲーム機は「予定」の段階です。 注意したいのは版の位置づけです。GitHubの`rive-unity`は最新が[v0.5.1（2026年9月17日）](https://github.com/rive-app/rive-unity/releases)と1.0前で、READMEには今も「Mac・Windows版Unity向けのtechnical preview」という一文が残っています。ブログは「production-ready」とうたっていますが、コンソールを含む案件や長期運用では、対象プラットフォームで事前に動作を確かめてください。ゲーム内UIをRiveで組む案件の進め方は、[ゲームアプリ開発の支援内容](https://www.issoh.co.jp/service/apps/game/)でも紹介しています。 ### LottieのUnity対応：公式配布の有無と有志実装 [LottieFilesの公式ランタイム一覧](https://lottiefiles.com/runtimes)はWeb・React・Vue・Svelte・React Native・Flutter・iOS・Androidで、Unity向けはありません。Unityで動かすなら、rlottieを使う[gilzoide/unity-lottie-player](https://github.com/gilzoide/unity-lottie-player)のような有志実装になります。同リポジトリは2026年10月16日時点でスター61、最終更新は2025年12月で、対応範囲や保守は利用者側で見極める必要があります。Unityが前提なら、Riveを第一候補にするのが無難です。Unity側の環境構築は[Unityを日本語化する方法（Unity 6対応）とUnity 6の新機能・変更点](/tech/details/4881/)もあわせて確認してください。 ## LottieとRiveの相互変換（lottie to rive／rive to lottie） 既存資産を移せるかは実務で最初に聞かれる点です。結論は、**再生する動きは移せるが、インタラクションは移せず作り直しになる**です。 - **Lottie → Rive**：Rive Editorに`.lottie`を読み込む機能がありますが、[Riveのドキュメント](https://rive.app/docs/editor/assets/lottie)はEnterpriseプラン向けと明記し、取り込みは作り直しの出発点にすぎないとしています。2025年12月4日の告知では、既存のVoyager利用者は継続して使える一方、新規顧客向けには将来の期日で提供を終えるとしています。 - **Rive → Lottie**：LottieFilesが[.riv（20MBまで）をLottie JSONへ変換する無料のオンラインツール](https://lottiefiles.com/tools/rive-to-lottie)を出しており、Lottie CreatorのUniversal File Importer（1ファイル20MBまで・16形式）でも`.riv`を取り込めます。変換先のLottie JSONは再生用の形式で、ステートマシンは`.lottie`パッケージ側に別JSONで持つ仕組みのため、Riveのステートマシンやデータバインディングはそのままでは引き継げません。 なお、Figmaのタイムライン機能Figma MotionもLottie・dotLottieへの書き出しに対応しており、Figmaで作った動きをLottieとして配る経路が増えています（詳細は[Figma Motionとは？使い方・書き出し・無料でできる範囲を解説【2026年10月】](/tech/details/12722/)）。 ## Webに組み込む最小コード（2026年10月の現行API） 以下はnpmパッケージを読み込めるブラウザ向けビルド環境で使うJavaScript例です。各例を個別に実行し、idがcanvasのcanvas要素と、コード内の名前・入力に対応するアニメーションファイルを用意してください。 Riveは、エディタでView Modelに`isLoading`（真偽値）と`submit`（トリガー）を定義した`.riv`を想定し、`autoBind`で既定のView Modelを結び付けてから値を書き換えます。 ``` import { Rive } from '@rive-app/canvas'; const r = new Rive({ src: 'button.riv', canvas: document.getElementById('canvas'), stateMachine: 'State Machine 1', autoplay: true, autoBind: true, onLoad: () => { r.resizeDrawingSurfaceToCanvas(); const vm = r.viewModelInstance; if (!vm) return; // View Modelが無いファイルではnull const isLoading = vm.boolean('isLoading'); if (isLoading) isLoading.value = true; vm.trigger('submit')?.trigger(); }, }); ``` dotLottieは、`.lottie`内のステートマシンIDを`load`イベントの中で読み込み、開始してから入力を渡します。[公式ドキュメント](https://docs.lottiefiles.com/en/runtimes/distributions/js/v0.x/state-machines)は、`load`より前に`stateMachineLoad`を呼ぶと失敗すると注意しています。 ``` import { DotLottie } from '@lottiefiles/dotlottie-web'; const dotLottie = new DotLottie({ canvas: document.querySelector('#canvas'), src: 'button.lottie', autoplay: false, }); dotLottie.addEventListener('load', () => { if (dotLottie.stateMachineLoad('buttonFSM')) { dotLottie.stateMachineStart(); dotLottie.stateMachineSetBooleanInput('isLoading', true); dotLottie.stateMachineFireEvent('submit'); } }); ``` どちらも入力名（`isLoading`・`submit`）がデザイナーと開発者の約束事で、名前を変えるとコード側が黙って効かなくなります。AndroidのJetpack ComposeでLottieを再生する場合は[Lottie Composeの使い方｜Jetpack Composeでのアニメーション実装と再生制御](/tech/details/4869/)を参照してください。 ## 用途別の選び方と避けるべきケース ### Lottieを選ぶ場面 ローディング表示、アイコンの装飾、LPのイラストアニメーションなど、**決めた動きを再生すれば足りる用途**はLottieが向きます。After Effectsを使うデザイナーが社内にいる場合や、ページに置くアニメーションが少なく初期ロードを削りたい場合も、`lottie-web`の軽量版（gzip後約46KB）で済むLottieが有利です。 ### Riveを選ぶ場面 ボタンやフォームの状態で変わるUI、進捗やスコアに連動する表示、キャラクターが操作に反応するオンボーディングなど、**状態とデータで動きを切り替える用途**はRiveが向きます。Unityでゲーム内UIを組む場合や、デザイナーがコードを触らずに遷移を調整したい体制でもRiveを選びます。スプラッシュなしで製品に載せるならCadet以上の費用を見込んでください。 ### どちらも過剰なケース ホバーで色や位置が変わる程度のマイクロインタラクションなら、CSSアニメーションで十分です。ランタイムを1つ増やすと、Riveなら約1MB、dotLottieなら約0.5MB（いずれもgzip後）を読み込むことになります。JavaScriptで細かく制御したいなら、[Framer Motion（現Motion）](/tech/details/3016/)や[Anime.js v4](/tech/details/12740/)のようなライブラリのほうが軽く済みます。 ## よくある質問 ### Riveは無料で商用利用できますか？ 無料プランでもRive Editorを使い、`.riv`を書き出せますが、書き出したファイルにはRiveのスプラッシュ画面が入ります（2026年10月16日時点の料金ページ）。ランタイムはMITで、ランタイム料金もかからないため、スプラッシュを許容できるかが分かれ目です。スプラッシュなしで製品を公開するならCadet以上を契約してください。 ### RiveのCadetプランで何ができますか？ Cadetは2025年10月20日に新設された低価格プランで、年払いなら1席月9ドル、月払いなら月17ドルです。スプラッシュ画面なしの書き出しとファイル数無制限が付きます。最大3席までで、LibrariesやCDNホスティングを使うにはVoyagerが必要です。 ### LottieとdotLottie（.lottie）の違いは何ですか？ Lottieは動きを記述したJSON（`.json`）です。dotLottie（`.lottie`）は、そのJSONに画像などのアセット、テーマ、ステートマシンの定義をまとめてZIP圧縮したパッケージ形式です。再生には`@lottiefiles/dotlottie-web`などのdotLottie対応プレイヤーを使います。 ### Riveの代わりになるツールはありますか？ 再生用途ならLottieが最有力です。2Dのキャラクターアニメーションをボーンで動かすなら[Spine](/tech/details/4936/)、Figmaの中で動きまで作るならFigma Motionも候補になります。状態とデータに応じたインタラクションをデザイナー側で組みたいなら、Riveに代わる選択肢はまだ少ないのが実情です。 ### Lottie資産をRiveに移す費用はどのくらいですか？ RiveのLottieインポートはEnterprise（年商1,000万ドル以上の組織向け・年払いで1席月120ドル）限定なので、多くのチームはインポートを使えず、Rive Editorで作り直すことになります。費用はツール代より作り直しの工数で決まるため、まず対話が必要な素材だけをRiveへ移し、再生だけの素材はLottieのまま残す分け方を勧めます。 ## 関連記事 - [Lottie Composeの使い方｜Jetpack Composeでのアニメーション実装と再生制御](/tech/details/4869/) - [Figma Motionとは？使い方・書き出し・無料でできる範囲を解説【2026年10月】](/tech/details/12722/) - [Spineの値段｜2Dアニメーションソフトの料金（日本円）・無料版・買い切りの条件【2026年10月】](/tech/details/4936/) - [Framer Motion（現Motion）とは｜motion/reactの使い方とeasing・springの既定値【v13対応】](/tech/details/3016/) - [Unityを日本語化する方法（Unity 6対応）とUnity 6の新機能・変更点](/tech/details/4881/) --- 出典: [RiveとLottieの違いを比較｜料金・ランタイムサイズ・Unity対応・相互変換で選ぶ【2026年10月】]()（株式会社一創）