Lottieで動きをつけてみた

少しお久しぶりなうどんです。
WebやITのフォーマットって本当に進化を続けてますし、合わせて新しいツールも進化し続けてますね。
今回は「Lottie」が気が付くと活用しやすくなってたので紹介したいと思います。

Lottieとは

Lottieは、JSONベースのアニメーションファイル形式です。
これを使うと、静止画アセットを配信するのと同じくらい簡単に、アニメーションをあらゆるプラットフォームに配信できます。Lottieはどんなデバイスでも動作するサイズの小さなファイルで、ピクセル化を起こさずに拡大縮小できます。
LottieFilesはLottieの作成、編集、テスト、共同制作、配信を、これ以上なく簡単に行えるようにします。

ちなみにそんなLottie、リリースしてすぐはAfterEffectsのみでしか作成することができませんでした。
しかしなんと！2023年冬からFigmaのプロトタイプ機能でも作ることができるようになりました！

Lottie、なんで流行ってるん？1

GIFアニメよりも軽量、かつ高品質なアニメが設置できるから。
ベクターアニメーションなので、拡大縮小が自由。
さらに、マウスがホバーした際に動く、といった使い方もできることも流行っている要因です！

なんでデータ軽いん？

Lottie形式は動画ではなく、JSONファイルでできている、つまりは画像データでなく、文字データのファイルであるため、圧倒的に軽くなっています。

Lottie、なんで流行ってるん？2

さらにLottieのすごい部分は、NOTエンジニアでも、細かい設定をしたデータを作って渡せること！

デザイナーが指定してきたアニメを実装できない、という断り方をせず、作ってもらって導入するということができます。
なので例えばB3Sでいうと

トップページ等で使われている黒いボタンのアニメ！
このアニメ、元のCSSがあるとはいえ、そのままではなく、クリックしたら上に移動するといったアレンジも加えていることで、まぁまぁ実装に時間を要しました。

ですが、こういったものをLottieで作成すれば、メインはデザイナー側で作成でき、コーダー側で調整するのは多少になるかも。

とりあえずLottieファイル作ってみた

作り方の手順をざっと説明すると
1.FigmaにLottieFilesのプラグインをインストールし、会員登録をする。
2.アニメにしたいSVGファイルを用意する
3.プロトタイプで「アフターディレイ」で1msでつなげ、「スマートアニメート」を選択する
4.LottieFilesでエクスポートする
5.設置したいページのheadにプレーヤーのscriptとjsonを読み込む

とりあえず作ったみたら失敗した1

原因1.スマートアニメートは同じレイヤーと認識してくれないとディレイがかかってしまう。
別途SVGファイルを用意して作成する場合は注意！
※プレビューでちゃんとできているかのチェックできます

とりあえず作ったみたら失敗した2

原因2.ローカル環境でjsonファイルをパス指定しても、そのままでは表示させることはできない。
実施する場合は、CDN等でlottie.jsを読み込み、その後jsonファイルをjs拡張子に変更する必要があります。

注意したいこと

LottieFilesへの公開

LottieFilesへの公開（Publish to Public）を行うとすべてのユーザーが検索・ダウンロード可能なデータになるのでご注意ください。
※LottieFilesへの公開については規約もご確認ください

同一セクション内のアニメにする

Lottie用にプロトタイプを設定する際のコツとして、「アフターディレイ」で自動的に動きを開始させる、「スマートアニメート」で少ない素材かつなめらかなアニメーションを作成する、ループ再生で違和感がないよう「はじめと終わりのフレームをつなげる」などがあります。
そのためには同じセクション内にしておく必要もあります。
作成したプロトタイプには［フローの開始点］を追加し、名前を設定しておくと、判別もしやすくなります。

Lottie、どんなときに使うのがいいの？

当社の社内システムの中にはそこまでないかもしれません。

が、社外システムで、使い方説明のアニメをサイトに掲載しよう！となった場合が使い所です。

アニメーションは以下の場面で有用だと言われています。

1. 現在の状況をわかりやすくするため
2. 注意喚起を促す（視線を誘導する）ため
3. ブランディングするため

現在の状況？

ただ真っ白な画面では、サイトでエラーが起きているのか、読み込み中なのか、はたまた白いページなのか、わかりません。

そこで、ローディングアニメを入れておくことで、待てば表示されることがユーザーに伝わることで、離脱防止にもつながります。

注意喚起？

ヒーロー画像がフルで表示されているサイト、一見するとどう動けばいいのか、わからないですよね。
そこで、スクロールさせたいのか、クリックしてもらいたいのか、などを動きをつけて表示させることは視線誘導となり、してもらうべき動きの注意喚起となります。

Googleのデザインシステムでいえば、バリデーションチェックでひっかかったものが赤枠だけでなく少し揺れ動くのも同じ効果です。

ブランディング？

https://www.facebook.com/watch/?v=1861540513857588

企業が動画へ参入したことにより、モーションロゴと呼ばれる動くロゴの活用が増え、ブランディング力を高めるために使われています。
2015年くらいから流行りはじめました。
※スマホの4G規格が2012年。
Instagramも2012年。

個人的にいいなと思った実装例

https://necco.inc/project/aces-corporate-site

このサイトのヒーロー画像ではWebGLの上にlottieをレイヤーとして重ねて隙間から動きを見せているそうです。
パララックス効果も感じられていいです。

余談：使ってみたい動きをつけられるCSSリスト

lottieを使わずとも、本当にCSSの発展すごいなと思ってます。
animation-timeline：scroll()とview()
まだ実験的なCSSではありますが、Chromeとedgeで利用できるアニメーションCSSで、名前の通りスクロールや画面の内部の状態に合わせた動きを設定できます！
safariが対応したら使いたいところです。

ではまた！