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

by GO RIDE

Headless Commerceとは?

Headless Commerceとは?

ヘッドレスコマースとは、ECサイトのフロントエンドとバックエンドを切り分け、フロントエンド開発の柔軟化・効率化を実現できる仕組みです。

ストアフロントとバックエンドが切り離されることにより、以下のようなデジタルストアフロントを構築できます。

  • ソーシャルメディア

  • モバイルアプリ

  • スマートミラー

  • セルフサービスキオスク

  • 自動販売機

  • 音声アシストテクノロジー(Amazon Alexaなど)

  • ウェアラブルデバイス


Hydrogenとは?

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

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

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


Hydrogenの特徴

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

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


2.効率的な開発

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

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


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

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

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


比較表

従来のShopifyとHydrogenを比較。フロントエンドもバックエンドもより柔軟なストア構築が可能です。
※Oxygenは、HydrogenをデプロイするためにShopifyが推奨するプラットフォーム。


比較表

Hydrogenを採用した企業

Allbirds


https://www.allbirds.com/

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

Allbirds

Kamp Grizzly


https://denimtears.com/


アーティストでありデザイナーでもあるTremaine Emoryは、自分のアパレルブランド「Denim Tears」のウェブサイトをリニューアルすることを目標としていました。トップページ、詳細ページ、サイト全体にストーリー性を持たせ、没入感のあるサイトにしたいと考えていました。このような表現を実現するために、ヘッドレスコマースでサイトを構築することにしました。HydrogenとOxygenを使用して、インタラクティブでありながらレスポンシブでパフォーマンスの高いサイトを構築。トップページのコラージュ、抽象的なグリッドデザイン、ミュージアム風の商品詳細ページなど、多くの要素をデザイン。

Denim Tears

EC構築から広告運用までワンストップで提供。

WHITEPAPER DOWNLOAD お問い合わせ