ノーコードでWebページを作成できるWordPressプラグイン「Elementor」のPro版にLottie（ロッティー）アニメーションを簡単に追加できる機能が、バージョン 2.10.2から追加されました。
この記事ではElementor Lottieアニメーションを体験してみたので、詳しくご紹介します。
この記事をオススメしたい方
● WebサイトにLottie アニメーションを追加したいと考えている方
● Elementorの導入を考えている方
● これからWebサイトを作成し、活用していきたいと考えている方
Lottieアニメーションとは？
Andoroid・iOS・Web・Windowsの共通のアニメーションライブラリで、Airbnbが開発しています。拡張プラグインBodymovinを使用すれば、Adobe After Effectsで作成したアニメーションをjsonとしてエクスポートでき、アニメーションをレンダリングできます。
これまで複雑だったアニメーションの実装が手軽にでき、動画のmovファイルやGIFアニメーションに比べてファイルサイズも格段に軽量な上、SVG（Scalable Vector Graphics）のため解像度を気にせず拡大縮小が自由自在です。
＜SVGファイルとは？＞
パス・テキスト・シェイプなどの集合を画像として扱う「ベクトル形式」で画像を描画するため拡大縮小に強く画質が劣化しないため、どんな画面でも鮮明な画像を表示できます。
レスポンシブデザインだとPCとスマートフォンで見た目が変わってしまいますが、SVGだとどちらの画面でもきれいな画像を表示できます。
ただしベクトル形式の画像は複雑な計算式で画像を描画するため、パスを使った画像には適していますが写真のように複雑な配色の画像描画には適していません。
Elementorを使ってLottieアニメーションを追加
実際にElementorでLottieアニメーションを追加してみたのでその方法をご紹介します。今回、Elementorのバージョン 2.10.2がリリースされるとともにLottieアニメーションプラットフォーム「LottieFiles」にElemetorとの連携ボタンが追加されました。
LottieFilesのWebサイト
LottieFilesに表示されたElmentorボタン
まずはLottieFilesのWebサイトで検索し、気に入ったLottieアニメーションを見つけると画面上にある「Download JSON」ボタンをクリックします。パソコンの「ダウンロード」ファイルに以下のようなJSON形式のファイルがダウンロードされます。
今回、私達がダウンロードしたファイルも8KBという、かなり小さなファイル要領でした。
次にElementorから「Lottie」の要素を探してクリックします。（Lottieボタンがヒョじされない場合、Elementor Proのバージョンが古い場合があります。）
Lottieの編集画面が表示されるので赤枠からダウンロードしたJSONファイルを選択してWordPressのメディアにアップロードします。
ElementorのLottieメニューではトリガー（アニメーションを起こす起点）を設定できたり、ループのスピード、スタートポイント・エンドポイントという細かい設定も可能です。
以下は実際にLottieFilesからダウンロードしたJSONを表示してみたアニメーションです。動きはなめらかですし、グラデーションが掛かったデザインでも8KBという小さなファイル容量で動くため、表現の幅が増え、よりユーザーにとって見やすいWebサイトが構築できます。
使用したアニメーションはこちらから
今回ダウンロードしてみたような背景に使用できるものから、キャラクターが動いていたり、操作をイメージさせるようなポインターのアニメーションと、多くのLottieアニメーションを探すことができます。Lottieアニメーションを工夫して使用した、より使いやすいWebサイトが増えていきそうです。
Lottieアニメーション、いかがでしたか？
Lottieアニメーションは古くから確立されていた技術のようですが近年使い方に注目が集まっています。トレンドを取り入れることで良いブランディングを創出してみてはいかがでしょうか？
Good Thingsでは、Webサイト制作やキャンペーンの立案のお手伝いもしております。
