MMC Coffee - フルカスタム Shopify ECサイト

プロジェクト概要

MMC Coffeeのブランド世界観をオンラインで忠実に表現するため、Shopifyをコマース基盤として活用しながら、フロントエンドはNext.js 14で完全に独自開発しました。紙の質感、手描きの罫線やイラスト、独自タイポグラフィ、スクロール演出まで、一般的なShopifyテーマの制約を受けないFull Customのストアフロントです。

課題

既製のShopifyテーマでは、MMC Coffeeが持つ手描き・紙媒体のような視覚表現や、産地ごとのストーリーを重視した情報設計を十分に再現できませんでした。一方で、商品・バリエーション・在庫・カート・顧客・決済など、EC運営に必要な機能は安全かつ拡張可能な形で提供する必要がありました。

ソリューション

Shopifyテーマ（Liquid）に依存しないHeadless構成を採用し、Next.js App RouterとTypeScriptで全ページ・全コンポーネントをフルカスタム実装。Shopify Storefront APIをGraphQLで直接統合し、商品・コレクション・バリエーション・在庫・カートを取得・更新します。Admin APIはサーバー側に隔離し、Shopify WebhookのHMAC署名検証とISR再検証によって、管理画面の商品更新を再デプロイなしでサイトへ反映。顧客認証にはNextAuth、購入処理にはShopify Checkoutを接続しました。

成果

ブランド固有の手描きデザインと、Shopifyの運用性・決済基盤を両立した独自ECサイトとして公開。商品ページでは産地情報とコーヒーの物語をカスタムレイアウトで表現しながら、商品管理、在庫、カート、顧客認証、チェックアウトはShopifyとリアルタイムに連携します。さらに動的メタデータ、Product・BreadcrumbのJSON-LD、サイトマップなど技術SEOも実装しています。

使用技術