「Lottie」とは?GIFアニメとの違い・特徴・使い方を紹介!

ヨッチヨッチ

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

あなたは、「Lottie」というアニメーションファイルを知っていますか?
GIFアニメとは異なる、次世代アニメーションといわれています。

この記事では、GIFアニメとの違い・特徴・使い方をまとめて解説しています。
素材のダウンロードサイトも紹介しているので、まずは軽くチェックしてみましょう!

「Lottie」とは?GIFアニメとの違い

「Lottie」とは、ブログなどに埋め込むことができる次世代アニメーションです。


Adobe After Effectsというソフトを使えば、上のようなイラストアニメを作成できます。
自分で作るだけでなく、素材ファイルをダウンロードして使うこともできます。

Lottie・GIFアニメとの違い

LottieとGIFアニメが大きく異なるのは、以下の5つです。

  1. アニメーションがスムーズ
  2. 画像ファイルよりも高画質
  3. ファイルサイズが小さい
  4. 写真には対応していない
  5. 埋め込みコードの入力が必要

Lottieの特徴・メリット

先ほどのサンプルを見てもらうとわかるとおり、とてもスムーズにアニメが動いています。
画質も良く、滑らかできれいな表現が得意です。

また、GIFアニメよりもファイルの容量が小さいという特徴があります。
ウェブサイトの容量をできるだけ落としたいときに、大活躍してくれます。

GIFアニメの特徴・メリット

Lottieは写真には対応しておらず、イラスト・アニメのみを作成できます。
なので、写真や画面のキャプチャーをアニメ化するには、GIFアニメが向いています。

また、Lootieファイルをサイトに載せるには埋め込みコードが必要です。
GIFアニメはimgタグで記載するだけなので、手間がかからずに済みます。

Lottieアニメーションの使い方

Lottie・GIFの違いがわかったところで、どうやってLottieを導入するのか見ていきましょう。

Lottieファイルのダウンロード

Lottieファイルの素材をダウンロードするなら、「LottieFiles」というサイトが便利です。
以下の記事でダウンロード・埋め込みコードの発行まで解説しています。

ページビルダーでLottieファイルを埋め込む方法

Lottieファイルは、埋め込みコード以外にもページビルダーで載せることもできます。

Elementor Proは、世界シェアNo1のページビルダーです。
とても使いやすく、僕もすでに導入して使い倒しています。

以下の記事で、どうやってElementor ProでLottieアニメーションを配置するか解説しています。

【まとめ】GIFアニメとうまく使い分けることが大事

Lottieファイルは、大きな可能性を秘めているアニメーションです。
GIFアニメと比べると、どちらにもメリット・デメリットがあります。

なので、Lottie・GIFはシーンによって使い分けるのが大事だといえるでしょう。

Lottie
イラスト・アニメが得意
ファイルサイズが小さく、クオリティが高い
GIF
写真・イラストが得意
画像の挿入に手間がかからない

今までは、画像を使ったアニメーションはGIFというのが標準でした。
新たにLottieという選択肢が加わることで、さらに表現の幅が広がってきました。

After Effectsの操作には慣れが必要なので、Lottieファイルを作れる方のスキルは貴重です。
素材サイトでファイルを販売して、収益化することもできます。

できることが増えて、ネット上の表現がさらに広がっていくのはワクワクしますね!

ヨッチヨッチ

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

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

WPクエスト

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