ShopifyでLottieアニメーションを使う方法

こんにちは。masaです。
UIを軽く、且つ滑らかに見せられるLottieアニメーション。
実はShopifyでも簡単に使えますが、実装の落とし穴もいくつかあります。
今回は、Shopifyのテーマファイル（Liquid）にLottieを導入する具体的な手順と、注意点をまとめてみました。

Lottieとは？

LottieはAfter Effectsなどで作ったアニメーションをJSON形式で再生するライブラリで、下記のような特徴があります。

• とにかく軽い（GIFの数分の1）
• 解像度がきれい
• 透明背景にも対応
• コードで速度・ループ制御が簡単

Shopifyのトップページや商品ページで、ロゴアニメやボタン演出に最適です。

ShopifyでLottieを使う方法（基本の流れ）

方法は大きく3つあります：

1. LottieFiles CDNを利用する方法（最も簡単）
2. アニメーションJSONファイルをShopifyにアップロードして再生する方法
3. Shopifyセクションとして設定可能にする方法（テーマ化）

では順番に説明していきましょう。

1. LottieFiles CDNを使う（最も簡単）

① CDNスクリプトをテーマに読み込む

theme.liquid の</head>の前に追加：

<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>

これでlottie-webが使えるようになります。

② JSONアニメーションを設置する

例としてトップページに置く場合：

<div id="lottie-demo" style="width:200px; margin:0 auto;"></div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    lottie.loadAnimation({
      container: document.getElementById('lottie-demo'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'https://assets8.lottiefiles.com/packages/lf20_xxxxx.json'
    });
  });
</script>

pathにLottieFilesのJSON URLを貼るだけで動きます。

2. JSON を Shopify にアップロードして使う方法

外部URLを使いたくない場合は、「Shopify管理画面 → コンテンツ → ファイル」にJSONをアップして使えます。

▼ 手順

1. Shopify 管理画面 → コンテンツ → ファイル → アップロード
2. JSONをアップロードし、URLをコピー
3. そのURLをLottieのpath:に入れる

path: '{{ "your-file.json" | file_url }}'

▼ コードの全体

<div id="lottie-logo"></div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    lottie.loadAnimation({
      container: document.getElementById('lottie-logo'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: '{{ "logo-animation.json" | file_url }}'
    });
  });
</script>

3. Shopify セクションとして使えるようにする（拡張性◎）

実務で一番便利なのはこの方法です。

▼ 「/sections/lottie-section.liquid」を作成

<div id="lottie-{{ section.id }}" class="lottie-wrapper" style="width: {{ section.settings.width }}px;"></div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    lottie.loadAnimation({
      container: document.getElementById('lottie-{{ section.id }}'),
      renderer: 'svg',
      loop: {{ section.settings.loop }},
      autoplay: true,
      path: '{{ section.settings.lottie_file | file_url }}'
    });
  });
</script>

{% schema %}
{
  "name": "Lottie アニメーション",
  "settings": [
    {
      "type": "file",
      "id": "lottie_file",
      "label": "Lottie JSON ファイル"
    },
    {
      "type": "range",
      "id": "width",
      "min": 100,
      "max": 600,
      "step": 10,
      "label": "幅(px)",
      "default": 200
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "ループ再生",
      "default": true
    }
  ],
  "presets": [
    { "name": "Lottie アニメーション" }
  ]
}
{% endschema %}

section化することで管理画面から以下の項目を変更できるようになります。

• JSONファイル
• 幅
• ループの有無

よくあるトラブルと解決法

① スクロールで一瞬止まる

iOS Safariでよくあります。
解決策：renderer: ‘canvas’ に変えると改善する場合があります。（ただし画質が少し低下します。）

② JSONが重くて読み込みが遅い

After Effects側で「使ってないレイヤー」「影効果」「ぼかし」などを削除してみてください。
できれば200KB以下を目指しましょう。

③ セクションを複数追加するとIDが被る

id=”lottie-{{ section.id }}” のようにsection.idを使えば固有のidになるので解決します。

まとめ

方法	特徴
CDNで読み込む	最も簡単・すぐ動く
JSONをShopifyへアップ	外部URL不要・安定
セクション化	再利用しやすい・カスタムしやすい

いかがでしたでしょうか。
ShopifyとLottieの相性は良く、軽量でリッチなアニメーションを低コストで実装したいときに最適です。
さあ、みなさんも是非、LottieでWebサイトをリッチにしましょう！