2025.03.07 - Shopify
ShopifyテーマにLottieを実装 – PASS COFFEEでの導入事例とポイント
Shopifyテーマをカスタマイズする際デザイン性を高めながらページの軽量化を維持するのは重要なポイントです。特にアニメーションを加えたいと考えたときにGIFや動画は重すぎるため適切な手法を選ぶ必要があります。
自社プロダクト、PASS COFFEEでは診断コンテンツの体験向上のため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 の
に以下のコードを記述。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 %}
.png)
3. 実装後の変化
Lottieを導入した結果、PASS COFFEEでは以下の改善が見られました。
✅ 診断ボタンのクリック率が向上
- Lottieアニメーション導入後、診断ボタンのクリック数が増加
- 「ボタンの認知度が高まりより多くのユーザーが診断を試すようになった」
✅ ページの表示速度を維持しながら表現力をアップ
- GIFや動画を使わずに動的な要素を追加
- Lighthouseスコア（パフォーマンス評価）も大きく変化なし
✅ ブランディング要素の強化
- PASS COFFEEの「親しみやすく気軽に楽しめるコーヒーブランド」のコンセプトにマッチ
- シンプルなデザインにLottieを加えることでより「遊び心のある体験」を演出
むすび
LottieはShopifyテーマでも軽量なアニメーションを導入できる強力なツール です。
PASS COFFEEでは診断ボタンの認知向上とエントリー率の向上を目的にLottieを活用し以下のようなメリットを得ました。
✅ 軽量なJSONデータでパフォーマンスを維持
✅ 高品質なアニメーションを実装
✅ ブランドの世界観を表現しながらクリック率を向上
Lottieを活用すればユーザーに直感的な操作を促しより楽しい体験を提供できます。
Shopifyストアのデザインをワンランクアップさせたい方はぜひLottieの導入を検討してみてください 🎨✨
