StudioにLottieアニメーションを取り入れよう！（裏技もあるヨ）

ウェブサイトに手軽にアニメーションを取り入れられる、Lottie（ロッティー）。
少々前にはなりますが、2023年のアップデートにより、ノーコードプラットフォームStudio製のサイトにも、とても手軽に取り入れられるようになりました。

この記事では、StudioサイトにLottieアニメーションを取り入れる方法や、コツを紹介します。

Lottieとは

Lottieは、Airbnbが開発したアニメーションファイル形式です。
Lottieを使うと、アニメーションを軽量にウェブサイトに掲載できます。
JSONベースで、ベクタ形式で描画するため、拡大縮小しても画像が荒れず、滑らかな曲線を持つアニメーションを再生できます。

「Web Designing」2025年6月号 necco寄稿のLottie特集記事の作例

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の埋め込みとカスタマイズ（Studio公式ヘルプページ）

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

Tiny Lottieにアクセスし、JSONファイルをアップロードしてOptimizeボタンを押す（1）と、JSONファイルを軽量化でき、ダウンロード（2）できます。

ダウンロードしたJSONファイルの内容を、Studioにて貼り付けることで、軽量化されたJSONを利用できます。

ちなみに、LottieFilesにはファイルを軽量化するオプションがあるため、LottieFilesの場合には単体で軽量化までできます。やはり、利用できる場合には、Lottie Filesの有料アカウントが便利ですね。

necco Advent Calendar 2025

この記事は、neccoのアドベントカレンダー2025 14日目の記事です！明日の更新もお楽しみに☺️