Lottieとは？次世代アニメーションツールの基本を解説！

『Lottie（ロッティ）』とは、Airbnbのエンジニアが開発したJSONベースのアニメーションファイル形式です。SVGなどのベクター画像をアニメーション化できる技術であり、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できるのが特徴です。

Lottieファイルの実態は、オブジェクトとアニメーションのデータを定義したJSONファイルになります。従来のGIFアニメーションと比べると、ファイルサイズが小さく画質も高いため、モバイルアプリやWebサイトでの利用に適しています。さまざまなプラットフォームに対応しているため、デザイナーとエンジニアのコラボレーションを促進するツールとして注目を集めています。

Lottieは、アニメーションを手軽に制作・配信できるツールとして、さまざまな特徴とメリットを持っています。ここでは、Lottieの主なメリットについて詳しく解説します。

• ファイルサイズが軽量

• 拡大縮小しても画質が劣化しない

• クロスプラットフォーム対応

• インタラクティブなアニメーション作成も可能

• 開発時の工数削減につながる

ファイルサイズが軽量

Lottieは、JSONベースのアニメーションファイル形式であるため、従来のGIFアニメーションと比べてファイルサイズが小さくなります。同じ品質のアニメーションを、より少ないデータ量で表現できるのです。これにより、モバイルアプリやWebサイトでの読み込み速度が向上するため、ユーザー体験の改善・向上につながります。また、ストレージ容量の節約にもなるため、アプリのインストールサイズも抑えられます。

拡大縮小しても画質が劣化しないLottieアニメーションはベクターベースのため、拡大縮小しても画質が劣化することがありません。アニメーションをさまざまなデバイスやスクリーンサイズに合わせて表示する際に、常に高品質な画質を維持できます。これにより、デバイスごとに異なる解像度の画像を用意する必要がなくなり、制作工数の削減にもつながります。

クロスプラットフォーム対応

Lottieは、iOS・Android・Windows・macOS・Web・React Nativeなど、多様なプラットフォームに対応しています。一度作成したLottieアニメーションを、さまざまな環境で再利用できるのが大きな利点です。これにより、開発者はプラットフォームごとにアニメーションを作り直す手間を省けるため、効率的な開発が可能になります。また、デザイナーとエンジニアの協業がスムーズになり、コミュニケーションコストの削減にもつながります。

インタラクティブなアニメーション作成も可能

Lottieの特徴の1つに、アニメーションの各要素にアクセスして操作できる点が挙げられます。この機能を活用することで、スクロール、クリック、ホバーといったユーザーのインタラクションに反応するインタラクティブなアニメーションの作成が可能です。たとえば、ユーザーがボタンにホバーした際に、アニメーションが再生されたり、スクロールに合わせてアニメーションの進行状況が変化するなど、インタラクティブな体験を提供できます。

Lottieのインタラクションに関する詳細は、公式のインタラクティビティガイドでも確認可能です。このガイドでは、アニメーションとユーザーインタラクションを連動させる方法や、さまざまなプラットフォームでのインタラクティブなアニメーションの実装方法などが解説されています。

開発時の工数削減につながる

従来のアニメーション制作では、デザイナーが作成したデザインをもとに、エンジニアがアニメーションを実装しながら修正を加える作業が発生していました。この過程では、デザイナーとエンジニア間の行き来が頻繁に発生し、コミュニケーションコストや開発工数が増大する傾向がありました。

しかしLottieを導入すると、デザイナーがAfter Effectsなどのデザインツールでアニメーションを作成し、エンジニアに完成された状態のJSONファイルを渡せます。これにより、エンジニアはアニメーション実装以外の作業に専念できるようになるため、デザイナーとのやり取りに費やす時間を削減できます。また、アニメーションの修正や調整も、デザイナーがAfter Effects上でおこなえるため、エンジニアの手を煩わせることなく、スムーズに変更できるのです。

このようにLottieを活用することで、デザイナーとエンジニアの役割分担が明確になり、開発工数の削減とより効率的な開発サイクルの実現が可能になります。

Lottieでは、以下のようなアニメーションを実現できます。

• 要素の回転

• 位置の変化

• 拡大縮小

• 色の変化

• 不透明度の調整

『LottieFiles』では、Lottieのアニメーションサンプルが確認できます。

また、Lottieは背景の透過にも対応しているため、アニメーションをWebサイトやアプリの任意の場所に自然に配置できます。これにより、全体のデザインとの調和を保ちつつ、アニメーションを効果的に活用できます。

上記のLottieFilesにも掲載されているように、ローディングアニメーションやボタンのホバーエフェクト、キャラクターアニメーションなど、一般的なSVGアニメーション表現であればLottieで実現可能です。LottieFilesのサンプルを参考にしたり、自分でカスタマイズしたりすることで、オリジナリティあふれるアニメーションを手軽に制作できるでしょう。

Lottieは多くのアニメーション効果に対応していますが、いくつかの制限もあります。基本的にSVGアニメーションでできないことは、Lottieでも実現できません。

• タイムリマップを使用したループの動き

• グラデーションの変化

• LightenやDarkenなど一部のマスク処理

たとえば上記のような内容は、現在のLottieでは対応していません。また、音声を直接Lottieアニメーションに組み込むことはできないため、音声をつけたいアニメーションは別途音声ファイルを用意し、再生のタイミングを調整する必要があります。

加えて、端末やOS環境によっても、Lottieの表示や動作に多少の違いが生じる可能性があります。たとえばパスの同時トリミングやガウスぼかしは、Androidに適用できますがiOSには適用できません。また、テキストのTransformやFillはWindowsに対応していません。詳細は以下の公式ページからも確認できます。

Supported After Effects Features

Lottieの仕様は現在も更新されていくため、導入する場合は現時点での制限を把握しつつ、必要なアニメーションが対応しているか確認することが重要です。

After EffectsでLottieアニメーションを作成する手順は以下の通りです。

1. IllustratorやFigmaで要素を作成してSVG形式で出力

Figmaで簡単な円形を作成

アニメーションに必要なオブジェクトをIllustratorやFigmaなどのツールで作成します。シェイプ、テキスト、画像などを組み合わせ、アニメーションのデザインを完成させたら、SVG形式で出力しましょう。

2. After Effectsで読み込んでアニメーション作成

SVG形式で出力したファイルをAfter Effectsに読み込みます。After Effects上で、タイムラインを使ってオブジェクトのプロパティ（位置、サイズ、透明度など）を変化させ、アニメーションを作成していきます。

3. 拡張機能「LottieFiles for After Effects」をインストール

https://exchange.adobe.com/apps/cc/103642/lottiefiles-for-after-effects

LottieファイルをAfter Effectsから書き出すには、専用の拡張機能が必要です。「LottieFiles for After Effects」という拡張機能をインストールしましょう。

4. LottieFilesにログインし、LottieFilesのワークスペースにファイルをアップロード

拡張機能をインストールしたら、After Effectsから直接LottieFilesにファイルをアップロードすることができます。After Effects内で「Window > Extensions > LottieFiles」よりLottieFilesにログインし、拡張機能のウィンドウからAfter Effectsのプロジェクトファイルをワークスペースにアップロードします。

5. LottieFilesから.json拡張子や.lottie拡張子でダウンロード

LottieFilesのアニメーション画面

LottieFilesのワークスペースにアップロードされたアニメーションを確認し、必要に応じて編集を加えます。最終的に、.jsonや.lottie形式のファイルをダウンロードし、これらのファイルを各プラットフォームのアプリやWebサイトに組み込むことで、Lottieアニメーションを表示できます。

Figmaを使っている場合はもっと簡単にLottieアニメーションを作成することができます。手順は以下の通りです。

1. Figmaでアニメーション要素を作成

Figmaのデザインキャンバス上で、アニメーションに必要なオブジェクトを配置します。シェイプ、テキスト、画像などを組み合わせ、アニメーションのデザインを完成させましょう。

2. Figmaコミュニティから拡張機能「LottieFiles」をインストール

https://www.figma.com/community/plugin/809860933081065308/lottiefiles-create-animations-export-from-figma-to-lottie

Figmaコミュニティ内にて拡張機能「LottieFiles」をインストールします。

3. LottieFilesにログインし、LottieFilesに書き出し

インストールした「LottieFiles」拡張機能を使って、FigmaからLottieファイルを書き出します。拡張機能のウィンドウからLottieFilesにログインし、アニメーションの設定を調整します。たとえば、アニメーションの長さ、ループ設定、イージングなどが設定可能です。設定が完了したら、LottieFilesのワークスペースにファイルを書き出しましょう。

4. LottieFilesからファイル形式を選んでダウンロード

LottieFilesにアップロードしたアニメーションはLottie Creatorを使ってブラウザ上で編集できます。

LottieFilesのワークスペースに書き出されたアニメーションを確認し、必要に応じて編集を加えます。最終的に、.jsonや.lottie形式のファイルをダウンロードします。

https://lottiefiles.com/jp/

「LottieFiles」は、クリエイターがLottieで作成したアニメーションファイルを共有できるコミュニティサイトです。公開されているアニメーションは商用利用が可能なため、自作せずともLottieアニメーションを利用できるようになります。

LottieFilesは、FigmaやAdobeXD、After Effectsなどの人気デザインツールと連携して利用できるため、デザイナーは自分の使い慣れたツールでLottieアニメーションを作成し、シームレスにLottieFilesにアップロードできます。

また、LottieFiles上には「Lottie Editor」や「Lottie Creator」という機能も用意されており、このエディタを利用することで、プラットフォーム上で直接Lottieアニメーションを作成・編集することも可能です。特別な知識がなくても、わかりやすいインターフェースでアニメーションを制作できるため、デザイナーにとっても便利なツールです。

LottieFilesの料金プラン

https://lottiefiles.com/jp/pricing

LottieFilesは基本的に無料で利用できるサービスですが、高度な機能を使用したい場合は、有料プランを検討する必要があります。たとえば、無料プランではアニメーションの保存数が限られていますが、有料プランでは無制限のLottieファイルを保存できます。また、有料プランではLottieのバージョン管理機能が利用できるため、アニメーションの変更履歴を追跡し、必要に応じて以前のバージョンに戻しながらの作業も可能です。

LottieFilesの料金プランは、個人や企業のニーズに応じて選択できます。無料プランで十分な場合もありますが、より本格的にLottieを活用する場合は、有料プランを検討することをおすすめします。

この記事では、Lottieアニメーションについて解説しました。Lottieの特徴やメリット、作成方法、LottieFilesの活用法など、Lottieを使いこなすために必要な情報を紹介しています。

Lottieは、軽量で拡大縮小に強く、クロスプラットフォームに対応したアニメーションフォーマットです。インタラクティブなアニメーションの作成も可能で、導入することで開発工数の削減にも役立ちます。デザイナーとエンジニアが連携してLottieを効果的に活用することで、より魅力的なアプリやWebサイトの制作が可能になります。ぜひLottieの導入を検討してみてください。

関連記事

インタラクションデザインとは？5つの要素を例と一緒に解説