話題のヘッドレスコマースとは?メリットやShopifyで実現させる方法を解説

2021.05.07

ヘッドレスコマースと呼ばれる新しい仕組みをご存じでしょうか?これは2016年前後に登場した、新しいCMS(コンテンツ・マネジメント・システム)の潮流を指しています。技術的な観点でみると、顧客が操作するフロントエンドがバックエンドから切り離されたEコマースの仕組みのことです。

ヘッドレスコマースはよりパーソナライズされたショッピング体験を顧客に提供できる手法として、世界的に注目をあびています。そしてShopifyは、D2Cブランドの展開を考えている方にとって最適といっても過言ではないEコマースのツールです。

今回はヘッドレスコマースとはどのような仕組みなのか、そのメリットも合わせて解説します。さらにShopifyでの実例や、Shopifyヘッドレスコマースを実現する方法について詳しくみていきましょう。

話題のヘッドレスコマースとは?




ヘッドレスコマースとはフロントエンドと呼ばれるECストアのコンテンツ部分と、バックエンドと呼ばれるシステム・機能を分離させた仕組みのことです。顧客とのタッチポイント部分であるフロントエンド、つまりECストアの顔を分離させることからヘッドレスと呼ばれています。

ヘッドレスコマースが注目をあびる理由のひとつは、スマホ・タブレット・ウェアラブルデバイス等が普及し、PC以外のデバイスを経由してショッピング体験を楽しむ顧客が増えていることです。すでにInstagramやYouTubeからショッピング体験を楽しんでいる方も多くいることでしょう。SNS・実店舗をはじめ、モバイルアプリ、スマートデバイスやECモールなど、多様なタッチポイントにコマースを対応させることが求められる時代になりました。

ヘッドレスコマースでできること


フロントエンドとバックエンドを分離させると、システム上の制限をなくせるのがポイントです。ヘッドレスコマースなら世界中で商品が発見され、顧客がほしいと思えばすぐに購入できるようになります。顧客は特定のURLにアクセスしなくても、さまざまなタッチポイントから商品を購入できるようになるのです。

たとえば大がかりな既存のシステムリプレイスは不要で、自社モバイルアプリあるいはメディアにカート機能を追加したり、スマートスピーカー向けなど独自の販売チャネルを追加したりできます。

ヘッドレスコマース導入において重要な鍵となるのはAPI(Application Programming Interface)の存在です。APIを使用すれば、開発言語やプラットフォームを問わずにヘッドレスコマースを導入できます。

実際にコマース機能の進化は目覚ましいため、ある日顧客にとって最適なチャネルが予測もしなかった場所に現れるかもしれません。生体認証がさらに進化すれば、お財布やスマホなしで文字どおり手ぶらで決済できる時代が来るかもしれないのです。

そのような世界では、ショッピング体験がリアルなのかオンライン上なのかは顧客にとって重要ではなくなるでしょう。上記の例がいつ実現してもおかしくないほど変化の激しい市場トレンドや、複雑化する顧客ニーズに柔軟かつ迅速に対応できるとあって、ヘッドレスコマースは注目されています。

なお世界175ヵ国で170万以上のマーチャントがECストアを運営しているShopifyでも、ヘッドレスコマースの導入は可能です。のちほど事例等を紹介します。

ヘッドレスコマースと従来のEコマースとの違い


従来のEコマースはフロントエンドとバックエンドが一体化しており、モノリシック(一枚岩)と呼ばれています。これはECストアの見た目部分であるUIと、基幹システム・受注管理システム・顧客DB・決済などの機能が組み込まれたECプラットフォームが一体化している仕組みのことです。

Webブラウザ上で顧客が閲覧していた時代は、この商品コンテンツ群とショッピングカートで構成された従来のEコマースは理にかなっていました。しかしショッピングカートとUIがつながっているため、デザインのカスタマイズに制約が出てきます。もしUIを変更する場合には再構築が必要となるため、それ相応の時間とリソースを確保しなければなりません。UIをアップデートすると、合わせてバックエンドのアップデートも必要となります。

一方のヘッドレスコマースは、分離されたフロントエンドとバックエンドを、APIを用いて接続させる手法です。プレゼンテーションレイヤーと呼ばれるフロント部分と、顧客からは見えないバックエンドをAPIで連携させます。

ポイントは、分離することでデザインの制限がなくなること。ECストア、モバイルアプリ、IoT、音声デバイス、SNS、広告、店舗のディスプレイなどさまざまなUIに対応できるようになります。そして、一律ではないパーソナライズされたコンテンツとコマースチェックアウト(購買体験)を、顧客とのタッチポイントへシームレスに届けることが可能になるのです。

ヘッドレスコマースでは、UIデザインを変更してもバックエンドに影響しません。そのため顧客のニーズや行動の変化に対して、迅速にサイトデザインも変更できます。ヘッドレスコマースに移行すれば、CXを高める施策に取り組みやすくなるといえるでしょう。つまりブランディングの強化にもつながるというわけです。さらにコンテンツを簡単・スピーディーにアップロードできるので、ECストアのパフォーマンスも向上します。

ヘッドレスコマースのメリットとは




ここではヘッドレスコマースのメリットについてみていきましょう。

リリーススピードが早くなりCXの向上も期待できる


デザインとシステム・機能はそれぞれ独立していることから、開発スピードが早くなります。なぜならば、フロントエンドを担うデザイナーとバックエンドを担うエンジニアの役割を完全に分離できるからです。たとえば各コンポーネントやレイヤーを開発する場合、相手側の対応を気にかける必要はありません。デザイナーのタスク終了までエンジニアが待つなどのムダがなくなり、開発業務の効率が向上します。

新たにモバイルアプリや音声検索に対応させるなどフロントエンドに変更を加えたい場合、バックエンドが対応できるかどうか検討する必要もなくなるのです。そのため市場のトレンドや顧客の動向に合わせてフロントシステムを自在に変更し、タッチポイントをスピーディーに拡大できます。

つまり顧客の生活動線にとけ込んだタッチポイントに最適なコンテンツを、スピーディーに提供できるということです。顧客は信頼するUIを通じてブランドの世界観に触れられるため、顧客のCX向上も期待できるのがヘッドレスコマースの強みといえます。

OMOやオムニチャネルを展開しやすい


OMO(Online Merges with Offline)やオムニチャネルを前提に、CXの高いビジネスモデルを目指すならヘッドレスコマースはぴったりな手法です。

OMOとは「オンラインとオフラインが融合した社会」のこと。人々は常にオンラインに接続しており、完全なオフラインは存在しない世界観を想定しています。実際にスマホやスマートデバイスの普及により、ショッピング体験がリアルなのかオンライン上なのかはあまり気にしなくなりつつあるといえるでしょう。

一方オムニチャネルは、CXの向上を目指し小売業の販売・流通チャネルを統合・連携させる販売戦略です。実店舗・カタログ通販・ECストアなどで会員情報を共有するため、どこでも在庫確認や商品の受け取りが可能になります。徹底した顧客目線でコマースを展開する場合、OMOやオムニチャネルを検討すべき時代になりました。

なぜならば、オンライン・オフラインに関わらず顧客の購買行動データを集約し、CXを重視したマーケティング施策を打ち出す必要があるからです。そこでヘッドレスコマースは、OMOやオムニチャネル実現のために有効な手法として注目されています。

逆にいえば顧客と複数のタッチポイントでつながることを想定しない場合は、ヘッドレスコマースのメリットは少ないといえるでしょう。ヘッドレスコマースはAPIなど専門的な知識が必要で開発工数も増えるからです。これからEコマースを立ち上げる場合も、顧客の購買行動データがまだ集まっていないのであれば、ヘッドレスコマースをあえて選ぶ必要はないでしょう。

Shopifyでヘッドレスコマースを実現する方法や注意点




Shopifyを利用することで、ヘッドレスコマースを実現できます。その理由のひとつはユーザー向け、バックオフィス向けにShopifyでは API を公開しているからです。APIと連携できるため、オムニチャネルに展開しやすくヘッドレスコマースも柔軟に開発できます。

さらにShopifyはECストアの核ともいえるデータ管理に特化しており、「商品・注文・顧客」情報を管理できるためヘッドレスコマースのバックエンド部分に最適です。

ShopifyはEコマース機能を提供するSaaSなので、基本的に初心者でもノーコードでECストアを立ち上げ越境ECにチャレンジできます。しかしプログラミング言語に不慣れな初心者がヘッドレスコマースに取り組むのは難しいといえるでしょう。技術的な面だけでなく、仕様やコストも含めて理解した上で導入する必要があるので、Shopifyでヘッドレスコマースにチャレンジする場合は、専門性の高い開発パートナーに依頼することをおすすめします。

Shopifyのヘッドレスコマース事例3選




ここでは実際にShopifyを利用したヘッドレスコマースの事例3選を紹介します。

Victoria Beckham Beauty


インフルエンサーとして、ファッションアイコンとして有名なビクトリアベッカムが手がける新しいブランド、Victoria Beckham Beauty。Shopify PlusとCMSのContentfulを連携させることで、顧客が直接的に関わることを目的としています。

開発者が直面した課題は、大量のトラフィック、高解像度の画像、およびビデオコンテンツをダウンタイムなしで処理できるプラットフォームを提供することでした。ヘッドレスコマースを採用することで、短時間で高性能のシングルページアプリケーションを実現させたのです。

CMSのContentfulは絶えず進化するコンテンツを処理し、起動時やホリデーシーズンを通じて、ページの高速読み込みとゼロダウンタイムをサポートします。

Koala


オーストラリア発マットレスブランド Koalaは、ShopifyPlusとContentfulを使用してウェブアイデンティティを変革しました。サードパーティのCMSを利用して、CXをカスタマイズしたり調整したりしています。

Koalaのテクノロジー責任者であるRichard Bremner氏は、「コンテンツをコードから切り離すことで、エンジニアはコンテンツから解放されました。ライターはコンテンツ制作に、エンジニアはコードに集中できるようになりました」と述べています。

ヘッドレスアーキテクチャを活用することで、柔軟なPWA(Progressive Web Apps)を通じて顧客に魅力的な体験を提供できているのです。これにより、新しいページ、製品、およびコンテンツをスピーディーに作成できます。さらにスピードを遅くする不要な機能を取り除くこともできました。

Chillys


イギリス生まれのChillysは、環境にやさしい断熱機能をもつボトルのブランドです。スタイリッシュな見た目と機能性の高さで人気のChillysは、Shopify PlusとDatoCMSを組み合わせてヘッドレスコマースを始めました。

Shopify Plusはコマースカートを処理し、DatoCMSはコンテンツを強化する役割を担っています。これによりスピードとパフォーマンスの向上を実現しました。さらにSEOの向上、展開の高速化など多くのメリットを得られたことが数字から読み取れます。

過去12か月でSMEからエンタープライズeコマースビジネスに移行し、その収益は166%を超えました。モバイルの収益では302%、取引では544%、コンバージョン率では134%増加したそうです。

現在PWAを活用して、ひとつのストアを管理しながら複数の国々からのオーダーに対応。つまり単一のCMSで複数の通貨と言語をサポートしています。

CX重視のコマースを提供できるヘッドレスコマース




これからのコマースでは、どのような体験を顧客にもたらせるか、いかにダイレクトに届けるられるかがより重視されるでしょう。そこで機会を逃さず大きなインパクトを顧客に提供する施策を、継続的に打ち出すことが求められています。そのためさまざまな施策は、低コストであることも大切です。

APIに接続することで、あらゆる種類のショッピング体験を提供できるヘッドレスコマースは、D2Cの現場でより存在感を増すことが予想されます。データ分析を活用した接客も提供できるヘッドレスコマースの動向に、今後もぜひ注目してみてください。

ARCHETYP Commerceでは、既存Shopifyストアをヘッドレスコマースへ移行させるお手伝いも可能です。興味のある方はお気軽にお問い合わせください!