Case - PASS COFFEE - Shopifyテーマリプレイス & カスタマイズ事例

PASS COFFEEは、Bowortieがデザイン・構築・運営する自社プロダクトであり、ブランドの世界観とECの可能性を探る実験的なプロジェクトとして展開しています。今回のリプレイスでは、もともとHydrogenを使用していたサイトをLiquidベースのテーマに移行し、運用のしやすさと柔軟性を向上させました。

このリプレイスに伴い、コーヒー診断アプリをカスタムアプリとして実装し、ユーザーが自分の好みに合ったコーヒーを見つけやすい仕組みを導入しました。また、LPとしても活用できるページにはGSAPを使用してアニメーションを加え、視覚的に魅力的な体験を提供しています。

さらに、GO SUBアプリを活用したサブスクリプション機能の追加や、誕生日クーポン発行機能を組み込み、顧客とのエンゲージメントを強化しました。商品面では、豆を選べる飲み比べセットにカスタマイズ機能を実装し、購入時の選択肢を広げました。また、サイト全体のデザインの統一感を保つため、CSSにはTailwind CSS 4を採用し、モダンで洗練されたレイアウトに仕上げています。

加えて、ブランドのビジュアル強化の一環として、新たに商品撮影を行い、サイト全体のクオリティを向上させました。今回のリプレイスにより、デザイン・機能・運用のバランスが取れたECサイトへと進化し、今後の拡張やカスタマイズにも柔軟に対応できる基盤を整えました。

HydrogenからLiquidベースのテーマにリプレイス

• ✅ コーヒー診断アプリをカスタムアプリとして実装
• ✅ LPにも使えるページにGSAPを使用し、アニメーションを追加
• ✅ GO SUBアプリを導入し、サブスクリプション機能を実装
• ✅ 誕生日クーポン発行機能を追加し、会員登録フォームに誕生日項目を追加
• ✅ 豆を選べる飲み比べ商品に、カスタマイズ可能な選択機能を実装
• ✅ CSSにTailwind CSS 4を採用し、デザインの一貫性と拡張性を向上
• ✅ ブランドイメージを強化するため商品撮影も実施

Liquidテーマへ移行し、運用のしやすさとパフォーマンスを向上

• ✅ Liquidテーマへ移行し、運用のしやすさとパフォーマンスを向上
• ✅ ブランド体験を強化する機能を追加し、より直感的で楽しい購買体験を提供
• ✅ デザインの統一感とメンテナンス性を高め、拡張しやすいサイトへ進化