LottieでWebアニメーションを作ってみよう【使い方事例紹介】

Lottieは、Airbnbが開発したアニメーションライブラリ。どんなプラットフォームでも簡単に使用できて、ピクセル化せずに拡大縮小ができる、とても便利なライブラリです。

そんなLottieの最大の魅力は、なんといってもコーディングの知識が要らないことでしょう。

本記事では、Lottieを使ったアニメーションの作りかたについて解説します。

Lottieでアニメーション作りをシンプルに

Lottieは、あらゆるプラットフォームでも使用できます。つまりWebページとアプリケーションの双方でアニメーションが使えるのです。メッセージングプラットフォームでステッカーとして使う、といった使い方も考えられますね。

JSONファイルはGIFやPNGにくらべてファイルサイズが小さいため、ダウンロードの速度が速く、またディスク容量も減らせます。さらにベクターとラスターの要素を混在させて変換を適用することも可能です。

こうしたさまざまな利点をよりよく理解するために、ITG.digitalの事例を参考に解説していきます。ITG.digitalのLPにあるアニメーションは、すべてLottieで制作されています。バナーの犬も、もちろんLottieで制作したものです。

3ステップでLottieでアニメーションを作ってみよう

実際にLottieを使ってアニメーションを作ってみましょう。ステップは以下の3つです。

1. デザインを作る
2. アニメーションにする
3. アニメーションを出力する

ステップ1. デザインを作る

まずはデザインを制作して、アニメーションを作る準備をしましょう。

最初に制作したイラストは、以下の図のいちばん左に位置している、犬と女の子のデザインでした。この女の子が足で地面をトントン叩きながら、大きくため息をつくアニメーションを作っていきます。

ポーズを変えたあと、ワンピースのテクスチャを何パターンか制作し、最終的にアニメーションにするものを選びました。それがいちばん右のデザインです。

テクスチャを使ったイラストをアニメーションにするコツは、以下のとおりです。

• ファイルサイズを小さくするため、ベクターのテクスチャを使う
• テクスチャのポイントやパーツを少なくする
• ブラウザによってはバグが発生する可能性があるため、マスクの使用は控える

ステップ2. アニメーションにする

次のステップはアニメーション化です。まずはいくつかのイラストをアニメーション化してから、JSONに変換する必要があります。

このステップで大切なのは、ずばりシンプルさ。エフェクトは使わず、位置／回転／拡大縮小／透明度などを編集してシンプルにアニメーションをつけましょう。パスアニメーションもおすすめです。

使えるもの

• アニメーションをつけたシェイプ
• 色、不透明度、グラデーション
• png／jpg要素
• トリムパス
• リピーター

使えない＆使うべきでないもの

• マスク
• 塗りつぶし以外のエフェクトすべて
• マージパス

かわいくて、ちょっと神経質そうな女の子のアニメーションができました。アニメーションはループすることも、1回だけ再生することも可能です。出力する前にアニメーションがきちんとループしていることを確認しておきましょう。

ステップ3. アニメーションを出力する

アニメーションが完成したら、出力しましょう。

ここからは2つの選択肢である、BodymovinプラグインとLottie Filesプラグインの使いかたについて解説します。

Bodymovinプラグイン

1. Bodymovinを開き、レンダリングするコンポジションを選択する
2. 設定を調整する。アニメーションにテキストがある場合「Glyphs」にチェックを入れ、アニメーションにpng／jpg画像を使用している場合は「Include assets in JSON」にチェックを入れる
3. レンダリングをクリックする
4. BodymovinまたはLottie FilesのWebサイトでアニメーションをプレビューする
5. Lottieをよく知らない方にアニメーションを見せたい場合は、レンダリングで「demo」をクリックする。こうすることで誰でもブラウザのページでプレビューできるHTMLを作成できる

Lottie Filesプラグイン

Lottie FilesでもBodymovinと同じことができます。しかしこちらのほうが機能が多く、ブラウザ上でLottieのWebサイトにファイルをアップロードする必要もありません。また、このプラグインを使えばアニメーションをAfter Effectsでプレビューできます。

Lottieプラグインでレンダリングをするための手順は、Bodymovinとほとんど同じです。くわえて以下のような機能もあります。

• LottieのWebサイトと同じように、完璧で良好な動作プレビューを提供
• アニメーションをWebサイトに直接アップロード可能
• 無料のLottieアニメーションライブラリ付き（好きなアニメーションを選択して、プラグインから直接AEPファイルをダウンロード可能）

Bodymovinにくらべると、png／jpg要素のレンダリングや表現の最適化など、設定を気にする必要がないのはうれしいポイントですね。

レンダリングが遅いという欠点さえ気にならなければ、おすすめの選択肢です。

これでアニメーションが準備できました。iOS／Android／Web／React Nativeなどで、Lottieファイルをそのまま使えます。

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

Lottieアニメーションの使い方を、以下4つの実例をもとにご紹介します。

• インタラクティブに変化する犬
• 犬を使ったライン
• アニメーション付きのタブ
• 料金プランのアニメーション

事例1. インタラクティブに変化する犬

女の子の隣にいる犬のアニメーションも、Lottieで制作しています。

犬をインタラクティブに変化させるために、犬のトランジションを6つ制作し、ひとつのコンポジションにまとめました。JSONファイルのタイムコードを使えば時間を大幅に節約できます。

どの犬を選んでも、スムーズにアニメーションが動きますね。

事例2. 犬を使ったライン

Webサイト上のラインに使われているのも、Lottieアニメーションです。

犬を走らせて、位置のプロパティをアニメーション化するだけで、この遊び心たっぷりのラインを実現できます。

事例3. アニメーション付きのタブ

アニメーション付きのタブ、かっこいいですよね。難しそうに見えるかもしれませんが、以下の3つのステップをするだけで、とても簡単に実装できます。

1. 各タブごとにイラストをデザイン化する
2. 少しだけアニメーションをつける
3. アニメーションをつけたイラストを、ひとつの構図にまとめてJSONに書き出す

犬がインタラクティブに変化するアニメーションと同じく、タイムコードを使うことで、作業時間を短縮しています。

事例4. 料金プランのアニメーション

料金プランの紹介に登場する恐竜のアニメーションにも、Lottieを使っています。

ちょっとしたアニメーションですが、キャラクターに命が吹き込まれたように見えますよね。

練習してみよう

本格的なアニメーション制作に取り組む前の、練習用のファイルを用意しました。JSONとAEPファイルをここから、HTMLをここからダウンロードできます。

Lottieを使ったアニメーション制作を、ぜひ練習してみてください。

おわりに

今回は、Lottieについての基礎知識や使い方についてご紹介しました。まずは練習用ファイルを使って、ぜひLottieの魅力に触れてみてください。

After Effectsのアニメーションは、JavaScriptのアニメーションよりもはるかに簡単で、柔軟性があります。またデザインの修正にかかる時間も大幅に短縮できました。必要なのは、After Effectsで編集し、JSONファイルを置き換えるという2ステップだけです。

またLottieファイルは、WordPress／Shopify／Webflow／Squarespace／Wix／ReadymagなどのWebサイトだけでなく、iOSやAndroidアプリと互換性があります。

アニメーションの表示オプションを調整するコードを書く必要もありません。そのかわりに、Lottie Webプレーヤーを使いましょう。

（執筆：Netrix　翻訳：Nakajima Asuka　編集：Kitamura Yuu、Sato Mizuki）