今回はShopifyアカデミーの「Introduction to Storefronts」コースで学んだ、Shopifyのストアフロント（＝お店の“見せ方”の部分）についての記録です。
2つの構築方法があるShopifyのストアフロント
Shopifyのストアフロントはトラディショナル ストアフロントとヘッドレス ストアフロントと構築の仕方に2つのアプローチがあります。
トラディショナル ストアフロント
Shopifyが標準提供しているテーマベースのストアで、以下のような利点があります。
- 開発・運用が比較的簡単
- テーマの見た目をカスタマイズ可能
- アプリやテンプレートが豊富（＝エコシステムの強さ）
ヘッドレス ストアフロント
Shopifyはヘッドレスコマースに対応しており、そのアプローチは大きく2つに分けられます。
- Hydrogen＋Oxygen：Shopifyが推奨するヘッドレス構成
- 開発者が選択した独自のテクノロジースタック（例：React＋AWSなど）
Shopifyが推奨するのは、以下のShopifyがサポートしているスタックです：
- Hydrogen：ReactとRemixをベースにしたフロントエンドフレームワーク
- Oxygen：Hydrogen専用のShopifyホスティングサービス
Hydrogen-based storefronts are also hosted by Shopify’s Oxygen, making it the recommended stack for headless commerce.
Hydrogenは特に、パフォーマンス最適化と開発者体験（DX）を重視して設計されていて主な特徴としては以下の3点が挙げられます：
- Built-in caching controls：キャッシュ制御が組み込み済み
- Server-side rendering（SSR）：サーバーサイドレンダリング対応
- React Server Components：より柔軟なUI構成が可能
さらに、Hydrogenにはビジュアルエディター「Utopia」をベースにした新機能も発表予定とのことでした。
どちらのShopifyのストアフロントが適している？選び方の基準
| アプローチ | 向いているケース | 備考 |
| トラディショナル | 小〜中規模ECサイト | Shopifyアプリがそのまま使える |
| ヘッドレス（Hydrogen） | 開発リソースがあり、UX・パフォーマンスにこだわりたい中〜大規模サイト | 一部アプリや機能（例：アナリティクス）は別途実装必要 |
| ヘッドレス（お好みのスタック） | 社内にすでにエンジニアチームがあり独自のテクノロジースタックで開発する大規模サイト | アプリや機能も別途実装必要 |
Shopifyのケーススタディで見つけた日本企業
Shopifyのケーススタディ紹介ページでは日本企業の成功事例も紹介されていました。
中でも印象的だったのは、小嶋陽菜さんのブランドがクリエイティブディレクターをされているHerliptoの紹介記）です。Shopify Plusへの移行後にリピート購入者数：+149%、越境EC売上：+400%という成果が出たそうです。
「Introduction to Storefronts」コースを学んで感じたこと
Hydrogenはとても魅力的で、技術的にもワクワクする仕組みがたくさんありました。
ただしトラディショナルストアに比べると開発者リソースが必要で、アプリ互換やトラッキングの実装など注意点も多いと感じました。
個人や小規模ストアではまずはトラディショナルで始めて、将来的に要件が高くなったらヘッドレスを検討するという流れが現実的かもしれません。
まとめ
今回のモジュールは少し応用寄りの内容だったため、まずはShopifyのシステムの全体のイメージをつかみたいと思っていた私にとっては少し突っ込んだ内容ではありましたが、HydrogenやOxygenといった新しい技術にワクワクできたのは大きな収穫でした。
今後はShopifyの全体像をより正確に掴むために、おすすめラーニングパスである「Marketing Fundamentals」と「Shipping and Fulfillment Fundamentals」から順に学び直していく予定です。
