Webサイトを開いたときに、ボタンがふわっと動いたり、読み込み中のアイコンがくるくる回ったりするのを見たことがある方は多いと思います。 小さなアニメーションは、サイトを楽しく見せるだけでなく、「今、処理中です」「ここを押せます」といった情報を、わかりやすく伝えてくれます。
そんなWebアニメーションを扱いやすくしてくれる技術のひとつが「Lottie」です。 Lottieは、JSONというデータ形式を使ってアニメーションを再生できる仕組みです。 Adobe After Effectsなどで作ったアニメーションを書き出し、Webサイトやアプリの中で表示できます。
Lottieの大きな魅力は、軽くてきれいなアニメーションを使いやすいことです。 GIFや動画のように画像を連続して表示するのではなく、図形や動きの情報をもとに描画するため、拡大しても見た目が崩れにくく、比較的小さなファイルサイズで表現できます。 そのため、アイコンアニメーションやローディング表示、サービス説明のちょっとした動きなどに向いています。
また、デザイナーとエンジニアのやり取りがしやすくなる点も、Lottieのうれしいところです。 これまでは、デザイナーが作った動きをWeb上で再現するために、エンジニアがCSSやJavaScriptで細かく作り直す必要がありました。 Lottieを使えば、作成したアニメーションをデータとして渡し、それをWebページに組み込むことができます。 動きのニュアンスをそのまま活かしやすいので、制作の手間も減らせます。
とはいえ、Lottieは何でもできる魔法の形式ではありません。 After Effectsで作ったすべての表現がそのまま使えるわけではなく、複雑なエフェクトや一部の機能には対応していない場合があります。 実際に使うときは、書き出したあとにブラウザやスマートフォンで正しく表示されるか確認することが大切です。
さらに、「軽いからたくさん使っても大丈夫」と考えるのも少し注意が必要です。 ページ内で多くのアニメーションを同時に再生すると、端末によっては動作が重くなることがあります。 必要な場所だけで使う、画面に見えていないものは再生しない、ループ再生を控えめにするなど、使い方を工夫するとより快適になります。
アクセシビリティへの配慮も忘れたくないポイントです。 動きが多い画面が苦手な方もいるため、自動再生を避けたり、動きを減らす設定に対応したりすることが望ましいです。 アニメーションは目を引く表現ですが、見る人にとって負担にならないように設計することが大切です。
最近では、複数のLottieアニメーションや関連ファイルをひとつにまとめられる .lottie という形式も使われています。
管理しやすく、配布しやすい形として、Lottieの活用範囲はさらに広がっています。
Lottieの本質は、派手な演出を加えることではなく、見る人にわかりやすく伝えることにあります。 ボタンを押したときの反応、読み込み中の安心感、ブランドらしい雰囲気づくりなど、小さな動きがWeb体験をやさしく支えてくれます。
Webアニメーションは、使い方次第でサイトの印象を大きく変えます。 その中でもLottieは、軽くて扱いやすいといえます。 ちょっとした動きを丁寧に取り入れることで、Webサイトはよりわかりやすく、親しみやすいものになります。
