Lottieとは？Studio×Lottieで魅力的なアニメーションを実現する方法！

近年Webサイトにおいて、アニメーションを取り入れたリッチな表現が多く見られます。なかでも注目を集めている「Lottie」は、簡単にWebやアプリに最適なアニメーションを取り入れられる技術として、多くのデザイナーや開発者に支持されています。アニメーションを活用することで、視覚的にインパクトを与え、サイトに訪れたユーザーの体験をより豊かにすることができます。

この記事では、Lottieの基本から実際に埋め込む方法、カスタマイズ方法の紹介まで、初心者向けにわかりやすく解説していきます。トレンド感のあるデザインや、Webサイトをよりリッチにしたい方は、ぜひ参考にしてみてください。

オリジナルでLottieアニメーションを作りたい方は、こちらの記事をご覧ください！
Lottielabで簡単！オリジナルアニメーションを作ってみよう！

Lottieとは？

https://lottiefiles.com/jp/

Lottieは、JSONベース（JavaScriptというプログラム言語におけるオブジェクトの書き方を元に作られたデータフォーマット）のアニメーションファイル形式です。Lottieを活用することで、データ容量を軽量化することができ、どんなデバイスでもスムーズに再生することができます。また、ベクターベースのため、拡大縮小してもピクセル化（モザイクがかかったように画像が荒くなる現象）を起こすことなく、快適に再生することが可能です。

Lottieを使えばstudioでこんなことも実現できる

動画引用：Studio公式サイト
https://studio.design/ja/lottie

StudioでLottieを活用することで、コードを一切書かず、ホバーやクリックに連動してアニメーションを再生するといったインタラクティブな表現が可能です。
これまでループ再生などはGIFで対応する形となっていましたが、Lottieに対応したことでサイトの軽量化や高い解像度を保つことができるようになりました！

Lottieでアニメーションを作るメリット

1. サイトの軽量化が叶う
   Lottieは従来のアニメーションファイル（GIFやMP4）に比べ、ファイルサイズが小さい特徴があります。そのため、Webサイトでの読み込みが速く、外出先やモバイルでの表示パフォーマンスに影響を与えにくいです。

2. 高い解像度
   JSON形式のLottieアニメーションは、ベクターベースのため拡大縮小しても品質が劣化しません。Webサイトやアプリに最適なアニメーション形式といえるでしょう。

3. インタラクティブな演出が可能
   Lottieアニメーションは、アニメーションの各要素にアクセスして操作が可能です。スクロール、クリック、ホバーといったインタラクションに反応する動きを取り入れることができます。

StudioにLottieを埋め込む方法

1.Lottie埋め込みボックスを追加する

画面左側の操作パネルから「Lottie」埋め込みボックスを追加してください。すると、デフォルトのLottieアニメーションが追加されます。

2.LottieのAsset Link を取得する

「LottiesFiles」へログインし、Dashboard を開きます。

本記事では、「Free community animations」からアニメーションを取得する方法を紹介します。ダッシュボード内をスクロールし、一番下にある「Free community animations」の「View more」ボタンをクリックしてください。すると、たくさんのフリーアニメーションが公開されています！

オリジナルでLottieアニメーションを作りたい方は、こちらの記事をご覧ください！
Lottielabで簡単！オリジナルアニメーションを作ってみよう！

「Free community animations」から良いなと思ったアニメーションを開き、モーダルをスクロールすると「Save to workspace to generate」というボタンがありますので、クリックしてダッシュボードへダウンロードしましょう。

以下の手順でAsset linkを取得してください。
①ダッシュボードから先ほどのアニメーションを開き、「Handoff & Embed」をクリック
②「Enable Asset Link」をオン
➂「Asset link」をコピー

これを行うことで、WebサイトにLottieを埋め込むためのコードを取得することができます。

3.Studioエディタに取得したリンクを埋め込む

Studioエディタに戻りLottie埋め込みボックスを選択し、画面右側の操作パネルの「Asset link」を、先ほど取得したリンクに変更します。これで簡単に好きなLottieアニメーションを埋め込むことができます。

Lottieアニメーションをカスタマイズするには

Studioでは、Lottieアニメーションの再生条件を細かくカスタマイズすることができます。自動再生やホバー時にアニメーションが動くように設定したりすることで、インタラクティブなアニメーション表現が可能です。

エリア指定を設定してボタンアニメーションを作ろう

以下の再生条件の際に、「エリア指定」が設定可能です。

• ホバーで再生

• クリックで再生

• カーソル連動

再生条件が適用される範囲を指定する機能で、IDを設定することでLottie埋め込みボックス以外の対象を指定することが可能です。

例えば、再生ボタンをクリックした際にアニメーションが再生される設定を紹介します。
まずは、任意のボタンを作成し、ボタンにIDを設定します。（今回の場合play-animation）

次に再生条件を「クリックで再生」に設定すると、「エリア指定」が表示されます。これに対してIDを選択することで、再生ボタンとアニメーションを紐付けることができます。
ちなみに「指定なし」を選択した場合、再生条件の対象はLottie埋め込みボックスとなります。

エリア指定を活用することで、ホバー時にLotteiアニメーションを再生させるボタンを作成することもできます！

再生条件を「ホバーで再生」に設定し、該当のIDを紐付けることで、ボタンにホバーした際に再生される動きが実現できます。

ぜひ色々試してみてください。

再生条件を設定してループ再生やインタラクティブな動きに

Studioでは、以下の再生条件が設定可能です。
再生条件を細かく指定することで、ループ再生やボタンなどのホバーアニメーションも簡単に取り入れることができます。

気になる料金は？

Lottie自体は無料でも使えますが、ファイル数や機能に制限があります。より高度な機能やチーム開発を行いたい場合、LottieFilesの有料プランを検討してください。プランは主に3つあり、詳しくはこちらを参考にしてください。

まとめ

LottieとStudioを組み合わせることで、素早く簡単に高品質かつインタラクティブなアニメーションを取り入れることができます。デザインの質を高めるだけでなく、ユーザー体験も大きく向上させられます。
また、Lotteiは無料でも豊富なアニメーションを公開しており、十分な機能を利用することができます。これを機に一度試してみてはいかがでしょうか。

ぜひ本記事を参考に、Lottieを使ってトレンド感のあるリッチなアニメーションを表現してみてください！