コマースの勢いは止まりません。米国内のeコマースの売上は、2022年に1兆ドルに達すると予想されています(英語)。また、2024年までにはオンライン注文がリテール全体の20%を占めることになりそうです。
ヘッドレスコマースは、eコマースのアーキテクチャの一種で、バックエンドのインフラと顧客タッチポイントのフロントエンドを切り離します。
ヘッドレスの良いところは、デザインや開発に縛られることなく、どこでも販売できるという自由度の高さにあります。どこでもストアフロントになるのです。ここで要求されるのは、少しのクリエイティビティと、裏側のアーキテクチャを再考する意欲です。
データによると(英語)、大企業の64%がeコマースを最新化するために特注のソリューションを開発しています。さらに76%が、12ヶ月以内に何らかのヘッドレス技術を採用する予定とのことです。
ヘッドレスは最近かなり注目をされていますが、すべての人に向いているわけではありません。あなたのブランドにふさわしいアーキテクチャといえるのかを判断するために、ヘッドレス化とは一体どういうことなのか、理解しておく必要があります。このガイドでお伝えしたいのは、まさにそこなのです。
目次
ヘッドレスコマースとは？
ヘッドレスコマースは、ヘッド（フロントエンド）のエクスペリエンスをバックエンドの技術インフラから切り離すEコマースの技術および考え方のことです。
言い換えると,ヘッドレスコマースによって,ビジネスを動かしている基盤システムやエンジンからデジタルストアフロントを分離させることが可能です。テンプレートのフロントエンドに物足りなさを感じているブランドが、高度にパーソナライズされたカスタマーエクスペリエンスを提供できるようになります。
ヘッドレスのアーキテクチャにより、マーチャントは新しいテクノロジーを使ってコマース機能を備えた以下のようなデジタルストアフロントを構築できます。
- ソーシャルメディア
- モバイルアプリ
- スマートミラー
- セルフサービスキオスク
- 自動販売機
- 音声アシストテクノロジー(Amazon Alexaなど)
- ウェアラブルデバイス
ヘッドレスコマースの仕組み
ヘッドレスコマースは、顧客タッチポイントをあなたのバックオフィスオペレーションに接続しますが、ここではAPI(アプリケーション・プログラミング・インターフェース)が使用されます。
お客さまが触れるコンテンツは、ヘッドレスプラットフォームとは別の場所で管理できます。人気のCMS (コンテンツ・マネジメント・システム)、PWA(プログレッシブ・ウェブ・アプリ)、CRM(カスタマー・リレーションシップ・マネジメント)、その他のデジタルプラットフォームを利用することが可能なため、すべてを扱うeコマースプラットフォームを見つける必要はありません。
このようなSaaS(ソフトウェア・アズ・ア・サービス)ツールによって、モバイルアプリや自動販売機といった顧客タッチポイントが構築できます。これらは技術的にはヘッドレスコマースプラットフォームの外にありますが、それぞれのタッチポイントにおいて購入が発生するたびに、APIコールによってデータがバックエンドに受け渡されます。
バックエンドは、コマースのアクティビティをすべて統合しています。注文処理、在庫管理、クレジットカード情報、商品詳細のアップデートなど、どこでどのように販売されたかを問わず、商品に関わるすべてをまとめる単一のソースとなります。
お客さまはヘッドレスのバックエンドを見ることはありません。あなたがショッピング体験を提供するために使用しているユーザーフロントのインターフェースのみを目にします。
ヘッドレスとほかのCMSアーキテクチャの違い
モノリシックなプラットフォームとも言われている従来のeコマースプラットフォーム(英語)と比べて、ヘッドレスのアーキテクチャは、成長する顧客ベースにリーチするためのツールをマーチャントに提供します。
比喩的に言うなら,ヘッドレスコマースはフロントエンドとバックエンドの結婚関係を切断します。しかしこの「離婚」においては、どちらの側も勝者です。というのも、片方で発生した変更は他方にまったく影響しないからです。時間の節約になると同時に、異なる顧客セグメントを横断する改良されたカスタマーエクスペリエンスが可能になります。
フロントエンドとバックエンドの分離によって、お客さまのコンバージョンに最適なものだけを利用する可能性が開かれます。もっとも一般的と思われる使用例は、コマース用のプラットフォームの代わりにブランドの既存のCMSからコンテンツをフロントエンドにプッシュすることです。こうすることで、コマースのバックエンドを経由せずにサイト上のコンテンツを変更できます。
フロントエンドに接続する必要のあるシステムが自社にほとんどない場合は、フルスイートのコマースプラットフォームのほうが、実際のところ最適かもしれません。
ヘッドレスは自社に適しているか？
ヘッドレスというソリューションは、戦略的な選択肢として急浮上していますが、それが自社に最適かどうかを判断する方法はあるのでしょうか？
まず一番重要なのは、コストです。大企業のヘッドレス化プロジェクト費用は、5万ドルから50万ドルの間と考えられます。さらに、機能やサポートツール、カスタマイズの程度などに応じて、年間のメンテナンス費用が発生します。
企業によっては、ウェブサイトを部分的にヘッドレスプラットフォームに置き換える場合もあるようです(例：新商品のランディングページやブログ記事など)。このようなテストであれば、開発チームのリソースに合わせて、上述の概算よりかなり低くおさえることが可能です。
「ヘッドレス化」は、必ずしもウェブサイトの構築を意味しません。フロントエンドの管理が可能なShopify APIと関連する開発ツールを使用すれば、カスタム体験を構築できることを覚えておきましょう。
そのほかのヘッドレスプラットフォーム上のチャネル(モバイルアプリ、オーディオストリーム、ビデオゲームの統合など)は、もしアプリを使ってカスタムストアフロントを構築するなら、月額99ドル程度のコストで実現できます。
基本的に、ヘッドレス化の費用は構築する内容の複雑性に応じて変わってきます。構築と実装はコストの1つに過ぎません。外部のエージェンシー費用、ヘッドレスCMSの月額サブスクリプション費用なども見過ごさないでください。
コストがそれほど問題にならないのであれば、ヘッドレスコマースのアーキテクチャが自社に適しているかを分析します。以下の項目に当てはまるようなら、ヘッドレスのオプションを検討しましょう。
- すでにしっかりしたインフラがあって、ほかのツールを既存のテクノロジーに組み込み直すのが簡単ではない。
- フロントエンドとバックエンドの調整を同時におこなうことができないので、競合と比べて自社の動きが遅い気がする。
- ストアフロントの読み込みに時間がかかり過ぎる。読み込まれる前にユーザーが離脱してしまうことがよくある。
- ストアフロントのテーマやテンプレートが、希望するカスタマイズに対応していない。
- iOSやAndroidのネイティブアプリがない。または、モバイルのショッピングアプリが十分にユーザーフレンドリーでない。
- 現在のeコマースのプラットフォームでは実現できない独自のストアフロント体験を構築したい(スマートミラー、スマートウォッチ、自動販売機など)。
ヘッドレス化するメリット
ヘッドレスコマースは、場所を選ばないコマースです。急速な成長を前提とし、コマースやテクノロジーの動きに合わせて変更できる柔軟性があります。
ヘッドレスコマースのシステムは、主要な3つの要素を実現します。
1 市場投入までの時間の短縮
ヘッドレスなら、実験も変更も迅速におこなえます。フロントエンドとバックエンドを一緒に作業できないという昔ながらの開発問題も緩和されます。
ヘッドレスにより、カスタマー側の作業は独立しておこえるので、バックエンド側の作業を待つ必要がなくなり、その逆も然りです。これはつまり、コードをコピーしてそれぞれのチームが互いの進行を気にすることなく作業できるということを意味します。
eコマースのバックエンドとフロントエンドの問題を切り離すと、頭痛の種がだいぶ減ります。たとえば、フロントエンド開発者は、バックエンドシステムの支払いプロセスを中断することなくウェブサイトの雰囲気を変更することができます
2 管理の強化と高速なスケーリング
ヘッドレスはみんなに対してフェアです。異なる言語でコーディングされた既存システムは、たとえカスタマーエクスペリエンスに悪い影響を与えていても、重要な統合を妨害します。
データによると(英語)、57%のIT・eコマース業界のリーダーたちは、現在のシステムでは12ヶ月以上ビジネスをサポートすることはできないと言っています。
ヘッドレスは強力なAPI(英語)によって、任意のプログラム言語を使ったショッピング体験を構築するために既存システム(ERP、PIM、IMSなど)(英語)の統合を可能にします。テクノロジーの推移に対応できるだけでなく、ヘッドレスはあなたが自分のペースを確保し、コマースの動きと同じ速さで順応できるようにします。
「ブランドがスケールすると、UXとテクノロジーは成長を加速させるツールとなります。Shopifyテーマで急速にスケールしたブランドは、対処すべき新たな課題や、継続的な成長を可能にする新しい要件を発見することになります。」
ブランドが成長してShopifyテーマへの要求が増えてくると、ヘッドレスコマースのようなカスタムソリューションを高く評価するようになるのです
3 パーソナライズの向上
ヘッドレスの場合、ユーザーの行動が社内共通の指標となります。どのデバイスを使用しているかに関係なく、開発者はお客さまへのデータ提供の方法において柔軟性が得られます。
ヘッドレスでは即座にスプリットテストが可能なため、カスタマーエクスペリエンスやコンバージョン率の最適化を図ることができます。お客さまがショッピングをしているどのストアフロントに対しても、データを提供して変更をデプロイでき、カスタマージャーニー全体のパーソナライズを可能にします。
ショッピング体験が高度にパーソナライズされていると、お客さまは予定よりも多くの支出をする傾向が40%高くなります(英語)。ブランドは、ヘッドレス化することによって、顧客獲得のトレンドの変化に対応できる敏捷性を得られるのです。
ヘッドレス化して、サイトのバックエンドとユーザーが目にしているフロントエンドを分離すると、モバイル、デスクトップ、ウォッチ、アプリ、POSなど、それぞれのタッチポイントで要求されるユーザーエクスペリエンスを即座に満たすことが可能になります
「今までは1つのバックエンドにすべて連結していたため、異なるエクスペリエンスの提供が制限されていました。今は、ディープな開発作業をしなくても、デバイスごとにまったく異なるバリュープロポジションを展開できます。」
—Harvey Hodd (Blueprint)
ヘッドレスコマースのトレンド
ヘッドレス化のメリットがわかったので、次はヘッドレスコマースの未来に進むべき4つの理由を確認しておきましょう。
モバイルコマースの隆盛
昨今、デスクトップだけでオンラインショッピングをしている人を見つけるのはむずかしいでしょう。2022年には、スマホで買い物をするモバイルユーザーは1億8,750万人になる見通しです。2025年には、モバイルコマースの総支出額(英語)が2,700億ドルに達すると見込まれています。
ヘッドレスコマースのアーキテクチャであれば、マーチャントはその支出を捉えることができます。レスポンシブテーマに依存することなく、開発者はバックエンドに影響を与えないモバイルサイトを完全カスタマイズで構築可能です。また、Facebookの「購入」ボタンのようなソーシャルコマース機能を利用して、モバイルデバイスを使う91%のSNSユーザー(英語)を獲得することもできます。
新しいモバイルサイト(またはアプリ)とヘッドレスコマースのプラットフォーム間のAPIコールがデータの受け渡しをおこないます。eコマースのバックエンドを犠牲にすることなく、モバイルユーザーがすでに利用していて商品を閲覧したり購入したりしているプラットフォームで商品を販売する技術をあなたは手に入れることができるのです。
コアウェブバイタルに対するヘッドレスの影響
現代の消費行動において、検索エンジンは大きな役割を果たしています。商品をオンラインで探すとき、ほぼ半数(48%)の消費者はGoogle、Bing、Yahooなどの検索サイトを利用しています。
SEOをマーケティング戦略で重視しているなら、2020年6月のGoogleの発表内容を知っていなければいけません。アルゴリズムが大きく変更され、ページ速度が今まで以上に重視(英語)されるようになりました。コアウェブバイタル(Core web vital)指標がGoogleアルゴリズムにおいてメインとなり、どのページやサイトを検索ランキングで上位表示するかを決定します。LCP(largest contentful paint)、CLS(cumulative layout shift)、FID(first input delay)、これらの指標のどれもがページの読み込み速度に関係しています。
ヘッドレスコマースは、あなたのeコマースのタッチポイントが検索エンジンの結果ページで成功を収められるようにします。フロントエンドとバックエンドが別になっているため、サイトビジターが読み込むのはフロントエンドだけで、検索エンジンクローラーがアクセスするのもそこです。
ヘッドレス化することで、必然的に高速なフロントエンドのモダンJavaScriptフレームワークを活用できるようになります。Googleはコアウェブバイタルをランキング指標として用いているのですから、ビジネスとしてこれを真剣に考慮すべきです
パーソナライズがすべて
ウェブ消費者がもっとも懸念するのはオンラインのプライバシーです。とはいえ、リサーチによると、消費者はパーソナライズされたショッピング体験(英語)が得られるなら顧客データの共有を許容するという事実が見えてきます。10人中9人(英語)は、より安く簡単なエクスペリエンスのために進んで行動データを共有する傾向にあります。
そのため、eコマースブランドの31%(英語)は、顧客データの活用がビジネスプランを進める最大の契機になると信じています。また別の29%は、そのデータを使用してより良いカスタマーエクスペリエンスを創出していくべきだと言っています。
ヘッドレスコマースは、このようなデータの収集とプラットフォーム全体での共有を可能にします。お客さまがeコマースサイトでアカウントを作成し、購入ジャーニーを別のデバイス(スマートウォッチなど)で継続した場合、ヘッドレスのアーキテクチャはそのデータを双方で同期します。
パーソナライズされたおすすめ商品、デバイス間でのショッピングカートの保存機能、注文履歴に応じたお好みの支払いオプションなどを提供しましょう。
ヘッドレスコマースは、商品を複数のチャネルでプロモーションしたい企業にとって、とくに有益です。たとえば、ウェブサイトで商品カタログを宣伝して、同じ商品とコンテンツをネイティブモバイルアプリでもプッシュできます
CMSを使って各部門の利点を活用
ヘッドレスのソリューションを採用するなら、eコマースのバックエンドと同じCMSを使用する必要はありません。理想的とはいえないeコマースプラットフォームに甘んじることなく、WordPress、Contentful、Squarespaceなどの既存CMSを使って、すべてのストアフロントに対してコンテンツをアップデートすることが可能です。
Run the ShowのオーナーであるTom Hirstは、次のように説明します。「2つ以上のCMSを同時に使用している会社が増えているのは、クールなトレンドだと思います。たとえば、マーケティングチームはブログやページレベルのコンテンツ編集にWordPressを駆使していることが多いですが、営業やロジスティクスのチームはeコマースとしてShopifyを好みます。」
ヘッドレスなら、WordpressのコンテンツAPIとShopifyのeコマースAPIを使って、1つのウェブサイトを機能させることができます。この方法だと、それぞれの業務に適したツールが選べるため、チームの柔軟性が大きく向上します。そしてフロントエンドにおいては、一貫したブランドとして表現できるのです
ヘッドレスとオムニチャネルコマースのマリアージュ
カスタマージャーニーは複雑になる一方です。消費者の74%(英語)は、取引の開始から完了までに複数のチャネルを使います。76%は、状況に応じたいろいろなコマースチャネルを希望しています。
マッキンゼーがリテール業界の未来予想を発表したとき、パートナーであるPraveen Adhiは次のようにコメントしました。
「あなたがだれで、何を持っているかに合わせて、瞬時に衣装を変えるデジタルマネキンを見ることになるでしょう。商品に触れ、感じて、より良く知るための店内体験も豊富になります。」
ただし、商品を購入しても、現在のようにそれを持って店の外に出ていくわけではありません。商品はバックルームから出てくるか、車の中に置かれるか、あるいは自宅に届いているのかもしれないのです
単一のeコマースサイトだけでは、商品の発見や支払いプロセスの大部分を占めるチャネルごとの要求を満たすのに十分ではない場合があります。
ショッピング体験がオンラインとオフラインで可能となるオムニチャネル(英語)とヘッドレスの組み合わせは、完璧と言えます。ヘッドレスコマースは、モバイルアプリでも、スマートミラーやウォッチのようなIoTデバイスでも、ボイスショッピングでも、PWA(プログレッシブウェブアプリ)でも可能なのです。
ヘッドレスコマースがあらゆるカスタマータッチポイントを販売機会に変え、すべてのコマース要素は単一のバックエンドで管理されます。
ヘッドレスのPlusマーチャント：KOTN
Shopifyは、マーチャントが希望する技術スタックやビジネスロジック、またはバイヤーエクスペリエンスを実現するために、プラットフォームの変更を余儀なくされるべきではないと考えます。
Kotn(英語)は、その点における素晴らしいケーススタディです。オンラインでアパレル販売をおこなう同社は、Shopify Storefront API(英語)を使って2つのストアを1つに統合しました。新しいストアには、新しいCMS、チェックアウトページ、カスタム商品ページがあります。実現したかったパーソナライズされたショッピング体験を提供するために、カスタムアプリやハックを用いる必要はなくなりました。
ヘッドレス化して以降、Kotnのサイト変更は今まで以上に迅速になりました。速くなったのはそれだけではありません。Kotnのサイト速度は、トラフィックが集中するピーク時期であっても、急激に速くなったのです。また、ビジネスの成長や新たなテクノロジーの登場に合わせてスケールできるインフラも手に入りました。
Shopifyはわたしたちのニーズの80％をカバーしています。ほかのマーチャントの場合も同じだと思います。残りの20%の部分はヘッドレスで対応し、そこに時間をかなり投じました。わたしたちが取り組んでいるのは、ShopifyにはShopifyが得意なことをやってもらって、自分たちは自社の独自性を強調できる領域にフォーカスすることです。ヘッドレスについて思案を重ね、そこに到達しました
ヘッドレスコマースのウェブサイト事例
Grass Roots Farmers’ Cooperative
Grass Roots Farmers’ Cooperativeは、サステナブルな食肉を米国内のお客さまに販売する小規模な農場経営者の集まりです。ヘッドレス化を決めた際、このリテーラーはShopify PlusパートナーのAlpha Omega Agencyと協力して、素晴らしいユーザーエクスペリエンスを提供できる最先端の技術を組み入れました。
Grass Roots Farmers’ Cooperativeは、Shopify Plusをヘッドレスコマースのプラットフォームとして使用しています。カスタム商品ページとチェックアウトをサポートするために、Netsuite、PWA、Ruby on Railsなどのツールも使われています。
お客さまのために最高のユーザーエクスペリエンスを提供したかったのです。プログレッシブウェブアプリは、モバイルからの平均注文額を大きく向上しました。収益が増加したことで、サステナブルな取り組みをサポートしています
Babylist
すぐに使えるようになっているコマースプラットフォームは、ブランドが必要としている機能や柔軟性を備えているとは限りません。Babylistを例にとってみましょう。これは、出産を控えている人々が、ギフトに欲しいウィッシュリストを共有できるオンラインプラットフォームです。このサイトでは商品をサードパーティのリテーラーから取得しています。ユーザーは、商品を品質やサイズで比較することができ、年齢別のおすすめや、最安価格などを1つウェブサイトで得られます。
Babylistのサイトをモノリシックなeコマースプラットフォームで作り直すのは、ほぼ不可能です。そこには、出産を控えている人とギフトを買って贈りたい人、2種類のカスタマーエクスペリエンスが存在します。
Babylistは、ヘッドレスに移行して複数のプラットフォームを1つのテクノロジーの上に統合しました。CMS (Contentful)、注文管理システム(Shopify)、チェックアウト(Shopify Plus)がそこに含まれています。
その結果(英語)がこちらです。
- 新しいヘッドレスサイトの注文ボリュームは、前年比で145%上昇
- 初月以降、月間のiOSアプリチェックアウトは300%上昇
- オンラインプラットフォーム経由のギフトは、前年比で102%成長
FIGS
FIGSは、コマースにヘッドレスのアプローチを採用しているオンラインリテーラーの1社です。サイトのバックエンド機能を管理するためにShopify Plusを利用しています。
さらに、ランディングページのデザインに柔軟性をもたせる目的でUnbounceとNext.jsも使用します。それぞれのカスタムランディングページは、Shopifyの商品ページと連携し、お客さまは本当にユニークなエクスペリエンスが得られ、購入へと至ります。FIGSはまた、2022年までにモバイルデバイスで消費されると推計されている4,320億ドル(英語)を取りにいくために、モバイルアプリも展開しています。
これらのカスタムタッチポイントは、APIコールによってデータをShopify Plusに返します。そこから、注文の管理、SKUの更新、在庫レベルのアップデートが可能です。
ヘッドレスの準備はOK？
経験豊富でしっかりしたインラフをもっている企業も、エンタープライズ仕様のアーキテクチャを構築中の企業も、上述したチェックボックスに複数チェックが入るようなら、ヘッドレスコマースのアプローチが最適と言えるかもしれません。
同様に、ビジネスのオペレーションが複雑になりつつあり、価格よりもエクスペリエンスで競合と差別化したい場合には、ヘッドレスの未来が待っています。
原文：Elise Dopson イラスト：Diego Blanco 翻訳：深津望
