目次

1. はじめに：なぜ今「ヘッドレス×EC」なのか
2. 背景：Shopifyのバックオフィス機能だけを使いたいという要望
3. Checkout APIの廃止・・・・
4. Shopifyの方針：Checkout Extensibilityへの一本化とセキュリティ強化
5. 解決策：Cart API（Storefront API） + Web リダイレクト
6. 成果：CV率の向上と、導線分岐による柔軟なABテスト
7. まとめ：Shopifyを“基盤”として活用する、ひとつのヘッドレスコマースの形

1. はじめに：なぜ今「ヘッドレス×EC」なのか

ECの現場でよく聞く要望のひとつが「自社CMS（コンテンツ管理システム）の商品紹介ページで商品を販売したい！」というものです。 ブランドストーリーを丁寧に伝えるコンテンツにこだわっているため、そこで販売もしたい。しかし、従来のShopifyのテーマ（＝お客様が直接閲覧・操作する画面のテンプレート）にすべてを寄せるために最初から作り直すと時間や資金がかかってしまいます。EC事業者様の中には、WordPressや独自開発のCMSなど“使い慣れたコンテンツ基盤”を手放したくないという声は根強いものです。

そんな事業者様の要望に応えるべく、今回は「自社CMSの商品詳細ページから、そのままShopifyのチェックアウト画面に遷移し、購入完了までスムーズに導くミニ導線（購入ボタン）」を実現する手順やその取り組みを紹介します。

本記事では、EC事業者様のビジネス背景、ShopifyのAPI構造の変遷、新チェックアウト機能「Checkout Extensibility」の位置づけ、そして実装のベストプラクティスまでを包括的に解説していきます。

2. 背景：Shopifyのバックオフィス機能だけを使いたいという要望

実際の現場では次のような声が上がっています：

「Shopifyのテーマには頼りたくない。商品紹介ページもカートページもCMS側で作る。チェックアウトもCMS側で完結できたらベスト。商品管理や注文管理などバックオフィス機能はShopifyを使いたい。」

これは「ヘッドレスコマース」と呼ばれる仕組みの一つです。Shopifyは商品や在庫の管理、注文の処理などの裏方作業を担当します。一方、お客様が実際に見るウェブサイトの画面（フロントエンド）は、すべて自社のCMSで作られています。つまり、見た目と裏方のシステムを分けて、それぞれ専用のツールで管理しているという構成です。

この構成にはいくつかの利点があります：

• CMSを使い続けられることでブランド表現の自由度が高まる
• SEOやコンテンツマーケティングとの親和性が高い
• マルチチャネル展開が容易
• 使い慣れたCMSでコンテンツの管理が可能

大企業やグローバル企業では、たくさんの商品やブランドを持っているのが普通です。こうした組織では、それらすべてを一つのCMSでまとめて管理し、その上でカート機能や購入機能まで使えるのが理想的です。

「それなら、わざわざShopifyを使う必要があるの？」と思うかもしれません。でも、Shopifyは世界中のECプラットフォーム市場で大きなシェアを持っていて、日本でも急速に広まっています。そんな影響力のあるShopifyを一度使ってみたいと考える事業者様が多いのも事実です。実際、こういったご相談はたくさん寄せられています。

でも、いざ実際に「自社CMS＋Shopify」の仕組みを作ろうとすると、いろいろな課題にぶつかることがよくあります。そして、その最初のハードルが

3. Checkout APIの廃止・・・・

かつてはShopifyの「Checkout API（Storefront API）」を使えば、商品をカートに入れた状態でチェックアウトURLを生成し、自社CMSなどの外部環境からAPIを叩いて直接決済することができました。
しかし、このAPIはすでにサポート外（not supported）となり、現在は使用できません。

代わりに推奨されているのが「Cart API」です。今回は「Cart API」を用いて実現しました。

Checkout API廃止の背景となっているのが2024年8月に新しい決済機能となる「Checkout Extensibility」への移行が実施されたことです。

4. Shopifyの方針：Checkout Extensibilityへの一本化とセキュリティ強化

Shopifyは2024年8月以降、チェックアウト体験のカスタマイズ方法を従来のテーマテンプレート上で操作管理することができた「checkout.liquid」から「Checkout Extensibility」へ完全移行させる方針を明言しました。

この新しい方式では、セキュリティが強化され、個人情報や購入処理の操作はShopifyが提供する範囲内でのみ許可されるようになりました。これはPCI DSSや個人情報保護への対応といった観点から非常に重要な改善です。

そのため、外部の自社CMSなどから直接決済を行うことはできなくなり、配送先住所などのカート情報を入力後、最後は必ずShopifyのチェックアウト画面に遷移し決済を実施することが必須となりました。

5. 解決策：Cart API（Storefront API） + Web リダイレクト

今回採用したのは、以下の構成です：

1. 自社CMSで商品ページを自由に構成
2. 購入ボタンを押すと、Cart APIで商品をカートに追加
3. その後、返却されたcheckoutUrlに移動できるように購入ボタンをセット

実際のイメージは下図の通り

　　　　　　　　　　　　　　　　　↓↓↓↓

これにより、商品紹介〜カート作成〜商品投入〜チェックアウト遷移までをスムーズに、しかもShopifyテーマを一切使わずに自社CMS側で実現できます。既にShopifyには「Buy Button」という機能が備わっていますがそれと似たような機能だと思っていただけると。

6. 成果：CV率の向上と、導線分岐による柔軟なABテスト

今回の導入により、商品コンテンツに共感した瞬間に「今すぐ購入」へ誘導でき、チェックアウト完了までの障壁が大きく減りました。

7. まとめ：Shopifyを“基盤”として活用する、ひとつのヘッドレスコマースの形

Shopify上では用意されたテンプレートだけでしかサイトを作れないものではありません。ShopifyのAPIを利用することで、コンテンツ重視のECサイトも手軽に実現できるようになっています。

自社CMSの強みを最大限に活かしつつ、Shopifyの持つ商品管理や在庫管理、注文管理などのバックオフィス機能ともスムーズに連携できる、柔軟なヘッドレスコマースの構成も可能です。

次回はCMS側でカートの配送先住所情報の入力を実現させる方法の記事も書いてみたいと考えております。もし良かったらその際も読んで頂けると嬉しいです。

Shopifyをもっと便利に使いたい方は、ぜひこの方法を試してみてください！読者様のお役に立ちますように！

今回は小難しいプログラミングコードの記述は割愛しています！どうやって作っているのか気になる方はお問い合わせください！