Headless Shopify 2026: Hydrogen、Next.js & $1M店舗ギャップ
Shopify Plusストアフロントは98のLighthouseスコアでリリースされます。デプロイは完璧に感じられました。HydrogenのストリーミングSSR、900ms未満のLCP、レイアウトシフトなし。3ヶ月後、チェックアウト転換率が14%低下します。プロダクトチームはカートAPIのせいにします。エンジニアリングはサードパーティスクリプトを指摘します。財務は6桁のリプラットフォーム投資に疑問を呈します。2020年以降に監査した400以上のヘッドレスShopifyビルドの87件で、この正確なシーケンスが展開されるのを見てきました。4ヶ月で$1M ARRに達するストアフロントと2四半期停滞するストアフロントの違いは、HydrogenとNext.jsではなく、最初のコミット前にほとんどのチームが間違える3つのマイグレーション決定にあります。400のビルドが教えてくれたのは、フレームワークドキュメントが言及していないトラップについてです。
このガイドは、Shopifyの古いREST APIと組み合わされたNext.jsセットアップを使って最初のヘッドレスShopifyストアを構築した2020年に誰かが私に手渡してくれたことを望むすべてのものです。DTC、B2B卸売業者、エンタープライズShopify Plusマーチャント向けにストアフロントを構築することから得た蒸留された知識です。すでに疑っていることを確認するものもあります。Twitterで読んできた従来の知恵に異議を唱えるものもあります。
それでは始めましょう。
目次
- 2026年のヘッドレスShopifyが実際に意味すること
- StorefrontAPI：新しい最高の友人
- HydrogenとNext.js Commerce：本当の比較
- 1秒未満のLCPの実現
- チェックアウト拡張とPost-Checkout.liquid時代
- Shopify Plusマイグレーション戦略
- $1M ARRしきい値：ヘッドレスが財務的に意味を持つ場合
- エージェンシーの選択：Naturaily、Aalpha以上
- Astroおよびその他のフレームワークでのカスタムストアフロント
- FAQ
2026年のヘッドレスShopifyが実際に意味すること
ヘッドレスShopifyとは、フロントエンドプレゼンテーションレイヤーをShopifyのバックエンドから分離することです。Shopifyが本当に優れていることのためにそれを保つ—インベントリ、オーダー、決済、配送—そしてLiquidテーマをStorefront APIと通信するカスタムフロントエンドで置き換えます。
しかし、ほとんどの記事が言わないのはこれです：2026年のヘッドレスShopifyは、たった2年前でさえあったものとはまったく異なる動物です。3つのシフトがランドスケープを根本的に変えました：
Hydrogen 2は成熟しています。 Shopifyの2023年の不安定なリリース以来、Oxygenで実行されるReactベースのフレームワークは大幅に安定化しました。現在はRemixの下にあり、合理的なデフォルトで出荷されます。
Storefront APIがバージョン2025-04に達しました。 これはCustomer Account API v2、予測検索の改善、そして重要なことに、クライアント側のJavaScriptを必要としないサーバー側のカート操作をもたらしました。
チェックアウト拡張がcheckout.liquidを完全に置き換えました。 2025年8月現在、すべてのShopify Plusストアはチェックアウト拡張性を使用する必要があります。Liquidチェックアウトのカスタマイズはもうありません。これだけでも数千のストアをヘッドレスアーキテクチャに向かわせました。
I use：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経由でStorefront APIと通信します。Shopifyに属していないコンテンツ（編集ページ、ランディングページ、複雑なコンテンツモデル）はヘッドレスCMSに存在します。チェックアウトのカスタマイズはShopifyの拡張ポイントを通じて発生し、カスタムマークアップではありません。
Storefront API：新しい最高の友人
Storefront APIは、顧客向け体験用に特別に設計された公開GraphQL APIです。バックエンド操作を処理するAdmin 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年現在、Storefront APIは、パブリックアクセストークンのストアあたり1秒あたり100リクエストを許可します（2024年初期の60から増加）。プライベートアクセストークンはより高い制限を取得します。しかし、とにかくこれらの制限に達するべきではありません—あなたがそうしているなら、あなたのキャッシング戦略は壊れています。
ここが私が各プロジェクトで行うことです：
- フルページキャッシング CDNレベル（Vercel、Cloudflare、またはOxygen）で
stale-while-revalidateヘッダー付き - データレイヤーキャッシング 製品データの60秒TTL、コレクションデータの300秒
- カート操作 キャッシュされることはありません—これらは毎回APIに直接ヒットします
- 在庫確認 軽量ポーリングメカニズムまたはWebhookを使用してStaleストックデータを無効化します
// 例：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と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.8秒 | 0.7秒 |
| 中央値TTFB | 120ms（Oxygen） | 90ms（Vercel Edge） |
| スケールでのコスト | Oxygen無料層は寛容 | Vercel Pro $20/月、Enterprise$$$ |
| チェックアウト統合 | ネイティブカート→チェックアウトフロー | Storefront APIカートセットアップが必要 |
| エコシステムプラグイン | 成長中、~200パッケージ | 巨大、10k+パッケージ |
| コミュニティサイズ | ~15kのGitHubスター | ~40kのGitHubスター |
Hydrogenを選ぶとき
Remixが選ぶ場合：
- チームはRemixのローダー/アクションパターンに満足しています
- 最も近いネイティブShopify体験が必要です
- あなたはOxygenホスティングを含むShopify Plusマーチャントです
- ブログ、編集など、重いコマースコンテンツは必要ありません
Next.jsを選ぶとき
Next.jsを選んでください
- チームはすでにNext.jsアプリを出荷しています
- Shopifyのメタフィールドを超えた深いCMS統合が必要です
- 最大限のホスティング柔軟性が必要です
- コンテンツが豊富なブランド体験をコマースと並行して構築しています
- 将来的にコマースバックエンドを切り替える可能性があります
正直に言います：過去1年に構築したストアの70％で、Next.jsが正しい呼び出しでした。技術的に優れているわけではありません—必ずしもそうではありません—しかし、才能プールは5倍大きく、エコシステムはエッジケースのためのより多くのソリューションを持っています。クライアントのマーケティングチームが特定のアニメーションライブラリを望んでいるか、SEOエージェンシーが特定のメタタグ構造を必要としている場合、Next.js領域での回答をより速く見つけるでしょう。
とはいえ、OxygenのHydrogenストアはデプロイの単純さを持っています。それは倒すのが難しいです。メインにプッシュして、それは生です。ビルド設定なし、デバッグするエッジ関数のコールドスタートなし。
1秒未満のLCPの実現
ここがゴムが道に出会う場所です。ヘッドレスShopifyのビジネスケース全体—実際の財務正当性—はパフォーマンスに基づいています。そしてあなたが達成する必要がある数は、モバイルで1秒未満の最大限に満足なペイントです。
なぜですか：LCPの100msのすべての改善は、Shopifyの独自の2025年パフォーマンス研究によると、転換率の大約1%の増加に関連しています。年間$5Mをやっている店が2.5秒のLCP（典型的なLiquidテーマ）から0.9秒のLCPに行くなら、大約15%のリフトを期待できます。それは追加の$750K収入です。
400以上のサイト全体のデータは、CrUX報告書でのリアルユーザーCore Web Vitals データで測定された、液体テーマよりもヘッドレスストアフロントが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 Edge FunctionsとOxygenのワーカーランタイムの両方がエッジで実行され、グローバルに100ms未満のTTFBを提供します。これは、プルできるシングル最大のパフォーマンスレバーです。
6。インテントで先読みします
ビューポート上のすべてをプリフェッチしないでください。ホバー/タッチスタートで先読みします。これは不要な帯域幅の約40%を削減しながら、即座に感じさせます。
チェックアウト拡張とPost-Checkout.liquid時代
ここが多くのマーチャントの手を強要した変更です：2025年8月現在、Shopifyはチェックアウト時にPlus ストアでサンセットを設定しました。カスタムチェックアウトの変更がある場合—ほとんどのPlus マーチャントはそうでした—チェックアウト拡張に移行する必要がありました。
チェックアウト拡張ではShopifyのUI Extensions フレームワークを使用します。定義された拡張ポイント（購入前、購入後、配送、支払いなど）内でShopifyのチェックアウト内でレンダリングするReactのようなコンポーネントを記述します。
// 例：購入後のアップセル拡張
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）
- Storefront API接続レイヤーをキャッシング付きで実装
- デザインシステム/コンポーネントライブラリを構築
- CI/CDパイプラインをセットアップ
フェーズ2：コアコマース（週4-8）
- 製品リストページ（コレクション）
- 製品詳細ページ
- カート機能
- 検索（Shopifyの予測検索APIまたはAlgoliaなどのサードパーティを使用）
- Customer Account API経由のアカウントページ
フェーズ3：コンテンツ＆マーケティング（週9-11）
- 非コマースページのCMS統合
- ブログ/編集セクション
- マーケティングチーム向けのランディングページビルダー
- SEOマイグレーション（301リダイレクト、サイトマップ、構造化データ）
フェーズ4：起動と最適化（週12-14）
- パフォーマンス監査と最適化
- A/Bテストセットアップ
- Analytics移行（GA4、サーバー側追跡）
- 機能フラグまたはスプリットテスト経由のグラデーショントラフィックマイグレーション
総タイムライン：典型的なShopify Plusストアの場合は12-14週。複雑なカタログ（50k+SKU）またはヘビーカスタマイズを備えたエンタープライズストアは16-20週かかる可能性があります。
$1M ARRしきい値：ヘッドレスが財務的に意味を持つ場合
ヘッドレスは無料ではありません。カスタムフロントエンド開発はLiquidテーマをインストールするより多くの費用がかかります。継続的なメンテナンスには開発者時間が必要です。では、数学はどこで機能しますか？
私たちのデータに基づいて：$1M ARRはヘッドレスShopifyが財務的に明確に意味を持ち始めるしきい値です。
ここが数学です：
| 収入レベル | 推定Conv.レート上昇 | 収入利益 | ヘッドレスビルドコスト | 年間継続コスト | ROIタイムライン |
|---|---|---|---|---|---|
| $500K ARR | 10-15% | $50-75K | $80-150K | $24-48K | 18-24ヶ月 |
| $1M ARR | 10-15% | $100-150K | $80-150K | $24-48K | 8-14ヶ月 |
| $3M ARR | 10-15% | $300-450K | $120-200K | $36-60K | 4-6ヶ月 |
| $10M ARR | 10-15% | $1-1.5M | $150-300K | $48-96K | 2-3ヶ月 |
$1M未満では、よく構築されたLiquidテーマでの転換率最適化に投資する方が良いです。$1M以上では、パフォーマンスのゲインは投資を正当化するのに十分な速さで複合します。$3M以上では、ヘッドレスに行かないことはマジで遠くからお金を残すことです。
ヘッドレスビルドの価格詳細については、価格ページをチェックしてください。プロジェクト範囲について透明性があります。
エージェンシーの選択：Naturaily、Aalpha以上
2026年のヘッドレスShopifyワークのためにエージェンシーを評価している場合、ここが風景の正直な評価です。
Naturaily は、ヘッドレスコマース、特にNext.jsとVue Storefront開発でしっかりした評判を構築したポーランドベースのエージェンシーです。彼らの強みは中流市場にあります—$1-10M以上を行うブランドは、エンタープライズ価格なしでプロビルドが必要です。彼らは技術的に有能で、良いShopify Storefront API体験を持っています。彼らが時々苦労する場所：高度にカスタムB2BワークフローとマルチマーケットShopifyセットアップ。
Aalpha はインドベースの開発会社で、より広い焦点を持っています—モバイルアプリ、エンタープライズソフトウェア、ヘッドレスコマース。彼らのレートは大幅に低い（多くの場合、西側エージェンシーよりも40-60%少ない）。予算意識のあるプロジェクトにとって魅力的です。トレードオフは、通常、プロジェクト管理のオーバーヘッドと設計の光沢です。強い内部デザインチームがあり、プロジェクトを注意深く管理できる場合、彼らは堅実な技術的作業を提供できます。
Social Animalとの比較方法： Next.jsやAstroを含むヘッドレスコマース全体の範囲を含む、ヘッドレスWeb開発のみを専門としています。私たちの甘い点は、大規模なエージェンシーのオーバーヘッドなしで深い技術的専門知識が必要なブランドと企業です。フィットについて質問がある場合は、お問い合わせください—あなたのプロジェクトの右寸法をお伝えします。
| 要因 | Social Animal | Naturaily | Aalpha |
|---|---|---|---|
| 専門化 | ヘッドレスWeb（深い） | ヘッドレスコマース+Web | 完全サービス開発 |
| プライマリフレームワーク | Next.js、Astro、Hydrogen | Next.js、Vue Storefront | Next.js、React Native |
| チームの場所 | US ベース | ポーランド | インド |
| 標準的なプロジェクト範囲 | $80-250K | $60-200K | $25-100K |
| Shopify Plus体験 | はい（400以上のヘッドレスサイト） | はい | はい |
| 最適な使用例 | パフォーマンスクリティカルストアフロント | 中流市場ヘッドレスコマース | 予算意識のあるビルド |
Astroおよびその他のフレームワークでのカスタムストアフロント
これはほとんどのShopifyヘッドレスガイドが言わないでしょう：あなたはReactを使用する必要はありません。
コンテンツと編集がコマースと同じくらい重要なブランドに対して、特にAstroでいくつかのShopifyストアフロントを構築しました。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 ARR未満のストアの場合、通常はそうではありません。開発とメンテナンスのコストは転換率の改善を上回ります。Fast、Well-optimized Liquid テーマ(Dawnなど)に投資する方が良いです。$1M ARRを超えると、経済が決定的にヘッドレスに有利にシフトします。
ヘッドレスShopifyビルドは2026年でどのくらいの費用がかかりますか？
複雑さ、エージェンシーの場所、機能スコープに応じて、初期ビルドで$80K-$300K。継続的なメンテナンスは1か月あたり$2K-$8Kで実行されます。南アジアの予算エージェンシーは$25K-$80Kで配信できますが、通常、より強い内部プロジェクト管理と品質保証が必要です。
ヘッドレスストアフロントでShopifyのチェックアウトを使用できますか？
はい、あなたはすべきです。ShopifyのチェックアウトはPCI準拠で、戦闘テスト済みで、支払い処理を処理します。あなたのヘッドレスフロントエンドはStorefront API経由でカートを作成し、その後Shopifyのホストされたチェックアウトにリダイレクトされます。チェックアウト拡張により、Shopifyの拡張ポイント内で体験をカスタマイズできます。
ヘッドレスとLiquidテーマの間のパフォーマンスの違いは何ですか？
400以上のサイト全体のデータは、ヘッドレスストアフロントがCore Web Vitals メトリックで液体テーマより60-75%高速であることを示しています。具体的には、中央値LCPは2.3-3.5秒（液体）から0.7-1.0秒（ヘッドレス）に低下します。これは、平均して10-15%の転換率改善に変わります。
ヘッドレスShopifyストアのためにHydrogenまたはNext.jsを使用する必要がありますか？
チームがNext.jsを知っているなら、Next.jsを使用してください。ゼロから始めて、最も統合されたShopify体験が必要な場合、Oxygen上のHydrogenは優れています。それらの間のパフォーマンスの違いは無視できるほどです—チームの専門知識とエコシステムのニーズがあなたの決定を駆動するべきです。
ヘッドレスの場合、Shopify Plusが必要ですか？
技術的には、いいえ。Storefront APIは、すべてのShopifyプランで利用できます。しかし実際には、ほとんどのヘッドレスビルドはPlus機能の恩恵を受けます：チェックアウト拡張、Scripts、マルチストアセットアップ用の組織API、およびより高いAPIレート制限。ヘッドレスが意味を持つ収入レベル（$1M以上）では、とにかくPlus上にいるべきです。
ヘッドレスShopifyマイグレーションにはどのくらい時間がかかりますか？
経験のあるチームによる典型的なShopify Plus への ヘッドレスマイグレーションは12-14週間かかります。複雑なカタログ、重いカスタマイズ、またはマルチマーケットセットアップを備えたエンタープライズストアは16-20週かかる可能性があります。それが4週間の仕事であると誰かに言わせないでください—それは破られた発売で終わります。
ヘッドレスになったときにShopifyアプリはどうなりますか？
これは最大の痛点の1つです。多くのShopifyアプリはLiquidテーマにスクリプトを注入します。これはヘッドレスフロントエンドでは機能しません。各アプリを評価する必要があります。一部は統合できるAPI、一部はヘッドレス互換バージョン、一部はカスタムコードまたは代替サービスで置き換える必要があります。プロジェクトスコープの一部として、アプリ監査と移行を計画します。
他のフレームワーク（Astroなど）をShopifyのStorefront APIで使用できますか？
絶対に。Storefront APIは標準GraphQL API—HTTP要求を行うことができるすべてのフレームワークはそれを使用できます。Astro、SvelteKit、および純粋なJavaScriptでShopifyストアフロントを構築しました。トレードオフは、Shopifyの公式ツール（Hydrogen、カートユーティリティなど）がReactベースであるため、他のフレームワークではより多くのカスタム統合コードを記述します。