【Studio】Lottieアニメーションを導入する方法｜料金も解説！

Lottieアニメーションを導入すると、サイトをより魅力的に演出することができます。

StudioでもLottieを使うことで、アイコンやローディング画像、スクロール時の動きを実装することができます。それだけでなく、Lottieは軽量かつ滑らかにアニメーションを実装できるという強みがあります。

本記事では、StudioでLottieを導入する方法、そしてLottieの料金プランについて詳しく解説していきます。

Lottieについて

Lottieとは、アニメーションをWebやアプリで軽量に再生するための仕組み（ライブラリ＆ファイル形式）のことです。

Lottieを利用すれば、より軽量化されたデータでアニメーションを実装できるので、サイトの表示スピード低下などをあまり気にせずに実装できます。

Lottieで実現できること

Studioで作ったサイトにLottieを導入することで、下記のようなことが実現できます。

できること	詳細
ローディングアニメーション	ページ読み込み中にロゴやアイコンがくるくる動く。ブランドに合わせたオリジナル演出が可能。
ボタン・ナビゲーションのインタラクション	ホバー時に色が変わるだけでなく、アイコンが回転・変形する。ハンバーガーメニューがスムーズに「×」マークに変化するなど。
視覚的なストーリーテリング	図やイラストが動きながら説明を補足。製品イメージがスクロールに合わせてふわっと変化するなど。
背景や装飾の演出	キラキラや星がふわふわ浮かぶ背景。波や雲がゆっくり流れるヘッダーなど。

Lottieを導入すればUIの動き・イラストの演出・背景表現まで自由度の高いアニメーションが実現できます。

アニメーションの質がグッと上がるので、Lottieのアニメーションを一つ導入するだけでも洗練されたサイト感を出すことができます。

例えば、下記はローディングアニメーションです。

Lottieを使用するメリット

StudioでLottieを使用するメリットは、下記のとおりです。

オリジナル性の高いサイトが作れる、かつサイト表示速度を気にする必要がないということが、Lottieの長所だといえます。

Studio単体だと、「フェードイン」や「スライドイン」のような単純なアニメーションしか実装できないため、似たり寄ったりのサイトが出来上がりがちです。ですがLottieでアニメーションを実装すれば、他社と差別化したサイトを作ることができます。

デザイン性にこだわりたい方こそ、Lottieアニメーションを使うべきといえます。

Lottieの料金プランについて

Lottieは基本的に無料で利用できますが、高度なアニメーション、大規模プロジェクトに利用する場合は有料プランへの移行を検討しなければなりません。

個人向けプランは月額19.99ドル、チームプランは月額24.99ドルとなっています。

有料プランに移行するべきケースは、凝ったアニメーション素材を使いたい場合、Web制作者として活動していて安定的にアニメーションを導入する場合などがあたります。

というのも無料プランと有料プランでは、アニメーション素材の品質やファイルの保存数が大きく変わってくるからです。

言葉だけだとわかりにくいと思うので、表にまとめてみます。

プラン	無料プラン	個人向けプラン	チーム向けプラン
料金	月額0ドル	月額19.99ドル	月額24.99ドル
ワークスペース	2つまで	無制限	無制限
プライベートファイル	10個まで	無制限	無制限（共有可）
プライベートプロジェクト	1個まで	無制限	無制限
プレミアムライブラリ	なし	20万点以上利用可	20万点以上利用可

プライベートファイルは自分だけ、または限られた人だけで使うアニメーションのファイルですが、無料プランだと10個までしか保存できません。11個目以降からは、有料プランに契約しないと保存できなくなります。

またプライベートプロジェクトも1個までしか作れないので、「クライアントAの案件」や「クライアントBの案件」のようにプロジェクトごとにアニメーションをまとめることができません。

無料プランでLottieを使ってみて、物足りないなと感じた方は有料プランへの移行を検討しましょう。

StudioにLottieを埋め込む方法

StudioにLottieを埋め込む方法は、下記のとおりです。

①：Lottieのボックスを追加する

左側の操作パネルで、「追加」→「ボックス」→「Lottie」を選択します。

上記はデフォルトで表示されるアイコンです。簡単に変更できますので、ご安心ください。

②：Lottieのダッシュボードにアクセスする

Lottieのアニメーションを利用するには、アカウント登録が必要です。

「LottiesFiles」にアクセスして、「サインアップ」から登録をおこないます。アカウント登録ができれば、自動でダッシュボードにアクセスできるはずです。

すでにアカウント登録が済んでいる方は、「マイダッシュボード」をクリックして、ダッシュボードにアクセスします。

③：アニメーションのURLをコピーする

Lottieのアニメーションは「無料素材」と「有料素材」があり、無料プラン利用の方は無料素材のみしか使えないので注意しましょう。

ダッシュボードにアクセスしたら一番下までスクロールして、「Free community animations」が出てくるので「View more」をクリックします。

好きなアニメーションを選択して、「Download」をクリックします。そして任意のプロジェクトにセーブしておきます。

Handoffのマークをクリックして、Enable asset CDNの部分を「ON」にします。

Asset linkをコピーします。

④：Studioのリンクを貼り替える

Studioにアクセスします。

先ほどのデフォルトアイコンを選択して、右側の操作パネルを開きます。

手順③でコピーしたAsset linkを、右側操作パネルのAsset linkの欄に入力します。

これでLottieアニメーションの埋め込みは完了です！

今回は、出現時のアニメーションを実装してみました。

StudioのLottieに関するよくある質問

完全オリジナルのアニメーションを制作するのは、初心者には難しいですか？

初心者には難易度が高いです。

なぜなら「After Effects」や「Figma」などのツールを用いて、アニメーションを制作しなければならず、別スキルが必要になるからです。

簡易的にアニメーションを付けたいなら、既存のアニメーション素材を使うのがおすすめです。

GIFや動画ではなく、Lottieを使うメリットは何ですか？

データが軽く、表示が速いことが1番のメリットです。

さらに拡大縮小しても画質が落ちず、表示速度を損なう可能性も低いです。

Studioの無料プランでもLottieは利用できますか？

無料プランでも、問題なくLottieを利用できます。

Studioでのサイト制作は「Terace」にお任せ！