Lottieとは？
Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。LottieFilesはLottieの作成、編集、テスト、共同制作、配信を、これ以上なく簡単に行えるようにします。
Lottieのメリット
一般に使われているほかのアニメーションファイル形式と比べて、Lottieには次のような長所があります。
小さいファイルサイズ
Lottieアニメーションなら、GIFやMP4のようなほかの形式と比べて、同じ品質を保ちながらファイルサイズをはるかに小さくできます。
Lottieアニメーションはベクターベースです。そのため、解像度を気にすることなく拡大縮小できます。
マルチプラットフォームのサポートとライブラリ
どんな開発者にとっても、Lottieのハンドオフはとても簡単です。Lottieアニメーションは、修正することなくiOS、Android、Web、React Nativeで使用できます。
インタラクティブ
Lottieアニメーションは、アニメーションの各要素にアクセスして操作できるようになっています。スクロール、クリック、ホバーといったインタラクションに反応するインタラクティブなアニメーションを作成することができます。詳しくは「インタラクティビティガイド」をご覧ください。
Lottieは、世界中で使われています
Lottieは、世界の万社以上、日々使っているツールの多くで使われています。
Lottieを使うには？
Lottieを使い始めるのに役立つツールとリソース。
ステップ1
Lottieを見つける、または作成する
Lottieアニメーションを見つける
無料のアニメーションを集めた、すぐに使えるライブラリから検索しましょう。
それからカラーパレットツールやLottieエディターを使って、あなたのブランドや好みの色に合わせてLottieをカスタマイズしましょう。
または、Lottieを最初から作成する
アニメーション作成のスキルを持っている方は、LottieFilesのAdobeプラグインを使ってLottieを作成してみましょう。そうでない方は、SVGファイルを用意して、LottieFilesのSVG to Lottieコンバータのプリセットを適用してみましょう。
ステップ2
Lottieを使用する
デザインツール、コーディングツール、生産性ツールでLottieを使用しましょう。
開発者向けのLottieライブラリ
Lottieは、その他の多くのツールでもネイティブにサポートされています
さあ、LottieFilesを始めましょう。
Lottieの歴史
2010
Lottieが登場する前、アニメーションはモーションデザイナーが作成し、それを渡されたソフトウェア開発者が実装するものでした。実装の選択肢には限りがありました。開発者は、アニメーションを低画質の形式でエクスポートしたり、アニメーションをコードで一から再構築しようと試みたりしていました。このやり方は効率が悪く、モーションデザイナーの意図からほど遠い、最善とは言えないモーションになってしまうこともよくありました。
Adobe After Effects内のアニメーション表現をエクスポートして、そのアニメーションを実行時にレンダリングするというアイデアを、Hernan Torrisi氏が思いつきました。彼は、アニメーションプロジェクトを列挙するためにAfter Effectsのスクリプト機能を利用し、アニメーションのJSON形式の記述をエクスポートするAfter Effects用プラグインであるBodymovinをリリースしました。そしてさらに、その形式用のレンダラーと、ブラウザ向けのJavaScriptベースのプレーヤーを初めてリリースしました。
2017
AirbnbのエンジニアであるBrandon Withrow氏、Gabriel Peal氏、Leland Richardson氏が、JSONベースのアニメーションがもたらす可能性に目を向け、それが様々な問題を解決してくれることに気がつきました。3人はAirbnbのリードアニメーターSalih Adbul-Karim氏と協力して、JSONアニメーションファイルをレンダリングできるiOS用およびAndroid用ライブラリの構築に取り組みました。そのアニメーションファイルは彼らに「Lottie」と名付けられました。
LottieFilesがローンチ！
LottieFilesが登場し、アニメーターや開発者がWeb上でアニメーションを即座にテスト、共有、発表できる場を提供し始めました。
Microsoftと.Net Foundationが、LottieをWindows上でレンダリングするためのライブラリをリリースしました。
2019
QtにLottieのレンダリング用のQML APIが追加され、Lottieがサポートされるようになりました。Samsungが、プラットフォームに依存しないC++ベースのLottie用レンダラーであるrLottieをリリースし、TizenでLottieをサポートするようになりました。
dotLottieが誕生。dotLottieは、1つまたは複数のLottieアニメーションと関連リソースを単一のファイルにまとめたオープンソースのファイル形式です。これはアニメーションの未来を支える、次世代のLottieになるでしょう。
FAQ
What is a Lottie animation?
A Lottie is a JSON-based animation file format that lets you ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. Designers and developers often use Lottie for animated icons, illustrations, onboarding screens, and UI micro-interactions, as it delivers rich motion while keeping file sizes small and performance high.
Is Lottie better than SVG?
Is Lottie better than GIF?
How do you use Lottie?
How do you make a Lottie?
Why should I use Lottie?
Who can use LottieFiles?
Where can I learn more about Lottie animations?
How do I edit Lottie animations?
Who can use LottieFiles?
Where can I learn more about Lottie animations?
How do I edit Lottie animations?
Which platforms and tools support Lottie?
Can I use Lottie animations for free?
Do Lottie animations work offline?
What is the dotLottie format?
