Lottieとは

Lottieは、Airbnbによって開発されたオープンソースのアニメーションライブラリです。After Effectsで作成したアニメーションをJSON形式にエクスポートし、Web、iOS、Android、React Nativeなど複数のプラットフォームでネイティブにレンダリングすることができます。

特徴・ポイント

軽量でスケーラブル

Lottieはベクターベースのアニメーションを提供するため、従来のGIFやMP4などの動画形式と比較して大幅に軽量です。JSONファイル形式でデータを保持するため、ファイルサイズが小さく、Webサイトやアプリの読み込み速度向上に貢献します。また、ベクター形式なので拡大縮小しても画質が劣化せず、あらゆるデバイスで高品質な表示が可能です。

マルチプラットフォーム対応

Lottieの最大の強みは、一度作成したアニメーションをWeb、iOS、Android、React Nativeなど複数のプラットフォームでシームレスに利用できる点です。プラットフォームごとにアニメーションを再実装する必要がなく、開発工数を大幅に削減できます。特に2025年現在では、Figma、Framer、Webflow、Canvaなど多くのデザインツールとの統合も進み、より幅広いエコシステムを形成しています。

インタラクティブな制御

Lottieアニメーションは、JavaScript（Web）やネイティブコード（iOSやAndroid）で詳細に制御することができます。再生、停止、逆再生などの基本的な操作だけでなく、スクロール連動やホバー時のアニメーション、特定フレームへのジャンプなど、インタラクティブな表現が可能です。これにより、ユーザー体験を大幅に向上させることができます。

利用シーン

Webサイトでの活用

現代のWebサイトでは、ユーザーエンゲージメントを高めるためにアニメーションが重要な役割を果たしています。Lottieを使えば、ページ読み込み時のローディングアニメーション、ボタンやアイコンのインタラクションなど、様々な場面で軽量かつ高品質なアニメーションを実装できます。特にWordPress、Shopify、Webflow、Squarespace、Wixなどの主要なCMSとの互換性があり、実装が簡単です。

モバイルアプリでの活用

モバイルアプリではユーザー体験の向上や差別化のためにアニメーションが頻繁に使用されます。Lottieを使用することで、アプリのサイズを小さく保ちながら、オンボーディング画面、遷移アニメーション、機能説明など、様々な場面で高品質なアニメーションを実装できます。さらに、アニメーションの修正が必要な場合も、アプリのアップデートなしでJSONファイルを差し替えるだけで対応可能です。

デザイナーとエンジニアの協業効率化

Lottieの導入によりデザインワークフローが効率化されます。デザイナーはAfter EffectsやFigmaなどの使い慣れたツールでアニメーションを制作し、JSONファイルとして書き出すだけ。エンジニアはそのファイルを実装するだけで、複雑なアニメーションコードを書く必要がありません。これにより、デザイナーの意図を正確に反映したアニメーションを短時間で実装できるようになります。

作成方法

After Effectsでの作成

最も一般的なLottie作成方法は、Adobe After Effectsと「Bodymovin」または「LottieFiles」プラグインを使用する方法です。After Effectsでアニメーションを作成し、プラグインを使ってJSONファイルにエクスポートするだけで、Lottieアニメーションが完成します。ただし、After Effectsの全ての機能がLottieでサポートされているわけではないため、公式のサポート表を確認しながら作業することをお勧めします。

Figmaでの作成

2024年以降、FigmaのプロトタイプツールとLottieFilesプラグインを組み合わせることで、After Effectsを使わずにLottieアニメーションを作成できるようになりました。Figmaのスマートアニメート機能を使用して簡単なアニメーションを作成し、LottieFilesプラグインでエクスポートするという手順です。デザイナーにとって学習コストが低く、手軽に始められる方法として人気があります。

Lottie Creator

LottieFilesが提供するウェブベースのアニメーションツール「Lottie Creator」も登場し、専用ソフトがなくてもブラウザだけでLottieアニメーションを作成できるようになりました。10万点以上のカスタマイズ可能なテンプレートライブラリも用意されており、既存のアニメーションをカスタマイズして使うことも可能です。

モバイルアプリへの実装

iOSアプリではLottie iOS SDK、AndroidアプリではLottie Android SDKを使用してアニメーションを実装できます。どちらもシンプルなAPIで直感的に使用でき、ネイティブのパフォーマンスでアニメーションを表示することが可能です。React Nativeを使用した開発では、lottie-react-nativeパッケージを使用することで、クロスプラットフォームにLottieアニメーションを簡単に実装できます。

補足情報

dotLottie形式

従来のJSON形式に加え、より最適化された「dotLottie」形式も登場しています。これはLottieアニメーションのためのコンパクトで自己完結型のフォーマットで、複数のアニメーションを一つのファイルにまとめたり、よりスムーズなロード体験を提供することが可能です。

LottieFilesコミュニティ

Lottieのエコシステムを支える重要な要素として、LottieFilesコミュニティの存在が挙げられます。公式サイトでは数多くの無料・有料アニメーションテンプレートが提供されており、自前で作成しなくても高品質なアニメーションを利用することができます。2025年現在、世界中の280,000社以上、1,200万人以上のデザイナーと開発者がLottieFilesを活用しています。