Lottieの基本 アイキャッチ Gifアニメーション
田口 冬菜
田口 冬菜

necco note

ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説

  • Motion Design

昨年から今年にかけて、neccoが制作するサイトでは「Lottieアニメーション」を使用することが増えました。

イベントなどでLottieのお話をすると、「Lottieって何?」とご質問をいただくことがあるので、今回はLottieアニメーションでできることから作成時の注意点、書き出し方法などについてご紹介したいと思います。

Lottieとは?

Lottie(ロッティー)は民泊サービスなどを展開している会社・Airbnbが作ったアニメーションライブラリです。

After Effectsで作ったアニメーションをLottie専用の拡張機能で出力することで、ウェブサイトやアプリ上でかんたんにリッチな動きのアニメーションが表示できます。エンジニアさんはアニメーションの細かい実装をする必要がないので、工数面でもクオリティ面でもいいことばかりです。

Airbnb公式サイト
Airbnb公式サイト:https://airbnb.design/lottie/

Lottieを使ったサイトの例

実際にLottieが使われているサイトの例です。次の株式会社WORDSさんのサイトでは、複数のページにLottieを使ったラインアニメーションがあります。

株式会社WORDS / words-inc.co.jp

画面の幅やアニメーションの表示サイズに関わらず、線がはっきりなめらかに描画されています。動きにも安定感があり、Lottieのよさが伝わりやすいサイトだと思います。

WORDSさんのように「線」や「コンテンツ(文字)」の表現を大切にしているサイトでは、アニメーションのラインが少し荒れるだけで全体のクオリティが落ちてしまいます。イラストやデザインとの相性もありますが、シンプルできれいな線・オブジェクトを表現したい場合にはLottieがピッタリです。

Lottieを使うメリット

画像の書き出し形式にはGIF、APNG、MP4などもありますが、その中でLottieを選択するメリットは以下です。

  • 高い解像度を保ったまま、サイズの拡大・縮小ができる
  • GIFやMP4よりもファイルが軽い
  • JavaScriptで再生のタイミングや逆再生などの制御ができる

LottieはSVGアニメーションになるので、どれだけサイズを大きくしてもなめらかな線が描画できます。また再生速度や逆再生などのカスタマイズができるのも大きな魅力です。

Lottieで出力できる表現、できない表現

Lottieはとても便利ですが、出力できない表現もあります。Lottieアニメーションを検討するときは、「できること」「できないこと」を頭にいれておく必要があります。

■ Lottieで出力できる表現

After Effectsでアニメーションを作成する際、次の要素で作られたものはLottieで出力できます。

  • 単色で構成されたオブジェクト
  • パスのトリミング
  • 不透明度、スケール、回転など、基本的なアニメーション
  • 背景透過

以下、Lottieで書き出しできる表現のサンプルです。(この記事内ではGIF・MP4動画を埋め込んでいます)

Lottieアニメーションのサンプル(株式会社WORDSのモーション)
Lottieアニメーションのサンプル(箱猫ちゃんのマイクロインタラクション風アニメーション)

ぽよよんとキャラクターやアイコンがはねるような表現は、コードで一から書くと大変、ですよね…?Lottieであれば、After Effectsで細かい動きを設定して書き出すだけで、すぐにアプリやウェブサイトに実装できます。

■Lottieでは出力できない表現

Lottieでは、下のサンプル動画のようなイラストにリッチな効果が使われているもの、マスクをかける部分があるもの、音楽をつけたいものなどは出力できません。

  • グラデーション(塗り・線)
  • 複雑なエフェクト(After Effects標準装備のエフェクト全般)
  • エクスプレッション
  • リッチな画像効果
  • 3D表現
  • マスク
  • BGMなど音をつける

以下、Lottieでは出力できない表現を使ったサンプル動画です。(※音声の再生ボタンを押すと音楽が流れます)

Airbnbの公式サイトでは「将来的にグラデーションや画像のサポートにも対応したい」というようなことが書かれているので、今後アップデートして上記のような制限がなくなる可能性もあります。たのしみに待ちましょう!

After EffectsからのLottie書き出し方法

After EffectsからLottieアニメーションを作成したい場合の手順です。

  1. ZXPInstallerがない人はインストール
  2. 拡張機能「Bodymovin」をインストール
  3. After Effectsでアニメーション準備
  4. 作成したアニメーションをBodymovinで書き出す

以下、それぞれ画像つきで説明していきます。

1. ZXPInstallerがない人はインストール

Lottieの書き出しに使う拡張機能(Bodymovin)はZXP形式ファイルなので、「ZXPInstaller」を使ってインストールする必要があります。ZXPInstallerを使ったことがない方は、以下のサイトからダウンロードできます。

https://aescripts.com/learn/zxp-installer/

2. 拡張機能「Bodymovin」をインストール

AirbnbのGithubから「Bodymovin」をインストールします。(だれでも無料でダウンロードできます)

https://github.com/airbnb/lottie-web

Bodymovinのインストールは、ZXPInstallerを開いてZXPファイルをドラッグ&ドロップするだけでOKです!

3. Afte Effectsでアニメーション準備

シンプルなアニメーションをAfter Effectsで作成します。(サンプルは見やすいように背景色をいれていますが、実際は背景色を透過して使います)

箱猫ちゃんのマイクロインタラクション風アニメーション

4. 作成したアニメーションをBodymovinで書き出し

After Effectsのメニューから次の順でBodymovinを開きます。

[ ウィンドウ ] → [ エクステンション ] → [ Bodymovin ]

Lottieの設定画面が表示されるので、書き出したいファイルを選択します(Selected)。

ファイルが選択できたら、Settingsを開いて出力するファイルの詳細設定に進みます。(Settingsの部分でマウスを止めると、小さいモンスターがでてきます。かわいいです)

Settingsの画面では、「Standard」が選択されていれば問題なく書き出しできます。

わたしはエンジニアさんに書き出しデータの共有や実装の相談をするとき、サッとブラウザ確認ができるように「Demo」にもチェックをいれることが多いです。

選択が終わったら「Save」のボタンを押して設定を保存。

最後にみどりの丸が3つ並んでいる部分を選択し、出力先と名前を決めます。

書き出しに必要な情報がすべて入力されると、左上の「Render」ボタンが押せるようになります。Renderボタンを押したらLottieアニメーションの書き出し完了です!

Aeでのアニメーション作成がむずかしい場合は「LottieFiles」

「アニメーションを自分で作るのはむずかしいけど、Lottieは使ってみたい!」

そんな方は、すでに作成されたLottieアニメーションが無料でダウンロードできる「LottieFiles」というサイトを利用してみてください。

lottiefiles.com

気になるアニメーションのページで [ Download ] → [ Lottie JSON ] を選択、保存すれば、すぐに使えるJSONファイルを保存できます。

まとめ:Lottieの特徴を知って上手に活用

After Effectsで作ったアニメーションを、軽くて、きれいで、タイミングなどを調整できる形で出力できるLottieアニメーションの基本をご紹介しました。

アプリケーションやウェブサイトへの実装もかんたんで便利なLottieアニメーションですが、デザインや動きによってはAfter Effectsで作った動き・見た目が再現できない場合もあります。

アニメーションをLottieで出力する選択肢がある場合は、あらかじめLottieが得意とすること、苦手なことを把握し、うまく活用していきましょう。

田口 冬菜

田口 冬菜

Fuyuna Taguchi

三重県伊勢市生まれ。高校卒業後、4年間医療を学び理学療法士になる。二次救急病院のリハビリテーション科に所属し、急性期および回復期、外来の整形外科、脳血管、呼吸器、心臓疾患など臨床を経験する。臨床6年目で趣味としてデザインを学びはじめたところ、ハマりすぎてデザイナーに転職。半年後に上京、都内のデザイン会社へ就職し、2020年6月からneccoにデザイナーとして参画。人の心を動かすもの、魅せるデザインを日々探究中。仕事や自主制作でモーションデザインも楽しんでいる。最近は3DCGモデリングにもハマっている。好きなものはデザイン、本、アート、お出かけ、インテリア、犬、効率化。じっとしていることが苦手。おもしろそうなことはなんでもやってみる。

SHARE

TwitterFacebook

Other Posts

necco note

After Effectsで作った動画をGIFアニメーションにしてみた|箱猫サウナ動画

necco Corporate Character HakonecoDOWNLOAD

necco Corporate Character HakonecoCONTACT