目次
- ヘッドレスコマースとは何ですか?
- ヘッドレスコマースの仕組みとそのメリット
- ヘッドレスコマース: よくある質問
- ヘッドレスコマースのユースケース
- 電子商取引ビジネスに最適なヘッドレスソリューション
- ヘッドレスコマースのケーススタディと成功事例
I. ヘッドレスコマースとは何ですか?
Salesforce によると、ヘッドレス コマースとは、e コマース アプリケーションのフロントエンドとバックエンドを分離することです。基本的に、開発者は選択したフロントエンド テクノロジを使用して e コマース Web サイトの外観と操作性をカスタマイズし、その後バックエンドに e コマース ソリューションをプラグインして、必要なすべてのコマース機能を管理できます。このアーキテクチャにより、ブランドは表現の自由を得て、何でも好きなように構築できます。最も重要なのは、ブランドが顧客体験を充実させることができることです。
上記のヘッドレス コマースの定義は、ヘッドレス コマースの最も教科書的な定義ですが、もっと簡単に説明しましょう。
電子商取引のウェブサイトには、顧客が目にし、操作するすべての部分であるフロントエンド (HEAD) と、ウェブサイトの管理に役立つインフラストラクチャまたはシステムであるバックエンドの 2 つの部分があります。
例を見てみましょう。これは Shopify で稼働している電子商取引 Web サイトです。Web サイトに入ると、そのヘッド、つまりフロント エンドが表示されます。
これはバックエンドです。ここでは、この e コマース Web サイトを管理するためのさまざまな機能にアクセスできます。
システムやソリューションが「ヘッドレス」であると話すとき、実際にはバックエンドについて話しています。フロントエンドとバックエンドは分離されており、API またはアプリケーション プログラミング インターフェイスを介して非常に特殊な方法で相互に通信するためです。これについては後ほど詳しく説明します。
Wix、Shopify、Wordpress などの e コマース プラットフォームはすべて、フロントエンドとバックエンドの両方を単一のシステムで管理するソリューションを提供しており、すべてをより簡単に実行できます。
では、1 つのシステムですべてを実行できるというのは利点のように思えるのですが、なぜヘッドレス コマースが界隈で最も話題になるテクノロジーなのでしょうか?
II. ヘッドレスコマースの仕組みとその利点
市場にはすでに、ヘッドレスコマースが注目すべき最も重要なトレンドの 1 つであることを示す兆候が数多くあります。e コマースのツールとインフラストラクチャを提供する Bold Commerce と Nacelle は、最近、ヘッドレスコマースの構築と開発のために Capital Ventures からそれぞれ 2,700 万ドルと 1,800 万ドルを調達しました。
この話題を理解するには、ヘッドレスコマースの仕組みを理解する必要があります。
まず、プレゼンテーション層があります。これには、魅力的なデザインとユーザーとのインタラクティブ性を備えた高速読み込みのウェブサイト、モバイル アプリケーション、キオスク アプリケーションが含まれます。これは、ニーズとビジネス目標に応じて、CX 層 (カスタマー エクスペリエンス層) とも呼ばれます。
次に、請求、フルフィルメント、レポートと分析、コンテンツ管理システム (CMS) などのビジネス システムを管理するバックエンド レイヤーがあります。
これら 2 つのレイヤーの間には、2 つのレイヤー間で情報を渡す運河のような役割を果たす API (Application Programming Interface の略) が挟まれています。
では、API とは何でしょうか?
Magento によれば、API は、他のシステムが実際にどのように動作するかを知らなくても、あらゆるソフトウェア システムが別のソフトウェア システムと通信するために使用できる、共有の公開辞書として機能します。簡単に言えば、システムとテクノロジー ソリューションの翻訳者のようなものです。
たとえば、商品詳細ページに情報を正しく入力するには、eコマースのフロントエンドは、バックエンドにどのAPIを呼び出して「商品」に関連するすべての情報を取得するかを知るだけで済みます。フロントエンドがAPIを介してバックエンドと通信することに同意している限り、バックエンド内で何が起こっているかを知る必要はありません。それがどんなに複雑であってもです。実際、フロントエンドはバックエンドから完全に分離されているため、新しいシステムが同じAPIを提供している限り、フロントエンドの機能を壊すことなく、バックエンドシステム全体を変更したり、置き換えたりすることができます。このロックインがないことは、ヘッドレスアーキテクチャの大きな利点の1つです。（マイケル・ハーベイ、最高戦略責任者、Corra、2020年）
Wemakewebsiteのこの図では、バックオフィス レイヤーという別のレイヤーが確認できます。このレイヤーの主なコンポーネントは、在庫、財務データ、顧客購入などを管理する ERP (エンタープライズ リソース プランニング) です。ERP はほとんどの大企業や法人で一般的ですが、中小企業や地元企業の場合、Shopify のような e コマース プラットフォームはこれらのほとんどをカバーし、軽量のバックオフィスとして機能します。
これは非常に基本的な、5 つのことを簡単に説明するタイプの説明です。ヘッドレス e コマースの仕組みと API の仕組みに関する詳細なガイドについては、このガイドをご覧ください。
ヘッドレス コマースの概念を分かりやすく説明しましたが、具体的になぜヘッドレス コマースに注目する必要があるのでしょうか? ヘッドレス コマースは、従来のコマースと対比するとわかりやすいでしょう。
01. 柔軟性とカスタマイズ性の向上
昔、ほとんどの人が従来のコマース ソリューションを使用していた頃は、フロントエンドとバックエンドは密接に結びついていたため、フロントエンドで行われた変更はバックエンドの開発作業に波及効果をもたらし、その逆も同様でした。したがって、変更やカスタマイズを行うには、開発者はフロントエンドとバックエンドの間の複数のレイヤーのコーディングに取り組む必要があり、膨大な時間と費用がかかります。
ヘッドレスコマースでは、フロントエンドとバックエンドのインフラストラクチャが完全に分離されます。フロントエンドの変更は、バックエンドの制限なしに柔軟かつ機敏に実行できるため、開発者は UI の変更にかかる時間を節約できます。
バックエンドから切り離すことで、カスタマイズの無限の可能性も広がります。開発者やストア所有者は、オンライン ビジネスの体系的な管理に最適な e コマース プラットフォームを自由に選択できると同時に、フロントエンドのカスタマイズのオプションも増えます。
02. 顧客体験の向上
世界的なパンデミックにより、顧客の生活におけるデジタル体験の役割と重要性が変化しました。今日の消費者は、チャネルやデバイスを問わず、使いやすく直感的なデジタル体験を期待しています。こうした期待に応えられるブランドは、最大の利益を上げています。
しかし、 Shopify Plus の「eコマースの未来」レポートによると、デジタルファーストの DTC ブランドと eコマースに不慣れな企業の間には大きな溝ができています。最大手企業のうち、顧客体験で競争できるのはわずか 38%です。eコマースに不慣れな企業のほとんどが、オンラインストアの外観 (ヘッド、つまりフロントエンド) が機能の限られたテンプレートまたはテーマによって制限される eコマース プラットフォームを使用しているという事実を考えれば、この数字は正当化されます。
ヘッドレス コマースを使用すると、フロントエンド エクスペリエンスを完全に制御し、所有権を持つことができます。E コマース マーチャントは、バックエンド インフラストラクチャにプラグインする方法を気にすることなく、より優れたユーザー エクスペリエンスを作成するために特別に設計されたさまざまなエクスペリエンス主導型またはコンテンツ主導型のソリューションを自由に試すことができます。この柔軟性により、より高速で、より美しく設計された E コマース Web サイトが実現します。
03. CAC の低減とコンバージョン率の向上
この利点は少々偏っているように聞こえるかもしれませんが、Facebook や Instagram などの広告プラットフォームの不安定さ、平均インプレッション単価とクリック単価が下がる兆しがないことを考えると、すべての卵を 1 つのバスケットに入れてオーガニック トラフィックに投資しない理由は十分にあります。
SEO とオーガニック トラフィックの関係に詳しくない場合、覚えておくべきことの 1 つは、Google がウェブマスターに、ページ エクスペリエンスがランキングに影響し、その結果、オーガニック トラフィックにも影響することを明示的に伝えていることです。したがって、ヘッドレス コマースによって有効になるコンテンツ主導またはエクスペリエンス主導の戦略を採用することで、ページ エクスペリエンスが向上し、コンバージョン率が向上し、顧客獲得コストが削減されます。
中小企業を経営している場合、ヘッドレス コマースの採用者は通常 (排他的ではありませんが) 大規模な開発チームを持ち、カスタム プログラミングを好む大企業であるため、すぐに急いでヘッドレス コマース ソリューションを探す必要はないかもしれません。
04. 市場浸透とトレンド採用のスピード。
ヘッドレスコマースを使用すると、オンラインビジネスは、拡張および成長戦略に合わせた新しいフロントエンドエクスペリエンスと変更を迅速に開始できます。
たとえば、eコマース ポリシーや顧客行動が異なる新しい市場にリーチを拡大する場合、Headless Commerce を使用すると、基盤となるインフラストラクチャにどのような影響が及ぶかを心配することなく、eコマース Web サイトをこの新しいターゲット ユーザー グループに合わせてすばやくカスタマイズできます。
あるいは、オムニチャネル マーケティング戦略を実装し、POS、モバイル アプリ、マーケットプレイス、音声検索など、ターゲット顧客がいる場所で対応したいとします。これは、コンテンツと最も基本的なコマース要素 (製品、コレクション、カタログ、購入ボタンなど) をすべてのデジタル タッチポイントにすばやく適応させて再利用し、顧客に合理化された一貫したエクスペリエンスを保証する必要があることを意味します。ここで、Shopify Plus や Magneto などのヘッドレス コマース プラットフォームや、Contentful などのヘッドレス CMS が、より高速で無駄のない展開に役立ちます。
では、良い点についてはお聞きになりましたが、悪い点や醜い点についてはどうでしょうか? それは、実装にかかるコストです。
ヘッドレスコマースは、eコマース事業者に優れた柔軟性とカスタマイズ機能を提供しますが、複雑さと開発作業の度合いが増し、継続的なコストが増加します。
ヘッドレス コマース システムを導入するということは、IT チームへの依存を減らすために、マーケティング チームがよりフルスタックになる必要があることも意味します。主な理由は、市場が WYSWYG (What You See What You Get) 環境でコンテンツを作成できなくなったこと、または別の部門に依存せずにコンテンツを作成して公開できなくなったことです。
したがって、トレーニング ワークショップ (マーケティング チーム向け) のコストやフルスタック マーケティング担当者の雇用コストも増加します。
III. ヘッドレスコマース: よくある質問
ヘッドレスコマースとヘッドレスアーキテクチャをさらに詳しく調べていくと、多くの新しい用語に遭遇するはずです。それらすべてを詳しく見ていきましょう。
01. デジタルエクスペリエンスプラットフォーム（DXP）
デジタル エクスペリエンス プラットフォーム (DXP) は、さまざまなデジタル エクスペリエンス タッチポイントを担当する複数の統合テクノロジを管理する中央制御ボードとして機能します。
ガートナーによれば、デジタル エクスペリエンス プラットフォーム (DXP) とは、 「さまざまなエクスペリエンスの顧客ジャーニー全体にわたって、コンテキスト化されたデジタル エクスペリエンスの構成、管理、配信、最適化を可能にするために設計された、統合されたまとまりのあるテクノロジ」です。
02. モノリシック構造
システムがモノリシックであると言う場合、それはヘッド (フロントエンド) がバックエンドと密接にリンクされていることを意味します。これが、ヘッドレス コマースが登場する前の e コマースの仕組みです。
モノリシック構造では、フロントエンドのカスタマイズによってバックエンドが壊れる可能性があり、その逆も同様です。フロントエンドに変更を加えると、バックエンドのカスタム機能が必要になるため、変更を展開するのは骨の折れる作業であり、顧客エクスペリエンスは不自然に断片化されます。
03. PCIコンプライアンス
PCI は Payment Card Industry の略です。ビジネス オーナーは、顧客を危険にさらさないように PCI 標準に準拠する必要があります。BigCommerce などのさまざまなヘッドレス コマース ソリューションは、PCI 準拠を実現するという利点があり、開発作業の負担を軽減するのに役立ちます。
PCI コンプライアンスの詳細については、 「PCI コンプライアンス: 詳細な説明」を参照してください。
04. PWA - プログレッシブウェブアプリ
プログレッシブ ウェブ アプリケーションは、HTML、CSS、JavaScript などの一般的なウェブ テクノロジーを使用して構築され、ウェブ経由で配信されるアプリケーション ソフトウェアの一種です。
基本的に、PWA は最新の API を使用して構築されており、機能、信頼性、インストール可能性を保証しながら、単一のコードベースで誰にでも、どこでも、どのデバイスでもアクセスでき、スムーズで動的なアプリのようなエクスペリエンスをユーザーに提供します。
IV. ヘッドレスコマースのユースケース
市場のトップクラスのヘッドレス ソリューションについて説明する前に、区別する必要があるさまざまな種類のヘッドレス ソリューションがあります。
01. ヘッドレスCMS
StoryBlokによると、ヘッドレス CMS は、ページ、ナビゲーション、ストア設定、ブログ投稿、API 権限などのコンテンツが定義される、バックエンドのみで構築されたコンテンツ管理システムです。コンテンツの追加、編集、削除もここで行われます。
コンテンツは、プレゼンテーション レイヤーまたは CX レイヤーの各タッチポイントに引き渡すことができます。たとえば、Web サイトの返品ポリシー ページでは、POS レシートや iOS アプリと同じコピーを共有できます。
02. ヘッドレスストアフロント
大手クラウドベース企業であるSalesforceによると、ヘッドレスコマースのストアフロントは、e コマース プラットフォームやその他のバックエンド アプリケーションから完全に分離された自己完結型の Web ストアフロントです。
ほとんどのヘッドレス ストアフロントは PWA (プログレッシブ ウェブ アプリ) を使用します。
プログレッシブ ウェブ アプリ (PWA) は、最新のウェブ テクノロジーを使用して、スムーズで動的なアプリのようなエクスペリエンスをユーザーに提供するウェブ アプリケーションです。PWA を使用したヘッドレス ソリューションにより、ブランドはバックエンドに変更を加えずに UX を向上させることができます。
03. ヘッドレスeコマースプラットフォーム
ヘッドレス e コマース プラットフォームは、基本的に、Shopify Plus や Magento のようなヘッドレス コマース ソリューションを提供する e コマース プラットフォームです。これらは、バックエンド インフラストラクチャをフロントエンド デザインから分離し、任意のフロントエンドまたは CMS ソリューションを使用してコンテンツを公開し、オンライン ストアのコマース エンジンまたは軽量バック オフィスとして機能できるようにします。
V. 電子商取引ビジネスに最適なヘッドレス電子商取引プラットフォーム
01. Shopifyプラス
Shopify Plus のヘッドレス コマースでは、すべてのタッチポイントでクリエイティブなコントロールを完全に実現し、一貫性のある顧客体験を実現します。ブランドと同じくらい表現力豊かなカスタム ストアフロントを作成し、すべてのビジネス ツールと CMS を Shopify Plus コマース エンジンに接続できます。
02. ビッグコマース
Shopify Plus と同様に、 BigCommerce の Headless Commerceソリューションを使用すると、必要なすべてのコマース機能を提供しながら、選択した CMS、DXP、またはカスタム フロントエンドを通じて、マーチャントが動的な顧客体験に集中できるようになります。
WordPress、Drupal、Bloomreach、Adobe Experience Manager、その他の CMS/DXP、PWA を好む場合でも、Gatsby などの主要テクノロジーを使用して独自にカスタム構築したソリューションを持っている場合でも、BigCommerce の API 接続を使用して BigCommerce プレゼンテーション層を切り離し、プラットフォームを必要な場所にプラグインするだけで済みます。
03. コマースJS
他のヘッドレスコマースプラットフォームと同様に、 Commerce JS を使用すると、販売者はバックエンドの機能と統合を処理しながら、ストアフロントの実装に集中できます。
04. ガムロード
Gumroad はBigCommerce や Shopify に似ていますが、クリエイター経済に重点が置かれています。クリエイター向けに設計された Gumroad には独自の API も付属しており、商取引機能のほとんどを処理しながら、マーチャントが他のツールに接続して UX を向上させることができます。
05. マジェント
Magento Commerce は、マーチャントが既存の e コマース アーキテクチャにヘッドレス要素を統合するのに役立つさまざまなイノベーションを顧客に提供します。カスタマイズ可能なフロントエンド: Magento Commerce は、業界をリードする Adobe Experience Manager と統合して、ヘッドレスまたはハイブリッド コマース アプローチを実行します。
06. スウェル
Magento よりも安価でありながら Shopify よりも柔軟性が高いことを誇りとするSwell は、顧客グループ、サブスクリプション、ヘッドレス テーマなど、通常はカスタム開発が必要となる高度な機能を備えているため、販売者は定型コードやビジネス ロジックを記述する手間を省き、独自の顧客体験に集中できます。
07. フォクシー
上記のヘッドレス コマース ソリューションと比較すると、 Foxyは機能と特徴の点で 1 つ下位に位置します。Foxy はホストされたカートと支払いページを提供し、既存の Web サイトまたはプラットフォームを使用してあらゆるものを販売できるようにします。
08. アピカート
Foxy と同様に、 Apicart は、Apicart API、SDK、または準備済みコンポーネントを使用して、販売者が任意の場所にショッピング カートを追加できるように支援します。
09. Vue ストアフロント
Progress Web Apps (PWA) とヘッドレス アプローチで構築されたVue Storefront は、マーチャントがネイティブ アプリのようなショッピング エクスペリエンスを作成し、サイトのパフォーマンスを向上できるようにするヘッドレス Storefront です。
ヘッドレス アプローチで構築されているため、Vue Storefront を使用して驚くほど美しく、高度にインタラクティブなストアフロントを作成し、使用しているバックエンド インフラストラクチャに接続できます。
10. ハイグラフ
Hygraph は、コンテンツ作成者が魅力的で API ファーストのコンテンツを簡単に作成、更新、管理、配信できるようにするヘッドレス CMS ソリューションであり、バックエンドやフロントエンドとの互換性を気にすることなく、より優れたデジタル エクスペリエンスを簡単に作成できます。
11. 満足
前のセクションでは、ヘッドレス コマースの欠点の 1 つとして、マーケティング担当者の開発チームへの依存度が高まっていることについて説明しました。Contentfulのようなヘッドレス CMS ソリューションは、この問題を解決するために作成されています。
コンテンツ作成者やマーケティング担当者にとっては、マーケティング メッセージやコンテンツをより迅速かつ大規模に配信できることを意味します。
ビジネスオーナーや経営幹部にとって、これはデジタルチーム間の連携の向上と、あらゆるチャネルに対応した構造化コンテンツによるより俊敏なワークフローを意味します。
12. コンテンツスタック
Contentful や Hygraph と同様に、 ContentStack は市場をリードする CMS ソリューションです。Shell や Sephora などの大手ブランドから信頼されている Contentstack は、開発者の介入なしに、豊富なビジュアル エディター、スケジュール管理ツール、公開管理ツールを使って企業がページを作成できるようにします。
VI. ヘッドレスコマースのケーススタディと成功事例
01. コアラ
導入
Koala は、家具を購入する最も賢い方法として自らを位置づけるオーストラリアの家具ブランドです。2015 年に設立され、最初の 12 か月で1,300 万ドルという驚異的な売上を達成しました。
チャレンジ：
Koala は自社の目覚ましい成長に制約されているため、継続的な拡張とスケールアップをサポートする強力なバックエンド インフラストラクチャを必要としています。また、顧客に合わせたエクスペリエンスとマイクロサービスを展開でき、フロントエンドとバックエンドで同時に作業できる柔軟性も必要です。
解決：
Shopify Plusのヘッドレスコマース
Shopify Plus の力を借りて、Koala はヘッドレスのプログレッシブ ウェブ アプリを構築できました。これにより、あらゆるデバイスでさまざまな顧客セグメントに適切なエクスペリエンスを適切なタイミングで提供できる柔軟性が得られます。プログレッシブ ウェブ アプリは分離されていますが、コンテンツ管理システム、ショッピング カート、その他のミッション クリティカルなシステムと統合されています。
完全なケーススタディをご覧ください:Koala のヘッドレスコマースケーススタディ。
02. ラルク
導入
LARQ は、セルフクリーニングウォーターボトルと浄水システムを販売した最初の企業の 1 つです。
2019年、ベイエリアを拠点とするこのスタートアップは、ノードストロームやブルーミングデールズなどの小売パートナーと提携して75,000ユニットを販売しました。2020年には、セブンチュアが主導する1,000万ドルのシリーズA投資も獲得しました。
チャレンジ：
LARQ の経営陣は、成長をサポートするだけでなく、カスタマイズやさらなる拡張に優れた柔軟性を提供できるコマース プラットフォームが必要であることを認識していました。
解決：
BigCommerceのヘッドレスコマース
LARQ は、バックエンドの e コマース エンジンとして BigCommerce を使用し、フロントエンドでは、React で構築されたカスタム ソリューションを使用して、単一ドメインでさまざまな地域のサイトを管理しました。
LARQ は、わずか 2 か月で BigCommerce 上に e コマース サイトを立ち上げることができました。立ち上げ以来、収益は前年比で 400% 増加し、コンバージョン率は 3 か月で 80% 増加しました。
完全なケーススタディをご覧ください: BigCommerce ヘッドレスコマースケーススタディ
03. 久保田
導入
クボタはポーランドの象徴的な家庭用ファッションブランドです。90 年代には、クボタはポーランドの人口の半数に年間約 1,500 万枚のスライドサンダルを販売していました。
2000年代半ば、ナイキやアディダスなどの世界的ブランドとの競争が激化し、急降下しました。しかし、25年間の休眠期間を経て、2018年に再活性化しました。そして、市場復帰後最初の1か月で1,000件の注文を獲得しました。
チャレンジ：
復活したブランドには大きな課題があります。現代のモバイルファーストの顧客に対応する必要がある一方で、検索の 90% 96% とオンライン取引の 40% 以上がモバイル デバイスで行われる若いユーザー層へのリーチを拡大する必要もあります。
解決：
Vue ストアフロント。
クボタは、コマース バックエンドとして Magento 2、フロントエンドとして Vue Storefront を使用して、PWA ベースのオンライン ストアを実装することができました。Vue Storefront により、開発者はクボタのブランド ガイダンスに従って e コマース プラットフォームを自由にカスタマイズできるようになりましたが、最も一般的な e コマースの問題にほぼ自動的に対処することもできました。
結果: モバイルファーストのトレンドに効果的に対応できたことで、Kubota は 1 日の訪問者数が 192% 増加し、読み込み時間が 30% 以上短縮されました。
ケーススタディの全文をご覧ください:クボタの成功事例
