軽量のアニメーションを模索している方なら、一度はLottieアニメーションに興味を持ったことがあるはず。
じつは私もそうでしたが、Lottieアニメーションを導入するには、一般的に、JSONファイルを組み入れる必要があり、ある程度の知識が必要でした。
しかし、今回、Themify Builderのアップデートにより、Lottieモジュールが追加されたことで、誰でも簡単にLottieアニメーションをWEBサイトに導入できるようになりました。
今回はLottieアニメーションとは何か?ということから、ThemifyでLottieアニメーションを設定する方法まで紹介します。
目次
Lottieアニメーションとは何か?
Lottieアニメーションとは、近年ウェブデザインやモバイルアプリ開発において急速に普及している、Adobe社が開発したBodymovinプラグインを使用して制作された新しいアニメーション形式です。
この形式では、アニメーションをベクターベースのJSONファイルとしてエクスポートし、ウェブページやモバイルアプリに組み込むことができます。
Lottieアニメーションは、軽量で高品質なアニメーションを実現することができるため、多くのデザイナーやWEB開発者に愛用されているため、注目のアニメーション形式でもあります。
Lottieアニメーションの特徴とメリット
Lottieアニメーションが選ばれるのには特徴とメリットがあるからです。その理由をいくつか紹介します。
軽量で高品質
Lottieアニメーションは、小さなファイルサイズでありながら、高品質なアニメーションを提供します。
これにより、ウェブページやアプリの読み込み時間が短縮され、ユーザーエクスペリエンスが向上します。
カスタマイズ性と再利用性
Lottieアニメーションは、多様なパラメーターを調整して簡単にカスタマイズできます。
また、アニメーションの再利用が可能で、同じアニメーションを複数のプロジェクトに効率的に利用できます。
クロスプラットフォーム対応
Lottieアニメーションは、クロスプラットフォーム対応の特性を持っています。つまり、さまざまなデバイスやブラウザで一貫して美しいアニメーションを表示することができます。
これにより、ユーザーにとって一貫性のあるエクスペリエンスを提供します。
多彩な表現
Lottieアニメーションは、豊富な表現力を持っています。
アニメーションにはベジェ曲線やオーバーレイ、トリミングなどの効果を自由に組み合わせることができ、デザイナーの創造性を引き出すことができます。
コードベースのアニメーション
Lottieアニメーションは、コードを使用して制御することができるため、インタラクティブなアニメーションの実現が可能です。デザインと開発の連携を強化し、アニメーションの品質と柔軟性を高めます。
Lottieアニメーションは、その軽量で高品質かつ表現力豊かな特徴により、ウェブやアプリのデザインに新たな可能性をもたらしています。
だからこそ比較的新しい技術であるにもかかわらず、多くのデザイナーやWEB開発者に選ばれていると考えられます。
LotiieアニメーションとGifアニメーションの違い
Lottieアニメーションは、これまでの静止画アニメーションとして活用されてきたGifアニメーションと何が違うのか?
いくつか紹介します。
そもそもGifアニメーションとは?
Gifアニメーションは、ラスターベースのアニメーション形式であり、一連の静止画像を連続的に表示することでアニメーションを表現します。
短時間ですが動く画像を作成できるので、バナー広告やSNSやブログなどでよく利用されています。
LottieとGifアニメーションは何が違うのか?
フォーマットの違い
LotiieアニメーションはベクターベースでJSONファイルとしてエクスポートされますが、Gifアニメーションはラスターベースで静止画像の連続です。ベクターベースとラスターベースの違いにより、Lotiieアニメーションは拡大しても画質が劣化しませんが、Gifアニメーションは画質が劣化します。
ファイルサイズの違い
Lotiieアニメーションは軽量なファイルサイズを持ち、ウェブページの読み込み速度に影響を与えにくいです。一方、Gifアニメーションは比較的大きなファイルサイズを持ち、読み込みに時間がかかることがあります。
ちなみに、近年では「Gifアニメーションにするならmp4動画にした方が良い」と言われるくらい、ファイルサイズ(読み込み時間に影響するもの)が重要視されています。
制御の違い
Lotiieアニメーションはコードを使用して制御できるため、アニメーションの挙動を細かく調整することが可能です。一方、Gifアニメーションは静止画像の連続であるため、制御が限られており、インタラクティブなアニメーションの実現が難しいです。
以上、違いを紹介しました。端的にみるなら、”圧倒的にLottieアニメーションを選択すべき!”というイメージを持ったと思います。
しかし、実際には、ケースバイケースです。
LottieとGifアニメーションは用途で使い分けよう
例えば、Lottieは写真には対応しておらず、イラストアニメのみを対応しています。
ですから、シンプルなイラストアニメをWEBサイトに掲載したい場合はLottieを選ぶべきです。
それに対してGifは写真や画面のキャプチャーをアニメ化することができます。また、Lottieはコードの埋め込みが必要ですが、Gifはファイルをアップロードするだけなので、簡単にWEBに掲載できます。
ですから、バナー広告やSNSに掲載するならGifアニメの方が向いています。(Lottieは多分無理)
このように、使い勝手を考慮して、LottieとGifアニメーションは用途や狙いによってつか分けることが大事なのです。
Lottieアニメーションの作成方法
Lottieアニメーションを作成する主な方法を紹介します。
After Effectsでの作成
Lottieアニメーションを作成する最も一般的な方法は、Adobe After Effectsを使用することです。
After Effectsでアニメーションをデザインし、Bodymovinプラグインを使用してJSONファイルとしてエクスポートします。
このJSONファイルをWebページに埋め込むことで、Lottieアニメーションを表示できます。
オンラインツールを利用する
After Effectsを使用せずにLottieアニメーションを作成する方法として、オンラインツールを利用する方法があります。
オンラインツールを利用すると、直感的なインターフェースでアニメーションをデザインできます。
また、Lottie Filesのように、完成しているLottieアニメーションをJSONファイルでダウンロードするサービスもあるので、それらのツールを利用すれば、効率的にLottieアニメーションを作成できます。
完成したアニメーションはJSONファイルとしてエクスポートされ、Webページに組み込むことができます。
Themify Builderなどのプラグインを利用する
上記2つの方法の場合、JSONファイルをWEBサイトに組み込む必要があるため、ある程度の知識が必要不可欠です。そのため、”誰でも簡単にLottieアニメーションを設置できる”とは言えませんでした。
しかし、Themify Builderのようなビルダープラグインを利用すれば、”誰でも簡単にLottieアニメーション”を設定することができます。
Themify Builderの他にも、ElementerでもLottieアニメーションを設定できます。
どちらのビルダーを選ぶべきか?の正解はなく、操作性や機能、料金プランなどを考慮して、自分に合う方を選べば良いです。
総合的に考慮して私は、Themifyを選びました!
Themify でLottieアニメーションを作成する方法
では、ここからは、Themify BuilderでLottieアニメーションを作成する方法を紹介します。
といっても、Lottieモジュールを選択して、ちょっとした設定をするだけなので、とても簡単です。
Lottie Animationモジュールを追加する
まず、いつの間にか追加されていた、Lottie Animationモジュールを任意の場所に追加します。
追加方法は”+”ボタンで追加してもいいですし、マウスでドラッグ&ドロップで追加しても良いです。
Lottie Animationを選ぶ
すると豊富なテンプレート?が表示されるので、その中から、好きなLottieアニメーションを選択します。
アニメーションを選択すると、次のようなメッセージが表示されます。
直訳すると、
”外部ファイルを使用するか、サイトにダウンロードするかを選択します。外部ファイルを使用すると、lottfiles.com からロードされます (CDN を使用してファイルをより速くロードしますが、ファイルが変更または削除されると、サイトに影響します)。”
と記載されています。
つまり、外部サイトを利用すれば早いけど、もしそのファイルを削除されたり、置き場所を変更された表示されなくなるけどどうする?って聞いているわけです。
これは正直どちらでもいいですが、短期的に考えるなら外部ファイルを利用し、長期的に考えるならダウンロードすることを検討しましょう。
どちらかのボタンをクリックすれば、Lottieアニメーションが表示されます。
これで、Lottieアニメーションがサイトに追加されました。簡単ですよね?
Themifyでは、このLottieアニメーションをどのように表示させるのか?を設定することもできます。(別途紹介します。)
Lottie アニメーションの作成方法まとめ
Lottieアニメーションは、軽量で高品質なベクターアニメーションを提供する画期的なフォーマットです。
ですから、ウェブ開発者やデザイナーにとって、魅力的な視覚エフェクトを手軽に実現できる強力なツールとなっています。
さらにThemify Builderのようなビルダープラグインからも簡単にLottieアニメーションを作成(設定)できるようになったことで、これからのデフォルトのアニメーション方法になる可能性も秘めています。
知識がないけど、動きのあるWEBサイトを作成したい方は、ぜひ、Themify Builderを利用してLottieアニメーションを導入してみてください。