Lottieってご存知ですか？
Lottieは動画やGIFアニメーションといった容量が大きいファイルを用意することなく高品質なアニメーションを実装できるライブラリです。
実際にみてもらったほうがわかりやすいと思うので先にアニメーションをひとつ表示してみます。[temp id=2]
[temp id=3]
ちゃんと表示されていれば「緑色のウィルスのキャラクター」のアニメーションが見えると思います。
最近話題のコロナウィルスをイメージして作られたアニメーションのようです。
今回はこんな感じで動くアニメーションの中から「めっちゃ使いたくなる！」っていうものを選んでみました。
ちなみにLottieアニメーションを導入することの利点は以下のようなものがあります。
アニメーションの利点
- 他のサイトとは一味違うサイトにできる
- 見る人を注目させられる（退屈させない）
- Lottieは動画やGIFアニメに比べてデータが軽い
アニメーションを導入しているサイトってあまりないと思いますので差別化ができます。
動画やGIFアニメはファイルサイズが大きくなりがちなのですが、LottieアニメーションはデータがJSON形式で非常に軽い（だいたい1MB以下）ので比較的導入しやすいかと思います。
思わず使いたくなるアニメーションを集めました
[temp id=4]
タイトル：blue messages
制作者：Chris Lally
口コミ、ネットの声まとめ系の記事で使用できそうなアニメーションです。
[temp id=5]
タイトル：Work from Home
制作者：Vijay Verma
パソコンでの仕事、在宅ワークに関連した記事で使用できそうなアニメーション。LottieFiles公式からリリースされています。
[temp id=6]
タイトル：Bots Channel
制作者：Malik Tech
ITテクノロジー、インターネットの繋がりに関する記事で使えそうなアニメーション。とても高品質ですが、ファイルサイズが1MBを超えています。
[temp id=7]
タイトル：developer
制作者：Emerson Rodrigues
ウェブサイト構築、プログラミング、開発者の覚え書きなんかで使えそうなアニメーション。
[temp id=8]
タイトル：Analyzing website
制作者：Osama Sarsar
ウェブサイト解析、検索エンジン、SEOに関する記事で使えそうなアニメーション。何かを検索するサービスを作った時にロード画面としてこのアニメーションを表示するなど用途が色々ありそうです。
WordpressでLottieを使う方法
Wordpressでブログ記事を書く際に、Lottieアニメーションを追加する方法について。
自力で追加することもできますが、「WP Bodymovin」というプラグインを使用することでより簡単に導入できるのでオススメです。
使い方は動画で解説されていますので、YouTubeでご覧ください。
解説が英語ですが、動画で操作する様子を確認すれば大丈夫です。
まとめ
今回紹介したアニメーションは全体のごく一部です。
他にもたくさんのアニメーションがあるので気になる方はLottieFilesのサイトをご覧ください。
アニメーションを導入することであなたのサイトを訪れるユーザーに興味を持ってもらったりできるのでオススメです。
