デザイナ-Hです。今年は軽量のデータ形式について考える機会がありました。それは、2020年にiOS14で「WebP」の正式サポート発表後「WebP」を本格的に使用できるようになったことが挙げられます。

「WebP」の開発元であるGoogleが、Photoshop用のプラグイン「WebPShop」を公開しましたのでインストールしたり、WordPressに専用プラグインを入れたりしました。
他に軽量のデータ形式といえば、ベクターグラフィックスです。振り返ると2000年代中盤まで、ベクターグラフィックスのアニメーションの代表Flash(現:Adobe Animate)はWebコンテンツの開発・制作環境としてはぶっちぎりのシェアがあったようです。そして、ついにFlash Playerが終わりを迎えたのは昨年の今頃でした。実際、出来ることと出来ないことがありますが、HTML5で再現する流れで久しくなります。

現在では、ベクターグラフィックスのアニメーションは素材をAdobe Illustrationで作成し、モーションをAdobe After EffectsやAdobe Animateで作成する流れは王道として変わりません。

軽量なアニメーションをファイル形式で見みると「GIF」「APNGまたはWebP」「JSON」がありますが、それぞれメリット・デメリットがあります。ちなみにこの中で、ベクターグラフィックス(テキストベース)のリアルタイムレンダリングは「JSON」だけで、他はビットマップ画像のパラパラ動画なので 「JSON」 には個性を感じます。

ランディングページで静止画だとそのままスクロールされてしまいがちな所には、アニメーションがアイキャッチとなりユーザがスクロールを止める可能性は高くなるでしょう。
アラヤでは「JSON」ベースのSVGアニメーション制作もしています。