I.ヘッドレス・コマースとは何か?
セールスフォースによると、ヘッドレス・コマースとは、eコマース・アプリケーションのフロントエンドとバックエンドを分離したもので、基本的には、開発者が選択したフロントエンド・テクノロジーを使用して、eコマース・ウェブサイトの外観や操作性をカスタマイズし、後でバックエンドにeコマース・ソリューションをプラグインして、必要なすべてのコマース機能を管理することができる。このアーキテクチャーは、ブランドが好きなものを好きなように構築できる表現の自由を提供する。最も重要なことは、ブランドが顧客体験を豊かにできることだ。
上記のヘッドレス・コマースの定義は、ヘッドレス・コマースの最も教科書的な定義である。
eコマースのウェブサイトには2つの部分があります。そして、バックエンドは、ウェブサイトを管理するためのインフラやシステムです。
例えば、Shopifyを利用したeコマースサイトの例を見てみましょう。
そしてこれがバックエンドで、このeコマース・ウェブサイトを管理するためのさまざまな機能にアクセスできる。
フロントエンドとバックエンドは切り離され、非常に特殊な方法で、具体的にはAPI(Application Programming Interface)を介して互いに通信するからだ。
Wix、Shopify、Wordpressのようなeコマースプラットフォームは、フロントエンドとバックエンドの両方を単一のシステムで管理するソリューションを提供します。
ヘッドレス・コマースが近隣で最も話題になっているのはなぜだろうか?
II.ヘッドレス・コマースの仕組みとメリット
eコマース・ツールとインフラを提供するビジネスを展開するBold CommerceとNacelleは、ヘッドレス・コマースを構築・開発するために、最近Capital Venturesからそれぞれ2,700万ドルと1,800万ドルを調達した。
この話題を理解するには、ヘッドレス・コマースの仕組みを理解する必要がある。
まず、プレゼンテーション・レイヤーがあり、これには、魅力的なデザインとユーザー・インタラクティビティを備えた高速ロードのウェブサイト、モバイル・アプリケーション、キオスク・アプリケーションなどが含まれる。これはCXレイヤー(カスタマー・エクスペリエンス・レイヤー)とも呼ばれます。
次に、課金、フルフィルメント、レポートと分析、コンテンツ管理システム(CMS)などのビジネスシステムを管理するバックエンド層があります。
この2つのレイヤーの間に挟まれているのがAPI(Application Programming Interfaceの略)で、2つのレイヤーの間で情報をやり取りする運河のようなものだ。
ではAPIとは何か?
Magentoによると、APIは、どのようなソフトウェアシステムでも、他のソフトウェアシステムと通信するために使用できる、共有の公開辞書として機能する。簡単に言えば、システムや技術ソリューションの翻訳機のようなものだ。
商品詳細ページの情報を正しく入力するために、eコマースのフロントエンドは、"商品 "に関連するすべての情報を取得するためにバックエンドに呼び出すAPIを知る必要があるだけだ。フロントエンドがAPI経由でバックエンドと通信することに同意している限り、バックエンド内部で何が行われているかについては、どんなに複雑であっても何も知る必要はない。実際、フロントエンドはバックエンドから完全に切り離されているため、新しいシステムが同じAPIを提供する限り、フロントエンドの機能を壊すことなく、バックエンドシステム全体を変更したり、置き換えたりすることもできる。このロックインの欠如は、ヘッドレスアーキテクチャの大きな利点のひとつである。(2020年、コーラ社、最高戦略責任者、マイケル・ハーヴェイ氏)
Wemakewebsiteのこのチャートでは、在庫、財務データ、顧客の購買などを管理するERP(Enterprise Resources Planning)を主なコンポーネントとするバックオフィスレイヤーという別のレイヤーを見ることができます。ERPは、ほとんどの大企業や企業で一般的ですが、中小企業やローカルビジネスでは、Shopifyのようなeコマースプラットフォームは、これらの大部分をカバーし、軽量バックオフィスとして再生することができます。
ヘッドレスeコマースがどのように機能するか、APIがどのように機能するかについては、こちらのガイドをご覧ください。
さて、ヘッドレス・コマースのコンセプトを理解しやすい形にしたところで、なぜあなたはヘッドレス・コマースに関心を持つ必要があるのだろうか?ヘッドレス・コマースは、従来のコマースと比較するのが最も分かりやすい:
01.より大きな柔軟性とカスタマイズ
多くの人が従来のコマースソリューションを使用していた昔は、フロントエンドとバックエンドは密接に結びついていたため、フロントエンドで行われた変更はバックエンドの開発作業に波及し、その逆もまた然りであった。そのため、変更やカスタマイズを行うためには、開発者はフロントエンドとバックエンドの間で何重にもコーディング作業を行う必要があり、膨大な時間とコストがかかってしまいます。
ヘッドレス・コマースでは、フロントエンドとバックエンドのインフラは完全に分離されています。フロントエンドの変更は、バックエンドの制限を受けることなく、柔軟かつ俊敏に行うことができ、開発者はUIの変更にかかる時間を節約することができます。
バックエンドから切り離されることで、カスタマイズの可能性も無限に広がる。開発者や店舗オーナーは、オンライン・ビジネスの体系的な管理に最適なeコマース・プラットフォームを自由に選択することができる。
02.より良いカスタマー・エクスペリエンス
世界的な大流行は、顧客の生活におけるデジタル体験の役割と重要性を一変させた。今日の消費者は、チャネルやデバイスを問わず、使いやすく直感的なデジタル体験を期待している。このような期待に応えることができるブランドは、最大の利益を得ている。
しかし、Shopify Plusの「Future of eCommerce」レポートによると、デジタルファーストのDTCブランドとEコマースに新規参入した企業との間には溝が開いている。カスタマー・エクスペリエンスで勝負できるのは、最大手企業の38%に過ぎない。この数字は、Eコマースを始めたばかりの企業のほとんどが、オンラインストアの外観(ヘッド、つまりフロントエンド)がテンプレートや限られた機能のテーマに制約されたEコマース・プラットフォームを使用しているという事実を考えれば納得がいく。

ヘッドレス・コマースでは、フロントエンドのエクスペリエンスを完全にコントロールし、所有することができます。EC事業者は、バックエンドのインフラにどのようにプラグインできるかを心配することなく、より良いユーザーエクスペリエンスを実現するために特別に設計された、様々なエクスペリエンス主導型、またはコンテンツ主導型のソリューションを自由に試すことができます。この柔軟性が、より速く、より魅力的なデザインのeコマース・ウェブサイトを実現します。
03.CACの低下とコンバージョン率の向上
このメリットは少し偏った見方かもしれないが、フェイスブックやインスタグラムのような広告プラットフォームのボラティリティを考えると、千インプレッションあたりの平均コストやクリックあたりのコストが下がる気配はない。
もしあなたがSEOとオーガニックトラフィックの関係についてよく知らないのであれば、Googleがウェブマスターに対して、ページ体験はランキングに影響し、結果としてオーガニックトラフィックにも影響すると明言していることに注意してほしい。従って、ヘッドレス・コマースによってコンテンツ主導、またはエクスペリエンス主導の戦略を持つことで、より良いページ体験を得ることができ、コンバージョン率を高め、顧客獲得コストを下げることができる。
中小企業を経営している場合、ヘッドレス・コマースの採用者は、一般的に(それだけに限らないが)大規模な開発チームを持ち、カスタム・プログラミングを好む大企業であるため、急いでヘッドレス・コマース・ソリューションを探す必要はないかもしれない。
04.市場浸透のスピードとトレンドの採用。
ヘッドレス・コマースを利用することで、オンライン・ビジネスは拡大や成長戦略に沿った新しいフロントエンドの体験や変更を素早く開始することができます。
例えば、異なるeコマースポリシーや顧客行動を持つ新しいマーケットにリーチを拡大する場合、ヘッドレス・コマースを利用することで、バックされたインフラへの影響を心配することなく、eコマースウェブサイトを新しいターゲット層向けに素早くカスタマイズすることができます。
あるいは、オムニチャネル・マーケティング戦略を導入し、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権限などのコンテンツが定義される。また、コンテンツの追加、編集、削除もここで行われる。
例えば、ウェブサイトの返品規定ページは、POSレシートやiOSアプリと同じコピーを共有することができる。
02.ヘッドレス・ストアフロント
クラウドベースのリーディングカンパニーであるセールスフォースによると、ヘッドレス・コマース用のストアフロントとは、eコマース・プラットフォームやその他のバックエンド・アプリケーションから完全に分離された、自己完結型のウェブ・ストアフロントのことだという。
ほとんどのヘッドレス・ストアフロントはPWA(プログレッシブ・ウェブ・アプリケーション)を使っている。
プログレッシブ・ウェブ・アプリケーション(PWA)は、最新のウェブ・テクノロジーを使用して、ユーザーにスムーズでダイナミックなアプリのような体験を提供するウェブ・アプリケーションです。PWAによるヘッドレス・ソリューションにより、ブランドはバックエンドに変更を加えることなくUXを改善することができます。
03.ヘッドレスeコマース・プラットフォーム
ヘッドレスeコマースプラットフォームは、基本的にShopify PlusやMagentoのようなヘッドレスコマースソリューションを提供するeコマースプラットフォームです。バックエンドのインフラをフロントエンドのデザインから切り離し、お好みのフロントエンドやCMSソリューションを使ってコンテンツを公開し、オンラインストアのコマースエンジンや軽量なバックオフィスとして機能します。
V.eコマース・ビジネスのためのトップ・ヘッドレスeコマース・プラットフォーム
01.ショッピファイプラス
Shopify Plusのヘッドレスコマースは、すべてのタッチポイントでクリエイティブを完全にコントロールし、まとまりのあるカスタマーエクスペリエンスを提供します。あなたのブランドと同じように表現力豊かなカスタムストアを作成し、すべてのビジネスツールとCMSをShopify Plusのコマースエンジンにプラグインすることができます。
02.ビッグコマース
Shopify Plusと同様に、BigCommerceのヘッドレス・コマース・ソリューションは、必要なコマース機能をすべて提供しながら、加盟店が選択したCMS、DXP、またはカスタムフロントエンドを通じて、ダイナミックな顧客体験に集中することを可能にする。
WordPress、Drupal、Bloomreach、Adobe Experience Manager、その他のCMS/DXP、PWA、またはGatsbyのような先進的なテクノロジーを使用した独自のカスタムソリューションを好むかどうかに関わらず、BigCommerceのAPI接続を使用してBigCommerceのプレゼンテーションレイヤーを切り離し、必要な場所にプラットフォームを接続するだけです。
03.コマースJS
他のヘッドレス・コマース・プラットフォームと同様に、Commerce JSは加盟店がストアフロントの実装に集中できるようにし、バックエンドの機能と統合はCommerce JSが行う。
04.ガムロード
GumroadはBigCommerceやShopifyのようなものだが、クリエイターエコノミーにフォーカスしている。クリエイターのために設計されたGumroadは、独自のAPIも備えており、商取引機能のほとんどを処理しながら、商人がより良いUXのために他のツールにプラグインできるようになっている。
05.マジェント
Magento コマースは、既存のeコマースアーキテクチャにヘッドレス要素を統合するための様々なイノベーションを提供します。カスタマイズ可能なフロントエンド:Magento Commerce は業界をリードする Adobe Experience Manager と統合し、ヘッドレスまたはハイブリッドコマースアプローチを実行できます。
06.うねり
Magentoよりも安価でありながら、Shopifyよりも高い柔軟性を誇るSwellは 、顧客グループ、サブスクリプション、ヘッドレステーマなど、通常はカスタム開発が必要な高度な機能を備えている 。
07.フォクシー
上記のヘッドレス・コマース・ソリューションと比較すると、Foxyは機能性と特徴の点で一歩劣ります。Foxyはホスティングされたカートと決済ページを提供し、既存のウェブサイトやプラットフォームを使ってあらゆるものを販売することができます。
08. アピカート
Foxyと同様に、Apicartは、API、SDK、または準備されたコンポーネントを使用して好きな場所にショッピングカートを追加することができます。
09.ビューストアフロント
Progress Web Apps(PWA)とヘッドレスアプローチで構築されたVue Storefrontは、加盟店がネイティブアプリのようなショッピング体験を作成し、サイトパフォーマンスを向上させることを可能にするヘッドレスストアフロントです。
Vue Storefrontはヘッドレスアプローチで構築されているため、非常に美しくインタラクティブなストアフロントを作成することができます。
10.ハイグラフ
HygraphはヘッドレスCMSソリューションであり、コンテンツ制作者はAPIファーストで魅力的なコンテンツを簡単に作成、更新、管理、配信することができ、バックエンドやフロントエンドとの互換性を気にすることなく、より良いデジタル体験を簡単に作ることができます。
11.内容的
前のセクションでは、ヘッドレス・コマースの短所の1つが、マーケターが開発チームへの依存度を高めていることであることをお話ししました。ContentfulのようなヘッドレスCMSソリューションは、このペインポイントを解決するために作られました。
コンテンツ制作者やマーケティング担当者にとっては、マーケティングメッセージやコンテンツ作品をより速く、より大規模に配信できることを意味する。
ビジネス・オーナーやCレベルの管理職にとっては、デジタル・チーム間のコラボレーションの向上や、あらゆるチャネルに対応できる構造化されたコンテンツによる、より俊敏なワークフローを意味する。
12.コンテンツスタック
ContentfulやHygraphと同様に、ContentStackは市場をリードするCMSソリューションです。ContentStackは、ShellやSephoraのようなビッグブランドから信頼されており、リッチなビジュアルエディタ、スケジュール管理、パブリッシング管理ツールを使って、開発者の手を煩わせることなくページを構築することができます。
VI.ヘッドレス・コマースの事例と成功例
01.コアラ
はじめに
コアラは、最もスマートな家具の買い方を提案するオーストラリアの家具ブランドである。2015年に立ち上げられ、最初の12ヶ月で1,300万ドルという驚異的な売上を達成した。
チャレンジだ:
また、顧客に合わせたエクスペリエンスやマイクロサービスを展開し、フロントエンドとバックエンドを同時に作業できる柔軟性も必要だ。
解決策
Shopify Plusのヘッドレス・コマース
Shopify Plusによって、コアラはヘッドレス・プログレッシブウェブアプリを構築することができました。これにより、あらゆるデバイスで異なる顧客層に適切な体験を適切なタイミングで提供できる柔軟性が生まれました。このプログレッシブWebアプリは、コンテンツ管理システム、ショッピングカート、その他のミッションクリティカルなシステムと統合されています。
ケーススタディの全容をご覧ください:コアラのヘッドレス・コマース・ケース・スタディ。
02.ラルク
はじめに
ラルクは、自動洗浄水筒と浄水システムを販売する最初の企業のひとつである。
2019年、ベイエリアを拠点とするこのスタートアップは、ノードストロームやブルーミングデールズといった小売パートナーとのコラボレーションにより、75,000ユニットを販売した。2020年には、Seventureが主導する1000万ドルのシリーズA投資も獲得した。
チャレンジだ:
LARQの経営陣は、自社の成長をサポートするだけでなく、カスタマイズやさらなるスケールアップにも柔軟に対応できるコマース・プラットフォームが必要だと考えていました。
解決策
BigCommerceのヘッドレス・コマース
LARQは、バックエンドのeコマースエンジンとしてBigCommerceを使用し、フロントエンドではReactで構築されたカスタムソリューションを使用して、1つのドメインで異なる地域のサイトを管理しました。
LARQはわずか2ヶ月でBigCommerceにECサイトを立ち上げることができました。立ち上げ以来、収益は前年比で400%増加し、コンバージョン率は3ヶ月間で80%増加した。
ケーススタディの全容をご覧ください:BigCommerce ヘッドレス・コマースのケーススタディ
03.クボタ
はじめに
クボタはポーランドを代表するファッションブランドである。90年代、クボタは年間約1500万足のスライドサンダルをポーランドの人口の半分に売り上げていた。
ナイキやアディダスのようなグローバルブランドとの競争激化により、2000年代半ばに急降下した。しかし、25年間の休眠を経て、2018年に再始動した。
チャレンジだ:
復活したブランドは大きな課題を抱えている。それは、現代のモバイル・ファーストの顧客に対応する必要があると同時に、若年層へのリーチを拡大する必要があることだ。若年層は、検索の96%、オンライン取引の40%以上がモバイル・デバイスで行われている。
解決策
ヴュー・ストアフロント
クボタは、コマースのバックエンドとしてMagento 2を、フロントエンドとしてVue Storefrontを使用して、PWAベースのオンラインストアを実装することができました。Vue Storefrontは、クボタのブランドガイダンスに従ってeコマースプラットフォームをカスタマイズする自由を開発者に与えただけでなく、最も典型的なeコマースの問題にほぼ自動的に対処することを可能にした。
その結果モバイルファーストのトレンドに効果的に対応することができたため、クボタは1日の訪問者数が192%増加し、読み込み時間が30%以上改善されました。
ケーススタディの全文を見るクボタの成功事例