アニメーションライブラリ「Lottie」を用いたWebサイトMV（メインビジュアル）用映像制作のススメ

みなさんアニメーションライブラリである「  Lottie  」をご存知でしょうか？

聞き慣れない方も多いと思いますが、LottieとはAirbnb社が開発したAndroid、iOS、Web、Windows用 アニメーションライブラリ です。

拡張プラグインを用い、映像編集ソフトAdobe After Effects等のアニメーション作成ツールで作成したアニメーションを json としてエクスポートでき、モバイルおよびWeb上でアニメーションを表示できるというものです。

Lottieの最大の特徴はパスや色の情報を文字列で出力するだけなので、動画ファイルと比べて遥かに  軽量  なところです。

そのため、Webサイト表示時も非常に動作が軽く、mp4での表示に比べ、 画質を劣化させる必要がありません 。

しかし、Lottieも万能なものではなく、苦手な表現もあります。

参考：https://lottiefiles.com/supported-features

マスクや描画、文字、テクスチャ等が苦手なようですね。

その場合には、 SVG や WebGL を用い、テクスチャ等を補完してあげましょう。

以下サイトには、Lottieで表現できるアニメーション例も掲載されていますので、ぜひ参考にしてみてください。

https://lottiefiles.com/aep

---

弊社JPCでもモーショングラフィックなどを用いたWebサイト内MV（メインビジュアル）用の映像制作を依頼されるケースが多々ありますが、日々進化するサイトの特性の知識を深め、適材適所の実装ツールを用いることでユーザーフレンドリーな映像表現を実現していきたいものです。弊社では会社紹介や商品紹介/製品紹介などの動画制作と一緒にWebサイトの制作も多くご依頼いただくことが多く、一度使用してみたいと考えています。

また、このような便利なツールも京都、東京のスタッフ間でも共有しているので、今後こちらでも紹介していきます。