Webアニメーションは“軽さ”で進化する
近年、Webアニメーションを取り巻く制作環境は大きく進化してきている。
専用の制作ツールやプラグインの充実により、デザイナーが視覚的に操作しながらアニメーションを設計できるようになり、これまでエンジニアの領域とされていた表現にも手が届きやすくなった。
また、パフォーマンス面でも軽量化や最適化の技術が進み、ページ表示速度やユーザー体験を損なわずに動きを取り入れることが可能になってきている。
Webサイトにおけるアニメーションは、単なる装飾ではなく、情報伝達や操作感を高める重要な要素として再評価されていると言えるだろう。
こうした流れの中で注目されているのが、JSON形式でアニメーションを扱えるLottieだ。
従来の動画や画像ベースのアニメーションとは異なり、ベクターデータやキーフレーム情報をコードとして保持するため、ファイルサイズを大幅に抑えられる点が大きな特徴である。
さらに、拡大縮小しても画質が劣化しにくく、実装時には再生速度やインタラクションの制御も柔軟に行える。
デザインと実装の距離を縮めながら、軽量で滑らかな表現を実現できることが、Lottieが急速に普及している理由の一つだろう。
（一方で、グラデーション表現の再現には工夫が求められたり、expressionの使用にも制限があるなど、制作面での注意点が存在することも事実だ。）
同じアニメーションプロジェクトを形式を変えて出力した時の容量を比べてみた。
● mp4 : 645 KB
● Gifアニメ：1MB
● Apng：522KB
● json：56KB
ざっくりとした設定で書き出したため多少の誤差はあるかもしれないが、それでもJSONファイルの軽さは際立っている。
インタラクティブな制御も可能であり、今後ますます加速していくWebアニメーション表現に対応する手段として、注目される存在になっていくだろう。
余談になるが、このような流れの中で用途が限定されがちで、先日Adobeからの提供終了告知が話題になったAdobe Animateについても触れておきたい。
筆者はFlash時代から使い続けており、キャラクターの動きを作る際には今でも最も扱いやすいツールの一つだと感じている。終了告知が覆されたときには、親しい同僚の転勤が取りやめになったような、ほっとした嬉しさを覚えた。
こちらはこちらで、用途を見極めながら、今後も使い続けていきたいと思っている。