ヘッドレスコマースとは？Shopify×Hydrogenで解説
「ヘッドレスコマースって何？」
「Hydrogenってヘッドレスコマースのこと？」
「最近、Next.jsでもShopifyのサイトが
作れるようになったって聞いたけど、本当？」
こういった疑問にお答えします。
この3つ、言葉としては聞くのに、
いざ説明しようとすると急にあいまいになります。
理由はシンプルで、
「ヘッドレスコマース」と「Hydrogen」と
「Next.js」は、そもそも同じ列に並ぶ言葉じゃないからです。
ここがごちゃ混ぜのまま調べると、
いつまでも霧が晴れません。
僕はこのオブライフ自体を、
Shopifyのヘッドレス構成
（Hydrogen＋Oxygen）で作って
運用しています。
今まさに読んでいるこのページが、
その実物です。
実際に手を動かしてみて分かった整理を、
上の3つの質問の順番でそのままお答えしていきます。
先に結論の地図だけ渡しておきます。
この話は3つの階層に分かれています。
- ①ヘッドレスコマース＝「見た目と機能を切り離す」という設計の考え方
- ②Storefront API＝Shopifyの機能と表側をつなぐ共通の土台
- ③Hydrogen / Next.js＝表側（見た目）を実際に作るための道具
「ヘッドレス」は①の話、「Hydrogen」と「Next.js」は③の話。
階層が違うものを横に並べて
比べていたから混乱していた、
というのがこの記事のいちばんの答えです。
ここから1段ずつ降ります。
ヘッドレスコマースとは、ECの「見た目」と「機能」を切り離す作り方
ヘッドレスコマースとは、
ECサイトの「見た目（フロントエンド）」と
「機能（バックエンド）」を分離して作る方法です。
「Head（＝表側の見た目）」を「less（＝持たない）」構成にする、
というのが言葉の由来です。
Shopifyでいえば、
商品管理・在庫・決済・カートといった
裏側の機能はそのまま使いながら、
表側だけをLiquidテーマから
切り離して自由に作る、ということです。
従来のShopifyは、
テーマ（Liquid）の中に見た目と
機能が一体化していました。
だから見た目を
大きく変えようとすると、
機能の制約に引っかかる。
逆に機能を足すと、
見た目のテンプレートに縛られる。
ヘッドレスはこの2つを切り離すので、
表側を好きな技術でゼロから設計できるようになります。
僕がヘッドレスにした理由も、
この「自由度」でした。
オブライフは元々WordPressで
運用していて、
そのデータをShopifyへ移したかった。
ところがShopifyのテーマベースだと、
URLやディレクトリの構造が固定されてしまう。
WordPress時代のURLをそのまま保てず、
変わってしまうんです。
ブログ機能もフィルターなどの
細かい構成が組みにくい。
テーマの上でなんとかしようとすると、
どうしても柔軟性が足りませんでした。
ヘッドレスなら、URLもディレクトリも
自分で自由に設計できる。
加えて表示も速い。これが決め手でした。
もちろん、ヘッドレスは万人向けではありません。
表側を自分で作る以上、技術的なハードルはありますし、
規模によっては相応の手間もかかります。
「話題だから」で入ると失敗します。
ただ、作り込みたい理由がはっきりあるなら、
ヘッドレスは最も自由な選択肢です。
Hydrogenは「ヘッドレスコマース」ではなく、ヘッドレスを作るためのShopify純正の道具
ここが、いちばん混同されるポイントです。
Hydrogenは「ヘッドレスコマース」
そのものではありません。
ヘッドレスを作るための、
Shopify純正のフレームワーク（開発キット）です。
さきほどの3階層で言えば、
ヘッドレスコマースは①の「概念」、
Hydrogenは③の「道具」。
レイヤーが違います。
「ヘッドレス」は状態や設計思想の名前で、
「Hydrogen」はそれを実現する手段の名前。
だから「Hydrogenってヘッドレスコマースのこと？」
という問いは、
「木造ってマイホームのこと？」
と聞いているのに近いんです。
木造は建て方、マイホームは完成した状態。
別の階層の話です。
Hydrogenの中身は、
React（React Router）ベースの
ストアフロント開発キットです。
ShopifyのデータをStorefront API経由で
扱うための部品や便利機能がひとまとまりになっている。
そしてShopify純正である最大の強みが、
ホスティングのOxygen（オキシジェン）と
セットで動くことです。
作ったサイトをOxygenへ
そのまま自動で公開（デプロイ）できる。
ここが後の「Next.jsとどっち問題」に効いてきます。
僕がオブライフで使っているのが、
まさにこのHydrogen＋Oxygenの組み合わせです。
裏はShopify、
表はHydrogenで自作、
公開先はOxygen。
この記事が表示されている仕組みが、
そのままヘッドレスの実例になっています。
Next.jsでもShopifyヘッドレスは作れる。これは本当
結論から言うと、Next.jsでShopifyのヘッドレスサイトを作れる、というのは本当です。
理由は、間にある②のStorefront APIです。
ShopifyはStorefront APIという
「データの受け渡し口」を用意していて、
ここから商品・在庫・カートなどのデータを取り出せます。
表側がこのAPIを叩ければ、
フロントは好きな技術で作っていい。
Next.jsでも、Nuxtでも、
他のフレームワークでも構いません。
だから「Next.jsでShopifyできる」は正しい。
ここで大事なのは、
Next.jsで作れる＝Hydrogenが
要らなくなった、
という意味ではないことです。
Hydrogenも、
Next.jsなどの他フレームワークも、
どちらも「③フロントの作り方」の選択肢のひとつ。
土台の②Storefront APIは共通で、
その上に何を載せるかが違うだけです。
つまり選択肢は、
ざっくり2つに整理できます。
- Shopify純正のHydrogenで作る（③をShopifyの道具でそろえる）
- Next.jsなど好きなフレームワークで作る（③を自分の得意技術でそろえる）
どちらも同じ①ヘッドレスコマースであり、
同じ②Storefront APIの上に立っています。
じゃあHydrogenとNext.js、どっちで作る？（純正の楽さ vs 自由度）
迷ったら「ホスティングをどうするか」で決めると早いです。
というのも、フレームワークとしての実力はどちらも十分で、決定的な差が出るのは「作った後、どこで動かすか」だからです。
実際、僕も最初はNext.jsで組もうと思っていました。
それをHydrogenに切り替えた理由が、まさにこのホスティングでした。
ShopifyにはOxygenという純正のホスティング環境があります。
そしてOxygenは、Shopifyの契約の中でそのまま使える。
商業的に本番運用していくなら、公開先を別で契約・管理せずに済むのは大きい。
Hydrogenで作れば、このOxygenに自動で乗る。
この「作る〜公開までがShopifyの中で完結する」動線が決め手で、僕はNext.jsではなくHydrogenを選びました。
ざっくりした使い分けは、こう考えています。
- Hydrogen＋Oxygen：Shopifyを前提に、作る〜公開まで最短でそろえたい人。純正で完結する楽さが魅力。
- Next.jsなど：すでにNext.jsの資産やチームがある、他システムとの連携を優先したい、ホスティングも自分で選びたい人。
「どちらが正解」ではなく、Shopifyのためにゼロから作るならHydrogen、既存のNext.js資産を活かすならそちら、くらいの温度感です。
ちなみに、実際に作ってみての正直な感想を書いておくと、大変だったところは特にありませんでした。
むしろ逆で、これまでテーマに縛られていたのが、ヘッドレスなら柔軟に作れる。
今はAIがある時代なので、コードもかなり書きやすい。
ターミナルひとつでいろんな作業が完結するので、管理画面をあれこれ触るより楽なくらいです。かなり勧められる方法だと思っています。
まとめ：ヘッドレスは「概念」、HydrogenとNext.jsは「作り方の選択肢」
最後に、この記事の要点を整理します。
- ヘッドレスコマースとは、ECの「見た目」と「機能」を切り離して作る設計の考え方（①概念）
- Storefront APIが、Shopifyの機能と表側をつなぐ共通の土台（②土台）
- Hydrogenは「ヘッドレスコマース」ではなく、ヘッドレスを作るShopify純正のフレームワーク（③フロント）
- Next.jsでもShopifyヘッドレスは作れる。土台のStorefront APIが共通だから、フロントは自由に選べる
- HydrogenとNext.jsの分かれ目はホスティング。純正で完結させたいならHydrogen＋Oxygen、既存資産を活かすならNext.js
混乱の正体は、階層の違う3つを横並びで比べていたこと。
「ヘッドレス＝考え方」「API＝土台」
「Hydrogen・Next.js＝作り方」
と3段に分けて見れば、もう迷いません。
そして、これはメディア運営をしたい、
かつShopifyでカート（EC）も動かしたい人
にはとても相性のいい作り方です。
オブライフがまさにその形で動いています。
Shopify×ヘッドレスで作りたいなら、相談してください
もし「Shopify×ヘッドレスで、こだわったメディアやECを作りたい」
と考えているなら、一度ご相談ください。
このオブライフを実際にHydrogen＋Oxygenで組んで運用している立場から、
あなたの状況に合った構成を一緒に考えます。