水素を使用したヘッドレス Shopify: 高性能のカスタム ストアフロントを構築

ヘッドレス コマースは、フロントエンドのプレゼンテーション層をバックエンドのコマース エンジンから切り離します。 Shopify Hydrogen は、Storefront API を通じて Shopify のバックエンドに接続するカスタム ストアフロントを構築するための公式フレームワークです。 Remix (React ベースのフルスタック フレームワーク) 上に構築された Hydrogen は、Shopify のカート、チェックアウト、顧客管理インフラストラクチャを活用しながら開発を加速するコマース固有のコンポーネント、フック、ユーティリティを提供します。このガイドでは、アーキテクチャの決定から展開までのすべてを説明します。

重要なポイント

• Hydrogen は、最適なサーバー側レンダリング パフォーマンスを実現する React Server Components を使用した Remix 上に構築されています
• Storefront API は、製品、コレクション、コンテンツへの読み取りアクセスを提供します。 Customer Account API が認証を処理します
• コマース コンポーネント (ProductPrice、CartForm、AddToCartButton) は完全にカスタマイズ可能なままで定型文を排除します
• Oxygen ホスティングは、自動スケーリングを備えた Hydrogen 用に最適化されたエッジ展開インフラストラクチャを提供します
• Shopify Liquid テーマと比較して、Largest Contentful Paint では通常 30 ～ 50% のパフォーマンス向上

ヘッドレスにする場合

水素を選択する場合

• あなたのブランドには、Liquid テーマの機能を超えるカスタム デザインが必要です
• ヘッドレス CMS (Contentful、Sanity、Strapi) からコンテンツを統合する必要があります。
• パフォーマンスは競争上の重要な差別化要因です (1 秒未満のページ読み込み)
• フロントエンド チームは React と最新の JavaScript ツールを好みます
• プログレッシブ ウェブ アプリ (PWA) エクスペリエンスが必要です
• Web、モバイル、その他のチャネル間でコンポーネントを共有したい

次の場合は Liquid テーマを使い続ける

• 既存のテーマをカスタマイズして設計要件を満たします
• 継続的なメンテナンスのためのフロントエンド開発リソースが不足している
• 技術者以外のユーザーには、Shopify 管理テーマエディターの完全なエクスペリエンスが必要です
• 予算がカスタム フロントエンドの開発とホスティングをサポートしていない

アーキテクチャの概要

水素の仕組み

水素のアーキテクチャは次のもので構成されます。

Remix (フルスタック フレームワーク): ルーティング、サーバー側レンダリング、データ読み込み、フォーム処理を処理します。各ルートは、loader 関数 (サーバー上で実行) とコンポーネント (クライアント上でレンダリング) を定義します。

Storefront API (GraphQL): 製品情報、コレクション、検索、コンテンツの主要なデータ ソース。すべての製品データは、データベースに直接アクセスするのではなく、この API を介して流れます。

顧客アカウント API: 顧客認証、注文履歴、アカウント管理を処理します。この API は、Shopify にネイティブなパスワードなしの認証フローを提供します。

Cart API: ショッピング カートをサーバー側の状態で管理します。カート操作 (追加、更新、削除) には、Shopify のカート インフラストラクチャが使用されます。

チェックアウト: Shopify がホストするチェックアウト (チェックアウトの拡張性)。ヘッドレス ストアフロントは、支払い処理、発送、注文の作成を処理する Shopify のチェックアウトにリダイレクトされます。

データフロー

プロジェクトのセットアップ

水素プロジェクトの作成

Shopify CLI を使用して、新しい Hydrogen プロジェクトを足場にします。

npx shopify hydrogen init を使用して Shopify Hydrogen CLI を実行して、新しいプロジェクトを作成します。 CLI では次のプロンプトが表示されます。

1. プロジェクト名: ストアフロント名
2. テンプレート: スケルトン (最小限)、デモ ストア (完全な例)、またはカスタム
3. 言語: TypeScript (推奨) または JavaScript
4. スタイリング: Tailwind CSS、CSS モジュール、またはバニラ CSS
5. ストアフロント API 認証情報: ストア ドメインと API トークン

プロジェクトの構造

Hydrogen プロジェクトは、Remix 規則に従います。

ストアフロント API 接続

hydrogen.config.ts で Storefront API 接続を構成します。

• ストア ドメイン: myshopify.com ドメイン
• ストアフロント API トークン: パブリック アクセス トークン (クライアント側で安全に使用できます)
• API バージョン: Storefront API バージョン (例: 2026-01)
• デフォルトの国/言語: ローカライズされた価格とコンテンツ用

コアページの構築

製品リストページ

コレクション ページは、loader 関数を使用して Storefront API から商品を取得します。

ローダー関数は、URL パラメーターからコレクション ハンドルを受け取り、ページネーション (最初の N 製品) を使用して Storefront API にクエリを実行し、コレクション データを返します。このコンポーネントは、画像、タイトル、価格、バリエーション情報を含むレスポンシブな製品グリッドをレンダリングします。

主な考慮事項:

• ページネーション: カーソルベースのページネーションを使用します (Storefront API はリレー形式の接続を使用します)
• フィルタリング: 製品クエリの filters 引数を介してフィルタを適用します。
• 並べ替え: 価格、タイトル、ベストセラー、および関連性の並べ替えをサポートします。
• 無限スクロールまたは「さらに読み込む」: ページ全体をリロードせずに追加のページを取得します

製品詳細ページ

製品ページは、すべてのバリアント、画像、メタフィールドを含む単一の製品を取得します。

ローダーは、価格設定のあるバリアント、画像 (レスポンシブ サイズ)、および拡張製品情報を含むメタフィールドを含む、ハンドルによって製品をクエリします。このコンポーネントは、画像ギャラリー、バリアント セレクター、価格表示、およびカートに追加ボタンをレンダリングします。

カートの実装

Hydrogen は、CartForm コンポーネントを通じてカート ユーティリティを提供します。

CartForm は、カート操作 (追加、更新、削除) を JavaScript なしで機能するフォーム送信としてラップします (プログレッシブ拡張)。カートの状態はサーバー側で Shopify のカート インフラストラクチャに保存され、タブとデバイス間で一貫性が確保されます。

カートの操作:

パフォーマンスの最適化

サーバーサイドレンダリング

Hydrogen は、Remix のストリーミング SSR を利用して、高速の最初のバイトまでの時間 (TTFB) を実現します。

• ストリーミング: サーバーは HTML シェルをすぐに送信し、データのロード時に動的コンテンツをストリーミングします。
• キャッシュ ヘッダー: CDN キャッシュ用にルートごとに Cache-Control ヘッダーを設定します
• Stale-while-revalidate: バックグラウンドで更新しながら、キャッシュされたコンテンツをすぐに提供します

画像の最適化

最適化された画像には、@shopify/hydrogen の Image コンポーネントを使用します。

• レスポンシブ画像の自動 srcset 生成
• ブラウザのサポートに基づいた WebP/AVIF 形式の配信
• スクロールせずに見える画像の遅延読み込み
• 読み込み中にプレースホルダーがぼやけた画像

コード分割

リミックスはルートごとに自動的にコード分割されます。追加の最適化:

• 重いコンポーネントには動的インポートを使用します (画像ギャラリー、3D ビューア)
• ページの読み込み後にサードパーティのスクリプト (分析、チャット ウィジェット) を遅延読み込みする
• React サーバー コンポーネントを使用してクライアント側の JavaScript を最小限に抑える

パフォーマンスのベンチマーク

液体テーマと比較した一般的な水素のパフォーマンス:

Oxygen を使用したデプロイメント

酸素とは何ですか?

Oxygen は、Hydrogen ストアフロント専用に構築された Shopify のホスティング プラットフォームです。以下を使用してグローバル エッジ ネットワークに展開されます。

• トラフィックに基づいた自動スケーリング
• 組み込みの DDoS 保護機能
• SSL/TLS証明書管理
• GitHub との CI/CD 統合
• 環境変数の管理
• プル リクエストのデプロイメントをプレビューする

導入プロセス

1. Shopify 管理者経由で GitHub リポジトリを Oxygen に接続します
2. メイン ブランチへのプッシュにより自動デプロイメントがトリガーされます
3. プル リクエストによりテスト用のプレビュー URL が生成されます 4.環境変数はShopify管理者を通じて管理されます
4. カスタム ドメインは DNS CNAME レコードを使用して構成されます

代替ホスティング

Oxygen は Hydrogen 用に最適化されていますが、Node.js と互換性のある任意のホスティングにデプロイできます。

• Vercel: エッジ機能による優れたリミックスサポート
• Cloudflare Workers: Workers ランタイムを使用したエッジ展開
• Fly.io: グローバル分散によるコンテナベースの展開
• AWS: ECS、Lambda、または App Runner のデプロイメント

ヘッドレス CMS 統合

コンテンツアーキテクチャ

Hydrogen のストアフロントは通常、製品以外のコンテンツ用のヘッドレス CMS プラットフォームと統合されています。

一般的な CMS 統合

• Sanity: Hydrogen に組み込まれた Sanity Studio によるリアルタイム プレビュー
• コンテンツ充実: GraphQL API とコンテンツ モデリングの統合
• Strapi: REST または GraphQL API を使用したセルフホスト型オプション
• Shopify メタオブジェクト: より単純な要件のためのネイティブ Shopify コンテンツ

ヘッドレスストアフロントの SEO

重要な SEO の実装

• サーバー側レンダリング: すべてのコンテンツは検索エンジン クローラーのためにサーバー上でレンダリングされます。
• メタ タグ: タイトル、説明、Open Graph タグには Remix の meta エクスポートを使用します。
• 構造化データ: 製品、パンくずリスト、および組織の JSON-LD スキーマ
• サイトマップ: Storefront API データから動的に生成
• 正規 URL: バリアントおよびコレクション間での重複コンテンツを防止します。
• Hreflang: 多言語の Markets Pro 店舗向けに実装します。

ECOSIRE水素サービス

ヘッドレス Shopify ストアフロントを構築するには、コマース戦略とともにフロントエンド開発の専門知識が必要です。 ECOSIRE の Shopify カスタム テーマ開発 チームは、コンセプトから発売まで Hydrogen ストアフロントを構築します。当社の 速度最適化サービス は、ヘッドレス ストアフロントが Core Web Vitals の目標を確実に満たすことを保証し、当社の 継続的なサポート は、Shopify プラットフォームの進歩に合わせてストアフロントを維持し、進化させます。

関連書籍

• 水素を使用した Shopify ヘッドレスコマース
• Shopify API 統合ガイド
• Shopify ページ速度最適化ガイド
• Shopify アプリ開発ガイド
• Shopify テーマカスタマイズガイド

Hydrogen でヘッドレス化するということは、Shopify のテーマ エディターを失うことを意味しますか?

はい。 Hydrogen ストアフロントでは Shopify テーマ エディターを使用しません。コンテンツを変更するには、コードを更新するか、視覚的な編集エクスペリエンスを提供するヘッドレス CMS との統合が必要です。これは、ヘッドレス アーキテクチャの主なトレードオフです。コードなしの編集エクスペリエンスを犠牲にして、フロントエンドの柔軟性を最大限に高めます。

Shopify ストアの一部にのみ Hydrogen を使用できますか?

直接ではありません --- 水素はフロントエンド全体を置き換えます。ただし、ハイブリッド アプローチを使用することもできます。つまり、メイン サイトで Hydrogen ストアフロントを実行し、支払いフローで Shopify ホスト型チェックアウトを使用します (これが標準的なアプローチです)。一部の販売者は、カタログの Liquid テーマを維持しながら、マーケティング ページに Hydrogen を使用しています。

Liquid テーマと比較した Hydrogen ストアフロントの開発コストはどれくらいですか?

カスタム Hydrogen ビルドは、React 開発要件とインフラストラクチャ設定のため、通常、カスタム Liquid テーマよりも 2 ～ 5 倍のコストがかかります。ただし、継続的なイテレーション速度は React の経験があるチームの方が速く、パフォーマンス上の利点は、投資に見合った目に見えるコンバージョンの改善につながります。