ウェブサイトに手軽にアニメーションを取り入れられる、Lottie（ロッティー）。
少々前にはなりますが、2023年のアップデートにより、ノーコードプラットフォームStudio製のサイトにも、とても手軽に取り入れられるようになりました。
この記事では、StudioサイトにLottieアニメーションを取り入れる方法や、コツを紹介します。
Lottieとは
Lottieは、Airbnbが開発したアニメーションファイル形式です。
Lottieを使うと、アニメーションを軽量にウェブサイトに掲載できます。
JSONベースで、ベクタ形式で描画するため、拡大縮小しても画像が荒れず、滑らかな曲線を持つアニメーションを再生できます。
Lottieアニメーションを制作するには
Lottieアニメーションをウェブサイトに掲載するにあたり、まずはアニメーションを制作する必要があります。
After EffectsやFigma、Lottie Creator、Lottielabなどのさまざまなアプリケーションで、Lottieアニメーションを制作できます。
neccoのプロジェクトでもLottieを取り入れており、これまでにも、Lottieを活用する方法をご紹介してきました。
また、「Web Designing」2025年6月号にて、necco寄稿のLottie特集記事が掲載されています。After EffectsやFigmaでLottieを制作する手順をご紹介していますので、ご興味がある方はぜひご覧ください。
アニメーションを自作するほかには、LottieFilesなどのLottieファイル共有プラットフォームから、気に入ったLottieアニメーションを選んで、ウェブサイトに埋め込むことも可能です。
LottieFilesを使ってLottieを埋め込む
Studioでは、After EffectsやFigmaなどで制作したファイルをLottieFilesにアップロードして連携することで、アニメーションを設置できます。
今回は、LottieFilesで無料のアニメーションとして公開されているLottieを、Studioサイトに埋め込んでみます。
LottieFilesに掲載されているアニメーションのライセンスに関してはLottie Simple Licenseをご参照ください。
LottieFilesでアニメーションをワークスペースに保存する
LottieFilesにて、無料のアニメーションを探して、自分のワークスペースに保存します。今回は、蓄音機のアニメーションを保存しました。
なお、自作のLottieをアップロードする場合は、自分が制作したLottieのJSONファイルをワークスペースにアップロードします。
これからの手順は、無料アニメーションの場合も、自作アニメーションの場合も同じになります。
LottieFilesでLottieを配信する
ファイルをStudioで配信するために、「Hand Off」（1）から、「Enable asset CDN」をオンにします（2）。
Asset link をコピーします。
StudioでLottieを埋め込む
Studioを開き、デザインエディターで、Lottie 埋め込みボックスをページ内に配置します（1）。
先ほどコピーしたAsset linkを貼り付ければ（2）、埋め込み完了です！
Asset linkの下にあるオプションでは、Lottieをループ再生するか、再生速度の設定、また、スクロール量に応じたアニメーションや、カーソル連動など、どのように再生するかなどを選択できます。
Lottieをレスポンシブ配置するコツ
Lottieのボックスを、縦横比率を保ったままレスポンシブ対応させたい場合は、親ボックスにて任意の横幅を指定したあと、Lottie埋め込みボックスの横を「100%」高さを「flex」に設定します。
こうすることで、親ボックスの幅に従って、縦横比率を保ったまま、レスポンシブ埋め込みできます。
LottieFiles無料アカウントの制約について
LottieFilesの無料アカウントでは自作のアニメーションを5回までアップロードできます。
5個ではなく、5回までのアップロードであり、無料アカウントは試用目的として用意されているものになります。本格的に利用するには有料プランがおすすめです。
この「5回まで」の制約は、試行錯誤しているとあっという間に達してしまいがちです。
ウェブサイト制作を進めるうえで、開発期間中は無料アカウントで試し、本番公開してから有料アカウントに切り替えたい、というシチュエーションはよくあると思いますが、そのような場合には少々困ってしまうことがありました。
そこで、この記事では、LottieFilesを利用せず、「Embedボックス」を使ってLottieを導入する方法もご紹介します。
EmbedボックスでLottieを埋め込む（裏技）
Studioのページ内に任意のコードを設置できる「Embedボックス」機能を使うと、LottieFilesを利用せずにLottieをページ内に配置できます。
ただし、この方法にはいくつか制約があります。
まず、多少のコーディング（CSS）の知識が必要です。
また、Studioエディタのカスタムコードの文字数の上限が30,000文字までという仕様上、設置できるLottieのJSONファイル容量はおよそ30KB未満までとなります。これはLottieのJSONファイルとしては小さめな容量で、比較的シンプルなアニメーションやアイコンなどに限られます。
そして、StudioのUI上でのLottie再生設定変更ができず、調整したい場合はコードを書いて調整する形になります。
Embedボックスを利用したLottie埋め込みは、ちょっとしたLottieを試すぶんには便利ですが、本格的にLottieを活用したい場合には、やはりLottieFilesを利用して設置する方がおすすめです。
JSONをエクスポートする
Lottieを制作したツールにて、LottieのJSONファイルをエクスポートします。
LottieFilesにアップロードしたファイルの場合は、「Download」（1）の「Lottie JSON」をクリックするとダウンロードできます。
今回は、ローディングのアニメーションをダウンロードして表示してみます。
Studioに埋め込む
StudioでEmbedボックスをページに配置します。
テキストエディタに下記のコードを貼り付け、編集したものを、「埋め込みコード欄」に入力します。
aspect-ratio:3/2の箇所は、埋め込みたいLottieの縦横比率を入力します。
例えば、正方形ならaspect-ratio:1、横300px×縦200pxなら、aspect-ratio:300/200などを入力します。
エクスポートしたJSONファイルをテキストエディタで開き、その中身を「●●LottieのJSONデータを入力する●●」の箇所に貼り付けます。
<div id="lottie-container" style="width:100%;height:auto;aspect-ratio:1"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"></script>
<script>
const animationData = ●●LottieのJSONデータを入力する●●;
lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
});
</script>
デフォルトで設定されている灰色の背景色を透明に変更します。また、必要に応じて、幅と高さを調整します。
レスポンシブにするには
Embedボックスを使った実装の場合、Lottieの埋め込みを、比率を保ったレスポンシブにするためには、工夫が必要です。
まず、Lottie埋め込みの親のボックスに適切な幅を設定します。
次に、Lottieファイルを埋め込んでいるEmbedボックスの高さを「auto」に設定します。
EmbedボックスにIDを付与します。
さらに、別のEmbedボックスをページ内に配置します。
埋め込みコード内にて、下記のCSSにて、Lottieファイルと同じ縦横比率を記入します。
<style>
#iframe-box {
aspect-ratio: 1;
}
</style>
この時、Embedボックスには、styleタグのみを記入しましょう。
style以外のタグを書いてしまうと、埋め込みタイプがiframeからsandboxに変わり、CSSがページ内の他の要素に適用されなくなってしまいます。
CSSコードが書かれているEmbedブロックの高さを「0px」にし、念のため背景色も透明に設定し、表示されないようにします。
Tiny LottieでJSONを軽量化
EmbedボックスでLottieを埋め込む場合は、設置できるLottieのJSONファイル容量はおよそ30KB未満となります。
ギリギリで容量がオーバーしてしまう場合、Tiny LottieでJSONファイルを軽量化できます。
Tiny Lottieにアクセスし、JSONファイルをアップロードしてOptimizeボタンを押す（1）と、JSONファイルを軽量化でき、ダウンロード（2）できます。
ダウンロードしたJSONファイルの内容を、Studioにて貼り付けることで、軽量化されたJSONを利用できます。
ちなみに、LottieFilesにはファイルを軽量化するオプションがあるため、LottieFilesの場合には単体で軽量化までできます。やはり、利用できる場合には、Lottie Filesの有料アカウントが便利ですね。
necco Advent Calendar 2025
この記事は、neccoのアドベントカレンダー2025 14日目の記事です！明日の更新もお楽しみに☺️
