Web上でアニメーションを表示するなら「Lottie」がおすすめ!特徴や使い方などWeb上でアニメーションを表示するなら「Lottie」がおすすめ!特徴や使い方などWeb上でアニメーションを表示するなら「Lottie」がおすすめ!特徴と使い方などWebサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。そんな時におすすめなのが「Lottie」です。Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。用意するものWebサイト上で表示する方法Lottieを使ったアニメーションのサンプルLottieとはLottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非常におすすめのライブラリです。LottieGoogleやUber、Walgreensなど世界の有名企業も自社アプリケーションにLottieを採用しており、注目を集めています。Effects」を使って作成し、「Bodymovin」というプラグインを使ってアニメーションファイルを出力します。アニメーションの作成からエクスポートまではこの記事では省略しますが、下記の動画で分かりやすく紹介されているので気になる方は参考にしてみてください。Lottieを使うメリット実装コストが低いLottieを使えば、ちょっとしたコードだけで簡単にアニメーションを表示することができます。CSSやJavaScriptを使って複雑なアニメーションを作ることも可能ですが、ある程度のスキルが必要となり、実装コストも増えてしまうので読み込むだけのLottieはより手軽に、アニメーションを表示することができます。デザイナーとコーダーが分業体制で作業を行っているのであれば、アニメーション作成に関してほとんどの作業をデザイナー側で済ませることができるので、余計な修正作業や確認作業を減らせるというメリットもあります。NativeやFlutterなど、人気のフレームワークでもLottieを使用することができます。一度作ったアニメーションは異なるプラットフォームで使い回すことができるので、それぞれで同様のユーザー体験を提供することが可能であることも魅力の1つですね。動画ファイルよりも圧倒的に軽量Lottieでアニメーションを表示することによって、動画ファイルを使用する場合よりもはるかにファイルサイズを小さくすることができます。ものによってはLottieで出力することができませんが、UIのアニメーションであれば基本的にLottieを使って表示することができるのではないでしょうか。Effectsで作成したアニメーションを再生できることは魅力的なポイントです。Webサイト上でLottieを使用する方法では、ここからはWebサイト上でLottieを使ってアニメーションを表示する方法をご紹介していきたいと思います。用意するものLottieでアニメーションを表示するために必要なものは、大きく分けて2つあります。lottie.jsアニメーションファイル(.json)それぞれ詳しくご説明していきます。lottie.jsこちらはLottieのメインとなるJavaScriptのファイルです。ファイルの読み込み方法はいくつかありますが、下記のGithubリポジトリからダウンロードするか、CDN経由で読み込む方法が簡単です。Githubからダウンロードする際は、lottie.jsかlottie.min.jsのいずれかを選んでください。Effectsで「Bodymovin」というプラグインを使い、JSON形式のファイルをエクスポートして用意します。基本的にエクスポートしたデータを使用することになると思いますが、試しにLottieを使ってみたいという場合は、「LottieFiles」というサイト上でアニメーションのサンプルをダウンロードすることも可能です。種類も豊富なので、アニメーションのアイデア探しにも使えそうです。必要なファイルが用意できたら、実際にWebサイトで表示してみましょう。フォルダの中に下記の3つのファイルを作成しましょう。animation.jsonそれぞれのファイルの内容については下記のとおりです。index.htmlまず、headタグの中でlottie.jsかlottie.min.jsを読み込みます。下記はCDNを使用した場合のコードになります。</head>123456<head><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js"type="text/javascript"></script></head>次に、bodyタグの中は下記のように記述します。type="text/javascript"></script></body>Lottieアニメーションを表示する要素をJavaScript側から指定するので、ここではid="lottie"としています。main.jsmain.jsでは、lottieの呼び出し処理を行います。"animation.json"});上記のcontainerオプションでアニメーションを表示する要素を指定しています。HTML側で異なるidを指定している場合は、上記のidもそれを指定するようにしましょう。loopやautoplayなどのオプションを指定していますが、その他にも任意のタイミングでアニメーションを開始したり、停止したり、コントロールするためのメソッドが用意されています。詳細については下記のドキュメントを参考にしてみてください。Docsanimation.jsonこのjsonファイルは、上記で用意したアニメーションファイルをそのまま配置すればOKです。Lottieを使ったアニメーションのサンプル最後に、Lottieを使って表示されているアニメーションの参考例をご紹介したいと思います。CodePen.幾何学図形を使ったアニメーションです。ローディングアニメーションや、画面遷移時のアニメーションに使えそうですね。CodePen.これは2,3秒のアニメーションがループ再生されています。キービジュアルにこのようなアニメーションを用意すればWebページの雰囲気が大きく変わりそうですね。CodePen.可愛らしい犬のキャラクターがダンスをしているアニメーションです。このような非常に短いループアニメーションを表示することも可能です。CodePen.こちらはテキストを取り入れたアニメーションです。単純なアニメーションだけでなく、少し長い動画もLottieで表示することができます。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。