富士ロジテックHD

通販・D2C・Eコマース事業者の EC物流代行・発送代行・オムニチャネルコマースでの流通加工から店舗物流までを、一般社団法人通販エキスパート協会認定スペシャリスト：「通販CXマネジメント」・「フルフィルメントCX」メンバーとスタッフがサポート致します。
全国11拠点のDC/FCから、先進RaaSマテハンロボット・RFIDなどと、OMS・WMSとコマースシステムをAPIで連携して、物流・発送代行サービスを「スタートアップ特別限定プラン」から、100億円を超える事業者に最適な分散保管・分散出荷、返品・交換サービスまでを一貫でデザインする「顧客購買後体験」によって、LTVの向上が実現できる「感動物流サービス」を提供中です。物流業界の最新トレンドを盛り込んだお役立ち資料も無料でご提供しています。

Shopify & Shopify Plus ディープダイブ #2　サブスクリプションソリューション

2023年8月1日

D2C EC Shopify Shopify Plus オムニチャネル

Shopify NYSE:SHOP

　などの情報を基に、

E-コマース・D2C・DNVB　オムニチャネルコマース企業にとって、Shopifyが目指しているミッション・バリューを、エコシステムを通じてどのようにサプライされているか、Shopifyだけでなく、これからのコマースビジネスモデルの変化の中で、システムツールとしての、MACH・コンポーザブルアーキテクチャーを選択するべき理由と視点についてDeep Dive深く掘り下げていきます。

Products

をガイダンスするのではなく、創業者、プロダクトマネージャーとして、マネージメント視点からのテクノロジーを選択する視点として、そして、投資家としてみた場合に、Shopifyのマーチャントの成功（グロースハック）を実現するためのサービスになっているかの視点でお届けしていきます。
＊ちょっと専門的です。でも開発者むけではありません。
＊機能解説はこちらで

Shopify Plusストア構築　D2C/オムニチャネルのスケーリングポイント #1 メリット

ShopifyとShopify Plusの比較！

Shopify Plusって？

Section #2 -- サブスクリプションソリューション収益バケット:Subscription Solutions Revenue Bucket

サブスクリプションソリューション：Subscription Solutions　基本:Basics:

サブスクリプションソリューションと呼ばれる Shopify の収益バケットは、ウェブサイトの構築を中心としています。

Shopify Announces Fourth-Quarter and Full-Year 2022 Financial Results

インフラストラクチャのコアは、Ruby on Rails と呼ばれる人気のあるオープンソースプラットフォームを通じて作成されています。

月額$39から月額$ 2,000までの4つの確立された階層があります. 最も安いプランは「Basic」で、続いて「Shopify」「Advanced」「Plus」と続きます。
ごく最近、スタートアップ向けの必要最小限のパッケージとして「ライト」プランを追加し、Shopify によるコマースコンポーネント (CCS：Commerce Components by Shopify) と呼ばれる大規模なエンタープライズ層を追加しました。これについては後述します。Builtwith によると、

Shopify Customers

Get access to data on 6,702,395 websites that are Shopify Customers. We know of 4,392,792 live websites using Shopify and an additional 2,309,603 sites that used Shopify historically and 23,958 websites in Japan.

がいます。

より高価なプランでは、追加のスタッフアカウント、より追跡可能な在庫の場所、および他の製品の大幅な割引のための容量が提供されます。

画像クリックで最新情報へリンクします。

マーチャントストアとそのアーキテクチャを構築するためのサブスクリプション API:Subscription APIs to Build Merchant Stores & their Architecture:

マーチャントが美しくユニークなオンラインストアを利用して、消費者に直接販売 (DTC：日本ではなぜかD2C) できるようにすることで、価値を生み出します。これを強力に促進するのは、一連の Shopify API です。

開発者がマーチャントショップをカスタマイズする方法
面倒な統合作業を回避する方法
アプリを構築する方法
データをクエリ (またはプル) してサイトに情報を入力する方法

などです。API は開発者が実際に Shopify で構築するために使用する必須の手段です。マーチャントにとっては、製品の作成プロセスではなく、完成品のみを見て利用を判断すれば大丈夫です。

Shopify の競合他社はすべて、機能を強化するためにこれらのアプリプログラミングインターフェースに依存しています

差別化ポイントを生み出すのは、Shopify の API ユースケースの多様性です。
在庫、Webhook、およびこのコラムで取り上げる他のすべての製品用に数十個の機能があります。
注目すべきものは、サブスクリプションソリューションの中核となる 2 つの例です。

1 つ目は Storefront API です。
この製品を使用すると、開発者はマーチャントのストアレイアウトにアクセスしてパーソナライズできます。カスタムチェックアウトフローなどを容易にします。Storefront API なら、楽しいデザインと機能性はマーチャントエフェクトです。

重要なのは、Storefront API が Graph Query Language (「GraphQL」) に依存して、データのリアルタイムチャネルを提供することです。これは、店舗が製品の説明を記入し、実用的な運用上の洞察を収集するために、豊富な情報を常に提供していることになります。

モバイルアプリケーション専用の GraphQL を作成して、開発者が必要なデータのみをONLY正確に選択できるようにしました。その厳格さは本質的にコストと複雑さを軽減して、Shopify はそれを活用しています。

スケーラブルなデータクエリがなければ、アプリを効果的に活用することはできません。データがなければ、豪華な Storefront API のデザインは、必要な詳細がすべて欠けている「ただの美しい顔」になってしまいます。

「React」と呼ばれる JavaScript ライブラリ

このような Shopify の GraphQL を利用した API は、「React」と呼ばれる JavaScript ライブラリと一緒に使用されることがよくあります。別のライブラリもありますが、これが最も一般的です。本質的に、React は事前に構築されたリサイクル可能なインターフェース機能を提供して、ストアの設計を促進しています。これにより、開発者は毎回ゼロから始めることなくカスタマイズできます。

2 番目のサブスクリプションに焦点を当てた API は管理 API です。

Storefront API がフロントエンドのカスタマイズを強化するのに対し、Admin API はバックエンドを強化します。React のライブラリにもプラグインしますが、React は通常フロントエンドの調整用であるため、それほど頻繁には使用しません。

Storefront API と同様に、Admin API は GraphQL Web 構築アーキテクチャに多少依存しています。Storefront API とは異なり、Admin API は「RESTful API」と呼ばれる代替構築アプローチを多用しています。
RESTful は Representational State Transfer の略です。これにより、開発者がパラメーターとプロトコルを事前に設定してアプリに入力することで、さまざまなスタイルのデータクエリを実行できます。

Storefront API とは異なり、Admin API を使用すると、開発者はデータを微調整および操作するための完全な機能を使用できます。代理で構築する前に、マーチャントクライアントから必要なアクセス許可を確保する必要があります。ストアフロント API では、入力されたデータを読み取ることはできますが、変更することはできないため、これらは許可されていません。

開発者のアプリとテーマの統合を容易にするために、Shopify は App Bridge API を提供しています。これにより、開発者は、その作業がどこで完了したかに関係なく、Shopify のプラットフォームに自分の作業をスムーズに埋め込むための簡単なプロセスが提供されています。

オンラインストアの構築:Online Store Building:

Shopify 開発者は主に、Shopify developers predominately author store themes through two Liquid と Hydrogen の 2 つのテンプレート言語を使用してストアのテーマを作成します。

Template languages: Liquid and Hydrogen.

開発者が構築に利用できる言語は他にもたくさんありますが、これは Shopify の主なサービスが含まれています。テンプレート言語はストアデザインの構築に使用されます。API は、これらの設計にカスタムユースケースとデータを提供します。どちらも不可欠なものです。

テンプレート言語のハードルはいくつかあります。マーチャントは一般的に、豊富なソフトウェアエンジニアリングの経験やビルダーの大規模なライブラリー技術に精通したコーダーではありません。
開発者は、Shopify のアプリストアを通じて、これらのテクノロジーに精通していないマーチャントに直接販売しています。
これは、アプリのオンボーディングが容易になることで、売上が増加して、開発者が Shopify の構築に集中できるようになることを意味しています。

これに対処するために、Shopify はTo address this reality, Shopify debuted 2022 年にオンラインストア 2.0をリリースしました。

Online Store 2.0 in 2022。この更新の背後には 2 つの主な目的があります。

1 つ目は、レイテンシを助長する冗長なインフラストラクチャを削減することでした。
2 つ目は、マーチャントがコードを作成する必要がある場合に、残りのインスタンスを削除することでした。
言い換えれば、すべてを簡単にすることでした。

オンラインストア 2.0 では

レイアウトが小さなアプリブロックapp blocksに分割され、パズルのピースのようにドラッグアンドドロップできるようになりました。
SquareSpace や Wix などのベンダーは、Shopify が現在行っているこのスタイルのデザインを長い間提供してきました。古い構築モデルでは、このレベルの可鍛性はウェルカムページでのみ利用可能でした。
これよって、ショップ構築をレゴで遊ぶのと同じくらい簡単にすることで、Shopify が起業家精神への障壁を下げる多くの方法の 1 つとなりました。
マーチャントのストレスが減り、Shopify 開発者の成功につながります。それがオンラインストア2.0です。

定義されたアプリブロックApp Blocks Defined:

カスタマイズとユーティリティを強化するためにアプリケーション内で描写されるユースケース。これらは、ビルド済みのコードの上にツールをビルドできるようにすることで、開発者の効率を倍増させています。アプリブロックは、マーチャントがフラッシュセールなどのカスタム特典を追加したり、二酸化炭素排出量で配送オプションをランク付けしたりする方法です。

Metafields と呼ばれるツールでストアレイアウトを作成

Metafields. メタフィールドは、より洗練されたカスタマイズのノーコードレイヤーとして機能します。企業固有の属性レベルで、製品や注文の流れなどを微調整できます。管理者を通じて利用できるデータストレージの量と深さを強化しています。メタフィールドはクエリとカスタマイズをより簡単にし、マーチャントにとって威圧的な機能ではありません。Shopify の利用者はこれを使用して、顧客のショッピング体験を向上させたり、バックオフィス業務をより把握したりします。

Shopify の競合他社では、データとアプリをテーマに手動でハードコーディングする必要がありましたが、統合が面倒でした。それは今では完全になくなりました。

最後に、アップグレードには、ロイヤルティプログラムのオンボーディングやアップセルの自動化などのカスタマイズオプションのロックを解除する新しいカート API が付属しています。

オンラインストア 2.0 には、Dawn と呼ばれる新しいリファレンステーマ (ほとんどのビジネスに適用可能な基本的なテーマ) が含まれています。このテーマは、Debut と呼ばれる前身のテーマよりも 35% 高速に読み込まれるそうです。ここでの、わずか 10% の改善が 7% 高い商人のコンバージョン (Crazy Egg あたり) を促進するため、このメリットは 24.5% 高いコンバージョンを意味しています。1,000 人あたり 245 人の買い物客を忠実な顧客に変えることができれば、マーチャントはどれほど幸せになれるか考えてみてください。これは重要です…とても重要です。

日本のShopifyで詳細を説明しています。こちらをご確認ください。

Shopify Online Store 2.0：開発者にとっての意義

QL ノート:QL Notebooks:

技術的なバックグラウンドに関係なく、親しみやすいカスタマイズというこのテーマに適合するのは、QL ノートブックと呼ばれる GraphQL ツールです。

ノートブックは、クエリされたデータセットをグラフィックの主要業績評価指標 (KPI) の視覚化に変換して、意思決定をより明確にしてくれます。マーチャントが業務から、インサイト：洞察を収集するためのローコードのレコメンデーションツールと考えるのが最も簡単です。

たとえば、T シャツベンダーはこれを使用して、購入意向の高い顧客コホートを発見したり、サイズごとの返品率を調べてフィット感を微調整したり、他のブランドのトレンドを観察して何が流行しているかを把握したりできます。

この機能により、マーチャントは人材を雇って維持することなく、大規模なデータサイエンスチームの作業をエミュレートできます。QL Notebooks はコストを節約し、起業家精神の障壁を下げるもう 1 つの手段であり、技術プロセスを非常にユーザーフレンドリーにします。これにより、あらゆる規模の企業が、エンタープライズレベルのツールを利用できるようになります。Shopify Merchant Rumpl は、QL Notebooks がどれほど驚異的なものであるかを理解するために、これを使用して +39% のショッパーコンバージョンを達成したそうです。

Notebooks の例として、世界最大のスポーツ用品小売業者である Decathlon があります。

QL ノートブックを使用して、データのキャプチャと活用プロセスを完全に自動化しました。以前は、マーチャントの開発者チームは面倒なことに、これらすべてを手作業で行わなければなりませんでした。ノートブックを使用することで、Decathlon はリアルタイムで KPI の傾向を確認し、自動化された方法でパフォーマンスを追跡できるようになりました。

ノートブックを使用しなければ、Google スプレッドシートまたは Excel で抜粋を作成し、ピボットテーブルをいくつか実装して、それを経営陣に提出してコメントを求めていたでしょう。それに関する問題は、それがたった一発だということです。時代遅れです。e コマースブランドとしてのデータマイニングとストーリーテリングのすべてのニーズに特に適合しています。

Liquid vs. Hydrogen テンプレート言語:Liquid vs. Hydrogen Template Languages:

開発者をサポートするために、Shopify が 2 つのテンプレート言語 (Liquid と Hydrogen) をどのように提供しているかについて説明しました。違いは何なのか、なぜ両方が必要なのでしょうか。

Liquid は、Ruby on Rails を利用した Shopify 開発フォーマットです。

作業を迅速化するための前提条件と推奨事項をインテリジェントに表示することで、コマースの設計を容易にする目的で構築されています。アプリの構築を高速化するために利用できるテンプレートもあります。これは、Shopify のパートナーが会社の設立以来使用してきた構築の言語とスタイルです。

新しい選択肢：Hydrogen

Shopify の新しい開発者キットで、Hydrogen is Shopify’s newer developer kit used to power what’s called ヘッドレスコマース（Headless Commerce）と呼ばれるものを強化するために使用されます。
Ruby ではなく Remix と呼ばれる、Shopify が買収したオープンソースの Web 開発言語によって構築されています。Liquid と同じコードなしのカスタマイズを提供しますが、いくつかの重要な違いがあります。

ヘッドレスコマース (Hydrogen を介して利用) 定義:Headless Commerce (utilized through Hydrogen) Defined:

ヘッドレスコマースとは、フロントエンド (消費者がやり取りするもの) とバックエンド (マーチャントが操作を管理するために使用するツール) の分離を意味しています。

ヘッドレスコマースは、独自の要件を持つマーチャントがゼロから構築する必要なく、さらにカスタマイズできるようにする方法です。
これにより、より多くの社内開発者リソースを持つクライアントに、自分が望むものを望む方法で作成する自由が与えられます。Hydrogen は、Shopify が日常的により多くのカスタマイズを必要とする大規模なマーチャントを確保する方法の 1 つです。

ヘッドレスコマース開発の分離は、迅速なユーザーエクスペリエンス (UX) のカスタマイズを意味します。

より構成可能なフロントエンドは、変更がバックエンドに反映されるのを待つ必要がないためです。Shopify は Storefront API をブリッジとして使用してエンド間で変更を伝達して、最終的に正確に反映されるようにします。これで、インターフェイスとバックエンドの開発者チームは、お互いに足を踏み入れることなく並行して作業できます。

フロントエンドは低速なバックエンドの処理要件に縛られないため、分離によりページの読み込みが高速化されます。ストアの編集時にリアルタイムのフロントエンドレンダリングが解放されます。
Shopify が「プログレッシブハイドレーション」と呼んでいるものです。

この形式では、Hydrogen を利用したサイトで買い物をする顧客がフロントエンドのタッチポイントをアクティブにするたびに、Storefront API がその情報を管理者に送信します。顧客がきれいなユーザーインターフェース (UI) を表示することで実現提供しています。

追加された分離レイヤーでは、段階的なストアを強化するためにマーチャントによって使用されます。

最新バージョンの Hydrogen 2 は、React と Remix の組み合わせに基づいて構築されており、開発者エクスペリエンスの向上、パフォーマンスの向上、スタック全体でより高いレベルの生産性と回復力を実現する一連の新しいツールを提供します。Hydrogen 2 の新機能の詳細については、 Shopify のアップデートで確認できます。

Headless と Hydrogen 2 のメリット

ストアのフロントエンドをバックエンドから切り離すことで、マーチャントは設計の柔軟性、パフォーマンスの最適化、読み込み時間の短縮、さらに広範なオムニチャネルのパーソナライゼーションが可能になります。

ヘッドレス化によるメリットとしては、

1. 高度なカスタマイズ性

マーチャントがヘッドレス化を決定する最も一般的な理由は、デザインと機能の両方の点で約束される柔軟性です。カスタマーエクスペリエンスを構築する際は基本的に自由に行うことができ、正確なニーズ/仕様に合わせてゼロから構築し、コンテンツレイヤーを完全に制御できます。さらに、フロントエンドが分離されているため、それをサポートする基盤となるテクノロジーに影響を与えることなく、変更を加えるリスクが少なくなります。これには、別個の CMS など、さまざまなタイプのバックエンドロジックを接続する場合にもメリットがあります。

2. サイトの速度

ヘッドレス化のもう 1 つの一般的な理由は、サイトのパフォーマンスが向上することです。これは直帰率を決定する最も重要な要素の 1 つです (また、Google のアルゴリズムでも指摘されています。パフォーマンスが向上すると、SERP のパフォーマンスも向上します)。最新の Hydrogen は Remix フレームワーク上に構築されており、ここでの主な利点は読み込み時間が大幅に短縮され、より高速でスムーズなコマースエクスペリエンスが得られることです。

3. より広範なオムニチャネルの存在感

顧客は、Web サイトを超えて、プログレッシブ Web アプリ (PWA)、モバイルアプリ、マーケットプレイス、POS、音声検索など、多くのデジタルタッチポイントを通じてブランドと対話することを期待しています。ヘッドレスを使用すると、オムニチャネル機能などのすべてのタッチポイントでコンテンツ、カタログ、ビジネスロジックを再利用できると同時に、制約が少なく、より広範でシームレスなユーザーエクスペリエンスを実現できます。

事例:

ILIA は、Hydrogen を介したヘッドレスコマースを使用して、買い物客の肌の色合いとメイクアップシェードを完全に一致させています。このスタイルのビルドを使用することで、サイトの直帰率が 10% 低下しました。

Bolsは、ページの読み込み時間を遅らせていた異種アプリの統合と回避策を減らしました。それにより、これらのロード時間は 50% 短縮されました。
モバイルアプリで Headless を 30 日以内にリリースしました。非常に満足しており、ソフトウェアエコシステム全体を移行するための複数年にわたる計画に乗り出しています。

Patta & Tommy (Hilfiger) はこれを使用して、帯域幅が急上昇しているにもかかわらず、超高速の読み込み時間でアニメーションと HD ビデオをサイトに追加しました。Hydrogen を使用して、より美しい店舗と低レイテンシーのトレードオフを回避し、買い物客のコンバージョンを高めました。適切なシナリオでは、Headless Hydrogen ビルドは、マーチャントの業務の非常に貴重な部分になる可能性があります。

Hydrogen ストアは、Oxygen と呼ばれる Shopify のバックエンドサーバーを介して実行されます。
Hydrogenは、カスタムビルドなしのカスタマイズを意味します。

Hydrogen: Shopify's headless commerce framework

Shopify は歴史的に、マーチャントのために最初からカスタムビルドすることを拒否してきました。定期的にこれらの要求を拒否し、潜在的なビジネスを放棄しています。Shopifyにとって、カスタムビルドとメンテナンスの収益は、同時に発生する時間と費用のかかるプロセスに見合うものではありません。それは悪いことに良いお金を投げていることになります。
（これは、日本のパッケージ＆SI会社にとっては不幸ですが）

代わりに、同社は、完全なカスタマイズよりも、リアルタイムの構成可能性と市場投入までの速度の方がマーチャントにとって価値があると考えています。これが、企業がShopifyにする前に、他の場所でカスタムビルドを頻繁に使用する理由です。経営陣は、スケールがほぼ不可能なカスタムビルドを「死の宣告」と呼ぶことさえあります。
（Shopifyは、日本、インド、中国からのカスタマイズ要求には対しては、普遍性・利便性がないと判断しています。）

Hydrogenで変わります。この新しいフレームワークにより、Shopify は経済的に合理的な方法で完全なカスタマイズをエミュレートすることにはるかに近づきます。Hydrogen は、Shopify が提供するすべてのツールとインフラストラクチャを組み合わせて、マーチャントが必要とするものに正確に微調整するために、多くの管轄権を備えています。これが、マーチャントがスケーラビリティとほぼ無限の柔軟性という両方の長所を活かす方法となります。
（これは、MACHの思想でもあります。）

ほとんどのマーチャントがまだLiquidを使用している理由

<これはすべて素晴らしいことのように思えますが、なぜすべての商人が Hydrogen を使用して構築しないのでしょうか。

理由
それはより高価だからです。ほとんどの加盟店は、Hydrogen を使用することを正当化するためのカスタマイズのニーズやリソースを持っていません。

Liquidは機能します。Liquid はセットアップが速く、Shopify では、ほとんどのマーチャントにとって十分な適応性を誇っています。

ヘッドレスビルドには、Shopify のアーキテクチャでネイティブにサポートされていない外部コードが含まれているため、サポートが少なくなります。

したがって、Hydrogen を使用してサイトを構築する場合、マーチャントはより多くのことを自分で行うことが必要になります。

次は、コマース運用で一番の問題でもある

Shopify & Shopify Plus ディープダイブ #3　総所有コスト (TCO) の削減

について探求していきます。

Shopify & Shopify Plus ディープダイブ #3　総所有コスト (TCO) の削減

Shopifyは、Eコマース、D2C（直販）、DNVB（デジタルネイティブ・バーチカルブランド）などの企業にとって重要なミッションとバリューを提供しています。特に、Shopify Plusは大規模なマーチャント向けにエンタープライズレベルのサブスクリプションパッケージを提供し、総所有コストを削減し、価値を生み出している。Commerce ComponentsやHydrogenといったツールを提供し、大規模なマーチャントに柔軟性とツールを提供しています。

殿堂入り記事