18-10
実践：ミニ構成を作り、採用判断書を書く
一覧 → 詳細 → カート → チェックアウトの最小ストアフロントを動かし、クライアント向けの採用判断書を書ける
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、一覧 → 詳細 → カート → チェックアウトの最小ストアフロントを動かし、クライアント向けの採用判断書を書けるようになります。
受託では、動くものと判断書の両方があって初めて、ヘッドレスの提案が通ります。
作るものは4画面
コレクション一覧、商品詳細（バリエーション選択）、カート、チェックアウト遷移の4画面です。
前のトピックのコードを組み合わせます。
1度作れば、工数の感覚がつかめます。
動作確認では何を見るか
開発ストアで、テスト注文まで通します。
Marketsの切り替え、Analyticsが管理画面に反映されること、sitemapとmetaの出力も確認します。
テーマでは自動だったものが、そろっているかを見る作業です。
判断書には何を書くか
要件、テーマ／Web Components／Hydrogenの比較（機能・初期費用・保守・体制・リスク）、推奨案と理由、採用時の前提条件を書きます。
技術ではなく、経営判断として読める文章にします。
判断書は「なぜヘッドレスにしないか」の記録でもあります。
後から「なぜ提案しなかった」と言われないためです。
提案の型はどうするか
「まずテーマで作り、埋め込みが必要な別サイトにはWeb Components」を第一案に置きます。
Hydrogenは、明確な理由がある場合の第二案にします。
ステップ1 / 2
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。