3ステップで誰でもカンタン！　アニメーションライブラリ「Lottie」でサイトに動きを取り入れよう。

こんにちは。
Maromaro デザイナーのshunです。

サイトにちょっとした動きを入れたいけど、アニメーション作るのって大変だったり、専用の知識が必要で、ハードルが高い気がしますよね。
ちょっとここのイラストやアイコンを動かしたいな～という時に活躍するのが今回紹介する「Lottie」です。

Lottieとは？

JSONベースで動く、アニメーションファイルライブラリです。

ベクターアニメーションのため拡大縮小による劣化がなく、さらにgifなど他のアニメーション可能なファイル形式よりも軽量であることが特徴です。
10プロジェクトまで無料で使えます。（json書き出した後プロジェクト削除すればまたその枠使えるので実質無料?）
AfterEffectからだけでなく、FigmaやCanvaからもプラグインで連携可能です。

今回はFigmaでのアニメーション作成をSTEPで紹介します。

STEP01 Lottieアカウントの作成・ログイン

Lottieのサイトへアクセスし、右上のサインアップからアカウントを作成します。
（後ほどFigma側でもlottieにログインするため、googleアカウントなどにしておくとログインしやすく便利です。）

アカウント作成すると、ダッシュボードが表示されます。

ここまできたらLottieアカウントの準備は完了です。

STEP02 Figmaでアニメーション作成

次に、Figma側でアニメーションを作成します。
動きを加えたいパーツを作成し、プロトタイプにアニメーション付与するのと同じ要領でフレーム同士をスマートアニメートで繋げていきます。
（figmaでのアニメーションの作り方はこちらの記事では割愛します）

※この時、アニメーションをループさせたい時は、最初と最後のフレームを繋げてください。

STEP03 Lottieに取り込み・書き出し

Figma上でアニメーションが完成したら、それをLottie FilesというプラグインでLottieへ連携します。

プラグインパネルより、Lottie Filesを実行し、作ったアニメーションを選択し、「Export to Lottie」を選択し、プレビューで問題なければ「Save to workspace」を押下するだけで連携が完了します。

ダッシュボードにプロジェクトとして追加されたアニメーションをクリックし、詳細から任意のフォーマットで書き出しが可能です。

そうしてできたアニメーションがこちら

今回はループアニメーションでの作成でしたが、Lottie側でアニメーションするトリガーも設定できます。（クリック、ホバー、スクロール等）

大きく分けましたが、アニメーション制作知識のない私でも、3ステップほどでカンタンにアニメーションを作ることができました。
デザインとアニメーションの作成プロセスがこれまでは別々だったものをLottieがあることによりとても密接になったように感じました。
皆さんもサイトに動きを入れてみたいときは、Lottie活用してみてください。

以上、Maromaro Shunでした。