コーディング必要なし!LottieでWebアニメーションを作ってみよう

design-lottie-animation-2

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

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

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

Lottieアニメーション

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アニメーションプロセス

使えるもの

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

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

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

design-lottie-animation-4

かわいくて、ちょっと神経質そうな女の子のアニメーションができました。アニメーションはループすることも、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要素のレンダリングや表現の最適化など、設定を気にする必要がないのはうれしいポイントですね。

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

Lottieファイルプラグインを使用したエクスポートプロセス

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

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

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

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

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

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

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

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

犬

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

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

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

長い犬

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

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

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

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

Tシャツとか

事例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)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship