水素を使用したヘッドレス Shopify: いつ、どのように
ほとんどの Shopify ストアはヘッドレスである必要はありません。この声明は、Headless がすべての本格的な e コマース ブランドの必然的な進化として位置づけられることが多い Shopify 開発者界で広まっている説に反しています。現実はさらに微妙です。ヘッドレス Shopify は、特定の販売者プロファイルにとっては正しい選択ですが、わずかに良い結果を達成するために大幅に多額の費用を費やす他の多くの販売者にとっては間違った選択です。
このガイドでは、ヘッドレス Shopify が実際に何を意味するのか、Hydrogen (Shopify の公式 React ベースのヘッドレス フレームワーク) が適切な選択である場合、それを使用して構築する方法、コミットする前に正直な費用対効果の評価を行う方法について説明します。
重要なポイント
- ヘッドレス Shopify は、Storefront API を介してストアフロント (フロントエンド) をコマース エンジン (Shopify バックエンド) から切り離します。
- Hydrogen は、Remix 上に構築された、Shopify のヘッドレス ストアフロント用の公式 React ベース フレームワークです
- 年間収益が 500 万ドル未満のほとんどの店舗では、ヘッドレス アーキテクチャよりも最適化された Shopify 2.0 テーマの方が優れたサービスを提供します
- ヘッドレスは次の場合に正当化されます: 高度にカスタムな UX 要件、コンテンツとコマースの統合、マルチチャネル パブリッシング、または極端なパフォーマンス要件
- Oxygen は、Hydrogen アプリ用の Shopify ホスティング プラットフォームです — グローバル エッジ ネットワークを使用した設定不要の導入
- 継続的なメンテナンスのため、ヘッドレスの総所有コストはテーマベースの Shopify よりも 3 ～ 5 倍高くなります
- Shopify の Storefront API は、製品、コレクション、カート、チェックアウト、顧客データへのアクセスを提供します
- Remix (基盤となる Hydrogen) により、サーバー側でのレンダリングと HTML のストリーミングが可能になり、優れた Core Web Vitals が実現します
Headless Shopify の実際の意味
従来の Shopify ストアでは、製品データ、店頭テーマ、ショッピング カート、チェックアウト、顧客アカウント、注文管理など、すべてが Shopify のプラットフォーム上で実行されます。 Liquid テンプレート言語は、Shopify のインフラストラクチャ上のサーバー側で商品ページをレンダリングします。
ヘッドレス Shopify アーキテクチャでは:
- コマース エンジン (Shopify): 製品、在庫、注文、顧客、支払い、フルフィルメントを管理します — 変更ありません
- Storefront (カスタム フロントエンド): Storefront API 経由で Shopify からデータを取得し、顧客対応エクスペリエンスをレンダリングする別のアプリケーション — React、Next.js、Hydrogen、または任意の Web フレームワーク —
フロントエンドは、Vercel、Netlify、Cloudflare Workers、Shopify 独自の Oxygen プラットフォーム、または独自のインフラストラクチャなど、どこでも実行できます。コマース バックエンドは引き続き Shopify です。
なぜこれを行うのですか?
ヘッドレスの動機は常に次の 1 つ以上です。
- カスタム UX は Shopify のセクション/ブロック テーマ アーキテクチャでは実現できません
- コンテンツとコマースの統合 — Contentful、Sanity、Prismic などの CMS 内に製品を埋め込む
- マルチチャネル パブリッシング — 同じ商品データを Web サイト、モバイル アプリ、デジタル サイネージ、音声コマースに活用
- パフォーマンス — JavaScript バンドル、コンポーネントの読み込み、レンダリング戦略を完全に制御します
- 技術チームの好み — Liquid テンプレートを不快に感じる React 開発者のチーム
Hydrogen: Shopify の公式ヘッドレス フレームワーク
Hydrogen は、ヘッドレス Shopify ストアフロントを構築するための Shopify の React ベースのフレームワークです。これは Remix (React フレームワーク、現在は React Router 7 の一部) 上に構築されており、Shopify の Storefront API 用に最適化されています。
水素がもたらすもの
| 特集 | 内容 |
|---|---|
| ストアフロント API クライアント | Shopify データ用に事前構成された GraphQL クライアント |
| キャッシュ層 | 再検証中失効戦略によるインテリジェントなキャッシュ |
| SEO ユーティリティ | メタタグ管理、正規 URL、構造化データヘルパー |
| カート管理 | Shopify の Cart API を使用したカート状態管理 |
| ストリーミングSSR | Remix を使用した React ストリーミングによる初期ページ読み込みの高速化 |
| Shopify アナリティクス | 組み込みの分析イベント追跡 |
| 顧客アカウント API | ヘッドレス顧客認証フロー |
| 予測検索 | Shopify の検索結果を先行入力する |
Oxygen: Shopify の Hydrogen 向けエッジ ホスティング
Oxygen は、Hydrogen アプリ用の Shopify のグローバル エッジ デプロイメント プラットフォームです。これは追加料金なしで Shopify Plus に含まれています。 Oxygen は、Hydrogen アプリを Cloudflare のグローバル エッジ ネットワークにデプロイします。これは、Shopify 自身のストアフロントが使用しているのと同じインフラストラクチャです。
Oxygen とサードパーティ ホスティングの利点:
- Shopify CLIを介したゼロ構成のデプロイメント
- カスタム ドメインでの自動 HTTPS
- エッジ キャッシュを備えたグローバル CDN
- Shopify のデータ インフラストラクチャとの一流の統合 (API レイテンシーの短縮)
- 一般的なトラフィック量に対する下り料金やコンピューティング料金は不要
Oxygen ではなく Vercel または Netlify を選択する主な理由は、Oxygen がサポートしていないホスティング機能 (データベース接続、非エッジ ランタイムを必要とする外部 API 統合など) が必要であるか、Shopify Plus を利用していないことです。
Shopify Storefront API: アクセスできるもの
Storefront API は、Hydrogen (およびヘッドレス実装) がデータをフェッチするために使用するパブリック API です。これはパブリック アクセス トークンを備えた GraphQL API であり、基本的な操作にサーバー側のシークレットは必要ありません。
利用可能なリソース
| リソース | 利用可能な操作 |
|---|---|
| 製品 | ハンドル、ID、コレクション、検索によるフェッチ。バリアント、メタフィールド、イメージ |
| コレクション | ハンドル、ID によってフェッチします。コレクション内の製品をフィルタリングして並べ替える |
| カート | アイテムの作成、追加/更新/削除、割引の適用、チェックアウトの見積もり |
| チェックアウト | カートからチェックアウトを作成 (Shopify 以外のチェックアウトの場合) |
| 顧客 | ログイン、登録、アカウント管理、注文履歴 |
| メタオブジェクト | カスタム構造化コンテンツ タイプ |
| 予測検索 | 提案付きのリアルタイム検索 |
| ブログ/記事 | コンテンツとコマースの統合に関するブログ投稿と記事 |
| メニュー | ナビゲーション構造 |
| ショップ | メタデータ、ポリシーを保存する |
Storefront API でできないこと
| 操作 | 必要な API |
|---|---|
| 製品の作成または更新 | 管理 API (サーバー側、管理者の資格情報が必要) |
| 注文の詳細にアクセスする (管理者レベル) | 管理者 API |
| フルフィルメントを作成する | 管理者 API |
| 管理者による詳細な顧客個人データへのアクセス | 管理者 API |
| 割引を管理する | 管理者 API |
ヘッドレス設定で完全なコマース機能を使用するには、通常、管理者レベルの操作に Storefront API (パブリック、クライアント側) と Admin API (プライベート、サーバー側のみ) の両方が必要です。
水素ストアフロントの構築: 基本
プロジェクトの作成
npm create @shopify/hydrogen@latest
# Select: Connect to existing Shopify store
# Enter your myshopify.com domain
# The CLI creates a Hydrogen project with Storefront API connected
これにより、以下を含む完全な水素プロジェクトの足場が構築されます。
- Remix v2 ルーティング (
/app/routes/のファイルベースのルーティング) - Shopify Storefront APIクライアントが事前構成されています
- 製品、回収、カートのルートの例
- 酸素導入構成
コア アーキテクチャ パターン
Hydrogen は、サーバー側のデータ取得に Remix のローダー パターンを使用します。
製品ルート (/app/routes/products.$handle.tsx) では、ローダー関数がサーバー上の Storefront API から製品データを取得し、React でレンダリングして、HTML 応答をストリーミングします。これはクライアント側の SPA レンダリングとは根本的に異なります。HTML はブラウザに到着した時点で完成しており、これは SEO と Core Web Vitals にとって重要です。
カート: クライアント側の複雑さ
Hydrogen のカートは Shopify の Cart API (localStorage ベースではなく、サーバーに保持されるカート) を使用します。 Hydrogen は、カートの状態を管理し、Shopify のカート API と同期する CartProvider コンテキストと useCart フックを提供します。カートの操作 (追加、更新、削除) は楽観的です。UI はすぐに更新され、API 呼び出しはバックグラウンドで行われます。
チェックアウトリダイレクト
Hydrogen の標準チェックアウト フローは、顧客を Shopify のホスト型チェックアウト URL にリダイレクトします。これは、カスタム フロントエンドが店頭エクスペリエンスを処理しますが、チェックアウト自体は引き続き Shopify のインフラストラクチャ上で実行されることを意味します (Shopify Payments、信頼、チェックアウトの最適化がすべて組み込まれています)。
完全なカスタム チェックアウトも必要とする Shopify Plus の販売者にとって、Shopify の外部でカスタム チェックアウトを構築するのではなく、チェックアウト拡張機能が適切なパスです。
ヘッドレスが価値がある場合
次の意思決定フレームワークを使用します。
| 考察 | 首なしが正当化される？ |
|---|---|
| 年間収益 | 500 万ドル未満: おそらくそうではありません。 1,000 万ドル以上: 真剣に評価 |
| カスタム UX 要件 | Shopify 2.0 テーマで実現可能な場合: いいえ。本当に一意の場合: はい |
| コンテンツプラットフォームの統合 | CMS としてのコンテンツフル/健全性/プリズミック: ヘッドレスは正しいアプローチです |
| マルチチャンネルデータのニーズ | Web、アプリ、キオスクで同じデータ: ヘッドレスによりこれが可能になります |
| 開発者チーム | 液体テンプレートの快適さ: ネイティブのままです。 React チーム: ヘッドレスでも実行可能 |
| パフォーマンス要件 | 標準テーマは良いスコアを達成します: いいえ。特定のパフォーマンス SLA: 評価 |
| メンテナンス予算 | 3 ～ 5 倍の継続的な開発コストに耐えることができます。検討してください。できない: ネイティブのまま |
パフォーマンスに関する議論: 誇張されがちな
ヘッドレス支持者の多くは、パフォーマンスを主な正当化の理由として挙げています。しかし、Shopify の Dawn テーマ (および適切に最適化されたプレミアム テーマ) は、優れた Core Web Vitals スコアを達成しています。適切に最適化されたネイティブ テーマと適切に最適化された Hydrogen アプリのパフォーマンスの上限の差は、多くの場合、実際のトラフィックではわずかです。
ヘッドレスが真のパフォーマンスで勝てるのは、複雑なフィルタリングを備えた非常に重い製品カタログ ページ、ビデオやアニメーションを使用したメディアリッチな編集エクスペリエンス、Shopify の CDN だけでは最適化できない積極的なエッジ キャッシュ戦略を必要とするサイトです。
コンテンツとコマースの統合に関する議論: 過小評価されることが多い
ヘッドレスの最も強力なケースは、コンテンツとコマースの統合です。製品に組み込まれたルックブック、レシピ、ハウツー ガイドなど、製品と一緒にエディトリアル コンテンツを発行するブランドは、統一されたコンテンツ モデルから大きな恩恵を受けます。製品参照を含む Contentful または Sanity CMS は、Shopify の Storefront API から製品データを取得し、統合された SEO に最適化されたページで編集とコマースをレンダリングします。これはネイティブの Shopify では大幅な妥協なしには実現できません。
ヘッドレステーマとネイティブテーマ: 総コストの比較
| コスト要因 | ネイティブ Shopify テーマ | ヘッドレス水素 |
|---|---|---|
| 初期開発 | $5,000–$25,000 (テーマの購入 + カスタマイズ) | 50,000 ドル～200,000 ドル |
| ホスティング | Shopify サブスクリプションに含まれています | Oxygen (Plus に含まれる) または Vercel/Netlify (月額 50 ～ 500 ドル) |
| アプリの互換性 | Shopify アプリの完全なエコシステム | 限定的 - 多くのアプリはネイティブの Liquid 互換性を必要とします。 |
| 継続的なメンテナンス | 低 — Shopify がインフラストラクチャを維持 | 高 — チームがフロントエンド インフラストラクチャを維持している |
| Shopify プラットフォームのアップデート | 自動 | API の重大な変更を手動で実装する必要がある |
| 開発者の対応状況 | 多くの Shopify テーマ開発者 | 水素に特化した開発者の数が少ない (1 日当たりの料金が高い) |
| 打ち上げの時間 | 4～12週間 | 16 ～ 52 週間 |
コストの差は実際にあり、重大です。年間収益 200 万ドルのブランドの場合、ヘッドレス Shopify の初期開発費は 15 万ドル、メンテナンス費は年間 5 万ドルかかる可能性があり、Shopify Plus のサブスクリプション費用に比べれば小さく見えます。これを正当化するには、ROI の計算で UX の向上による収益への大きな影響を示す必要があります。
アプリの互換性: 隠れたヘッドレスの課題
Shopify アプリのエコシステムは、主にネイティブの Liquid ベースのストアフロント向けに構築されています。人気のある Shopify アプリの多くは、Liquid テーマに JavaScript を挿入します。これらには、Storefront API に相当するものがありません。
ヘッドレスで動作するアプリ
| アプリ | ヘッドレス対応 | どのように |
|---|---|---|
| クラヴィヨ | はい | API を介したサーバー側のイベント追跡 |
| リチャージ | はい | ストアフロント API の統合 |
| ヨットポ レビュー | 部分的 | 読み取り用の Storefront API。書き込み制限 |
| ゴルギアスはい | JavaScript ウィジェットはあらゆるフロントエンドに埋め込まれます。 | |
| ジャッジミー | はい | ストアフロント API 統合が利用可能 |
| リバイ | はい（部分的） | ストアフロント API の推奨事項 |
ヘッドレスで動作しないアプリ
Liquid テーマの統合、ScriptTag、または checkout.liquid を使用するほとんどの Shopify アプリは、ヘッドレス ストアフロントと互換性がありません。これには、多くの CRO ツール、一部のロイヤルティ アプリ、従来のレビュー プラットフォームが含まれます。
ヘッドレス化する前に、アプリ スタック全体の互換性を監査してください。互換性のないアプリごとに、(1) ヘッドレス互換の代替アプリを見つける、(2) カスタム機能を構築する、または (3) その機能の喪失を受け入れる、のいずれかが必要です。
代替案: 「ハイブリッド」アプローチ
多くの販売者は、完全にヘッドレスではなく、ハイブリッド アプローチの恩恵を受けています。
- ほとんどのストアフロントに標準の Shopify テーマ (高いアプリ互換性、低メンテナンス)
- 独自の UX が重要となる特定の高価値ページ (ホームページ、製品ページ) 用のカスタム React アプリケーション
- Shopify の Storefront API は、ネイティブ テーマ内のカスタム コンポーネントを強化します
このハイブリッド モデルは、最も重要な場所にカスタム UX を提供しながら、コストと複雑さを軽減します。
よくある質問
ヘッドレス水素の実装には Shopify Plus が必要ですか?
いいえ — Hydrogen と Storefront API はすべての Shopify プランで利用できます。 Oxygen ホスティング (Hydrogen 用 Shopify エッジ プラットフォーム) には Shopify Plus が必要です。他のプランでは、Vercel、Netlify、Cloudflare Workers、または任意の Node.js 互換ホストで Hydrogen アプリをホストします。 Storefront API アクセスと Hydrogen フレームワークは、プランに関係なく完全に利用できます。
Hydrogen ヘッドレス ストアでは SEO はどのように機能しますか?
Hydrogen は Remix のサーバー側レンダリングを使用し、サーバー上で完全な HTML を生成します。これは Shopify のネイティブ Liquid テーマと同じアプローチです。検索エンジン クローラーは、すべての製品コンテンツが表示された完全にレンダリングされた HTML を受け取ります。 Hydrogen には、メタ タグ、正規 URL、構造化データ用の SEO ユーティリティが含まれています。 CSR (クライアントサイド レンダリング) SPA と比較した SEO の利点は重要です。ネイティブの Shopify テーマと比較すると、両方が正しく設定されていれば、違いはわずかです。
Hydrogen と Shopify の Next.js Commerce の違いは何ですか?
どちらもヘッドレス Shopify 用の React ベースのフレームワークです。 Hydrogen は、Remix 上に構築された Shopify 公式フレームワークで、一流の Shopify Storefront API 統合、Oxygen ホスティング、Shopify 固有のヘルパー (カート、チェックアウト、分析) を備えています。 Next.js Commerce は、Shopify を含む複数のプラットフォームをサポートするヘッドレス e コマース用の Vercel のオープンソース スターター キットです。 Hydrogen には Shopify 固有のより深い最適化が施されています。 Next.js Commerce は、コマース プラットフォームを切り替える可能性がある場合、または Next.js 固有の機能が必要な場合に、より高い柔軟性を提供します。
ヘッドレス フロントエンドで Shopify のチェックアウトを使用できますか?
はい、これは標準的なヘッドレス パターンです。カスタムの Hydrogen フロントエンドがストアフロントを処理し、チェックアウトの時点で、Shopify のホストされたチェックアウト URL (Cart API の checkoutUrl フィールドから生成) にリダイレクトします。これにより、製品検索とカートでは完全なカスタム UX が提供され、支払いステップでは Shopify の最適化され、コンバージョンテスト済みのチェックアウトが提供されます。 Checkout Extensibility (Shopify Plus) を使用すると、拡張機能を使用して Shopify チェックアウト自体をカスタマイズできます。
Hydrogen の実装には通常どれくらいの時間がかかりますか?
成熟した Shopify テーマを置き換えるフルカスタムの Hydrogen ストアフロント: 複雑さに応じて 16 ～ 52 週間。従来の複雑さを伴わない、新しい店舗の立ち上げのためのよりシンプルな Hydrogen の実装: 8 ～ 16 週間。主なタイムラインの推進要因は、カスタム設計の複雑さ、製品タイプとカタログのサイズの数、必要なアプリ エコシステムの置き換え、特に Hydrogen に関するチームの経験です。
次のステップ
Headless Shopify with Hydrogen は、適切な販売者にとって強力なアーキテクチャです。ただし、その決定には、UX 要件、開発者の能力、予算、アプリのエコシステムの依存関係を正直に評価する必要があります。
ECOSIRE の Shopify Plus サービス には、ヘッドレス アーキテクチャ コンサルティング、Hydrogen ストアフロント開発、Storefront API 統合、Oxygen 展開が含まれます。私たちは、マーチャントがヘッドレスが正しい選択であるかどうかを評価し、正しい選択である場合には実装を実行できるよう支援します。これには、完全なヘッドレスよりも低コストでカスタム UX を提供するハイブリッド アプローチも含まれます。
ヘッドレス アーキテクチャ コンサルティングをスケジュール して、特定の要件を評価し、ヘッドレス Shopify がストアにとって適切な投資であるかどうかについての正直な推奨事項を取得します。
執筆者
ECOSIRE Research and Development Team
ECOSIREでエンタープライズグレードのデジタル製品を開発。Odoo統合、eコマース自動化、AI搭載ビジネスソリューションに関するインサイトを共有しています。
関連記事
Case Study: eCommerce Migration to Shopify with Odoo Backend
How a fashion retailer migrated from WooCommerce to Shopify and connected it to Odoo ERP, cutting order fulfillment time by 71% and growing revenue 43%.
Composable Commerce: The Future of eCommerce Architecture
Explore composable commerce and MACH architecture—how API-first, headless components are replacing monolithic platforms and enabling faster, more flexible eCommerce.
Integrating GoHighLevel CRM with eCommerce Stores
Step-by-step guide to integrating GoHighLevel CRM with Shopify and WooCommerce. Sync orders, automate post-purchase flows, and recover abandoned carts at scale.