ShopifyとmicroCMSを使用してヘッドレスコマースを作った話
はじめに
WoocommerceからShopifyに移行してリニューアルするプロジェクトに参加し（開発は自分一人）、無事リリースしました。
リニューアルはHydrogen(Remix), Shopify, microCMSを使用しました。
いわゆるヘッドレスコマース・ヘッドレスCMSと呼ばれる形です。
この構成はあまり情報が無かったので、解説や良かった点悪かった点など記していくのでどなたかのご参考になればと思います
プロジェクトの背景
以下の特徴を持ったECサイトのリニューアル
- ファッション系
- インスタのフォロワー数もx万
- 実店舗も複数ある
- 利用者もそれなりに多いサービス
このようなECサイトをリニューアルし、Shopifyにすることで規模を大きくしつつ、ブランディングを表現し、運用も効率化したいという目的がありました。
筆者について
メインはサーバーサイドですが、フロントもやっているソフトウェアエンジニアです。
過去にShopifyのストアをいくつか立ち上げたことがあるということもあり、お手伝いすることになりました。
構成
今回の作成したECサイトの構成はこのようになります。
- フロント
- Hydrogen(Remix)
- Shopifyが作成したRemixアプリ
- Remixをベースにしていて、Shopifyに必要なユーティリティやコンポーネントなどの機能を提供してくれる
- Remixなのでサーバーサイドレンダリングができる
- Hydrogen(Remix)
- データストア
- Shopify
- microCMS
- ホスティング
- Oxygen(Shopify)
- Shopifyのサーバーレスホスティングプラットフォーム
- Hydrogenをエッジにデプロイするために構築されている
- Cloudflare Workersを使用している
Hydrogenの公式サイト
この構成にした理由
本来であればShopifyはLiquidというテンプレートエンジンを使用して、テーマを作成・既存のテーマをカスタマイズしてストアを作成するのが一般的です。
しかし、このプロジェクトでは以下の理由からこの構成にしました。
- ブランディングを表現したい
- microCMS
- シーズンごとにLook bookを作る必要があった
- 記事中に商品を埋め込んだり、スライドを使いたくShopifyの記事機能だと難しいと判断
- 柔軟に表現できるCMSが必要だった
- スキーマの種類が豊富
- データはAPIで取得できる
- 国産のCMSである
- サポート時も日本語でやりやすい
- シーズンごとにLook bookを作る必要があった
- 運用者側でレイアウトを変えない
- インフラのコストがかからない
- リニューアル後も運用保守で関わらせてもらう
- 継続して開発をする
- 自分が関わらないとなってもフロントエンジニアがいれば開発できる
- Liquidを使いたくなかった
- 何度かLiquidでストアを作った経験があるが、開発やメンテがしんどいと感じた
- react使いたかった
- コンポーネントに切り出しやすい
- ステート管理
- reactで使われているライブラリも使用できて便利
Liquidを使うより、ヘッドレス構成にしたほうが実運用も開発・メンテもしやすいし、メリットが大きいと判断しました。
その他にも、公式でもいくつかHydrogenのサイトが載っていたり、YAMAP STOREさんがShopifyとmicroCMSを使用している事例があったのも決め手の一つです。
ECの機能
- 基本的なECサイトの機能
- 商品ページ
- 商品検索
- カート
- FAQ
- お問い合わせ
- 会員機能（登録・認証）
- マイページ
- 規約
- など
- 多言語化
- シーズンごとのLook book
- コンテンツの合間に商品やコレクションをを埋め込む
- LP
- コンテンツの合間に商品やコレクションをを埋め込む
作ってみて
メリット・良かった点
主に開発時の観点になりますが、以下のように感じました。
- 開発しやすい
- 普段のソフトウェア開発と同じ
- ShopifyもmicroCMSもドキュメントがしっかり整備されているので詰まっても解決しやすい
- ShopifyのデータはGraphQLで取得できるので、使いたいデータのみ取得できる
- microCMS, Shopify両方でキャッシュを聞かせられるので表示速度が速いｊ
- デプロイや追加で環境作るの簡単
- 検証環境も見るの簡単
- Remixで柔軟に開発できる
- React
- コンポーネントに切り出しやすい
- ステート管理
- Reactのエコシステム・ライブラリも充実していて便利
- 商品のオプション設定するとか
- 会員登録時に項目を増やすとか
- アニメーションとか
- デプロイ・リリースが簡単
- GithubでマージすればGithub Actionsでデプロイされる
- ヘッドレスにしても決済はShopifyが担ってくれる
Remixを使ったのが初めてでしたが、とても開発がしやすかったです。
Liquidで強引に実装してた部分が、Reactで柔軟に実装できるのも良い。
デメリット
- Shopifyのストアでよしなにやってくれるところを自分でやる必要がある
- SEO周りの対応
- metaの設定
- サイトマップの設定
- ogp
- 構造化マークアップ
- 商品プレビュー環境を自分で用意しないといけない
- プレビュー用のAPIと販売チャネルを追加して、プレビュー用の販売チャネルに対して商品を公開して確認するよう運用にしました
- ShopifyのStorefront APIだけでは賄えないことがある
- 規約が全部取得できないとか
- ShopifyアプリがAPIに対応していないと使えない
- SEO周りの対応
ここらへんはShopifyのストアだと整備されていて特に設定など不要で使えますが、ヘッドレスにすると自分でやらないといけない部分が多くなるので、その辺りのコストがかかります。
SEO周りに関してははこれまで実装経験があったので特に問題なかったですが、経験が無いとしっかり整備するのは大変だなという印象を受けました。
アプリも注意が必要です。基本的にAPIに対応していないことが多いので、何か必要な場合は自作する必要があります。
お気に入りはAPIに対応しているアプリがあったのでそれを使いましたが、商品のオプションやギフト設定、配送指定などはヘッドレスに対応しているアプリが無かったので自分で対応しました。ここが想像していたより大変でした。
終わりに
開発が一人というのと、使える時間が少ないかつスケジュールが短いという個人的な事情もありましたが、この構成で無事リリースでき、良い評価もいただいたのでとても良かったです。
Reactで多言語対応をしたのは初めてで苦戦した部分もありましたが、そのあたりは別途記事にする予定です。
リリースはしましたが、運用を続けるとこの構成でのメリット・デメリットも変わってくると思うので、そういう部分もいずれ記事にしたいです。
Shopifyのストアを立ち上げる際に、ヘッドレスにするかどうかで迷っている方の参考になればと思います。
では👋！
Discussion