Hydrogen - ECサイトのフロントエンド開発効率化を実現するHeadless Commerce とは何？

HydrogenはShopifyをヘッドレスコマースの「ヘッド」としてReactで構築するためのフレームワークです。Shopify Unite 2021 で発表されました。

ShopifyでECサイトのフロントを構築する際、基本的に無料で提供されているテーマや、有料のテーマを選んでストアを構築します。フロントエンド（Liquid）をShopify上で構築すると、Shopifyのサーバー上にストアを構築できます。

前述のようなモバイルアプリなど特別な機能が必要ない場合はそれで十分ですが、高度なCX(カスタマーエクスペリエンス)を提供したい場合にはHydrogenを使用し、顧客に対し高度にパーソナライズされたCXを提供することが可能です。

1. コマースのために作られたプラットフォーム

Hydrogenはコマースのために作られたプラットフォームです。LPやカート、チェックアウトまで完全対応しています。SEOの最適化(サイトマップの自動生成、各ページのメタフィールド値、robots.txt ファイル)はもちろん、ShopifyAPI上で動作し、Shopifyでやりたいことはすぐに実現できます。

2.効率的な開発

Shopify CLIを使用すれば、新規プロジェクトを即時セットアップ。ローカル開発環境で効率的な開発を行うことが可能です。

また、Tailwind, CSS Modules, PostCSS などのCSSライブラリを標準でサポート。組み込みlintingとIntelliSenseエディットサポートにより、コーディングの効率化とエラーを早期に発見することができます。

3.高度なパーソナライズ

Hydrogenを使用することにより、顧客に対して高度なパーソナライズを行うことができます。複数のチャネルで商品を展開したい企業にとっては特にオススメします。

例えば、オンラインサイトで宣伝した商品をモバイルアプリやソーシャルメディアなどでも宣伝することが可能になります。顧客に合わせた細かな宣伝が可能になります。

Allbirds

https://www.allbirds.com/

ウール素材の靴を販売するAllbirds。複数のシルエットを提供し、35カ国以上で販売し、複数のバリエーションのある商品が存在します。商品の品揃えが時間の経過とともに変化する中、商品、異なるカテゴリー、複数のバリエーション、国によって異なる商品の在庫状況をより柔軟に管理する必要がありました。高速なサイト表示を実現しながら、パーソナライズされた顧客体験を拡大する必要がありました。Allbirdsは、店舗や世界中のお客様にサービスを提供し続けるため、ヘッドレスコマースの柔軟性を追求することにしました。
Allbirds は 2020 年に iOS アプリでヘッドレス化を実現。新しい店舗検索機能を構築するために、Hydrogenを試してみることにしました。ドキュメントの見直し、アプローチ計画、コンポーネント構築、分析、そしてテストを経て、チームは3週間半で店舗検索機能をローンチ。次の目標は、商品ページをHydrogenにすること。