YAMAP STORE × Shopify 連携の裏側 〜 Multipassで実現する統一アカウント体験

👋 はじめに

YAMAP STOREでプロダクトマネージャーをしているタクミです。
YAMAP STOREはYAMAPのECサイトで、アウトドア用品を取り扱っています。

🏗️ アーキテクチャ概要

YAMAP STOREはShopifyのAPIを活用したHeadless Commerce構成で構築され、約5年ほどHeadless構成で運用されています。
フロントエンドはNext.js(BFFも含む)、バックエンドはRails、そしてEC基盤としてShopifyを活用しています。
カート画面まではNext.jsで開発、決済画面から先がShopify純正。

• カート画面まではNext.jsで構築
• 決済画面以降はShopify純正に移行
• ShopifyのAPIを使って商品情報、カート情報、在庫、注文情報などを連携
• 最終的には自社のWMS（倉庫管理システム）とも接続

API群（GraphQLを利用）：

• Storefront API（F/E用 商品情報取得、カート操作、コレクションの取得など）
• Admin API（B/E用 注文管理、顧客管理、商品情報の更新など、管理系の操作が可能）
• Functions API（決済カスタム、カスタムディスカウント）
  • ShopifyのCheckoutフローにTypeScriptで書いた関数を組み込み可能
  • カスタムディスカウント、送料条件、決済手段制御、カスタムUIなどが柔軟に定義できる

[User]   →   [YAMAP App/Web | Braze]
  ↓　　　　　　　　　↓
[Next.js（YAMAP STORE）/ BFF] → [Rails API（YAMAP）]
  ↓（API連携）                     ↓（Admin API連携）
[Storefront / Admin / Functions API]
  ↓
[Shopifyの在庫・注文管理システム]
  ↓
[YAMAP WMS（倉庫管理システム）]

🔐 連携のコア機能はShopifyのMultipass

Shopify Multipass(Shopify Plusプラン限定)を利用することで、YAMAPアカウントとShopifyアカウントを統合しています。

Shopify Multipass とは？

Shopify Plusプラン限定の機能で、外部サービスの認証情報を元にShopifyへログインを許可できるSSO方式。

基本的にYAMAP DBのユーザーテーブルをマスタとして、Shopifyのアカウントと統合されています。
ユーザーの紐付けには、ShopifyのCustomer ObjectのmultipassIdentifier :String フィールドを利用。このフィールドにYAMAP IDが入っている。

multipassIdentifier

A unique identifier for the customer that's used with Multipass login.

Multipassトークン発行とチェックアウトの流れ

1. ユーザーがYAMAP STOREにアクセス
2. YAMAP STORE → YAMAP B/E に Multipass Tokenをリクエスト
3. YAMAP B/E が Multipass Tokenを発行
4. YAMAP STOREは取得したMultipass Tokenで Shopify Customer Access Token を取得
5. チェックアウト時も同様にトークン連携 → 認証済みURLでチェックアウト画面（Shopify）にリダイレクト

ShopifyのMultipass機能を使うことで、
✔ YAMAPログイン状態のまま、YAMAP STORE（Shopify含む）でシームレスに購入可能
✔ ユーザーの情報を統合して管理できる、顧客起点の経営を実行しているYAMAPには必須要件

✅ まとめ

• YAMAP STOREはHeadless構成でShopifyを活用し、UI/UXの自由度とスケーラビリティを両立
• アカウント連携のコアにはMultipassを採用し、YAMAP IDとShopify Customerを安全かつ確実にマッピング
• 顧客体験を損なわず、顧客起点のデータ活用にもつながる構成

📝 余談

ゲスト購入

YAMAP STOREでは、YAMAPアカウント作成しなくても購入できるようにゲスト購入の機能も実装しています。利用時に、YAMAPのアカウントは不要でYAMAPの認証やMultipassでの認証を行わずに購入できる仕組みです。
YAMAP STOREはゲスト購入導入前はYAMAPアカウントの作成が必須でした。より多くの方に購入しやすいようにゲスト購入の仕組みを導入しました。
ゲスト購入の実現時には、アカウント管理周りで苦労がありました。
「ゲスト購入機能の裏側」についても掘り下げたいと思っています。

Headless Commerceの悩み

昨年、YAMAP STOREにHeadless Commerceは適しているのか？という問いがあり、常にこの問いは頭の中にあります。Headless Commerceの良さ、つらさ、についても掘り下げたいです。