Web制作・デジタルソリューション

Shopifyテーマをカスタマイズする際デザイン性を高めながらページの軽量化を維持するのは重要なポイントです。特にアニメーションを加えたいと考えたときにGIFや動画は重すぎるため適切な手法を選ぶ必要があります。

自社プロダクト、[PASS COFFEE](https://www.passcoffee.jp)では診断コンテンツの体験向上のためLottieアニメーションを導入しました。

「あなたにぴったりのコーヒーを探す」ボタンの上を歩くコーヒーカップのLottieアニメーションを実装しより直感的に「診断を始める」というアクションを促すUIにしました。このアニメーションは診断後、結果をローディングする画面でももう一度現れ、コーヒー探しの旅というコンセプトにもなっています。

本記事ではShopifyテーマにLottieを実装した実際の手順とポイントを解説します。

1. なぜPASS COFFEEでLottieを導入したのか？

PASS COFFEEでは以下の課題を解決するためにLottieを採用しました。

診断コンテンツのエントリー率を向上したい
- 診断ボタン今コンテンツを目立たせたい
- ユーザーが直感的に「診断できる」ことを理解しにくい
ページの表示速度を維持しながらリッチなアニメーションを追加したい
- GIFや動画はファイルサイズが大きくページの読み込みが遅くなる
- 既存のアセット（画像やフォント）も多いため追加負荷を最小限にしたい

Lottie導入による解決策

歩くコーヒーカップのアニメーションをボタン上に配置
- 診断ボタンの上でコーヒーカップが歩くことでクリックを誘導
- 直感的に「ここを押せば診断できる」と伝わるデザインへ
LottieのJSON形式で軽量化
- GIFのような視覚効果を保ちつつ約1/10のファイルサイズ
- ページのパフォーマンスを損なわずに動的な要素を追加できる

2. Lottieの実装手順

PASS COFFEEのShopifyテーマ（Liquidベース）にLottieを実装した手順を紹介します。

ステップ① Lottieアニメーションの準備

LottieFilesで「walking coffee」などのキーワードで検索
気に入ったアニメーションを選びJSON形式（dotLottie）でダウンロード
Shopifyテーマのassetsフォルダにwalking-coffee.jsonをアップロード

ステップ② Lottie.jsをShopifyテーマに追加

Lottieのスクリプトを読み込むためlottie.min.jsをassetsフォルダに追加しtheme.liquid の <head> に以下のコードを記述。Lottie CDNのままでも利用できますがShopifyのCDNを使った方がパフォーマンスが良いためダウンロードしています。

<script src="{{ 'lottie.min.js' | asset_url }}" defer></script>

この処理によりLottieの機能がShopifyの全ページで使用可能になります。PASS COFFEEではトップページのみなので該当sectionsファイルに設置しました。

ステップ③ LottieのHTMLを追加

PASS COFFEEではsections/index-cotents.liquidに以下のHTMLを追加しました。

<div class="lottie relative z-0"></div>

これによりLottieアニメーションを表示するためのプレースホルダーを用意します。

ステップ④ LottieアニメーションをJavaScriptで制御

次にJSONデータをShopifyのassetsから読み込みアニメーションを適用します。

※PASS COFFEEの場合

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const lottieContainer = document.querySelector(".lottie");
    const anim = lottie.loadAnimation({
      container: lottieContainer, // 対象の要素
      renderer: "svg", // レンダリング方式
      loop: true, // ループ再生
      autoplay: true, // 自動再生
      path: "{{ 'walking-coffee.json' | asset_url }}" // JSONデータのパス
    });

    // SVGサイズの調整
    anim.addEventListener('DOMLoaded', function() {
      const svgElement = lottieContainer.querySelector('svg');
      if (svgElement) {
        svgElement.setAttribute('viewBox', '125 125 250 250');
        svgElement.style.width = '100%';
        svgElement.style.height = '100%';
      }
    });
  });
</script>

ステップ⑤ アニメーションのスタイルを調整

PASS COFFEEでは以下のようにスタイルを調整しました。

{% style %}
  .lottie {
    overflow: hidden;
    max-width: 200px;
    max-height: 200px;
  }

  @media (width > 768px) {
    .lottie {
      max-width: 250px;
      max-height: 250px;
    }
  }
{% endstyle %}

3. 実装後の変化

Lottieを導入した結果、PASS COFFEEでは以下の改善が見られました。

診断ボタンのクリック率が向上

Lottieアニメーション導入後、診断ボタンのクリック数が増加
「ボタンの認知度が高まりより多くのユーザーが診断を試すようになった」

ページの表示速度を維持しながら表現力をアップ

GIFや動画を使わずに動的な要素を追加
Lighthouseスコア（パフォーマンス評価）も大きく変化なし

ブランディング要素の強化

PASS COFFEEの「親しみやすく気軽に楽しめるコーヒーブランド」のコンセプトにマッチ
シンプルなデザインにLottieを加えることでより「遊び心のある体験」を演出

むすび

LottieはShopifyテーマでも軽量なアニメーションを導入できる強力なツールです。

PASS COFFEEでは診断ボタンの認知向上とエントリー率の向上を目的にLottieを活用し以下のようなメリットを得ました。

軽量なJSONデータでパフォーマンスを維持
高品質なアニメーションを実装
ブランドの世界観を表現しながらクリック率を向上

Lottieを活用すればユーザーに直感的な操作を促しより楽しい体験を提供できます。

Shopifyストアのデザインをワンランクアップさせたい方はぜひLottieの導入を検討してみてください 🎨✨

ShopifyテーマにLottieを実装

TOPICS