necco note
田口 冬菜
necco note
ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説
- Motion Design
こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。
After Effectsなどで作ったリッチなアニメーションを、ウェブサイトやアプリケーションに実装できる「Lottie（ロッティー）アニメーション」をご存知ですか？
Lottieはどれだけ拡大しても高画質で、実装も簡単なアニメーションライブラリです。ウェブ制作にLottieを取り入れるメリットは多く、GoogleやMicrosoftといった大手企業も活用しているほどです。
わたしたちneccoも2020年に導入し、これまでさまざまなプロジェクトでLottieを活用してきました。
この記事では、Lottieの基本から実際の活用事例、作成方法までご紹介します。作成時の注意点もまとめているので、Lottieの導入を検討中の方は、ぜひ参考にしてみてください！
（具体的な実装方法についての説明は記載しておりません。あらかじめご了承ください🙏）
Lottieとは？
Lottieは民泊サービスなどを運営する「Airbnb」が開発したアニメーションライブラリです。After EffectsやFigmaなどで作ったリッチアニメーションを、簡単にウェブサイトやアプリへ実装できます。
公式サイトではさまざまなデバイス上でなめらかに動くアニメーションのサンプルが確認できます。
LottieはJSONベースのベクターデータとして表示されるため、軽量かつどれだけ拡大しても画質が美しいといったメリットがあります。イラストやアイコンなどにちょっとした動きをつけたいときにも便利です。
Lottieを活用するメリットは他にもあるので、このあと詳しく説明していきます。
Lottieを使うメリット
ウェブ制作においてLottieを活用するメリットは、主に4つあります。
- ファイルサイズが軽い
- 高画質
- インタラクティブ
- 実装が簡単
LottieはSVGアニメーションとして表示されるため、ファイルサイズが軽く、どれだけ拡大しても高画質です。大きい動画ファイルは重くなるのが一般的ですが、Lottieの使用によって読み込み速度の最適化も期待できます。
また、JavaScriptでアニメーションの再生速度を変更したり、逆再生、スクロール・クリック・ホバー時のインタラクションなどの設定も可能です。作ったアニメーションをエンジニアさんと相談しながら調整できるところも魅力です。
エンジニアさんの話によると、実装も静止画アセットを表示するのと同じくらい簡単とのことです。
Lottieで出力できる表現
実はLottieには「出力できる表現・できない表現」があります。
どういった表現が使えるかは「SVGアニメーションで表現できるか？」を基準に考えるのがポイントですが、以下にて具体的にご紹介します。
- シンプルなアニメーション（不透明度・スケール・回転・位置の変化など）
- 背景の透過
- パスの編集（モーフィングやトリミングなど）
上記の「出力できる表現」から考えると、Lottieはシンプルなシェイプや色のイラスト、アイコンなどに動きをつける際に適していると言えるでしょう。
たとえば、次のようなアニメーションの作成時に活用できます。（サンプルはLottieのキャプチャー動画です）
上の例のように、なめらかな線のアニメーションはLottieがおすすめです。
ぽよよんとイラストが動く表現は、コードで書くと大変ですよね…？Lottieであれば、After EffectsやFigmaで作成したものを手軽に活用できます。
単色のロゴやシェイプを動かしたり、色に変化をつけることもできます。
Lottieで出力できない表現
Lottieで出力できない表現は、「SVGアニメーションで表現できないもの」が基本と覚えておきましょう。ただし、例外もあるため注意が必要です。
- 特殊なグラフィック表現（ザラザラや乗算など）
- レイヤーマスク
- 画像・動画ファイルの使用（3DCGも含む）
- グラデーション
- BGMや効果音
上記の「出力できない表現」から考えると、複雑なグラフィックや効果を使ったイメージには適していない印象です。映像向きではない、という感じでしょうか。
たとえば、以下のような動画の作成にはLottieは適していません。イメージ通りに書き出すことができないため、覚えておきましょう。（※音楽が流れる動画があります。あらかじめご了承ください🙏）
上の動画のように、ザラザラした質感の表現、レイヤーマスク、BGMなどを使用した表現はLottieに適していません。
上の動画もLottieで出力できない表現がたくさん含まれています。
ゆらゆらとオブジェクトを揺らすような動きはLottieでも使用可能ですが、「画像」として読み込まれる3DCGはLottieで出力できません。ベクターデータではないですからね。
最後に、グラデーションについて補足させてください。
グラデーションについては「Lottieで出力できない表現」に含めましたが、英語版のAfte Effectsを利用したり、レイヤー名を英語にする工夫などをすれば出力できる可能性もあるそうです。
わたしは何度もグラデーションを用いたLottie作成に挑戦してきましたが、1度もうまく出力できませんでした…。そのため、グラデーションについては「諸説あり」とさせていただきます。
（グラデーションありのLottie作成できる方は、よければ方法をお教えいただきたいです🙇♀️）
Airbnbの公式サイトでは「将来的にグラデーションや画像のサポートにも対応したい」と書かれているので、今後のアップデートでさらにLottieの可能性が広がる可能性もあります。たのしみに待ちましょう〜！
Lottieの活用事例
Lottieの基本を知ったところで、どんな場面で活用できるのかを見ていきましょう。ここでは、neccoのLottie活用事例をご紹介します。
線のシェイプアニメーションの例
WORDSさまのウェブサイトでは、複数のページで線のシェイプアニメーションを作成し、Lottieにて実装してもらいました。
Lottieで作成した動くイラストは、画面幅が変わっても線がはっきりなめらかに描画されています。軽やかで安定した動きは、WORDSさまのウェブサイトにぴったりでした。
キャラクターアニメーションの例
縫製料金の見積りができるサービス「FiTO」では、オリジナルキャラクターのフィトくんの動きを作成し、Lottieで実装しました。（MVで使用しているチュートリアル動画はMP4です）
動きそのものはミニマルなものですが、少し動くだけでも「生きている感じ」が表現できると思います。シンプルなパスを組み合わせたイラストのアニメーションは、Lottieにピッタリです。
実装を担当したエンジニアさんによると「Next.jsでlottie-reactというライブラリを使っています」とのことです。
つづけてもうひとつ、FiTOから事例をご紹介します。まずは動画をご覧ください。
CTAの上部を、愛らしいフィトくんがテクテクと歩いています。
フィトくんが歩くように「その場で手足を動かすアニメーション」を作ってエンジニアさんに共有したところ、このようなかわいい実装をしてくださいました👏
エンジニアさんの話によると、「GSAPというアニメーションライブラリのスクロールトリガーを利用し、指定した場所にスクロールするとフィトくんが歩いてくる実装」をしているとのことです。
複数イラストのアニメーション例
株式会社サイダスさま主催のイベントLPでは、複数の人のイラストが動くLottieを使用しています。
ピョコピョコ動く人のアニメーションを複数作成し、SVGの静止画と組み合わせることで、にぎやかなブースコーナーを表現しています。
Lottieのデータは黄色いブースサイドの3人、青いブースサイドの4人がそれぞれセットになっているため、ひとりずつ位置を指定するよりも実装の負担を軽くできます。常にグループで動いてくれれば、画面サイズが変わったときもバラバラになりません。
オープニングアニメーションの例
同じくサイダスさまのLPサイト内では、オープニングアニメーションにもLottieを使用しています。
サイダスさまのロゴのシェイプが流れるアニメーションは、After Effectsでひとつひとつのシェイプにイージングをかけ、華やかで勢いのあるイメージになっています。
リッチなモーションを自然にウェブサイトで使用できるLottieは、サイトに訪れた人の目を引くオープニングアニメーションでも活用できます。
WebGLと組み合わせたMV例
株式会社ACESさまのウェブサイトでは、オープニングアニメーション、MV、ページ遷移時のアニメーションにLottieを使用しました。
MVの背景では、ロゴがモーフィングするアニメーションが実装されています。実はこの部分、というか背景の白い部分、Lottieでできています。After Effectsの画面を見ると、より構造がイメージしやすいかと思います。
動画を見ると、白い部分がモーフィングしているのがわかります。どれだけ大きく表示しても高画質かつ軽く、なめらかなシェイプの動きを表現できるLottieは、MVでの使用にも最適でした。
なお、白いレイヤーの奥にある黒い背景の部分は、WebGLで実装してもらっています。LottieとWebGLのあわせ技は初挑戦でしたが、エンジニアさんががんばってくれました🙏
After EffectsからのLottie書き出し方法
Lottieの作成方法についてもご紹介します。After Effectsを使ったLottieの作成手順です。（書き出しにはエクステンション「Bodymovin」が必要です）
- ZXPInstallerがない人はインストール
- 拡張機能「Bodymovin」をインストール
- After Effectsでアニメーション準備
- 作成したアニメーションをBodymovinで書き出す
以下、それぞれ画像つきで説明していきます。
📝 追記 2022/4/13
Bodymovinのダウンロード・インストール方法をまとめた記事も公開したので、よければこちらも参考にしてみてください。
Lottieアニメーションの作成に必要な「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」というサイトを利用してみてください。
気になるアニメーションのページで [ Download ] → [ Lottie JSON ] を選択、保存すれば、すぐに使えるJSONファイルを保存できます。
まとめ：Lottieの特徴を知って上手に活用
After Effectsで作ったアニメーションを、軽くて、きれいで、タイミングなどを調整できる形で出力できるLottieアニメーションの基本をご紹介しました。
アプリケーションやウェブサイトへの実装もかんたんで便利なLottieアニメーションですが、デザインや動きによってはAfter Effectsで作った動き・見た目が再現できない場合もあります。
アニメーションをLottieで出力する選択肢がある場合は、あらかじめLottieが得意とすること、苦手なことを把握し、うまく活用していきましょう。
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年5月時点）
田口 冬菜
Fuyuna Taguchi
三重県伊勢市生まれ。地元の二次救急病院で約6年間理学療法士として約6年働き、趣味ではじめたデザインにハマってデザイナーへ転職。転職のタイミングでより成長できる環境を求めて東京に引っ越し。都内のデザイン会社1社を経て、2020年からneccoに入社した。入社後にはモーションデザインのスキルを身につけ、現在デザイナー・モーションデザイナーとして働いている。個人ではブログを書いたり、たまに動画・映像関連のメディア出演をしたりしている。著書に『これからはじめるFigma Web・UIデザイン入門』（マイナビ出版、2022）がある。インテリア、本、コーヒー、あまいもの、散歩、人の姿勢・動作観察が好き。
