Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など

本ページには広告が含まれます。

Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など

Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。

そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。

今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。

INDEX

Lottieとは
Lottieを使うメリット
Webサイト上でLottieを使用する方法
- 用意するもの
- Webサイト上で表示する方法
Lottieを使ったアニメーションのサンプル

Lottieとは

LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非常におすすめのライブラリです。

GoogleやUber、Walgreensなど世界の有名企業も自社アプリケーションにLottieを採用しており、注目を集めています。

Lottieで表示するアニメーションは、Adobeの「After Effects」を使って作成し、「Bodymovin」というプラグインを使ってアニメーションファイルを出力します。

アニメーションの作成からエクスポートまではこの記事では省略しますが、下記の動画で分かりやすく紹介されているので気になる方は参考にしてみてください。

Lottieを使うメリット

実装コストが低い

Lottieを使えば、ちょっとしたコードだけで簡単にアニメーションを表示することができます。CSSやJavaScriptを使って複雑なアニメーションを作ることも可能ですが、ある程度のスキルが必要となり、実装コストも増えてしまうので読み込むだけのLottieはより手軽に、アニメーションを表示することができます。

デザイナーとコーダーが分業体制で作業を行っているのであれば、アニメーション作成に関してほとんどの作業をデザイナー側で済ませることができるので、余計な修正作業や確認作業を減らせるというメリットもあります。

複数プラットフォームに対応

Lottieは、WebはもちろんiOSやAndroidのネイティブアプリでもアニメーションを表示することができ、React NativeやFlutterなど、人気のフレームワークでもLottieを使用することができます。

一度作ったアニメーションは異なるプラットフォームで使い回すことができるので、それぞれで同様のユーザー体験を提供することが可能であることも魅力の1つですね。

動画ファイルよりも圧倒的に軽量

Lottieでアニメーションを表示することによって、動画ファイルを使用する場合よりもはるかにファイルサイズを小さくすることができます。

もちろん、ものによってはLottieで出力することができませんが、UIのアニメーションであれば基本的にLottieを使って表示することができるのではないでしょうか。

Webはローディング時間が長くなると離脱率が上昇してしまうため、より軽量なファイルでAfter Effectsで作成したアニメーションを再生できることは魅力的なポイントです。

Webサイト上でLottieを使用する方法

では、ここからはWebサイト上でLottieを使ってアニメーションを表示する方法をご紹介していきたいと思います。

用意するもの

Lottieでアニメーションを表示するために必要なものは、大きく分けて2つあります。

lottie.js
アニメーションファイル（.json）

それぞれ詳しくご説明していきます。

lottie.js

こちらはLottieのメインとなるJavaScriptのファイルです。ファイルの読み込み方法はいくつかありますが、下記のGithubリポジトリからダウンロードするか、CDN経由で読み込む方法が簡単です。

Githubからダウンロードする際は、lottie.jsかlottie.min.jsのいずれかを選んでください。

アニメーションファイル

アニメーションのファイルはAfter Effectsで「Bodymovin」というプラグインを使い、JSON形式のファイルをエクスポートして用意します。

基本的にエクスポートしたデータを使用することになると思いますが、試しにLottieを使ってみたいという場合は、「LottieFiles」というサイト上でアニメーションのサンプルをダウンロードすることも可能です。

種類も豊富なので、アニメーションのアイデア探しにも使えそうです。

Webサイト上で表示する方法

必要なファイルが用意できたら、実際にWebサイトで表示してみましょう。フォルダの中に下記の3つのファイルを作成しましょう。

├── index.html
├── main.js
└── animation.json

それぞれのファイルの内容については下記のとおりです。

index.html

まず、headタグの中でlottie.jsかlottie.min.jsを読み込みます。下記はCDNを使用した場合のコードになります。

次に、bodyタグの中は下記のように記述します。

Lottieアニメーションを表示する要素をJavaScript側から指定するので、ここではid="lottie"としています。

main.js

main.jsでは、lottieの呼び出し処理を行います。

lottie.loadAnimation({
  container: document.getElementById("lottie"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "animation.json"
});

上記のcontainerオプションでアニメーションを表示する要素を指定しています。HTML側で異なるidを指定している場合は、上記のidもそれを指定するようにしましょう。

loopやautoplayなどのオプションを指定していますが、その他にも任意のタイミングでアニメーションを開始したり、停止したり、コントロールするためのメソッドが用意されています。

詳細については下記のドキュメントを参考にしてみてください。