ヘッドレスコマースの仕組みとアーキテクチャ

システム全体の構成を理解しよう

ヘッドレスコマースでは、いくつかの要素が連携して動いています。最初は複雑に見えるかもしれませんが、それぞれの役割を理解すれば、全体像がつかめるようになります。

2つのAPIを使い分ける

Shopifyには主に2つのAPIがあり、それぞれ異なる目的で使います。

Storefront API（お客様向け）

お客様がWebサイトで行う操作に使うAPIです。GraphQLという効率的な方法でデータを取得できます。

できること：

• 商品情報の取得（名前、価格、画像など）
• コレクション（カテゴリ）の一覧取得
• カートへの追加・編集・削除
• チェックアウトの作成
• 顧客のログイン・会員登録

このAPIは公開可能なアクセストークンを使います。つまり、ブラウザ（お客様の端末）から直接呼び出しても安全です。

Admin API（管理者向け）

バックオフィスの処理に使うAPIです。在庫の更新や注文の管理など、管理者権限が必要な操作を行います。

できること：

• 在庫数の更新
• 注文情報の取得・更新
• 顧客情報の管理
• 商品のメタフィールド編集
• 割引コードの作成

このAPIは秘密にすべきアクセストークンを使います。サーバーサイド（Next.jsのAPI Routesなど）からのみ呼び出し、ブラウザには露出させません。

システム構成図

全体の流れを図で見てみましょう。

データの流れを追ってみよう

お客様が商品を購入するまでの流れを、技術的な視点で見てみましょう。

1. 商品一覧ページを表示

お客様がページにアクセス
    ↓
CDN（Vercel Edge）からキャッシュされたHTMLを返す
    ↓
ページがすぐに表示される（静的生成の効果）

裏側では、ビルド時にStorefront APIから商品データを取得し、HTMLとして保存しています。

2. 商品をカートに追加

「カートに追加」ボタンをクリック
    ↓
ブラウザからStorefront APIへリクエスト
    ↓
Shopifyがカートを作成・更新
    ↓
画面のカートアイコンが更新される

カート操作はリアルタイムで行う必要があるため、静的生成ではなくAPIを直接呼び出します。

3. チェックアウト（購入手続き）

「購入手続きへ」ボタンをクリック
    ↓
Storefront APIでチェックアウトURLを取得
    ↓
Shopifyの決済ページへリダイレクト
    ↓
お客様がカード情報を入力して購入完了

決済部分はShopifyが提供する安全なページで行われます。クレジットカード情報を私たちのサーバーで扱う必要がないため、セキュリティ的にも安心です。

ISRで鮮度とスピードを両立

商品の価格や在庫は常に変わる可能性があります。でも毎回APIを呼び出していたら遅くなってしまいます。そこで活躍するのが**ISR（Incremental Static Regeneration）**です。

ISRの仕組み

1. 最初のアクセス時：キャッシュされたページを表示
2. 設定した時間が経過：バックグラウンドで新しいページを生成
3. 次のアクセス時：新しいページを表示

お客様を待たせることなく、かつ最新の情報を反映できる仕組みです。

適切な更新間隔の設定

ページの種類によって、適切な更新間隔は異なります。在庫・価格の反映を重視する商品詳細ページは短めに、更新頻度が低いトップページは長めに設定するのが一般的です。

Shopify Hydrogenという選択肢も

Shopifyは「Hydrogen」という公式のヘッドレス向けフレームワークも提供しています。Remixベースで、Shopifyとの連携がより密接に行えます。

Hydrogenを選ぶケース：

• Shopifyに完全に最適化された体験を求める
• 新規プロジェクトをゼロから始める

Next.jsを選ぶケース：

• 既存のNext.js資産がある
• より広いエコシステム・コミュニティを活用したい
• Shopify以外のサービスとも連携する予定がある

私たちのプロジェクトでは、既存のNext.js資産を活かすためにカスタム実装を選びました。

導入を検討する際のポイント

必要なリソース

• フロントエンドエンジニア: React/Next.jsの経験が必要
• インフラ: Vercelなどのホスティングサービス
• 開発期間: 規模によるが、最低でも1〜2ヶ月

運用の考慮点

• ShopifyとNext.jsの両方をメンテナンスする必要がある
• デプロイのパイプラインを構築する必要がある
• 障害時の切り分けが複雑になる可能性がある

費用面

• Shopifyの月額費用（プランによる）
• Vercelのホスティング費用（アクセス量による）
• 開発・保守の人件費

まとめ

ヘッドレスコマースは、表示速度・デザインの自由度・拡張性において大きなメリットをもたらします。一方で、開発・運用の複雑さというトレードオフもあります。

自分たちのプロジェクトの規模、技術リソース、将来の展望を踏まえて、ヘッドレス化が適切かどうかを判断してください。まずは小さなPoC（概念実証）から始めてみるのもおすすめです。