# ヘッドレスコマース：3つの階層、現実的な選択肢、そしてあなたが本当に求めているのはどれか

> 「ヘッドレスコマース」を求める事業者の多くが、本当に欲しいのはウィジェット埋め込み型のコマースです。commercetoolsやSaleorが必要になるのは、ごく一部。正直な判断の枠組みを紹介します。

Ryan Badger - 2025年10月3日 - 読了目安 6 分

## 「ヘッドレスコマース」が実際に意味するもの

ヘッドレスコマースとは、フロントエンド（顧客が目にする部分）を、コマースのバックエンド（カート、チェックアウト、在庫、注文）から切り離すことです。両方がセットになったプラットフォーム（Shopifyのテーマ付きストアフロントなど）を選ぶ代わりに、フロントエンドを別に作るか購入し、コマースAPIにつなぎます。

「ヘッドレス」という言葉は、ゆるく使われています。実際には、3つの階層に分かれます。

- **フルヘッドレス：** フロントエンドをゼロから構築（React、Next.js、Astro、Nuxt）し、あらゆるデータをコマースAPIから取得します。商品一覧、カートの状態、チェックアウト。UXはすべて自分の管理下です。
- **ウィジェット埋め込み型のヘッドレス：** フロントエンド（マーケティングサイト、Webflowで作ったサイト、ブログ）はすでにあります。そこに、内部で描画されるコマースのウィジェットを埋め込みます。「フルヘッドレス」ではありませんが、それでも分離されています。あなたのサイトは、コマースプラットフォームのテンプレートではありません。
- **従来型（ヘッドレスではない）：** ShopifyやBigCommerceやWooCommerceを選び、そのテーマの仕組みを使います。サイトそのものがコマースプラットフォームです。

「ヘッドレス」をめぐる盛り上がりの大半は、ティア1についてのものです。ほとんどのストアには、実際には必要ありません。

## フルヘッドレスが割に合うとき

フルヘッドレスが元を取れるのは、特定の4つの状況に限られます。それ以外では、取り戻せないエンジニアリングの時間になります。

1. **プラットフォームのテーマでは届かない、独自のUXが必要。** インタラクティブなコンフィギュレーター、3D商品ビューア、コンテンツ中心のストーリーテリングのレイアウト。フロントエンドの作り直しはどのみち起きるはずで、ヘッドレスなら、コマースのデータの流れも制御できるというだけです。
2. **1つのカタログからのマルチチャネル展開。** ウェブサイト、モバイルアプリ、店頭のキオスク、音声／チャットのインターフェース。これらすべてを共通のコマースAPIで動かすのは、従来型では本当に困難です。
3. **従来型のプラットフォームがボトルネックになる規模。** 現在ではShopify Plusがその大半を処理できますが、NikeやIKEA並みのボリュームなら、自前のフロントエンドの背後にあるコマースAPIが、テーマ付きストアでは得られないパフォーマンス制御をもたらします。
4. **フロントエンドに本当に余力のあるエンジニアリングチーム。** 専任のフロントエンドエンジニアがいるなら、テーマ開発者への上乗せコストを払わなくて済むため、時間とともにヘッドレスのほうが本当に安くなります。

この4つのどれにも当てはまらないなら、フルヘッドレスは、ホスト型プラットフォームを選ぶよりほぼ確実に割の悪い取引です。

## フルヘッドレスの選択肢

フルヘッドレスが本当に必要なチームにとって、2026年の現実的な候補は次の通りです。

- **commercetools**：エンタープライズ向け、ドイツ設計で、高価。コンポーザブルコマースの標準的な実装。
- **Saleor**：オープンソース、セルフホストまたはマネージドで、強力なGraphQL API。開発者に優しい。
- **Medusa**：オープンソース、JavaScriptネイティブで、拡大中のエコシステム。形としては「APIとしてのShopify」に近い。
- **BigCommerce Headless**：BigCommerceをバックエンドにして、自前のフロントエンドを持ち込む。「バックエンドを作り直さずに移行する」ための最もすっきりした選択肢。
- **Shopify Storefront API**：カスタムフロントエンドの背後でShopifyのコマースを使う。ホスティングと開発の複雑さは自分で負い、在庫・注文・決済はShopifyに残る。
- **`@shoprocket/core` SDK経由のShoprocket**：商品、カート、セッションをすべてプログラムから扱えます（[shoprocket-js](https://github.com/shoprocket/shoprocket-js)）。ウィジェットを使わず、独自のUIを描画し、私たちのAPIと直接やり取りします。注意点は、後述の「Shoprocketの立ち位置」を参照してください。

開発しやすさのおおまかな順位：Medusa > Saleor > Shopify Storefront API > BigCommerce > commercetools。エンタープライズ向けの信頼性のおおまかな順位：commercetools > Shopify > BigCommerce > Saleor > Medusa。何を重視するかで選びましょう。

## ウィジェット埋め込み型（多くの人が本当に求めているカテゴリ）

「ヘッドレス」を求めると言う事業者の多くが、本当に欲しいのはこれです。すでに持っているマーケティングサイトやコンテンツサイトに、作り直しを強いられずにコマースを組み込むことです。

Shoprocket、Snipcart、Ecwidはいずれもここに位置します。サイト（Webflow、WordPress、静的HTML、Astro、Framer）はそのまま残し、スクリプトタグを貼り付けると、コマースがその内側に描画されます。分離はされていますが、再実装はされていません。

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

さらに踏み込みたい場合は、APIも使えます（独自のマークアップで作ったカスタムの商品カードが、私たちのAPIからデータを取得する形です）。イベント、カート操作、カスタムUIについては、JS SDK（[shoprocket-js](https://github.com/shoprocket/shoprocket-js)）で完全にプログラムから制御できます。

**この階層がフルヘッドレスに勝つとき：**

- 気に入っているサイトがすでにある（フロントエンドを作り直したくない）
- 専任のフロントエンドエンジニアがいない
- UXの要件が、ウィジェットが描画できる範囲に収まる
- コマースを、四半期ではなく数週間で出荷したい

**フルヘッドレスに移行すべきとき：**

- ウィジェットでは、必要なUXに届かない
- ウィジェットが対応していない場所（ネイティブのモバイルアプリ、キオスク、テレビ）に商品を表示する必要がある
- それを支えるエンジニアリングチームがいる

## 必要な階層の見分け方

自分に2つの質問をしてみましょう。

1. **UXの要件は、既存のウェブサイトの中の、長方形の1セクションに収まるか？** 収まるなら、ウィジェット埋め込みで十分です。収まらないなら、フルヘッドレスの領域です。
2. **今後18か月間、専任のフロントエンドエンジニアを確保できるか？** できないなら、必要だと思っていても、フルヘッドレスは見送ってください。

決め手は2つ目の質問です。フロントエンドエンジニアのいないフルヘッドレスは、技術的負債の山がいずれ生まれるのを待っているようなものです。コマースプラットフォームのベンダーは手を貸してくれますが、カスタムフロントエンドの責任者がいることの代わりにはなりません。

## 「コンポーザブルコマース」はどうか

同じ考え方を、エンタープライズの購買サイクル向けに言い換えたものです。「コンポーザブル」とは、機能ごと（CMS、検索、PIM、カート、チェックアウト、税）にベスト・オブ・ブリードを選び、APIでつなぎ合わせることです。つなぎ合わせるチームがいるなら機能しますが、いなければ保守の負担になります。

年商が約$10M未満のストアでは、コンポーザブルはほぼ確実に間違いです。連携の面が膨大で、ベンダーを1社入れ替えるたびに何かが壊れます。

## Shoprocketの立ち位置

私たちはティア1とティア2をカバーしており、どちらを選ぶべきかについて正直に伝えます。

**ティア2（ウィジェット埋め込み）は、お客様の95%にとっての標準です。**スクリプトタグを1つ貼るだけで、既存のサイトの中にウィジェットが描画されます。カタログ、カート、チェックアウト、検索、バリエーション、決済まで、すべて処理されます。月額$29からの定額で、取引手数料は0%。これが最短の道であり、ほとんどのストアにとって正しい道です。

**ティア1（フルヘッドレス）は、技術的にはサポートしていますが、めったに推奨しません。**`@shoprocket/core` SDK（[shoprocket-js](https://github.com/shoprocket/shoprocket-js)）が、商品、カートの状態、セッションをプログラムから扱えるようにします。すべてのピクセルを自分で描画し、私たちのAPIと直接やり取りできます。同じ定額のサブスクリプションで利用できます。

**動くのにティア1を勧めない理由：**カスタムのフロントエンドで、あらゆるケース（読み込み中の状態、空のカート、バリエーション選択のUI、チェックアウトのフロー、エラー処理、アクセシビリティ、モバイルのビューポート、21のロケールにわたるi18n）を網羅するのは、膨大なエンジニアリングです。ウィジェットにはこれらがすべて組み込まれ、数千のストアでテストされています。UXに特別な理由がない限り、解決済みの問題を再実装することになります。

その特別な理由と、専任のエンジニアリング体制があるなら、コアSDKが用意されています。そうでなければ、ウィジェットを貼り付けて、先へ進みましょう。

> **ヒント：**「ヘッドレス」を名乗るベンダーが、「どのフロントエンドフレームワークを推奨しますか？」に答えられないなら、おそらくウィジェット埋め込み型です。それで問題ありません。自分が何を買っているのかを知っておくだけで十分です。

## TL;DR

- **フルヘッドレス：** commercetools、Saleor、Medusa、Shopify Storefront API、BigCommerce Headless。特定のUXの要件、マルチチャネル、規模、専任の開発チームがある場合にのみ割に合います。
- **ウィジェット埋め込み：** Shoprocket、Snipcart、Ecwid。「ヘッドレスが欲しい」と考えるほとんどのストアにとっての正解です。Shoprocketは、まれに必要になる場合に備えて、コアSDKによるフルヘッドレスにも対応しています。
- **従来型：** Shopify＋テーマ、BigCommerce＋テーマ。まだサイトを持っていないなら、今も最短の道です。

ヘッドレスを求める事業者の多くは、実際にはウィジェット埋め込み型が欲しいのです。当てはまるなら、[Shoprocketの無料トライアルを始めましょう](https://app-v3.shoprocket.io/signup)。14日間、カード不要。[料金](https://v3.shoprocket.io/ja/pricing.md)は$29から。

---

- HTML version: https://v3.shoprocket.io/ja/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want
- Language: 日本語 (ja)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Deutsch](https://v3.shoprocket.io/de/blog/headless-commerce-drei-stufen-optionen-entscheidung.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [English](https://v3.shoprocket.io/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Español](https://v3.shoprocket.io/es/blog/headless-commerce-tres-niveles-opciones-reales.md), [Français](https://v3.shoprocket.io/fr/blog/commerce-headless-trois-niveaux-quelle-option-choisir.md), [עברית](https://v3.shoprocket.io/he/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/headless-commerce-tiga-tingkatan-pilihan-nyata-dan-mana-yang-anda-butuhkan.md), [Italiano](https://v3.shoprocket.io/it/blog/headless-commerce-tre-livelli-opzioni-reali-quale-scegliere.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/headless-prekyba-trys-lygiai-ir-kuris-jums-tinka.md), [Norsk](https://v3.shoprocket.io/nb/blogg/headless-commerce-tre-nivaer-reelle-alternativer-og-hva-du-trenger.md), [Nederlands](https://v3.shoprocket.io/nl/blog/headless-commerce-drie-niveaus-welke-past-bij-jou.md), [Polski](https://v3.shoprocket.io/pl/blog/headless-commerce-trzy-poziomy-realne-opcje-co-wybrac.md), [Português](https://v3.shoprocket.io/pt/blog/headless-commerce-tres-niveis-opcoes-reais-e-qual-voce-provavelmente-quer.md), [Română](https://v3.shoprocket.io/ro/blog/headless-commerce-cele-trei-niveluri-si-care-ti-trebuie.md), [Русский](https://v3.shoprocket.io/ru/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [ไทย](https://v3.shoprocket.io/th/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md), [Türkçe](https://v3.shoprocket.io/tr/blog/headless-ticaret-uc-kademe-gercek-secenekler-ve-hangisini-istiyorsunuz.md), [中文](https://v3.shoprocket.io/zh/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md)