Headless Commerce Site

定義

ヘッドレスコマースサイトとは、ECサイトの「フロントエンド（顧客が目にする画面・UI）」と「バックエンド（商品管理・在庫・決済・注文処理）」をAPI経由で完全に分離したアーキテクチャの独立站です。「ヘッド（head）」＝表示層を切り離す（headless）ことから名付けられました。

従来のShopifyテーマやWooCommerceのようにフロントとバックが密結合した「モノリシック型」に対し、ヘッドレスではバックエンドのコマースエンジン（Shopify Plus、commercetools、BigCommerceなど）をAPIファーストで運用し、フロントはNext.js、Nuxt、Gatsby、React Nativeなどで自由に構築します。

类比

レストランに例えると分かりやすいです。

- 通常のECサイト＝定食屋。厨房（バックエンド）とホール（フロント）が同じ店舗内で連動。メニュー変更は店内の張り紙を貼り替えるだけ。

- ヘッドレスコマース＝デリバリー専門のゴーストキッチン。厨房は注文APIだけ捌き、配達はUber Eats、自社アプリ、Web、店頭キオスクなど複数の窓口に自由に流せる。厨房側は味と品質に集中できる。

公式・構造

ヘッドレス構成の基本レイヤーは次のように表せます。

[フロント層]  Web / アプリ / SNS / 店頭KIOSK
        ↓ GraphQL / REST API
[APIゲートウェイ]  認証・レート制限・キャッシュ
        ↓
[コマースエンジン]  商品・在庫・決済・注文
        ↓
[周辺サービス]  CMS / CRM / CDP / 物流 / 決済PSP

KPI例として、CVR（コンバージョン率）＝注文数 ÷ セッション数 × 100、LTV ＝ ARPU × 平均継続月数 はヘッドレスでも同じ計算式です。ただしフロント分離により表示速度（LCP）が1秒短縮→CVRが約7%改善というデータ（Deloitte調査）が示す通り、UX最適化の自由度がKPIに直結します。

比較表

項目	モノリシック型	ヘッドレス型
フロント自由度	テーマ制約あり	完全自由（React等）
多端展開	都度リプレイス	APIで同時配信
初期開発コスト	低（10〜50万円）	高（150〜500万円〜）
運用ランニング	月1〜3万円	月5〜20万円＋開発工数
表示速度（LCP）	2.5〜4.0秒	0.8〜1.5秒
向く事業	小規模・単一チャネル	多チャネル・グローバルD2C

応用シーン

1. グローバルD2Cブランド：日本・US・EUで通貨・言語・決済を出し分け。Shopify Plusをバックに、フロントはNext.jsで地域別に最適化。

2. SNSコマース連携：Instagram/TikTok ShopのカートをAPIで自社在庫と同期。ソーシャル経由CVRは通常比1.4倍という事例も。

3. 店舗OMO：実店舗のKIOSK端末とEC在庫をリアルタイム共有。在庫回転率が平均22%改善したケースあり。

4. サブスクEC：定期便のスキップ・変更UIをアプリ側で自由設計。

よくある誤解

- 「ヘッドレス＝速い」は誤り。API設計が悪いとモノリシックより遅くなる。CDN・ISR・Edgeキャッシュ設計が必須。

- 「SEOに不利」も誤解。SSR/SSGを適切に使えば通常以上に強い。ただしCSRのみの実装はインデックスされにくい。

- 「Shopifyなら誰でもできる」：ヘッドレスはHydrogen等の専用スタックが必要で、PHPテーマの知識は流用不可。

- 「コストは常に高い」：月商1,000万円以下の段階ではROIが合わないことが多い。目安として月商3,000万円・SKU500以上・3チャネル以上で初めて投資回収が見え始めます。

- 「CMSも分離必須」：商品情報はコマース側、コンテンツはContentful等と役割分担が定石。

Headless Commerce Site

定義

类比

公式・構造

比較表

応用シーン

よくある誤解

関連用語

🔗 関連用語