Shopifyの水素と酸素 – 知っておくべきことすべて

昨年、Shopify は、新しいヘッドレス フレームワークである Hydrogen と Oxygen を導入し、ヘッドレス コマースへの取り組みを発表しました。それからほぼ 1 年後、Shopify Editions の導入により、Hydrogen と Oxygen が正式にリリースされました。それに加えて、有名ブランドや進取的な e コマース管理者を魅了する機能強化や更新も行われています。調査の手間を省くために、これまでに入手可能なすべての詳細、更新、ヘッドレス コマースへの影響をまとめました。それでは、詳しく見ていきましょう。

すでに馴染みのあるもの

水素

Shopify Unite 2021で発表されたHydrogenは、開発者にとってよりシンプルでスタイリッシュなヘッドレス設定と、Shopifyストアを操作する顧客にとっての刺激的なショッピング体験を実現するShopifyのソリューションです。Shopifyのこの革新的なフレームワークは、Reactベースの構造を採用しており、サイトの効率性を損なうことなく迅速に構築できる、拡張されたカスタマイズの可能性を備えたカスタマイズされたストアフロントを実現します。

これは商人にとってどのような助けになるのでしょうか?

これまで、eコマース開発チームは、驚異的なサイト速度と精巧に設計されたエクスペリエンスの間でジレンマに陥ることがよくありました。しかし、Hydrogen は、Nosto、Sanity、Contentful、Klaviyo、ReCharge、Okendo、Aloglia などのパートナーを含むさまざまなテクノロジーを統合することで、比類のないサイト パフォーマンスと活気のあるユーザー エクスペリエンスを実現する道を切り開きました。

Shopify と Hydrogen スタックによって強化されたヘッドレス ソリューションへの移行を検討しているお客様に、最高レベルのエクスペリエンスとサポートを提供するために Hydrogen と提携できることを嬉しく思います。当社は、大規模に本物で適切なオンライン コマース エクスペリエンスを構築できるようマーチャントを支援します。

ジム・ロフグレン
ノスト CEO

水素を活用するメリット:

• 初期テンプレート。 Hydrogen を使用すると、開発チームは、事前に組み立てられたデモ ストアを含むエントリー キットにアクセスできるため、開発期間が短縮されます。
• 事前に設計されたコンポーネント。 Hydrogen は開発者向けに事前に設計されたコンポーネントを採用しており、API とのシームレスなやり取りを容易にします。また、このフレームワークは、デフォルトの tail-wind を使用してサイト全体でコンポーネントを再利用する機能も提供します。
• サーバー側レンダリング。 ページ全体を一度に読み込むのではなく、優先順位とユーザーの閲覧アクションに基づいてサイトを段階的に読み込むことができるため、サイトの速度が大幅に向上します**. これはヘッドレスコマース構造の利点であり、Hydrogen に限定されるものではありません。**  
• デフォルトの追い風CSS クラスを更新することなく、PDP などの専用コンポーネントを、ブログ ページなどのサイトのさまざまなセクションで再利用できます。
• SEO勝利に向けた準備。 Hydrogen には、自動生成されたサイトマップ、すべてのページのメタデータ値、適応可能な robots.txt ファイルなどの事前に設定された SEO 拡張機能が含まれます。

考えられる制限事項**:**

• Shopify API に合わせてカスタマイズされています。 Hydrogen は、Shopify API 専用にカスタマイズされています。そのため、そのコンポーネントは、Shopify API の個別のセグメントと密接にリンクされています。さらに、Hydrogen は、モバイル アプリケーションなどの他のカスタム ストアフロントをサポートしておらず、Shopify ストアフロントの構築にのみ使用できます。
• 開発者向けのワークフロー。 Hydrogen フレームワークにはコードが満載されているため、開発チームまたは Shopify Plus 組織がすべてを記述して維持する必要があります。マーケティングや製品などの開発以外の部門には、サイトのフロントエンド層を管理する権限がありません。ただし、このシナリオはヘッドレス セットアップでよく発生します。代わりに、当社のような Shopify Plus 組織と連携して、Hydrogen ストアを長期的に構築および管理したり、社内チームのスキルを向上させたりすることもできます。 これについてさらに詳しく知りたい場合は、お気軽に当社のチームにお問い合わせください。
• アプリケーションの統合。 Shopify には、Hydrogen フレームワークと簡単に統合できる最も人気のあるアプリケーションがいくつかあり、Sanity と Contentful が推奨 CMS の選択肢となっています (これについては後で詳しく説明します)。ただし、互換性のない CMS またはアプリケーションが必要な場合は、ミドルウェアを使用してリンクを個別に管理する必要があります。

酸素

簡単に言うと、Oxygen は Shopify ホスティング プラットフォームとして機能し、Shopify Plus で直接 Hydrogen ストアフロントをホストできます。これは私たちから断然の賛同を得ています。通常、ヘッドレスではフレームワークをホストするためにサードパーティ プラットフォームが必要ですが、Oxygen ではその必要性がなくなります。代わりに、Shopify の Storefront API とシームレスに同期して、複数の異なる Hydrogen ストアフロントをプレビュー、共有、テスト、実験用に配布できます。

Shopify マーチャントへの適応性についてはどうでしょうか? Oxygen は、ブラック フライデーなどの重要なイベントの大量の同時トラフィックにも障害のリスクなく耐えられるように設計されており、世界中に展開すると、優れた国際販売エクスペリエンスを実現します。

2022年の新着情報

Shopifyは2022年6月に、いくつかのアップデートを組み込んだHydrogenを正式に発表しました。以下は、ShopifyがHydrogenとOxygenフレームワークに導入して統合したすべての新しい機能の包括的な概要です。

CMS 推奨協力者

認可された水素と酸素の発売の一部として、 Shopify は CMS ツール Sanity と協力し、投資してきました。 Sanity は、開発者やコンテンツ所有者がゼロから考案できる、完全に柔軟な CMS ツールです。このコラボレーションのために、Sanity のスタッフは、Shopify の Hydrogen & Oxygen に合わせてカスタマイズされたコンテンツ アプリケーション ツールを開発しました。これにより、販売者は、Shopify で製品、バリエーション、コレクションを管理し、フロントエンドを Sanity の CMS と統合することができます。

当社がShopifyと戦略的パートナーシップを結び、ShopifyがSanityに多額の投資を行ったことをお知らせできることを嬉しく思います。両社は協力して、ヘッドレス製品間の統合を合理化し、卓越した体験を提供したいブランドに比類のない可能性をもたらします。これは、当社の技術の進歩と、eコマースの将来にとってコンテンツが持つ戦略的重要性を証明するものです。当社は、Shopifyがコンテンツ プラットフォームに投資した唯一の企業です。

マグナス・ヒルスタッド
Sanity.ioのCEO兼共同創設者

Contentful も、推奨 CMS パートナーとして指定されています。Contentful は現在提供されている CMS テクノロジーの中で最も急速に成長しているものの 1 つであるため、Hydrogen & Oxygen の初回リリースの推奨プロバイダーとして選ばれたのも当然です。同社の API ファーストのアプローチは、記事や製品の詳細など、ブランド コンテンツを製品を販売するあらゆる場所に配信し、リアルタイムで正確に翻訳および更新できることを意味します。Hydrogen & Oxygen を Contentful などの推奨パートナーと併用すると、次のようなメリットがあります。

あらゆるブランドに対応した豊富な品揃え。

代替の CMS オプションをヘッドレス スタックに統合できることは重要です。ただし、現時点ではカスタム統合が必要であり、Sanity や Contentful を使用する場合に比べて時間がかかる可能性があります。

Shopify API のアップデート

Hydrogen が大々的に宣伝される中、Shopify は新しいフレームワークに対応するために API を強化しました。これまでのところ、ストアフロント API はサーバー側アプリケーションには適していませんでした。販売者にとっては、レート制限に達してサイトの全体的な機能に影響が出る可能性があります。このアップデートにより、サーバーが販売者に代わって制限に遭遇することなくリクエストを行えるようになり、以前はリスクがあると考えられていたサーバー側の操作が可能になります。

アプリの統合

2021年にShopifyが初めてHydrogen & Oxygenを導入したとき、アプリの統合に関して懸念がありました。Shopifyは広範なアプリストアを誇り、いくつかの人気アプリはマーチャントのテクノロジースタックの必須コンポーネントとなっています。しかし、これらのアプリのAPI統合がなければ、ミドルウェアが唯一の選択肢のように思われました。幸いなことに、Shopifyは現在、Hydrogenへのシームレスな統合が最初から準備されている重要なテクノロジースタックコンポーネントのリストを公開しており、マーチャントがお気に入りのテクノロジーソリューションを維持できるようにしています。

Hydrogen & Recharge で顧客のサブスクリプション エクスペリエンスを強化しましょう。Shopify のマーチャント向けヘッドレス サービスと互換性のある最初のサブスクリプション アプリになれたことを嬉しく思います。私たちは協力して、開発者にカスタム サブスクリプション サービスを作成する柔軟性と自由を提供します。

ライアン・フォースター
パートナーシップ マネージャー EMEA、Recharge

Klaviyo は、70% を超える Shopify Plus ブランドと連携し、新しいテクノロジーを採用してサポートする必要性を認識しています。そのため、私たちは Hydrogen リリースに参加し、ロールアウトの準備ができ、ロールアウトに専念している数少ないパートナーの 1 つとなることを嬉しく思っています。

マイケル・ワースリー
Klaviyo シニアマネージャー兼ソリューションアーキテクト

電子商取引の将来への影響…

昨年の Hydrogen & Oxygen の発表と今回の公式リリース以来、ヘッドレス アーキテクチャが e コマースの未来であり、その先頭に立つのが Shopify であることがますます明らかになっています。Shopify はブランドの障壁を排除してきた実績があり、Hydrogen & Oxygen も例外ではありません。今回のリリースにより、ヘッドレスの適用範囲が、高収益で広範な顧客基盤を持つ業者だけでなく、より幅広い業者に広がります。ブランドにとって、ヘッドレス (特にヘッドレス フレームワークとしての Hydrogen) を採用することは、変化する需要に迅速に適応し、コンバージョン率を向上させるための新しい手段となります。顧客にとっては、お気に入りのストアからのより高速で充実した体験が標準になりつつあります。

Hydrogen は、Shopify と緊密に統合されたまま、多くのヘッドレスの利点を提供します。さらに、Shopify の最新のホスティング サービスである Oxygen を使用すると、インフラストラクチャを気にすることなく、数百万のユーザーまで拡張し、運用コストを削減し、市場投入までの時間を短縮できます。

ユアン・マック
Shopifyエンジニア、Tenten

Hydrogen は、React Server Components の使用が React のロードマップを導くため、Web の技術的な将来においても重要な役割を果たします。この進化により、開発者や代理店は実践を強化し、モノリシック アーキテクチャから脱却し、パフォーマンスと設計の自由度を向上させて開発を合理化し、オンライン ショッピング ジャーニーのパーソナライゼーションを簡素化できるようになります。

どのヘッドレス フレームワークが「最も適切」であると判断するかに関係なく、大手プラットフォームの Shopify がヘッドレスへの道に投資し、それをマーチャント向けに公開することは、ブランドが将来的に電子商取引プラットフォームの構築に取り組む方法に直接影響を与えることは明らかです。