Shopifyのカスタムアプリとして コーヒー診断コンテンツを実装した所感

診断コンテンツ導入の背景

当社の運営するECサイトPASS COFFEEのサイトにおいて、ユーザーが自分に合ったコーヒーを見つけやすくするためにコーヒー診断コンテンツを導入しました。ECサイトではユーザーの選択肢が多くなるほど意思決定が難しくなり結果として離脱につながることがあります。その課題を解決する手段として簡単な質問に答えるだけで最適なコーヒーを提案する診断機能を実装しました。

ただし、この診断コンテンツを Shopify にどのように組み込むかについては検討が必要でした。

選択肢: Next.js + Vercel vs. Liquid + JavaScript vs. Remix

1. Next.js + Vercel（今回採用）

メリット

• 開発スピードが早い（Vercelのデプロイ環境との相性が良い）
• Shopifyと連携しつつモダンな開発環境を活かせる
• コンポーネントベースで管理しやすい

デメリット

• Shopifyのテーマと完全に統合できるわけではない（iframeを介しての埋め込みが必要）
• iframe の動的データ受け渡しに課題があった

→ シンプルな診断アプリには適しているが、拡張性を求める場合は別の選択肢もあり

2. Liquid + JavaScript

メリット

• Shopifyテーマに直接組み込めるため、 iframe なしで動作可能
• iframeのクロスドメイン制約を気にする必要がない
• Shopifyのネイティブ機能（カートや商品ページ）とスムーズに連携できる

デメリット

• 開発効率が落ちる（コンポーネントの再利用が難しい）
• ロジックが複雑になると管理がしづらい
• JavaScriptでの実装が増えると、 メンテナンス性が低下しやすい
• 長期的な拡張やバージョン管理がしづらい（特にLiquidはGit管理しにくい）

→ Shopifyの管理画面を使わないシンプルな診断な Liquid + JS の方が扱いやすいが、拡張性やメンテナンスのしやすさを考慮すると慎重な設計が必要。

3. Remix + Shopify

メリット

• サーバーサイドレンダリング（SSR）とクライアントサイドのバランスが良い
• APIリクエストを最適化しやすく、パフォーマンスを最大限に活かせる
• Shopifyの loader を活用することで、ストアフロントと連携しやすい

デメリット

• Next.jsに比べてエコシステムが小さいため、開発者のリソースが少ない
• Vercel との相性が Next.jsほど良くない
  → Shopifyのデータを効率よく活用するなら Remix も有力な選択肢になる。

iframeの課題と今後の改善

今回、Next.js を採用したためShopify ストアにはiframeを使って診断コンテンツを埋め込む形になりました。しかし、いくつかの課題が発生しました。

1. iframe の高さ調整問題

• postMessage を使って親ページに高さを通知することで対応しようとしましたが、遅延や制約によりスムーズに反映できなかった
• 結果として min-height を指定するアナログな対応になった

2. 診断結果の受け渡し問題

• 診断後に postMessage で親ページにデータを渡せるが、 iframeのレンダリングとデータ受け渡しにラグが発生
• スムーズなデータ反映にはまだ工数がかかる
• Liquid + JS ならこの問題は発生しない

3. クロスドメイン制限の解消

iframe でデータを送受信する際に、クロスドメインの制約を解除する必要があった。
以下の設定で解決:

sandbox="allow-scripts allow-same-origin allow-top-navigation allow-forms allow-popups allow-top-navigation-by-user-activation allow-modals"
allow-same-origin
crossorigin="anonymous"

最適な実装方法の選定

今回のような シンプルな診断コンテンツ なら、 Next.js + Vercel での導入は有力な選択肢 でした。しかし、

• 管理画面を利用する場合 → ShopifyのAdmin APIを活用する必要があり、アプリとしての実装が必要
• 高度な拡張をする場合 → iframe の制約があるため、 Liquid + JS での実装がシンプルで適している可能性が高い
  という結論になりました。

今後の展望

• iframeを使わずにShopifyテーマに統合する方法の模索
• RemixのShopifyストアフロント活用も視野に
• Shopifyの拡張アプリとして、診断データの蓄積と管理を可能にする仕組みの導入

むすび

Next.js + Vercel で Shopify カスタムアプリを開発 し、診断コンテンツを導入した所感をまとめました。iframe の制約や Liquid + JS の選択肢、さらに Remix の可能性 についても触れました。

もし、

• Shopify に独自の診断コンテンツを組み込みたい
• Shopify アプリ開発に興味がある

といった課題をお持ちならぜひ一度弊社にご相談ください！