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

ヨッチヨッチ

こんにちは!Web集客コンサルタントのヨッチです。
プロフィールを見る

ウェブサイトには、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が使えないときも、埋め込みコードで設置することもできます。
配置するときの自由度は劣りますが、アニメーションを使えるのは嬉しいですよね。

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

ヨッチヨッチ

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

PS. 訪問者様へのお願い

当サイトは僕が一人で管理していて、記事数は550本以上あります。
なので、記事によってはリンク切れなどが発生している場合があります。

もしお気づきの点がありましたら、下にあるコメント欄からご報告いただけると嬉しいです。
もちろん、記事の感想とかメッセージも大歓迎です!

どんなコメントも励みになっていて、かならず返信しています。
本当にありがとうございます。

コメント欄に移動する