2022年の後半、ハットンガーデンを拠点とする高級ジュエリーブランドのクライアントから連絡をもらった。年間約240万ポンドのオンライン売上があり、ほぼ全てがShopifyだ。悪くない数字だ。だが彼女は激怒していた。彼女のカタログで最も利幅の大きい商品であるエンゲージリングのコンバージョン率は0.8%で停滞し、一方スタジオの対面での成約率は約34%に達していた。その差は商品にはない。商品は素晴らしかった。その差は体験であり、Shopifyはいくら強力とはいえ、彼女に少しアップマーケットなEtsyのようなウェブサイトを提供していたのだ。
あの会話がきっかけで、高級商品カテゴリー向けのヘッドレスコマースを本格的に考え始めた。エージェンシーのブログが好む抽象的な「小売の未来」という意味ではなく。具体的で、泥臭くて、高額で、時には価値があるという意味で。
ここに、高級ジュエリーと高額アクセサリーブランド向けのヘッドレスプロジェクトの構築・アドバイスから学んだことを紹介する。
---
なぜShopifyが特に限界に達するのか
まず明確にしておきたいことがあります。Shopifyは素晴らしいプラットフォームです。私はSeahawk Media全体で1000を超えるShopifyストアを構築してきました。ほとんどのブランドにとって、これは正解です。高速で信頼性が高く、エコシステムは成熟していて、有能な開発者なら3～4週間で美しいストアフロントを立ち上げられます。
しかし高級ジュエリーはほとんどのブランドではありません。
問題は通常3つの領域に集中する。まず第一に、アニメーションとインタラクションの忠実性だ。ShopifyのテンプレートエンジンであるLiquidはサーバーレンダリングシステムだ。当然JavaScriptを追加することもできるが、高級ジュエリー店が求める流動的でシネマティックなスクロール体験（Van Cleefのウェブサイト、Graffのサイト、あるいはしっかり資金を得た独立ブランドを考えてみてほしい）を作るには、テーマアーキテクチャとの戦いが至るところで必要になる。結局、パッチの上にパッチを重ねることになる。
第二に、プロダクトストーリーテリングの深さだ。エンゲージリングはSKUではない。4Cの内訳であり、由来のストーリーであり、360°ビデオであり、バンドと石を入れ替えられるコンフィギュレータであり、手の写真付きのリングサイジングガイドであり、理想的にはそれら全てが1つのURLに存在し、ページがJavaScriptの重さで崩壊しない。ShopifyのメタフィールドシステムはTheme 2.0アーキテクチャとOnline Store 2.0で大幅に改善されたが、それでも本当に複雑なプロダクトテンプレートを構築する際には不自然に曲がってしまう。
第三に、リッチネスにおけるパフォーマンスだ。ジュエリーサイトは画像が豊富だ。動画も豊富だ。高解像度ズームもある。体験の半分をはぎ取らずにShopifyのメディアリッチなテーマでLighthouseスコア70以上を取得することは、本当に大変な作業だ。自分もやったことがあるが、英雄的な画像最適化作業と多くの妥協が必要になる。
0.8%の転換率の問題は通常、信頼の問題です
時間をかけて気づいたことがある。高額商品では、ウェブサイトの品質の認知がブランドへの信頼のプロキシになるということだ。読み込みが少し遅く感じられるサイトから売られている4,800ポンドのエンゲージリング、プロダクト画像が少し圧縮されているように感じられるサイト、チェックアウトの流れがストアの視覚的言語を破ってしまうサイト、そうしたサイトはひっそりとコンバージョンを破壊している。
人々はこれを明確には言いません。ただ去るだけです。
---
この文脈での「ヘッドレス」が本当に意味すること
手短に説明すると、ヘッドレスコマースとはフロントエンド（顧客が目にして操作する部分）をバックエンド コマース エンジン（カート、チェックアウト、在庫、注文）から分離することです。Shopify の Storefront API を使えば、Shopify をバックエンドだけとして使いながら、好きなフレームワークでフロントエンドを構築できます。
最も一般的で、実際に構築してきたスタックはこれだ。フロントエンドはNext.js、コマースバックエンドはShopify、編集コンテンツとストーリーテリングコンテンツを管理するヘッドレスCMSはたいていSanityかContentful。上に専用の検索層としてAlgoliaを乗せることもある。
それがアーキテクチャだ。エレガントに聞こえる。そして実際エレガントにもなるが、コストの含意をはっきり述べる必要がある。
---
実際のコスト内訳
ヘッドレスについて目をきらめかせる人がいても、請求書を見ると顔が曇ります。だから実際にこれがどのくらいコストがかかるのか、正直に話しましょう。
高級ジュエリーブランド向けの適切に構築されたヘッドレスShopifyストアフロント、カスタムNext.jsフロントエンド、Sanity CMS、Algolia検索、設定されたプロダクトコンフィギュレータ、適切なアニメーション作業は、初期構築で4万ポンドから12万ポンドの間になるだろう。それは幅広い範囲だが、コンフィギュレータの複雑性とアニメーションスコープに大きく依存する。
進行中は、より複雑なホスティングとインフラストラクチャの設定が必要だ。Next.jsホスティングの明らかな選択肢はVercelであり、彼らのエッジネットワークはパフォーマンス面をうまく処理するが、それに対して料金を払うことになる。意味のあるSanityプラン、Algoliaのコスト、Shopifyマーチャントがテーマエディタで自分でやるようなコンテンツモデル変更の開発者時間。総所有コストは本当に高くなる。
そしてここが、ヘッドレス化に興奮してクライアントが私に来たときに毎回言うことだ：運用オーバーヘッドは現実だ。マーケティングチームは、もはやシンプルにShopifyアプリをインストールしてレビューウィジェットやロイヤルティプログラムを追加することができない。すべての統合に開発者の関与が必要になる。これは問題ではないが、組織がどのように運営されるかの根本的な変化だ。
コストが価値をもつ場合
数字が機能し始めるのは、以下の場合です：
- 平均注文額が£1,500を超えている場合、わずか0.5%のコンバージョン率改善でも有意義な収益が生まれるため、投資する価値があります。
- 編集コンテンツ（ブランドストーリー、原産地の特集、デザイナープロフィール）があり、製品と並行して存在する必要があり、非技術的なチームで管理する必要がある
- 大規模な有料メディアを運用しており、ランディングページの体験が明らかに劣っている場合、ヘッドレスであれば、キャンペーン固有の体験を迅速に構築する柔軟性が得られます。
- 製品コンフィギュレータの要件（リングビルダー、刻印、ストーン選択）がある。これはShopifyのネイティブアーキテクチャ内では実現不可能で、メンテナンスの悪夢になるだけである
---
私が実際に推奨するスタック
これらのプロジェクトをいくつか構築・引き継いだ後、私が選ぶのはこれです：
- Next.js 14（App Router）のReact Server Componentsモデルは、ここではパフォーマンス面で本当に有用です。ページレンダリングをブロックすることなく、製品データをストリーミングできます。
- Shopify Storefront API（Admin APIではなく）。Storefront APIは、ヘッドレスフロントエンドが顧客向けデータにアクセスするために使うべきものです。
- Sanity v3。GROQ クエリ言語は学習曲線を越えると本当に使いやすく、コンテンツレイクモデルは、ウェブ、アプリ、メールにわたって編集コンテンツを再利用したいブランドに適しています。
- Algolia。特に大規模なカタログを持つブランドで、金属タイプ、宝石の種類、価格帯、コレクションでファセット検索を瞬時に実行する必要がある場合に有用です。
- Framer Motion。アニメーション層に使います。Next.jsにクリーンに統合でき、スクロール連動型や物理ベースのアニメーションが提供でき、ラグジュアリーサイトに活気をもたらします。
- Vercel。ホスティング、CI/CD、プレビューデプロイメントでコンテンツチームが本番前にレビューできます。
推奨を止めたもの
Gatsby。今でも支持している人もいますが、2020 年から 2021 年にかけて Gatsby でヘッドレスジュエリーストアを 2 つ構築しましたが、ビルド時間は非常に長く、エコシステムは明らかに勢いを失っています。Next.js App Router は Gatsby をこのユースケースではほぼ不要にしました。
フルカスタムバックエンドの推奨もやめました。Shopify Storefront APIと、Shopify ネイティブチェックアウト（ヘッドレス構築でも置き換えない、Shopify チェックアウトをそのまま使う）の組み合わせで、PCI準拠、決済方法、Shop Pay、そしてコンバージョンするチェックアウトが得られます。それを再構築することはありません。絶対に。
---
The Configurator Problem、そして正直な答え
ここがほとんどのファインジュエリーヘッドレスプロジェクトが素晴らしく成功するか、高額な失敗に終わるかの分岐点です。
リング・コンフィギュレーターは、顧客が設定スタイル、金属、石の形状、カラット重量を選択して、レンダリングまたは撮影された結果を確認するものですが、きちんとやろうとすれば膨大な作業になります。Shopify内でバリアントとメタフィールドを使ってこれを構築しようとしているブランドを見かけたことがあります。シンプルな場合（2～3つの選択肢）ならうまくいきます。数十の組み合わせを持つ本当のコンフィギュレーターの場合はどうでしょう？バリアント制限（Shopifyでは製品あたり100個）がすぐに大きな壁になってしまいます。
Seahawkは2023年のMayfair宝飾商のプロジェクトで、爪座スタイル18種 × 金属4種 × 石の形状7種 × カラット帯5種が必要なコンフィギュレーターを担当しました。これは2,500以上の組み合わせです。それぞれに独自の価格ロジックがあります。Shopifyのネイティブバリエーションシステムはそれに対応していません。私たちはコンフィギュレーターロジックをNext.jsレイヤーに構築し、設定状態をURLとカート属性に保存し、カスタムShopifyラインアイテムプロパティ構造を使って、選択された設定を納品まで渡しました。美しく機能しました。しかし3人の開発者で6週間かかりました。
それが正直な答えです。可能です。ただし迅速ではありません。
---
ヘッドレスが解決しないもの
ヘッドレスに関するエージェンシー業界の議論で見かける、それが転換率の問題への銀の弾丸だという考え方に対して異論を唱えたいのです。
そうではありません。
製品写真の品質が平均的であれば、ヘッドレスアーキテクチャはあなたを救いません。リング・サイジング・ガイドが分かりにくい、または返品ポリシーが隠されている場合、あなたのコンバージョン率は、映画のようなスクロールアニメーションがどれほど素晴らしくても、悪いままです。CMSに入力するための実質的な編集コンテンツがないため、ページが半空きで奇妙にスパースな、美しく構築されたヘッドレスストアのアンダーパフォーマンスを見てきました。
ヘッドレスは、既にそこにあるものを増幅します。ブランドが強く、コンテンツが豊かで、写真が優れている場合、ヘッドレスは本物の創造的自由でそのすべてを表現するキャンバスを提供します。これらが欠けている場合、ヘッドレスはあなたの問題が技術的なものではなかったことを発見するための高額な方法です。
---
FAQ
ヘッドレスコマースは大手ブランドで予算が潤沢な企業だけのもの？
ほぼそうですね。少なくともファインジュエリーではそうです。構築コストと継続的なオーバーヘッドを考えると、年間のオンライン売上が50万ポンド以下のブランドにとっては売りづらい話です。そのしきい値以下では、ヘッドレスのことを考える前に、まずはより良い写真撮影、転換率最適化監査、そしてDawnやPrestigeのような非常によく設定されたShopifyテーマにお金をかけます。ROIがまだそこまで出ていないんです。
ヘッドレスフロントエンドでShopifyのネイティブチェックアウトを使用できる？
そうですね。そうすべきです。Shopifyのチェックアウト拡張機能は大幅に改善されました。チェックアウト外観をカスタマイズしたり、チェックアウトを置き換えることなくUI拡張機能を追加したりできます。Shopifyチェックアウトをカスタム構築されたものに置き換えることは、18か月以内に新しい決済方法をサポートする必要が出たり、新しい不正ルールに準拠する必要が出たりしたときに後悔する決定になります。
ヘッドレス構築には実際どのくらいの期間がかかるのか？
プロダクトコンフィグレータを備えたファインジュエリーブランド、編集コンテンツの要件、そして意味のあるカタログを想定すれば、ディスカバリーからローンチまで現実的には16～24週間だ。8週間と言う人間は、スコープを過激に削減しているか、不完成なものを渡すつもりか、その両方だ。両方のケースを見てきた。
よく最適化されたShopifyテーマと比べてパフォーマンスの差は？
正直なところ、人々が予想するより少ないです。Shopifyのサーバーサイドレンダリングを使った最適化されたShopifyテーマと圧縮メディアは、Lighthouseスコアで80点台中盤を達成できます。最適化の悪いヘッドレスサイトは50点台になることもあります。ヘッドレスのパフォーマンス上の利点は実在していますが、自動的なものではなく、規律ある実装が必要です。より大きな利点は、素の読み込み速度ではなく、インタラクション品質とアニメーション忠実度です。
既存のShopifyストアを移行するか、ゼロから構築し直すべきか？
再構築する。既存のShopifyストアをヘッドレスアーキテクチャに移行しようと2回試みましたが、どちらの場合も既存ストアの技術債が新しいプロジェクトに悪影響を与えました。ゼロから始めてください。データ（商品、顧客、注文履歴）を移行し、古いテーマは完全に置き去りにしましょう。
---
ちなみにHatton Gardenのクライアントは、Next.js / Shopify / Sanityスタックで再構築しました。19週間かかりました。婚約指輪のコンバージョン率は、ローンチから90日以内に0.8%から2.1%に上昇しました。また、彼女は、ホームページのバナーを変更するのに開発者が必要になったため、マーケティングチームが不満を持っていたと話してくれました。この2つのことは同時に真実です。
ヘッドレスコマースというのはそういうものです。本当に強力です。本当に要求が厳しいです。価値がありますが、ブランドがそれが求めるものに対して準備ができているときだけです。
関連記事：2026年のヘッドレスとWordPressのセキュリティ：Next.jsとAstroを選ぶ理由、AstroとWordPressからNext.jsへの移行