Lottieとは?

Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。LottieFilesはLottieの作成、編集、テスト、共同制作、配信を、これ以上なく簡単に行えるようにします。

Lottieのメリット

一般に使われているほかのアニメーションファイル形式と比べて、Lottieには次のような長所があります。

小さいファイルサイズ

Lottieアニメーションなら、GIFやMP4のようなほかの形式と比べて、同じ品質を保ちながらファイルサイズをはるかに小さくできます。

無限に拡大縮小可能

Lottieアニメーションはベクターベースです。そのため、解像度を気にすることなく拡大縮小できます。

マルチプラットフォームのサポートとライブラリ

どんな開発者にとっても、Lottieのハンドオフはとても簡単です。Lottieアニメーションは、修正することなくiOS、Android、Web、React Nativeで使用できます。

インタラクティブ

Lottieアニメーションは、アニメーションの各要素にアクセスして操作できるようになっています。スクロール、クリック、ホバーといったインタラクションに反応するインタラクティブなアニメーションを作成することができます。詳しくは「インタラクティビティガイド」をご覧ください。

Lottieは、世界中で使われています

Lottieは、世界の万社以上、日々使っているツールの多くで使われています。

A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
Apple Landing Page with Lottie Animation
Apple Landing Page with Lottie Animation
Apple Logo
Apple Logo

ランディングページ

ランディングページ

ランディングページ

Duolingo with Lottie Animation
Duolingo with Lottie Animation
Duolingo Logo
Duolingo Logo

デジタル体験に楽しさをプラス

デジタル体験に楽しさをプラス

デジタル体験に楽しさをプラス

Telegram Stickers with Lottie Animation
Telegram Stickers with Lottie Animation
Telegram Logo
Telegram Logo

メッセージング機能のアニメステッカー

メッセージング機能のアニメステッカー

メッセージング機能のアニメステッカー

Samsung Watch with Lottie Animation
Samsung Watch with Lottie Animation
Samsung Logo
Samsung Logo

スマートウォッチ、TV、家電のシステムアニメーション

スマートウォッチ、TV、家電のシステムアニメーション

スマートウォッチ、TV、家電のシステムアニメーション

Interactive Infographics with Lottie Animation
Interactive Infographics with Lottie Animation
The Guardian Logo
The Guardian Logo

インタラクティブなインフォグラフィック

インタラクティブなインフォグラフィック

インタラクティブなインフォグラフィック

Product Walkthroughs with Lottie Animation
Product Walkthroughs with Lottie Animation
Google Logo
Google Logo

製品チュートリアル

製品チュートリアル

製品チュートリアル

モーションはデザインの未来です

LottieFilesはアニメーションを簡単にします。

Lottieを使うには?

Lottieを使い始めるのに役立つツールとリソース。

ステップ1

Lottieを見つける、または作成する

Lottieアニメーションを見つける

無料のアニメーションを集めた、すぐに使えるライブラリから検索しましょう。

それからカラーパレットツールLottieエディターを使って、あなたのブランドや好みの色に合わせてLottieをカスタマイズしましょう。

LottieFiles featured animations page
LottieFiles featured animations page
LottieFiles featured animations page

または、Lottieを最初から作成する

アニメーション作成のスキルを持っている方は、LottieFilesのAdobeプラグインを使ってLottieを作成してみましょう。そうでない方は、SVGファイルを用意して、LottieFilesのSVG to Lottieコンバータのプリセットを適用してみましょう。

ステップ2

Lottieを使用する

Lottieは、その他の多くのツールでもネイティブにサポートされています

Various company logos
Various company logos
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles

さあ、LottieFilesを始めましょう。

Lottieの歴史

Lottieの歴史

Lottieの歴史

Lottieの歴史

Stylized pixellated flower
Stylized pixellated flower
Stylized pixellated flower

2010

Lottieが登場する前、アニメーションはモーションデザイナーが作成し、それを渡されたソフトウェア開発者が実装するものでした。実装の選択肢には限りがありました。開発者は、アニメーションを低画質の形式でエクスポートしたり、アニメーションをコードで一から再構築しようと試みたりしていました。このやり方は効率が悪く、モーションデザイナーの意図からほど遠い、最善とは言えないモーションになってしまうこともよくありました。

2015

2015

Adobe After Effects内のアニメーション表現をエクスポートして、そのアニメーションを実行時にレンダリングするというアイデアを、Hernan Torrisi氏が思いつきました。彼は、アニメーションプロジェクトを列挙するためにAfter Effectsのスクリプト機能を利用し、アニメーションのJSON形式の記述をエクスポートするAfter Effects用プラグインであるBodymovinをリリースしました。そしてさらに、その形式用のレンダラーと、ブラウザ向けのJavaScriptベースのプレーヤーを初めてリリースしました。

JSON file
JSON file
JSON file
Pencil with Lottie written out
Pencil with Lottie written out
Pencil with Lottie written out

2017

AirbnbのエンジニアであるBrandon Withrow氏Gabriel Peal氏Leland Richardson氏が、JSONベースのアニメーションがもたらす可能性に目を向け、それが様々な問題を解決してくれることに気がつきました。3人はAirbnbのリードアニメーターSalih Adbul-Karim氏と協力して、JSONアニメーションファイルをレンダリングできるiOS用およびAndroid用ライブラリの構築に取り組みました。そのアニメーションファイルは彼らに「Lottie」と名付けられました。

Rocketship with LottieFiles logo
Rocketship with LottieFiles logo
Rocketship with LottieFiles logo

LottieFilesがローンチ!

LottieFilesが登場し、アニメーターや開発者がWeb上でアニメーションを即座にテスト、共有、発表できる場を提供し始めました。

2018

2018

Microsoftと.Net Foundationが、LottieをWindows上でレンダリングするためのライブラリをリリースしました。

Window with flowerpot
Window with flowerpot
Window with flowerpot
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it
Hamster wheel with a Qt file running on it

2019

QtにLottieのレンダリング用のQML APIが追加され、Lottieがサポートされるようになりました。Samsungが、プラットフォームに依存しないC++ベースのLottie用レンダラーであるrLottieをリリースし、TizenでLottieをサポートするようになりました。

2020

2020

dotLottieが誕生。dotLottieは、1つまたは複数のLottieアニメーションと関連リソースを単一のファイルにまとめたオープンソースのファイル形式です。これはアニメーションの未来を支える、次世代のLottieになるでしょう。

Lottie illustration
Lottie illustration
Lottie illustration

FAQ

FAQ

Lottieアニメーションとは?

Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。

Lottieアニメーションとは?

Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。

Lottieアニメーションとは?

Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。

Lottieアニメーションとは?

Lottieは、JSONベースのアニメーションファイル形式です。これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。

LottieはSVGより優れていますか?

LottieはSVGより優れていますか?

LottieはSVGより優れていますか?

LottieはSVGより優れていますか?

LottieはGIFより優れていますか?

LottieはGIFより優れていますか?

LottieはGIFより優れていますか?

LottieはGIFより優れていますか?

どうやってLottieを使えばよいのですか?

どうやってLottieを使えばよいのですか?

どうやってLottieを使えばよいのですか?

どうやってLottieを使えばよいのですか?

どうすればLottieを作成できますか?

どうすればLottieを作成できますか?

どうすればLottieを作成できますか?

どうすればLottieを作成できますか?

Lottieを使ったほうがよい理由は何ですか?

Lottieを使ったほうがよい理由は何ですか?

Lottieを使ったほうがよい理由は何ですか?

Lottieを使ったほうがよい理由は何ですか?

どのような人がLottieFilesを利用できますか?

どのような人がLottieFilesを利用できますか?

どのような人がLottieFilesを利用できますか?

どのような人がLottieFilesを利用できますか?

Lottieアニメーションについて、どこで詳しく学べますか?

Lottieアニメーションについて、どこで詳しく学べますか?

Lottieアニメーションについて、どこで詳しく学べますか?

Lottieアニメーションについて、どこで詳しく学べますか?

Lottieアニメーションを編集する方法を教えてください。

Lottieアニメーションを編集する方法を教えてください。

Lottieアニメーションを編集する方法を教えてください。

Lottieアニメーションを編集する方法を教えてください。

モーションはデザインの未来です

モーションはデザインの未来です

LottieFilesはアニメーションを簡単にします。

LottieFilesはアニメーションを簡単にします。

ランディングページ

デジタル体験に楽しさをプラス

メッセージング機能のアニメステッカー

スマートウォッチ、TV、家電のシステムアニメーション

Lottieのクリエイター、デザイナー、開発者同士で集まりましょう。

製品チュートリアル

制作。コラボレーション。配信。

日々のデザインに、手軽にモーションを取り入れましょう

制作。コラボレーション。配信。

日々のデザインに、手軽にモーションを取り入れましょう

制作。コラボレーション。配信。

日々のデザインに、手軽にモーションを取り入れましょう

制作。コラボレーション。配信。

日々のデザインに、手軽にモーションを取り入れましょう