フリーのアニメーション素材をダウンロードできる【LottieFiles】

ヨッチヨッチ

こんにちは、ブログ運用メンターのヨッチです。

ウェブサイトには、Lottieというアニメーションを埋め込むことができます。
サイズが小さくクオリティが高いので、次世代フォーマットとして期待されているファイルです。

そんなLottieファイルを、なんと無料で配布しているサイトがあるんです。
サイトから素材をダウンロードしたら、あとはサイトに埋め込むだけで動作します。

この記事では、LottieFilesでフリーのアニメーション素材をダウンロードする方法を紹介します。
記事内に設置するやり方までお伝えしているので、まずは軽くチェックしてみませんか?

LottieFilesで素材をダウンロードして設置する方法3ステップ

Lottieファイルは、3ステップでダウンロードから設置まで進めることができます。

  1. LottieFilesに会員登録する(無料)
  2. Lottieファイルを選択・ダウンロードする
  3. ウェブサイトに設置する

全体の流れはこんな感じです。
詳しい手順を、ここから詳しく見ていきましょう。

【1】LottieFilesに会員登録する(無料)

まずは、「LottieFiles」という素材サイトで、会員登録をしておきましょう。
登録は無料で、有料・無料の素材がそれぞれ用意されています。

無料でも使える素材はたくさんあるので、まずはお試しで使ってみるのが良いと思います。

LottieFiles

【LottieFiles】公式サイトを見る

「Get started for free」をクリックすると、すぐに会員登録できます。

「Get started for free」をクリック

フォームに入力してから、「Sign up with Email」をクリックしましょう。
画面下にある「Log in」をクリックすると、ログイン画面に移動できます。

フォームに入力して「Sign up with Email」をクリック

SNSやGoogleログインにも対応しているので、好みの方法でログインしましょう。

SNSやGoogleログインにも対応

会員登録・ログインができたら、いよいよLottieファイルを選んでダウンロードします。

【2】Lottieファイルを選択・ダウンロードする

Lottieファイルは、公式サイトの「Discover」→「Free Animations」から探すことができます。

「Discover」→「Free Animations」

素材ページでは、たくさんのファイルが一覧で表示されています。
そのままアニメーションしているので、実際に使っているイメージもできると思います。

ファイルが一覧で表示

【LottieFiles】Lottieアニメーション素材を見る

右上から検索もできるので、好みのファイルを探してみましょう。

右上から検索もできる

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

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

これでLottieファイル(JSON形式)がダウンロードできました。

【3】ウェブサイトに設置する

ダウンロードしたLottieファイルを、実際にウェブサイトに設置していきましょう!
設置する方法は、大きくわけて2種類あります。

  • Elementor Proで埋め込む
  • HTMLで埋め込む

Elementor Proなら、ドラッグ&ドロップで簡単にアニメーションを設置できます。
直感的に操作できて、自由自在に配置できるのが特徴です。

HTMLで埋め込む場合は、Lottieファイルのダウンロードは不要です。
しかし、Elementor Proほど自由に配置はしづらくなってしまいます。

それぞれのやり方を、詳しく見ていきましょう。

Elementor Proで埋め込む方法

Elementor Proで埋め込む場合は、まずワードプレスでElementorの編集画面を開きましょう。

Elementorの編集画面

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

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

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

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

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

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

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

絶対配置(position: absolute;)を使用すれば、ほかの画像に重ねて表示することもできます。
好きなようにカスタマイズできるので、いろいろ試してみるのが良いと思います。

ソースコードを直接貼り付ける方法

ソースコードを直接貼り付ける場合は、LottieFilesから埋め込みコードを取得します。
素材ダウンロードページの少し下にある、「<html>」をクリックしましょう。

「<html>」をクリック

コードの編集画面が表示されます。
各メニューを設定できたら、下にある「Copy Code」をクリックしましょう。

「Copy Code」をクリック

以下のような埋め込みコードを取得できました。

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_zlrpnoxz.json" background="transparent" speed="1" style="width: 300px; height: 165px;" loop autoplay></lottie-player>

あとは、記事内にコードをそのまま貼り付ければ、アニメーションを設置できます。

Elementor Proとは違って、基本的にはソースコードの内容がそのまま反映されます。
なので、より柔軟に設置したいときはElementor Proがおすすめです。

【まとめ】Lottieファイルで滑らかなアニメーションを設置できる

Lottieファイルを活用すれば、GIFアニメよりも滑らかでクオリティの高い画像を設置できます。
しかもファイルサイズも小さいので、まさに次世代フォーマットと呼べるアニメーションです。

Elementor Proなら、直感的な操作ですぐにLottieファイルを配置できます。
非常に優秀なプラグインなので、まずは無料版から使ってみるのもおすすめです。

どうしてもElementor Proが使えないときも、埋め込みコードで設置することもできます。
配置するときの自由度は劣りますが、アニメーションを使えるのは嬉しいですよね。

サイト内に動きがあると、それだけ見た目のインパクトも大きくなります。
印象に残るページを作れるので、試しに使ってみてはどうでしょうか?

ヨッチヨッチ

最後まで読んでいただき、ありがとうございます!
こうしてブログでお会いできたご縁に感謝しています。

今は個人でも、戦略があればウェブサイトで稼ぐことができる時代です。
もし興味があれば、WordPressについて無料で学んでみませんか?

WPクエスト

【WPクエスト】冒険の扉に向かう