ヘッドレスShopify開発ガイド2026: Hydrogen、Next.js他
このガイドは、Liquid APIと古いREST APIを組み合わせたNext.jsセットアップを使って最初のヘッドレスShopifyストアを構築した2020年、誰かが渡してくれたらよかったと思うもの全てだ。DTC ブランド、B2B問屋、エンタープライズShopify Plus マーチャント向けのストアフロント構築から得た知識を濃縮したものだ。これのいくつかは、あなたがすでに疑っていることを確認するだろう。また、Twitterで読んできた従来の知恵に異議を唱えるものもあるだろう。
始めよう。
目次
- 2026年のヘッドレスShopifyが実際に意味すること
- ストアフロントAPI: あなたの新しい親友
- Hydrogen vs Next.js Commerce: 実際の比較
- 1秒未満のLCP達成
- チェックアウト拡張機能とPost-Checkout.liquid時代
- Shopify Plus移行戦略
- 年間経常収益100万ドル閾値: ヘッドレスが経済的に意味がある時
- 代理店の選択: Naturaily、Aalpha以上
- Astroおよびその他フレームワークを使用したカスタムストアフロント
- FAQ
2026年のヘッドレスShopifyが実際に意味すること
ヘッドレスShopifyは、フロントエンドプレゼンテーション層をShopifyのバックエンドから分離することを意味する。Shopifyで本当に優れている機能、すなわち在庫、注文、支払い、フルフィルメントはShopifyのままにしておき、Liquidテーマをストアフロント APIと通信するカスタムフロントエンドで置き換える。
しかし、ほとんどの記事が教えてくれないことは、2026年のヘッドレスShopifyは2年前とは全く違う様相であるということだ。3つのシフトがランドスケープを根本的に変えた。
Hydrogen 2は成熟している。 Shopifyの反応ベースのフレームワークがOxygen(彼らのホスティングプラットフォーム)上で実行されており、2023年の荒れ狂った打ち上げ以来かなり安定している。現在はリミックスの下で動作しており、合理的なデフォルトを備えている。
ストアフロントAPIがバージョン2025-04に到達した。 これは顧客アカウントAPI v2、予測検索の改善、そして重要なことに、クライアント側のJavaScriptを必要としないサーバー側のカート操作をもたらした。
チェックアウト拡張機能がcheckout.liquidを完全に置き換えた。 2025年8月の時点で、すべてのShopify Plus ストアはチェックアウト拡張機能を使用する必要があります。もはやLiquidチェックアウトのカスタマイズはありません。これだけで、数千のストアをヘッドレスアーキテクチャーへと駆り立てた。
使用する精神的モデル: Shopifyはコマースエンジンです。あなたのフロントエンドは、そのエンジンからデータをプルすることになっている目的に構築されたインターフェイスです。その間のすべてはAPIコールとキャッシング戦略です。
アーキテクチャスタック
2026年の典型的なヘッドレスShopifyセットアップは次のようになります。
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Frontend App │────▶│ Storefront API │────▶│ Shopify Backend │
│ (Hydrogen/Next) │ │ (GraphQL) │ │ (Admin, Orders) │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│ │
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ Headless CMS │ │ Checkout Ext. │
│ (Sanity/Contentful) │ (Shopify UI Ext)│
└─────────────────┘ └─────────────────┘
フロントエンドはGraphQLを通じてストアフロントAPIと通信する。Shopifyに属さないコンテンツ(編集ページ、ランディングページ、複雑なコンテンツモデル)はヘッドレスCMSに存在する。チェックアウトのカスタマイズはカスタムマークアップではなく、Shopifyの拡張ポイント経由で発生する。
ストアフロントAPI: あなたの新しい親友
ストアフロントAPIは、顧客向けの経験用に特別に設計された公開GraphQL APIです。バックエンド操作を処理する管理APIとは異なります。この区別を理解することは重要です。
できること
query ProductPage($handle: String!) {
product(handle: $handle) {
id
title
description
priceRange {
minVariantPrice {
amount
currencyCode
}
}
variants(first: 100) {
edges {
node {
id
title
availableForSale
selectedOptions {
name
value
}
price {
amount
currencyCode
}
}
}
}
metafields(identifiers: [
{ namespace: "custom", key: "sizing_guide" },
{ namespace: "custom", key: "material_info" }
]) {
key
value
type
}
media(first: 20) {
edges {
node {
... on MediaImage {
image {
url
altText
width
height
}
}
... on Video {
sources {
url
mimeType
}
}
}
}
}
}
}
レート制限とキャッシング
2026年の時点で、ストアフロントAPIは公開アクセストークンに対してストアあたり秒100リクエスト(2024年初期の60から増加)を許可します。プライベートアクセストークンはより高い制限を取得します。しかし、どうせ、これらの制限に達するべきではない - あなたがそうであれば、あなたのキャッシング戦略は壊れている。
私はすべてのプロジェクトで行うこと:
- フルページキャッシング CDNレベル(Vercel、Cloudflare、またはOxygen)での
stale-while-revalidateヘッダー - データレイヤーキャッシング 製品データの60秒TTL、コレクションデータの300秒
- カート操作 はキャッシュされない - これらはすべての時刻APIに直接当たる
- 在庫チェック は軽量ポーリングメカニズムまたはウェブフックを使用して古い在庫データを無効化
// 例: Next.jsの製品クエリのキャッシング戦略
export async function getProduct(handle: string) {
const data = await shopifyFetch({
query: PRODUCT_QUERY,
variables: { handle },
cache: 'force-cache',
next: { revalidate: 60, tags: [`product-${handle}`] },
});
return data.product;
}
Hydrogen vs Next.js Commerce: 実際の比較
これは私が最も聞かれる質問だ。そして正直な答えは: それはあなたのチーム、タイムライン、ホスティングの好みに依存する。しかし、ここにデータがあります。
| 要素 | Hydrogen 2 (Remix/Oxygen) | Next.js Commerce (Vercel) |
|---|---|---|
| フレームワーク | Remix (React) | Next.js 15 (React) |
| ホスティング | Oxygen (Shopify) またはセルフホスト | Vercel、Netlify、セルフホスト |
| Shopify統合 | ファーストパーティ、ディープ | コミュニティメンテナンススターター |
| 学習曲線 | 中程度 (Remixパターン) | より低い (チームがNext.jsを知っている場合) |
| CMS柔軟性 | 良好だが Shopify中心 | 優れている - エコシステムは巨大 |
| 中央値LCP (データ) | 0.8s | 0.7s |
| 中央値TTFB | 120ms (Oxygen) | 90ms (Vercel Edge) |
| 大規模時のコスト | Oxygen無料層が寛容 | Vercel Pro $20/mo、Enterprise $$$ |
| チェックアウト統合 | ネイティブカート → チェックアウトフロー | ストアフロントAPI カートセットアップが必要 |
| エコシステムプラグイン | 増加中、約200パッケージ | 膨大、10k+パッケージ |
| コミュニティサイズ | 約15kギターハブスター | 約40kギターハブスター |
Hydrogenを選ぶべき時
以下の場合はHydrogenを選択してください:
- チームはRemixのローダー/アクションパターンに慣れている
- Shopifyの最も近いネイティブ経験を望んでいる
- Shopify Plus マーチャントで、Oxygenホスティング付きが必要
- 重い非商取引コンテンツ(ブログ、編集など)は必要ない
Next.jsを選ぶべき時
以下の場合はNext.jsを選択してください:
- チームはすでにNext.jsアプリを出荷している
- Shopifyのメタフィールドを超えたディープCMS統合が必要
- 最大のホスティング柔軟性が必要
- コマースと一緒にコンテンツが多いブランド体験を構築している
- コマースバックエンドを将来的に切り替える計画がある可能性がある
ぶっきらぼうに言うと、過去1年間に構築した400ストアのうち70%について、Next.jsが正しい選択だった。技術的に優れているからではなく、必ずしも - 才能プールが5倍大きく、エコシステムはエッジケースのためのより多くの解決策を持っています。クライアントのマーケティングチームが特定のアニメーションライブラリを望んだり、SEO代理店が特定のメタタグ構造を必要とする場合、Next.jsランドで答えをより速く見つけるでしょう。
とはいえ、OxygenのHydrogenストアには展開の単純さがあり、それは打ち負かしにくい。メインにプッシュ、ライブです。ビルド構成なし、デバッグするエッジ機能コールドスタートなし。
1秒未満のLCP達成
ここで、ゴムが道に当たるところです。ヘッドレスShopify全体のビジネスケース(実際の経済的正当性)は、パフォーマンスに基づいています。そして、あなたが達成する必要がある数字は、モバイルの1秒未満の最大の描画部分です。
理由は次の通り: Shopifyの2025年のパフォーマンス調査によれば、LCPの100msごとの改善は、だいたい1%のコンバージョン率の増加と相関しています。年間500万ドルをしている店が2.5秒LCP(典型的なLiquidテーマ)から0.9秒LCPに移動する場合、大体15%のリフトが予想されます。それは75万ドルの追加収益です。
400以上のサイト全体のデータは、この範囲を確認しています。ヘッドレスストアフロントは、リアルユーザーコアウェブバイタルデータがCrUXレポートで測定されたLiquidテーマより60-75%高速化です。
パフォーマンスプレイブック
ここが正確に一貫して1秒未満のLCPを達成するやり方です。
1. クリティカルパスをサーバーレンダリングする
// Next.js App Router — 製品ページ用サーバーコンポーネント
export default async function ProductPage({ params }: { params: { handle: string } }) {
const product = await getProduct(params.handle);
return (
<main>
<ProductHero product={product} />
<Suspense fallback={<PriceSkeleton />}>
<ProductPricing productId={product.id} />
</Suspense>
<Suspense fallback={<ReviewsSkeleton />}>
<ProductReviews productId={product.id} />
</Suspense>
</main>
);
}
2. 画像を積極的に最適化する
ShopifyのCDNは width、height、crop パラメータをサポートしています。使用してください。375pxモバイルビューポートに2000pxヒーロー画像を提供しないでください。
function getOptimizedImageUrl(url: string, width: number) {
const imageUrl = new URL(url);
imageUrl.searchParams.set('width', String(width));
imageUrl.searchParams.set('format', 'webp');
return imageUrl.toString();
}
3. LCP画像をプリロードする
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
4. クリティカルCSSをインラインにし、他のすべてを延期する
上記の折線CSSを14KB以下に保ちます(1つのTCPラウンドトリップ)。他のすべては非同期に読み込みます。
5. エッジサイドレンダリング
VercelエッジFunctionsとOxygenのワーカーランタイムの両方がエッジで実行され、グローバルに100ms未満のTTFBを提供します。これは、あなたが引くことができる単一の最大のパフォーマンスレバーです。
6. インテントでプリフェッチする
ビューポートのすべてをプリフェッチしないでください。ホバー/タッチスタート時にプリフェッチしてください。これは不要な帯域幅を約40%削減し、同時に瞬時のように感じます。
チェックアウト拡張機能とPost-Checkout.liquid時代
多くのマーチャントの手を強制した変更は、2025年8月の時点でShopifyがチェックアウト.liquidでPlus ストアを日没したことです。カスタムチェックアウト修正があった場合(ほとんどのPlus マーチャントがそうであった)、チェックアウト拡張機能に移行する必要がありました。
チェックアウト拡張機能はShopifyのUI拡張フレームワークを使用します。リアクトのようなコンポーネントを定義された拡張ポイント(購入前、購入後、配送、支払いなど)内のShopifyのチェックアウト内で描写します。
// 例: 購入後アップセル拡張機能
import { useApi, reactExtension, BlockStack, Text, Button } from '@shopify/ui-extensions-react/checkout';
export default reactExtension('purchase.checkout.block.render', () => <UpsellBlock />);
function UpsellBlock() {
const { cost, lines } = useApi();
return (
<BlockStack>
<Text size="medium">マッチング アクセサリーを追加しますか?</Text>
<Button onPress={() => { /* add to cart logic */ }}>
$19.99で追加
</Button>
</BlockStack>
);
}
理解するべき重要なこと: チェックアウト拡張機能はヘッドレスであろうとLiquidテーマを使用していようと同じように機能します。 ヘッドレスフロントエンドはShopifyのチェックアウトに渡され、拡張機能はそこで実行されます。これは実際にはヘッドレスアプローチの大きな利点です - ストアフロントは完全にカスタムですが、チェックアウトはShopifyホストのまま(PCI準拠、Shopifyで保守など)です。
Shopify Plus移行戦略
既存のShopify Plus ストアをヘッドレスに移行することはフェーズ的な操作です。すべてを一度にしようとしないでください。以下は、プロジェクト全体で最もうまく機能したアプローチです。
フェーズ1: 基礎 (第1-3週)
- フロントエンドフレームワークのセットアップ (Next.jsまたはHydrogen)
- キャッシング付きストアフロントAPI接続層を実装
- デザインシステム/コンポーネントライブラリを構築
- CI/CDパイプラインのセットアップ
フェーズ2: コアコマース (第4-8週)
- 製品リストページ (コレクション)
- 製品詳細ページ
- カート機能
- 検索 (Shopifyの予測検索APIまたはAlgoliaのようなサードパーティを使用)
- 顧客アカウントAPI経由のアカウントページ
フェーズ3: コンテンツとマーケティング (第9-11週)
- 非商取引ページのCMS統合
- ブログ/編集セクション
- マーケティングチーム向けのランディングページビルダー
- SEO移行 (301リダイレクト、サイトマップ、構造化データ)
フェーズ4: 起動と最適化 (第12-14週)
- パフォーマンス監査と最適化
- A/Bテストセットアップ
- 分析の移行 (GA4、サーバー側トラッキング)
- フィーチャーフラグまたは分割テスト経由の段階的なトラフィック移行
総タイムライン: 典型的なShopify Plus ストアの場合12-14週間。複雑なカタログ(50k+SKU)または重い必要なカスタマイズを持つエンタープライズストアは16-20週間かかることができます。
年間経常収益100万ドル閾値: ヘッドレスが経済的に意味がある時
ヘッドレスは無料ではありません。カスタムフロントエンド開発はLiquidテーマをインストールするより多くのコストがかかります。継行的なメンテナンスは開発者時間が必要です。では、数学がいつ機能しますか?
私たちのデータに基づいて: 年間経常収益100万ドルが、ヘッドレスShopifyが明確な経済的意味を持ち始める閾値です。
数学は次の通り:
| 収益レベル | 推定転換率向上 | 収益獲得 | ヘッドレス構築コスト | 年間継続コスト | ROIタイムライン |
|---|---|---|---|---|---|
| $500Kの年間経常収益 | 10-15% | $50-75K | $80-150K | $24-48K | 18-24ヶ月 |
| $1Mの年間経常収益 | 10-15% | $100-150K | $80-150K | $24-48K | 8-14ヶ月 |
| $3Mの年間経常収益 | 10-15% | $300-450K | $120-200K | $36-60K | 4-6ヶ月 |
| $10Mの年間経常収益 | 10-15% | $1-1.5M | $150-300K | $48-96K | 2-3ヶ月 |
$1M以下では、よく構築されたLiquidテーマのコンバージョン率最適化に投資した方が良い。$1Mの上では、パフォーマンスゲインは投資を正当化するのに十分速く複合する。$3Mを超えると、ヘッドレスに行かないことは深刻なお金をテーブルの上に置き去りにしている。
ヘッドレス構築の価格設定詳細については、価格ページをチェックしてください - 私たちはプロジェクト範囲について透明です。
代理店の選択: Naturaily、Aalpha以上
ヘッドレスShopifyワークの代理店を評価している場合、2026年のランドスケープの正直な評価は次の通りです。
Naturaily はポーランドベースの代理店で、特にNext.jsとVue Storefrontを使用したヘッドレスコマースの確かな評判を構築しています。彼らの強みは、エンタープライズ価格なしで専門的なビルドが必要な中市場($1-10M)ブランドにある。彼らは技術的に有能で、Shopifyストアフロント APIの経験が良好です。彼らが時々苦労するところ: 高度にカスタム的なB2BワークフローとマルチマーケットのShopifyセットアップ。
Aalpha はインドベースの開発会社で、より広いフォーカスがあります - 彼らはモバイルアプリ、エンタープライズソフトウェア、ヘッドレスコマースを行っています。彼らの料金は著しく低い(多くの場合、西部の代理店より40-60%低い)、これは予算意識的なプロジェクトにとって魅力的です。取引は、一般的にプロジェクト管理のオーバーヘッドと設計のポーランドです。強力な内部デザインチームを持っていて、プロジェクトを厳密に管理できる場合、彼らは堅い技術的作業を提供することができます。
Social Animalでの私たち: 私たちはヘッドレスウェブ開発に独占的に特化しています - Shopifyだけではなく、ヘッドレスCMSとNext.jsおよびAstroを含むフレームワーク作業の完全なスペクトラム。私たちの甘いスポットは、大規模な代理店のオーバーヘッドなしでディープな技術的専門知識が必要なブランドと企業です。フィットについて知りたい場合は、連絡してください - 私たちはあなたのプロジェクトについて、あなたが正しい店であるかどうかをぶっきらぼうに告げるでしょう。
| 要素 | Social Animal | Naturaily | Aalpha |
|---|---|---|---|
| 専門化 | ヘッドレスウェブ (ディープ) | ヘッドレスコマース + ウェブ | フルサービス開発 |
| プライマリフレームワーク | Next.js、Astro、Hydrogen | Next.js、Vue Storefront | Next.js、React Native |
| チーム場所 | US ベース | ポーランド | インド |
| 典型的なプロジェクト範囲 | $80-250K | $60-200K | $25-100K |
| Shopify Plus経験 | はい (400+ヘッドレスサイト) | はい | はい |
| 最適な対象 | パフォーマンスが重要なストアフロント | 中市場ヘッドレスコマース | 予算意識的なビルド |
Astroおよびその他フレームワークを使用したカスタムストアフロント
ほとんどのShopifyヘッドレスガイドが教えてくれないこと: あなたはリアクトを使用する必要がありません。
私たちはいくつかのShopifyストアフロント Astroで構築しました - 特にコンテンツと編集がコマースと同じくらい重要なブランド向け。Astroのアイランドアーキテクチャとは、デフォルト値でJavaScriptを出荷して、対話的なビット(カート、製品セレクタ、検索)のみを水分補給することを意味します。
結果は? LCP一貫して0.6秒未満。総ページ重量100KB未満。それはばかばかしく高速です。
---
// Shopifyの製品カード用Astroコンポーネント
import { getProduct } from '../lib/shopify';
const product = await getProduct(Astro.params.handle);
---
<article class="product-card">
<img
src={product.featuredImage.url + '&width=600'}
alt={product.featuredImage.altText}
width="600"
height="600"
loading="lazy"
/>
<h2>{product.title}</h2>
<p class="price">${product.priceRange.minVariantPrice.amount}</p>
<!-- このコンポーネントのみ JavaScriptを出荷します -->
<AddToCart client:visible productId={product.id} />
</article>
取引: コマース用のAstroのエコシステムはより小さい。カート管理、認証、検索のより多くのカスタムコードを書きます。しかし、パフォーマンスがあなたの主要なメトリックであり、あなたのチームが追加の作業に慣れている場合、それは正当な選択です。
FAQ
小さなストア向けのヘッドレスShopifyは価値がありますか?
年間経常収益が$500K以下のストアの場合、通常はそうではない。開発とメンテナンスコストは、コンバージョン率の改善を上回ります。高速で、よく最適化されたLiquidテーマのようなDawnを使ったほうが良い。年間経常収益100万ドルを超えると、経済はヘッドレスへと決定的に移動します。
2026年のヘッドレスShopify構築にはいくらかかりますか?
複雑さ、代理店の場所、機能の範囲に応じて、初期構築で$80K-$300Kを期待してください。継続的なメンテナンスは月額$2K-$8K実行されます。南アジアの予算代理店は$25K-$80Kで提供することができますが、通常、より強力な内部プロジェクト管理と品質保証が必要です。
ヘッドレスストアフロント付きShopifyのチェックアウトを使用できますか?
はい、そして、あなたはすべきです。ShopifyのチェックアウトはPCI準拠で、戦闘テスト、支払い処理を処理します。ヘッドレスフロントエンドはストアフロントAPIを通じてカートを作成し、Shopifyのホステッドチェックアウトにリダイレクトします。チェックアウト拡張機能を使用すると、Shopifyの拡張ポイント内の経験をカスタマイズできます。
ヘッドレスとLiquidテーマ間のパフォーマンスの違いは何ですか?
400以上のサイト全体のデータは、ヘッドレスストアフロントがコアウェブバイタルメトリクスで60-75%速いLiquidテーマであることを示しています。具体的には、中央値LCP は2.3-3.5秒(液体)から0.7-1.0秒(ヘッドレス)に低下します。これは、平均して10-15%のコンバージョン率改善に変換されます。
ヘッドレスShopifyストア用にHydrogenまたはNext.jsを使用する必要がありますか?
チームがNext.jsを知っていれば、Next.jsを使用してください。あなたが新鮮に始まり、最も統合されたShopify経験が最小限の構成で必要な場合、Oxygenのhydrogenは優れています。それらの間のパフォーマンスの違いは無視できます - チーム専門知識とエコシステム必要がなければ、決定を駆動すべきです。
ヘッドレス用にShopify Plus が必要ですか?
技術的には、いいえ。ストアフロントAPIはすべてのShopifyプランで利用可能です。しかし、実際には、ほとんどのヘッドレス構築はプラス機能の利益があります: チェックアウト拡張機能、スクリプト、マルチストアセットアップ用の組織API、より高いAPIレート制限。ヘッドレスが意味がある収益レベル($1M+)では、どうせプラスに従事します。
ヘッドレスShopify移行にはどのくらいかかりますか?
経験豊かなチームでの典型的なShopify Plus からヘッドレスへの移行は12-14週間がかかります。複雑なカタログ、重い必要なカスタマイズ、またはマルチマーケットセットアップを持つエンタープライズストアは16-20週間かかることができます。誰かが4週間のジョブであると言ってはいけません - それは壊れたローンチで終わります。
ヘッドレスに行くとき、Shopifyアプリスはどうなりますか?
これは最大の痛みポイントの1つです。多くのShopifyアプリはLiquidテーマにスクリプトを挿入します。これはヘッドレスフロントエンド上で機能しません。各アプリを評価する必要があります: 一部は統合できるAPI、一部はヘッドレス互換バージョン、一部はカスタムコードまたは代替サービスで置き換える必要があります。プロジェクト範囲の一部として、アプリ監査と移行を計画してください。
Astroまたはその他の非リアクトフレームワークをShopifyのストアフロント APIで使用できますか?
完全に。ストアフロント APIは標準GraphQL API です - HTTPリクエストを行うことができるフレームワークはそれを使用できます。私たちはAstro、SvelteKit、さらには素のJavaScriptでShopifyストアフロントを構築しました。取引は、Shopifyの公式ツーリング(Hydrogen、カートユーティリティなど)がリアクトベースであるため、他のフレームワークでより多くのカスタム統合コードを書きます。