アニメーションライブラリ「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で表現できるアニメーション例も掲載されていますので、ぜひ参考にしてみてください。
弊社JPCでもモーショングラフィックなどを用いたWebサイト内MV（メインビジュアル）用の映像制作を依頼されるケースが多々ありますが、日々進化するサイトの特性の知識を深め、適材適所の実装ツールを用いることでユーザーフレンドリーな映像表現を実現していきたいものです。弊社では会社紹介や商品紹介/製品紹介などの動画制作と一緒にWebサイトの制作も多くご依頼いただくことが多く、一度使用してみたいと考えています。
また、このような便利なツールも京都、東京のスタッフ間でも共有しているので、今後こちらでも紹介していきます。