はじめに

突然ですが
🤔＜WEBアニメーションを探しているけど理想のものがない…
🤔＜かといって自分で作るのはハードルが高い…
🤔＜でもGIFやMP4ファイルだとデータが重くなるし…
という経験はありませんか？私はまあまああります。
そこで今回は無料のツールを使用してサクッとWEBアニメーションを作成する方法をご紹介します！

使用するツール

Lottieとは？

Lottie（ロッティー）は、Airbnbが開発した アニメーションライブラリ です。
JSONベースのアニメーションファイル形式で、After Effects等で作成したアニメーションを
Lottie専用の拡張機能で出力することで、ウェブサイトやアプリ上でアニメーションを表示できます。

〈Lottieの特徴〉

SVGアニメーションのため拡大縮小しても画像が荒れない
GIFやMP4よりもファイルが軽い
JavaScriptで再生のタイミングや逆再生などの制御ができる
マルチプラットフォームに対応しており、iOS、Android、Web、React Nativeで利用できる

とっても便利そうですね！👏

※Figmaについてはご存知の方も多いと思うので割愛します。

作り方

1. アニメーションを作成する
 2. プラグインをインストールする
 3. アニメーションの書き出し

※各ツールの会員登録等は事前に済ませている想定です。

1. アニメーションを作成する

Figmaのプロトタイプの「スマートアニメート」機能を使用してアニメーションを作成していきます！

アニメーションの動きについて
Lottieアニメーションで使える項目には制限があります。
詳しくは以下のページをご確認ください。
Supported features

「スマートアニメート」とは

スマートアニメートは、プロトタイプのフレーム間でマッチングレイヤーを検知して、違いを認識し、レイヤーにアニメーションを付けます。

フレーム間のスマートアニメートレイヤーより引用

（1）アニメーション素材をベクターデータで用意

FigmaやIllustratorなどのツールで作成したアニメーションのパーツを用意しておきます。
この時つなげるアニメーションのレイヤーやフレームの階層構造も同じになるように設定しましょう！
（グループでまとめているパーツがあるときは、他のレイヤーやフレームでも同様にグループでまとめておきます）

注意
画像データで作成すると、Lottieのアニメーションデータに変換する際に
エラーが起きてしまうため必ずベクターデータで用意してください

（2）スマートアニメートを適用

①右側パネルの「プロトタイプ」を選択し、適用させたいレイヤーをクリック
レイヤーの端にカーソルを合わせ、右側の丸に触れると＋マークのボタンが出てくるので
＋マークをクリック＆ドラックし矢印を次のレイヤーに繋げる

②右側のパネルの「インタラクション」もしくはレイヤーを繋いだ矢印をクリックし添付の通りに調整

補足
「イーズアウト」の部分は様々な種類があるので
下記のページを参考に理想のアニメーションになるように調整してみてください！
Figmaでイージングを理解しよう！プロトタイプの基礎から実装方法の紹介

③これらの工程を各レイヤーに繰り返し設定していく
＊最初と最後のレイヤーを繋ぐことでループアニメーションが作成可能

2. プラグインをインストールする

Figmaコミュニティより「LittieFiles」のプラグインをDLする

〈プラグインは以下の方法でも検索可能〉

リソース＞プラグイン＞プラグインを検索＞保存

3. アニメーションの書き出し

①リソース＞プラグイン＞保存済みのプラグイン＞Lottiefiles＞Login via Browserをクリック
＊LottieFilesのログインページに遷移

②書き出したいフローを選択し、「Export to Lottie」ボタンをクリック
または「Select prototype flow」から書き出したいフローを選択

③ 「Save to workspace」をクリック

④ アップロード先のフォルダーを選択し、「Save」ボタンをクリック
（非公開ファイルとしてアップロードされます）

⑤「Open in browser」をクリックしブラウザで確認
!

⑥ Enble Asset LinkのスイッチをONにし、埋め込みコードをコピー

あとはサイト上のアニメーションを表示したい箇所に記述するだけで簡単にWEBアニメーションが実装可能です！
JSONファイルをDLしたい場合はダウンロードボタンをクリックし、形式を選んでダウンロードしてください。
そのほかサイズや再生スピード、配色の変更など簡単なカスタマイズもLottieFiles上で編集が可能です。

実際に作成したアニメーション

See the Pen Figma_Lottie by ippaimori (@ippaimori) on CodePen.

さいごに

いかがでしたでしょうか？
Figmaでのデータ作成に慣れれば今までよりも簡単にWEBアニメを作成できそうな気がしてきましたね！？
今回作成してみて、Figma上での動きがLottieの使用できるアニメーション項目の制限により
書き出した際に少し上手くいかない部分もあったので、こまめにLottieFilesプラグインで表示を確認しながら進めると作業がスムーズかもしれません!

また、LottieはFigma以外にもAfter Effectsのアニメーション等も簡単に書き出すことができるので
気になった方はぜひチェックしてみてください！

Figma×Lottieで簡単WEBアニメーション作成！