Lottieアニメーションの紹介

最近、Lottieアニメーションを設置する機会がありましたので、Lottieの概要とWordPressへの設置方法をご紹介いたします。

Lottieアニメーションの概要

Lottieは、オープンソースのライブラリで、アニメーションを簡単にWebやモバイルアプリに組み込むことができます。

このように複雑で美しいアニメーションをそのまま利用できます。
滑らかな動きや細かいディテールも保持されるので、高品質なビジュアルを提供できます。
Lottieアニメーションは、After Effectsで作成したアニメーションをJSONという形式に変換して使います。

こちらのサイトからアニメーションを選びます。

右上のDownloadを押します。

設置方法によってLotie内での操作方法（ファイルの取得方法）が異なりますので、次の章で記載します。

藤井講師が以前ご紹介していたプラグインSpectaを使用すると、サイズや再生速度を簡単に変えることができます。

LottieからLottie JSONをダウンロードします。

つづいてWordpressの編集画面でSpectraのLottie Animationを選択します。

Spectraの公式ドキュメントはこちら

LottieでダウンロードしたJSONファイルをアップロードします。

これで表示は完了です。

JSONファイルではなくURLを設定する方法もあります。

コードマークを押してから、Asset linkをコピーし、URLとしてSpectraのブロックに挿入します。

Spectraを使用せずにEmbed HTMLとしてWordPressに設置する方法もあります。

先ほどのコードマークからEmbed HTMLをコピーします。

カスタムHTMLブロックとしてコピーしたhtmlを貼り付けます。

こんな感じです。

CDNも入っているので、これだけで表示ができます。

みなさんもぜひ試してみてください！