Elementor Pro版だけの機能「Lottieアニメーション」の使い方まとめ

こんにちは、ヨッチです。

Elementor Proには、高品質なコンテンツを作れる機能が豊富にそろっています。
その中でも、Lottieアニメーションはかなり便利かつリッチな機能といえます。

  • 「Lottieアニメーション」とはなにか?
  • どんなデザインを実装できるのか?
  • Elementor Proでどうやって使えばいいのか?

これらのポイントを、この記事でまとめてお伝えしています。
ハイクオリティなページを作るために、一度チェックしておきませんか?

Lottieアニメーションとは?

まず最初に、Lottieアニメーションとはなにか説明しますね。

Lottieアニメーションとは、簡単にいえばWEB上で動作するアニメーションのことです。
イメージとしては、GIFアニメの高品質版のような感じですね。

このように、クオリティの高いアニメーションをWEB上で表示できます。
Lottieアニメーションの特徴は、以下の3つです。

  1. アニメーションがスムーズ
  2. 画像ファイルよりも高画質
  3. ファイルサイズが小さい

クオリティが高いにも関わらず、ファイルサイズが小さいのは注目すべきポイントです。

まさに次世代アニメーションといえる形式で、これから大きく伸びる可能性を秘めています。
使いこなすことができれば、より目を引く演出ができるでしょう。

Elementor Proでは、Lottieアニメーションをドラッグ&ドロップするだけで簡単に設置できます。

では、どんな手順で進めていけばいいのか?
ここから順番に解説していきますね。

Elementor ProでLottieファイルを使う方法【3ステップ】

Elementor ProでLottieファイルを使う方法は、たった3ステップだけです。

  1. Elementor Proを導入する
  2. Lottieファイルを用意する
  3. Lottieファイルを読み込む

ソースコードには一切触れずに、アニメーションを実装できます。
しかもElementor Proであれば、大きさ・配置・動きの設定なども変更できます。

では、1つずつ詳しく見ていきましょう!

【1】Elementor Proを導入する

Lottieアニメーションを使うには、有料のElementor Proが必要です。
こういった目を引く演出は、基本的には有料のみで使うことができます。

僕もElementor Proを使っていて、クオリティの高いページを簡単に作れるので重宝しています。
まだ購入していなければ、サクッと公式サイトで導入してしまいましょう。

Elementor Pro

【Elementor】公式サイトはこちら

30日間の返金保証もあるので、僕もまずはお試しで使い始めました。

【2】Lottieファイルを用意する

Elementor Proを導入したら、次はLottieファイルを用意します。
自分で作ることもできますが、すでに作成されたアニメーションをダウンロードするほうが早いです。

Lottieファイルは、「LottieFiles」というサイトで無料で配布されています。
クオリティが高いアニメーションを無料で使えるなんて、本当にありがたいですよね。

一部に有料の素材もあるので、必要に応じて検討してみましょう。

LottieFilesで素材をダウンロードする方法

LottieFilesの使い方を、ここではサラッとお伝えしますね。
まずは「LottieFiles公式サイト」に移動して、好みのアニメーションを選択しましょう。

LottieFiles

アニメーションを選択したら、「Download JSON」→「Lottie JSON」をクリックします。

「Download JSON」→「Lottie JSON」をクリック

ちなみに、無料でダウンロードするときも会員登録が必要です。

会員登録

SNSアカウントでログインするか、以下の情報を入力して無料登録しておきましょう。

  • NAME
  • Email
  • Password

これでJSON形式のLottieファイルを用意できました!
あとは、Elementor Proで読み込むだけです。

【3】Lottieファイルを読み込む

まずは、ワードプレスでElementorの編集画面を開きましょう。

Elementorの編集画面

編集画面を開いたら、「Lottie」ウィジェットをドラッグ&ドロップで追加します。

「Lottie」ウィジェットを追加

これでLottieアニメーションが追加されました。
とにかく簡単に設置できるのが、Elementorの良いところです。

Lottieアニメーションが追加された

「Upload JSON File」からファイルを追加すれば、ダウンロードしたアニメーションを再生できます。

「Upload JSON File」からファイルを追加できる

大きさや配置も自由に変更できるので、いろいろ試してみましょう!

【まとめ】Lottieは画期的な次世代アニメーション

ここまで、Elementor ProでLottieアニメーションを追加する方法を紹介してきました。

実際にアニメーションを見てみると、すごくスムーズに動いているのがわかると思います。
GIFアニメと比べると、クオリティの高さを感じてもらえるはずです。

それでいてファイルサイズが小さく、動きのカスタマイズも可能です。
今後のコンテンツ制作において、かなり面白い機能だと思います。

こういったWEB上のギミックは、ファイルサイズが大きいのがネックでした。
しかし、Lottieアニメーションは過去のデメリットをすべて解消してくれました。

動きのあるWEBサイトが増えれば、もっと楽しいコンテンツが出てきそうですよね。
あなたのサイトでも、試しにLottieアニメーションを導入してみてはどうでしょうか?

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます。
どんなことでもコメントもらえると嬉しいです!
僕からもかならず返信しています。