【初心者向け】Lottieとは？Webサイト制作に活かせるアニメーションをわかりやすく解説

「Lottie（ロッティー）」という言葉、最近Webサイトやアプリのアニメーション周りでよく耳にするようになったけれど、一体何のことか、自分には関係あるのか、そう思っていませんか？

特にWeb制作者やサイト運営に携わる方で、「アニメーションを取り入れたいけれど、重くなったり、実装が難しそう…」「自分でイラストは描けないし…」と二の足を踏んでいる方もいるかもしれません。

この記事では、そんなLottie初心者さんに向けて、Lottieがどんなものなのかをざっくりと解説します。

LottieとはWebサイトに実装できる軽量・高品質なアニメーション！

Lottieは、アニメーションをWebやアプリで軽く使えるようにする仕組みです。

After Effectsで作ったアニメーションをJSONという形式に書き出して使用します。

ベクター形式なので拡大縮小しても画質が劣化しない点も大きな特徴です。

Lottieは動画やGIFに比べて、非常に滑らかで高画質なアニメーションを実現できます。
その上ファイルサイズがとても軽いため、Webサイトの表示速度にほとんど影響を与えません。

下のサンプルはAfter Effectsで作成した同じアニメーションです。
Lottieと動画・GIFの画質やファイルサイズの違いを比べてみてください。
拡大していただくと、より違いが鮮明になります。

▼ 動画（MP4）

▼ GIF

▼ Lottie

動画（MP4）
再生用の枠（プレーヤー）を必要とする場合が多く再生/停止以外の細かい制御ができません。これによりデザインの一部としてアニメーションをなじませることは難しいです。
GIF
色数が限られ、画質が荒れてしまいます。本来のアニメーションには入っていない白いドットがちらついています。境界線もぼやけてしまっています。
Lottie（JSON）
高品質な画像のようにWebページに直接表示できます。透過背景もサポートしているので、デザインに自然に溶け込ませることが可能です。再生/停止だけでなく速度やループなどの制御も可能で、Webページに合わせた「うごくデザイン」が実現できます。

実際のデータ容量は

Lottieが軽量であることがわかります。

WebサイトにLottieを実装する際には

こうした仕掛けも、気軽に取り入れられるのがLottieの魅力です。

▼実際の動きは、下のサンプルでチェック▼

《自動再生》

《クリックで再生》

《ホバーで再生》

詳しい制御の方法やコードについては別記事で解説予定です。

Lottieを導入する最大のメリットは、軽くて高速表示できるうえに、コードを書かず簡単に扱えるため、誰でも手軽にWebサイトの魅力を高められることです。

しかも、目を引く動きがあることでユーザーの注目を集めやすく、サイトの滞在時間が延びたり、問い合わせや購入といった行動の増加も期待できます。

こうしたメリットが揃っているので、LottieはWeb制作にぴったりのアニメーション技術と言えます。

自分だけのオリジナルLottieアニメーションを作る場合は、Adobe After Effectsを使います。

手順

「自分で作るのはちょっと難しい…」という方は、Lottie素材をダウンロードして活用しましょう！
既製品なら、すぐに使えて手間もかかりませんし、無料でもクオリティの高いものが豊富にあります。

素材が探せるおすすめサイト

LottieFiles：世界中のクリエイターが作った無料＆有料素材が満載。キーワードで簡単検索。
https://lottiefiles.com/
MotionElements（有料）：高品質＆特定テーマの素材を探したい人におすすめ。
https://www.motionelements.com/ja/
私のサイトもぜひ！：無料素材を配布しています。下記ダウンロードページをご覧ください。