2022年末、あるクライアントから連絡があった — ロンドンのHatton Gardenを拠点とする高級ジュエリーブランドで、年間約240万ポンドをオンライン売上として、ほぼ完全にShopifyで運営していた。数字は良好だった。だが彼女は怒っていた。カタログ内で最高マージン率を誇るエンゲージメントリングのコンバージョン率が0.8%で頭打ちになっていた一方、彼女のスタジオ対面での成約率は約34%だった。ギャップは商品ではなかった。商品は素晴らしかった。ギャップは体験だった — そしてShopifyは、その強みの数々にもかかわらず、どこか高級感を加えたEtsyショップのように見え、感じられるウェブサイトを提供していた。experience— and Shopify, for all its strengths, was giving her a website that looked and felt like a slightly upmarket Etsy shop.
あの会話がきっかけで、高級商品カテゴリー向けのヘッドレスコマースを本格的に考え始めた。エージェンシーのブログが好む抽象的な「小売の未来」という意味ではなく。具体的で、泥臭くて、高額で、時には価値があるという意味で。
ここに、高級ジュエリーと高額アクセサリーブランド向けのヘッドレスプロジェクトの構築・アドバイスから学んだことを紹介する。
---
なぜShopifyが特に限界に達するのか
まず明確にしておきたいことがあります。Shopifyは素晴らしいプラットフォームです。私はSeahawk Media全体で1000を超えるShopifyストアを構築してきました。ほとんどのブランドにとって、これは正解です。高速で信頼性が高く、エコシステムは成熟していて、有能な開発者なら3～4週間で美しいストアフロントを立ち上げられます。
しかし高級ジュエリーはほとんどのブランドではありません。
問題は大きく3つの領域に集約されます。第一に、アニメーションとインタラクションの忠実性です。ShopifyのテンプレートエンジンであるLiquidはサーバーレンダリングシステムです。もちろんJavaScriptを追加することはできますが、高級ジュエリーブランドが求めるような流動的でシネマティックなスクロール体験(Van Cleef、Graff、あるいはよく資金が入った独立系ブランドのウェブサイトを想像してください)を実現するには、テーマアーキテクチャと常に戦う必要があります。その結果、パッチの上にパッチを重ねることになります。animation and interaction fidelity. Liquid, Shopify's templating language, is a server-rendered system. You can bolt on JavaScript, obviously — but creating the kind of fluid, cinematic scroll experiences that luxury jewellers want (think Van Cleef's website, or Graff's, or even a well-funded independent brand) requires fighting the theme architecture at every turn. You end up with patches on patches.
第二に、プロダクトストーリーテリングの深さです。婚約指輪はSKUではありません。4C分解説明、出所の物語、360°動画、バンドと石を交換できるコンフィギュレーター、ハンド写真付きのサイズ合わせガイド――そしてこれらすべてが1つのURLに配置され、ページがJavaScriptの重さで崩壊しない状態が理想です。ShopifyのメタフィールドシステムはOnline Store 2.0の到来により大幅に改善されていますが、本当に複雑なプロダクトテンプレートを構築するときはまだぎこちなく曲がります。product storytelling depth. An engagement ring isn't a SKU. It's a 4C breakdown, a provenance story, a 360° video, a configurator that lets you swap bands and stones, a ring-sizing guide with hand photos — and ideally all of that lives on one URL without the page collapsing under its own JavaScript weight. Shopify's metafield system has improved significantly with the 2.0 theme architecture andOnline Store 2.0, but it still bends awkwardly when you're building genuinely complex product templates.
第三に、リッチさ(豊かさ)における性能です。ジュエリーサイトは画像が多いです。動画も多いです。高解像度ズーム機能があります。体験の半分を取り除くことなく、メディアの豊富なShopifyテーマでLighthouseスコア70以上を取得することは本当に大変です。私はやったことがありますが、それには英雄的な画像最適化作業と多くの妥協が必要です。performance at richness. Jewelry sites are image-heavy. They're video-heavy. They have high-resolution zoom. Getting a Lighthouse score above 70 on a media-rich Shopify theme without stripping out half the experience is genuinely hard work. I've done it — but it requires heroic image optimisation work and a lot of compromises.
0.8%の転換率の問題は通常、信頼の問題です
私が時間をかけて気づいたことはこうです。高額購入では、ウェブサイトの認識品質はブランドへの信頼のプロキシです。読み込みが少し遅く感じられるサイト、プロダクト画像が少し圧縮されているように感じられるサイト、チェックアウトの流れがストアのビジュアル言語を壊しているサイトから売られた4,800ポンドの婚約指輪――そのサイトは静かに転換率を破壊しています。perceived quality of the website is a proxy for trust in the brand. A £4,800 engagement ring sold from a site that feels like it loads a bit slowly, where the product images feel slightly compressed, where the checkout journey breaks the visual language of the store — that site is quietly destroying conversions.
人々はこれを明確には言いません。ただ去るだけです。
---
この文脈での「ヘッドレス」が本当に意味すること
手短に説明すると、ヘッドレスコマースとはフロントエンド（顧客が目にして操作する部分）をバックエンド コマース エンジン（カート、チェックアウト、在庫、注文）から分離することです。Shopify の Storefront API を使えば、Shopify をバックエンドだけとして使いながら、好きなフレームワークでフロントエンドを構築できます。
私が最も頻繁に推奨し、構築してきたスタック：フロントエンドは Next.js、コマースバックエンドは Shopify、編集とストーリーテリングコンテンツを管理するヘッドレス CMS（通常は Sanity か Contentful）。その上に Algolia のような専用検索レイヤーを乗せることもあります。Next.json the front end, Shopify as the commerce back-end, and a headless CMS — usuallySanityor Contentful — managing the editorial and storytelling content. Sometimes a dedicated search layer like Algolia on top.
これがアーキテクチャです。エレガントに聞こえます。そしてそうなり得ます。ただしコストの側面をはっきり述べておく必要があります。
---
実際のコスト内訳
ヘッドレスについて目をきらめかせる人がいても、請求書を見ると顔が曇ります。だから実際にこれがどのくらいコストがかかるのか、正直に話しましょう。
きちんと構築されたヘッドレス Shopify ストアフロント（カスタム Next.js フロントエンド、Sanity CMS、Algolia 検索、設定済みプロダクト コンフィグレーター、適切なアニメーション作業）は、初期構築で £40,000 から £120,000 程度かかります。幅は広いですが、コンフィグレーターの複雑性とアニメーション範囲に大きく依存します。£40,000 and £120,000for the initial build. That's a wide range, and it depends heavily on the configurator complexity and the animation scope.
継続的には、さらに複雑なホスティングとインフラストラクチャ セットアップが必要になります。Next.js ホスティングなら Vercel が明らかな選択肢です。彼らの Edge Network はパフォーマンス面をよく処理していますが、当然それは費用がかかります。Sanity のまともなプラン、Algolia のコスト、コンテンツ モデルの変更に必要な開発者時間（Shopify の商人ならテーマ エディターで自分でやるレベルのこと）。総保有コストは本当に高くなります。Edge Networkhandles the performance side well — but you're paying for it. A meaningful Sanity plan, Algolia costs, developer time for content model changes that a Shopify merchant would do in the theme editor themselves. The total-cost-of-ownership is genuinely higher.
そしてこれが、ヘッドレス化に興奮して来るすべてのクライアントに私が言うこと：運用のオーバーヘッドは実在します。マーケティング チームはもう Shopify アプリをインストールしてレビュー ウィジェットやロイヤルティ プログラムを追加することができません。すべての統合に今は開発者の関与が必要です。それは決定的な障害ではありませんが、組織がどう運営されるかの根本的な変化です。the operational overhead is real. Your marketing team can no longer just install a Shopify app to add a review widget or a loyalty programme. Every integration now requires developer involvement. That's not a dealbreaker, but it's a fundamental change in how your organisation operates.
コストが価値をもつ場合
数字が機能し始めるのは、以下の場合です：
- 平均注文額が£1,500以上である — 0.5%のコンバージョン率改善でも意味のある収益が生まれるため
- 編集コンテンツ（ブランドストーリー、原産地の特集、デザイナープロフィール）があり、製品と並行して存在する必要があり、非技術的なチームで管理する必要がある
- 有意なペイドメディアを実施しており、ランディングページの体験が明らかに劣っている — ヘッドレスにより、キャンペーン固有の体験を迅速に構築する柔軟性が得られる
- 製品コンフィギュレータの要件（リングビルダー、刻印、ストーン選択）がある。これはShopifyのネイティブアーキテクチャ内では実現不可能で、メンテナンスの悪夢になるだけである
---
私が実際に推奨するスタック
これらのプロジェクトをいくつか構築・引き継いだ後、私が選ぶのはこれです：
- Next.js 14（App Router） — React Server Componentsモデルはここでのパフォーマンスに本当に役立ちます。ページレンダリングをブロックすることなく製品データをストリーミングできます— the React Server Components model is genuinely useful for performance here; you can stream product data without blocking page render
- Shopify Storefront API — Admin APIではなく、Storefront APIはヘッドレスフロントエンドが顧客向けデータにアクセスする際に使用すべきものです— not the Admin API; the Storefront API is what headless front-ends should be hitting for customer-facing data
- Sanity v3 — GROQ クエリ言語は学習曲線を超えれば本当に優れていて、コンテンツレイクモデルはウェブ、アプリ、メール全体で編集コンテンツを再利用したいブランドに適しています。— the GROQ query language is a joy once you're past the learning curve, and the content lake model suits brands that want to reuse editorial content across web, app, and email
- Algolia — 特に大規模なカタログを扱うブランド向けで、金属の種類、宝石、価格帯、コレクション別のファセット検索が瞬時に必要な場合に非常に便利です。— especially useful for brands with large catalogues where faceted filtering by metal type, gemstone, price band, and collection needs to be instantaneous
- Framer Motion — アニメーションレイヤー用。Next.js にきれいに統合でき、スクロール連動型の物理ベースアニメーションを提供して、ラグジュアリーサイトを生き生きとさせます。— for the animation layer; it integrates cleanly into Next.js and gives you the scroll-triggered, physics-based animations that make a luxury site feel alive
- Vercel — ホスティング、CI/CD、コンテンツチームがライブ公開前にレビューするためのプレビューデプロイメント。— hosting, CI/CD, preview deployments for the content team to review before pushing live
推奨を止めたもの
Gatsby。今でも支持している人もいますが、2020 年から 2021 年にかけて Gatsby でヘッドレスジュエリーストアを 2 つ構築しましたが、ビルド時間は非常に長く、エコシステムは明らかに勢いを失っています。Next.js App Router は Gatsby をこのユースケースではほぼ不要にしました。
また、フルカスタムバックエンドの推奨も止めました。Shopify Storefront API と Shopify のネイティブチェックアウト（ヘッドレス設定では置き換えません — Shopify チェックアウトをそのまま使用します）を組み合わせれば、PCI コンプライアンス、支払い方法、Shop Pay、そしてコンバージョンするチェックアウトが手に入ります。これを再構築してはいけません。絶対に。
---
コンフィギュレータの問題 — そして正直な答え
ここがほとんどのファインジュエリーヘッドレスプロジェクトが素晴らしく成功するか、高額な失敗に終わるかの分岐点です。
リング・コンフィギュレーター（顧客が爪座スタイル、金属、石の形状、カラット、そしてレンダリングされた、または撮影された結果を選択できる機能）は、きちんと実装しようとすれば、膨大な作業量になります。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ヶ月以内に新しい決済方法に対応する必要が生じたり、新しい不正ルールに準拠する必要が生じたりした際に後悔する決断だ。Checkout Extensibilityhas improved significantly — you can customise the checkout appearance and add UI extensions without replacing it. Replacing Shopify checkout with a custom-built one is a decision you will regret within eighteen months when you need to support a new payment method or comply with a new fraud rule.
ヘッドレス構築には実際どのくらいの期間がかかるのか？
プロダクトコンフィグレータを備えたファインジュエリーブランド、編集コンテンツの要件、そして意味のあるカタログを想定すれば、ディスカバリーからローンチまで現実的には16～24週間だ。8週間と言う人間は、スコープを過激に削減しているか、不完成なものを渡すつもりか、その両方だ。両方のケースを見てきた。
よく最適化されたShopifyテーマと比べてパフォーマンスの差は？
正直なところ、人が期待するほどではない。Shopifyのクローンドライバーと圧縮メディアを使用して適切に最適化されたShopifyテーマは、Lighthouseスコアで80年代半ばに達することができる。最適化の不十分なヘッドレスサイトは50年代のスコアになる可能性がある。ヘッドレスのパフォーマンス上のメリットは実在するが、自動的ではない。規律のある実装が必要だ。より大きなメリットは、生の読み込み速度ではなく、インタラクション品質とアニメーションの忠実度だ。Shopify's CDNand compressed media can hit Lighthouse scores in the mid-80s. A poorly optimised headless site can score in the 50s. The performance advantage of headless is real but it's not automatic — it requires disciplined implementation. The bigger advantage is interaction quality and animation fidelity, not raw load speed.
既存のShopifyストアを移行するか、ゼロから構築し直すべきか？
再構築する。既存のShopifyストアをヘッドレスアーキテクチャに移行しようと2回試みましたが、どちらの場合も既存ストアの技術債が新しいプロジェクトに悪影響を与えました。ゼロから始めてください。データ（商品、顧客、注文履歴）を移行し、古いテーマは完全に置き去りにしましょう。
---
ちなみにHatton Gardenのクライアントは、Next.js / Shopify / Sanityスタックで再構築しました。19週間かかりました。婚約指輪のコンバージョン率は、ローンチから90日以内に0.8%から2.1%に上昇しました。また、彼女は、ホームページのバナーを変更するのに開発者が必要になったため、マーケティングチームが不満を持っていたと話してくれました。この2つのことは同時に真実です。
これがヘッドレスコマースというものです。本当に強力です。本当に要求が高いです。価値があります。ただし、ブランドがそれと引き換えに求められることに対して準備が整っているときだけです。