ヨッチ こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。
あなたは、「Lottie」というアニメーションファイルを知っていますか？
GIFアニメとは異なる、次世代アニメーションといわれています。
この記事では、GIFアニメとの違い・特徴・使い方をまとめて解説しています。
素材のダウンロードサイトも紹介しているので、まずは軽くチェックしてみましょう！
記事の内容を動画でまとめました！
ヨッチ 記事について、動画ですべてお話ししています。
補足も交えて解説しているので、気になる方はこちらもどうぞ。
「Lottie」とは？GIFアニメとの違い
「Lottie」とは、ブログなどに埋め込むことができる次世代アニメーションです。
Adobe After Effectsというソフトを使えば、上のようなイラストアニメを作成できます。
自分で作るだけでなく、素材ファイルをダウンロードして使うこともできます。
Lottie・GIFアニメとの違い
LottieとGIFアニメが大きく異なるのは、以下の5つです。
- アニメーションがスムーズ
- 画像ファイルよりも高画質
- ファイルサイズが小さい
- 写真には対応していない
- 埋め込みコードの入力が必要
Lottieの特徴・メリット
先ほどのサンプルを見てもらうとわかるとおり、とてもスムーズにアニメが動いています。
画質も良く、滑らかできれいな表現が得意です。
また、GIFアニメよりもファイルの容量が小さいという特徴があります。
ウェブサイトの容量をできるだけ落としたいときに、大活躍してくれます。
GIFアニメの特徴・メリット
Lottieは写真には対応しておらず、イラスト・アニメのみを作成できます。
なので、写真や画面のキャプチャーをアニメ化するには、GIFアニメが向いています。
また、Lootieファイルをサイトに載せるには埋め込みコードが必要です。
GIFアニメはimgタグで記載するだけなので、手間がかからずに済みます。
Lottieアニメーションの使い方
Lottie・GIFの違いがわかったところで、どうやってLottieを導入するのか見ていきましょう。
Lottieファイルのダウンロード
Lottieファイルの素材をダウンロードするなら、「LottieFiles」というサイトが便利です。
以下の記事でダウンロード・埋め込みコードの発行まで解説しています。
ウェブサイトには、Lottieというアニメーションを埋め込むことができます。 サイズが小さくクオリティが高いので、次世代フォーマットとして期待されているファイルです。 そんなLottieファイルを、なんと無料で配布してい …
ページビルダーでLottieファイルを埋め込む方法
Lottieファイルは、埋め込みコード以外にもページビルダーで載せることもできます。
Elementor Proは、世界シェアNo1のページビルダーです。
とても使いやすく、僕もすでに導入して使い倒しています。
あなたは、Elementor（エレメンター）というページビルダーを知っていますか？ WordPressのページビルダーの中でも、圧倒的No.1の人気があるプラグインです。 しかも、無料版が用意されていて、基本的な機能はす …
以下の記事で、どうやってElementor ProでLottieアニメーションを配置するか解説しています。
Elementor Proには、高品質なコンテンツを作れる機能が豊富にそろっています。 その中でも、Lottieアニメーションはかなり便利かつリッチな機能といえます。 「Lottieアニメーション」とはなにか？ どんなデ …
【まとめ】GIFアニメとうまく使い分けることが大事
Lottieファイルは、大きな可能性を秘めているアニメーションです。
GIFアニメと比べると、どちらにもメリット・デメリットがあります。
なので、Lottie・GIFはシーンによって使い分けるのが大事だといえるでしょう。
- Lottie
- イラスト・アニメが得意
- ファイルサイズが小さく、クオリティが高い
- GIF
- 写真・イラストが得意
- 画像の挿入に手間がかからない
今までは、画像を使ったアニメーションはGIFというのが標準でした。
新たにLottieという選択肢が加わることで、さらに表現の幅が広がってきました。
After Effectsの操作には慣れが必要なので、Lottieファイルを作れる方のスキルは貴重です。
素材サイトでファイルを販売して、収益化することもできます。
できることが増えて、ネット上の表現がさらに広がっていくのはワクワクしますね！
