ブログでも使える高品質なLottieアニメーション集!

ブログでも使える高品質なLottieアニメーション集!

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」というプラグインを使用することでより簡単に導入できるのでオススメです。

WP Bodymovin
Use a Bodymovin (Lottie) exported AfterEffects animation in any WordPress page using a shortcode.
WP Bodymovin favicon wordpress.org

使い方は動画で解説されていますので、YouTubeでご覧ください。

解説が英語ですが、動画で操作する様子を確認すれば大丈夫です。

まとめ

今回紹介したアニメーションは全体のごく一部です。

他にもたくさんのアニメーションがあるので気になる方はLottieFilesのサイトをご覧ください。

アニメーションを導入することであなたのサイトを訪れるユーザーに興味を持ってもらったりできるのでオススメです。