この記事の前提と対象読者
この記事は、Shopifyでコーポレートサイト、ブランドサイト、サービスサイト、ECサイトのトップページを作りたい事業者や制作担当者向けです。
特に、次のような人を想定しています。
- Shopifyでサイトを作りたいが、管理画面の設定作業に時間を取られたくない
- CodexやClaude Codeに自然言語で制作を依頼したい
- AIで作ったHTML/CSSをShopifyテーマへ反映したい
- Shopify CLIとDawnを使った制作手順を知りたい
- AIで作ったトップページ案を公開品質に近づける進め方を知りたい
この記事は、AIにすべてを丸投げする方法ではありません。
Codex / Claude Codeで制作速度を上げながら、公開できるサイトにするためのルール、確認順序、テーマ反映の流れを整理する記事です。
結論：一発完成より、小さなDesign systemを先に作る方が早い
Codex / Claude Codeを使えば、Shopifyサイト制作の初速は上がります。
自然言語で「こういうトップページにしたい」「このセクションを入れたい」「このHTMLをDawnテーマへ移したい」と伝えるだけでも、構成案、静的HTML/CSS、共通パーツ、テーマ化の作業を進められます。
ただし、一発生成のまま公開できるサイトになるとは考えない方が安全です。
今回の制作でも、最初のトップページ案は画面としては成立していました。必要なセクションも入っていました。それでも、公開に使えるレベルではありませんでした。
理由は、ひとつの大きな不具合ではなく、次のようなズレが少しずつ重なっていたからです。
| 見る場所 | 一発生成でズレやすいこと |
|---|---|
| 色 | AIが決めた色が強すぎる、ブランドの印象と合わない |
| 余白 | セクションごとの密度が揃わない |
| 文字 | 見出し、本文、ボタンのサイズ差が自然ではない |
| CTA | ボタンの重心、文言、目立ち方が安定しない |
| カード | 角丸、枠線、影、余白がページ内で変わる |
| 導線 | どこを押せばよいかが弱くなる |
ここからトップページ全体を何度も「もっと良くして」とAIに戻すと、改善の方向がぶれやすくなります。色を直したつもりがボタンの見え方が変わる。余白を直したつもりがカードの高さが合わない。ファーストビューを整えたつもりが、下部セクションとトーンがずれる。
そのため、今回よかったのは、ページ全体を直し続けるのではなく、先に小さなDesign systemを作ったことです。
色、文字、余白、ボタン、セクションタイトル、カード、リスト、ヘッダーなどを部品ごとに分け、boardとして見比べられるようにしました。そのうえで、決めたルールに沿ってトップページや下層ページを作る進め方に変えました。
AIでShopifyサイト制作を進めるなら、一発完成を狙うより、先にDesign systemを作ってから静的HTML、Dawnテーマ、Shopify CLI確認へ進む方が結果的に早いです。
全体フロー：自然言語、ファイル編集、Shopify CLIで進める
今回の制作では、Shopify管理画面でセクションを追加したり、テーマエディタの設定を触りながら見た目を作る進め方は取りませんでした。
制作の中心は、Codex / Claude Codeへの自然言語指示、ローカルファイル編集、Shopify CLIでの確認です。
| フェーズ | Codex / Claude Codeに依頼すること | 確認すること |
|---|---|---|
| 1. テーマ接続 | Shopify CLIでテーマを扱える状態にする | ストア、権限、テーマ、差分管理 |
| 2. 初期生成 | トップページの静的HTML/CSSを一気に作る | 形として成立しているか |
| 3. 品質判断 | 初期案を公開に使えるか確認する | 色、余白、文字、CTAが揃っているか |
| 4. Design system | 色、文字、余白、ボタン、カードをboard化する | 部品単位で再利用できるか |
| 5. 静的HTML調整 | Design systemに沿ってページを作り直す | 下層ページにも広げられるか |
| 6. テーマ化 | Dawnベースでsections/templates/assetsへ分ける | Shopify構造に自然に乗るか |
| 7. CLI確認 | ローカル確認、差分確認、公開前チェックを行う | 表示崩れ、導線、スマホ表示 |
この流れにすると、依頼の粒度を小さくできます。
トップページ全体を何度も直すのではなく、構成、部品、静的HTML、Dawn反映、公開前チェックを分けて依頼できます。
手順1：Shopify管理画面を触らず、Codex / Claude Codeでテーマを扱える状態にする
最初に、Codex / Claude CodeからShopifyテーマのファイルを扱える状態を作ります。
ここで重要なのは、Codex / Claude CodeがShopify管理画面を代わりにクリックすることではありません。管理画面でデザイン設定を積み上げるのではなく、自然言語で制作意図を伝え、ローカルのテーマファイルを編集し、Shopify CLI経由で確認することです。
Shopify CLIの基本は、公式ドキュメントで確認できます。
制作で使う主なコマンドは、次のようなものです。
| コマンド | 使う場面 |
|---|---|
| shopify theme dev --store {store} | ローカルのテーマを開発用テーマとしてプレビューする |
| shopify theme pull | Shopify側のテーマファイルをローカルへ取得する |
| shopify theme push | ローカルの変更をShopifyテーマへ反映する |
| shopify theme info | 接続中のストアやテーマ情報を確認する |
| shopify theme check | Liquidやテーマ構造の問題を確認する |
細かいShopifyの接続設定は、別の記事でまとめています。まだ設定していない場合は、先にそちらを確認すると進めやすいです。
制作で必要になる準備は、主に次の5つです。
- Shopify CLIでストアと接続する
- Dawnテーマをローカルに用意する
- テーマファイルを編集できるリポジトリを用意する
- Codex / Claude Codeからファイル構造を読めるようにする
- どのファイルを追加し、どのファイルを変更したかを差分で確認できる状態にする
この準備ができると、Codex / Claude Codeに対して次のような依頼ができます。
Dawnテーマをベースに、トップページ用のsectionを追加してください。
共通CSSはassetsに置き、既存のDawn構造を大きく壊さない形で進めてください。
変更するファイルと追加するファイルを分けて提案してください。今回のHP制作では、完成までの工程で管理画面からデザインを組み立てる作業は行っていません。テーマファイルをCodex / Claude Codeと編集し、Shopify CLIで確認する形で進めました。
手順2・3：トップページのたたき台を作り、公開には使えないと判断する
最初は、Codex / Claude Codeにトップページを一気に作らせても構いません。
何もない状態では、初期生成はかなり役に立ちます。サイトのセクション構成、ファーストビュー、サービス紹介、ニュース、FAQ、問い合わせ導線などを短時間で並べられるからです。
実際の制作でも、最初はCodex / Claude Codeに自然言語で依頼しながら、Shopifyトップページ案を作りました。
初期案では、AIが決めたグリーンが強く使われていました。ファーストビュー、サービス説明、CTAなど、トップページに必要な要素は入っています。
画面としては成立しています。ゼロからHTML/CSSを書き、短時間でトップページらしい見た目まで出せる点は、Codex / Claude Codeを使う大きなメリットです。
中盤や下部にも、ニュース、サービス紹介、FAQ、問い合わせ導線が入っていました。
ただし、この段階で見るべきなのは「形が出たか」だけではありません。
公開に使えるか、会社の印象として自然か、問い合わせ導線として信頼できるかを確認する必要があります。
今回の初期案は、たたき台としては十分でした。しかし、公開に使えるレベルではありませんでした。
理由は、ページ全体に一貫したルールがまだなかったからです。
| 確認する場所 | 公開前に見たこと |
|---|---|
| ファーストビュー | 何のサイトか、誰向けか、最初のCTAが分かるか |
| 色 | AIが決めた色が強く出すぎていないか |
| 余白 | セクションごとの密度が揃っているか |
| 文字 | 見出し、本文、注釈、ボタン文字の強弱が自然か |
| ボタン | 押せる要素として一貫して見えるか |
| カード | 角丸、枠線、影、余白がページ内で揃っているか |
| CTA | 問い合わせや相談に進む導線が迷わないか |
| スマホ | PCで成立しているだけでなく、縦長表示でも読みやすいか |
ここからトップページ全体を対象に修正し続けると、どこを直しているのかが曖昧になります。修正範囲も広すぎるため、時間がかかりすぎると判断しました。
そこで、ページ全体を直し続けるのではなく、まず部品単位に分解しました。
手順4：小さなDesign systemを先に作る
Codex / Claude CodeでShopifyサイト制作を進めるなら、最初から大きなDesign systemを作る必要はありません。
まずは、トップページと下層ページで繰り返し使う部品だけを小さく整理します。
今回作ったのは、次のようなboardです。
| Board | 決めること |
|---|---|
| Color Board | ブランドカラー、背景、枠線、アクセント |
| Typography Board | H1、H2、本文、注釈、ボタン文字 |
| Spacing / Layout Board | セクション余白、最大幅、グリッド |
| Button / Link Board | Primary、Secondary、テキストリンク、矢印 |
| Section Title Board | セクション見出し、補足文、ラベル |
| Card / List Board | サービスカード、記事カード、ニュースリスト、FAQ |
| Header / Navigation Board | ヘッダー、ナビ、CTA、スマホ表示 |
部品ごとに並べると、「なんとなく微妙」だった違和感を分解しやすくなります。
たとえば色なら、AIが勝手に決めたグリーンをそのまま広げるのではなく、使う色の範囲を固定します。文字なら、ファーストビューの見出し、セクション見出し、本文、ボタン文字を同じ画面で比較します。
ボタンやリンクも、単体ではなく導線として見ます。
カードやリストは、サービス紹介、記事一覧、ニュース、FAQなど、複数のセクションで繰り返し使います。
カードなら、次の点を確認します。
- 角丸が強すぎないか
- 余白が詰まりすぎていないか
- タイトルと本文のサイズ差が自然か
- 3枚並べたときに高さが揃うか
- 矢印やボタンの位置が重心からずれていないか
ここまで分けると、Codex / Claude Codeへの依頼も具体的になります。
「トップページをもっと良くして」ではなく、「Card / List Boardのサービスカードを使ってサービス一覧を作って」「Section Title Boardの見出しルールに合わせて」「Primary Buttonの余白と矢印を使って」と伝えられます。
手順5：Design systemに沿って静的HTMLで見た目を固める
Design systemを作ったら、すぐにShopifyテーマへ入るのではなく、まず静的HTML/CSSで見た目を固めます。
理由は、見た目の問題とShopifyテーマ構造の問題を分けるためです。
Shopifyテーマに入ると、Liquid、sections、snippets、templates、assetsなどの構造が出てきます。ここでデザイン調整も同時に行うと、問題の原因が分かりにくくなります。
まず静的HTMLで見た目を固めておくと、次の判断がしやすくなります。
- セクションの順番は自然か
- CTAは目立つが、売り込みすぎていないか
- サービス説明はカードで足りるか、一覧表が必要か
- 下層ページにも使える共通パーツになっているか
- PC/SPで情報の流れが崩れないか
静的HTMLの段階では、Codex / Claude Codeに対して次のような依頼がしやすくなります。
このDesign system boardに沿って、トップページの静的HTML/CSSを作ってください。
ボタン、カード、セクションタイトル、余白はboardのルールを優先してください。
Shopifyテーマへ移す前提なので、共通化できるclass名を保ってください。この時点で画面をスクリーンショットで確認し、必要があればDesign system側に戻して調整します。
手順6：DawnをベースにShopifyテーマへ移す
静的HTMLが固まったら、Shopifyテーマへ移します。
今回、テーマの土台にはDawnを使いました。
Dawnは、Shopifyが公開しているreference themeです。
Dawnを使う理由は、ゼロからテーマ構造を考えなくてよいからです。
最小構成のテーマから始めると、自由度は高い一方で、sections、snippets、templates、assetsの分け方を自分で決める必要があります。Codex / Claude Codeに依頼する場合も、前提となる構造が少ないほど、出力の方向がぶれやすくなります。
Dawnをベースにすると、次の点で進めやすくなります。
| Dawnを使う理由 | 制作上のメリット |
|---|---|
| Shopifyの標準的なテーマ構造を持っている | sections、snippets、templates、assetsの役割を説明しやすい |
| 既存のLiquid構成がある | AIに「既存構造を壊さず追加して」と依頼しやすい |
| Online Store 2.0前提で作られている | セクション化、テンプレート化の考え方に乗せやすい |
| 参考にできる実装が多い | エラー時や差分確認時に原因を追いやすい |
| 空のテーマより制約がある | AIが勝手に大きな構造変更をしにくい |
移行の流れは、次のように分けると安全です。
- 共通CSSとデザイントークンをassetsへ移す
- ヘッダーとフッターを共通パーツとして整理する
- トップページ用のsectionsを作る
- template側でsectionの表示順を整理する
- About、サービスページ、お問い合わせ、thanks、privacy policyなどへ展開する
- Shopify CLIでローカル確認しながら調整する
Codex / Claude Codeには、次のように依頼できます。
この静的HTMLのセクションを、Dawnテーマのsectionsとして分割してください。
共通CSSはassets側に寄せてください。
トップページtemplateから読み込める形にしてください。
既存のDawn構造を崩さず、必要なsectionとsnippetだけを追加してください。ここでも、「全部いい感じにテーマ化して」と頼むより、共通CSS、section分割、template反映、確認という単位に分けた方が安定します。
手順7：Shopify CLIで確認しながら反映する
Shopifyテーマへ移したあとは、Shopify CLIでローカル確認しながら進めます。
管理画面で見た目を作るのではなく、テーマファイルを編集し、CLIでプレビューしながら確認します。
確認する項目は、次の通りです。
| 確認項目 | 見ること |
|---|---|
| 表示 | PC/SPで崩れていないか |
| セクション | 表示順、余白、背景、見出しが揃っているか |
| CTA | 問い合わせ導線が自然か、リンクが正しいか |
| 共通パーツ | ヘッダー、フッター、カード、ボタンが使い回せるか |
| 下層ページ | トップページとトーンが揃っているか |
| SEO | title、meta description、canonical、noindex、sitemap対象を確認したか |
Codex / Claude Codeには、確認作業そのものも小さく依頼できます。
Shopify CLIで確認する前提で、公開前チェックリストを作ってください。
PC/SP表示、CTAリンク、meta description、canonical、noindex、sitemap、フォーム導線、画像altを確認対象に入れてください。公開ドメインやDNSの切り替えは、最後に回す方が安全です。
制作中は開発環境で確認し、テーマ、ページ構成、問い合わせ導線、スマホ表示が固まってから本番公開へ進みます。
Codex / Claude Codeに依頼するときのプロンプト例
Shopifyサイト制作では、Codex / Claude Codeへの依頼を大きくしすぎないことが重要です。
使いやすい依頼例をいくつか挙げます。
構成整理
Shopifyでサービスサイト兼ECサイトを作ります。
目的は問い合わせ獲得です。
必要なトップページセクション、下層ページ、CTA導線を整理してください。
管理画面でセクションを手作業で並べるのではなく、Dawnテーマに追加する前提で考えてください。Design system作成
トップページ全体を直接直す前に、小さなDesign system boardを作ります。
Color、Typography、Spacing、Button、Section Title、Card/List、Headerの7つに分けて、
各boardで確認すべきルールとサンプル部品をHTML/CSSで作ってください。静的HTML作成
このDesign system boardに沿って、トップページの静的HTML/CSSを作ってください。
新しい色やボタン表現を勝手に増やさず、boardで定義したclassとルールを優先してください。
後でShopifyテーマへ移せるように、section単位で構造を分けてください。Shopifyテーマ化
この静的HTMLをDawnテーマへ移します。
共通CSSはassetsへ、再利用する部品はsnippetsへ、ページごとの塊はsectionsへ分けてください。
既存Dawnの構造を大きく壊さず、追加するファイルと変更するファイルを分けて提案してください。差分確認
今回の変更で追加したファイル、変更したファイル、確認すべき表示箇所を整理してください。
Shopifyテーマとして不要に大きな変更が入っていないかも確認してください。よくある失敗と避け方
Codex / Claude CodeでShopifyサイト制作を進めるときに起きやすい失敗は、次の通りです。
| 失敗 | 起きること | 避け方 |
|---|---|---|
| 一発完成を期待する | それらしいが公開品質ではない画面になる | 初期案はたたき台と割り切る |
| ページ全体を直し続ける | 修正範囲が曖昧になり、時間がかかる | 先にDesign systemへ分解する |
| 色をAIに任せる | ブランドと合わない色が強く出る | Color Boardで使う色を固定する |
| CTAを後回しにする | 問い合わせ導線が弱くなる | 構成段階でCTAの役割と位置を決める |
| Liquid化とデザイン調整を同時にする | 原因が見た目かテーマ構造か分からない | 静的HTMLで見た目を固めてからテーマ化する |
| Dawn構造を崩しすぎる | 保守しづらいテーマになる | 追加するsection/snippet/assetsを小さく分ける |
| 差分を見ずに進める | どのファイルが変わったか分からなくなる | 追加ファイルと変更ファイルを毎回確認する |
Codex / Claude Codeは、明確なルールに沿ってHTML/CSSやテーマファイルを作るのは得意です。
一方で、会社の印象として自然か、サービスの信頼感が出ているか、CTAが強すぎないかといった確認は、人間が見た方が安全です。
公開前チェックリスト
Shopifyへ反映する前に、最低限次の項目を確認します。
デザイン
- Color Boardで決めた色だけを使っている
- 余白とセクション幅がページ内で揃っている
- ボタン、カード、見出しがDesign systemに沿っている
- PC/SPでCTAやカードが崩れていない
- 画像やロゴが粗く見えない
Shopifyテーマ
- 共通CSSがassetsに整理されている
- section、snippet、templateの責務が分かれている
- Dawnの既存構造を不必要に壊していない
- shopify theme dev などでローカル確認できる
- 本番反映前に差分を確認している
SEO / 公開設定
- titleとH1が一致し、検索意図とずれていない
- meta descriptionがページ内容を正確に説明している
- canonicalが意図通り
- noindexになっていない
- robots.txtやsitemapの対象として問題がない
- 画像altが入っている
CTA / 計測
- 主要CTAの遷移先が正しい
- 無料相談CTAと記事固有CTAのURLを混同していない
- LINE Harnessを使う場合、ref_codeが記事と遷移先単位で整理されている
- HubSpotや問い合わせフォームの場合、LINE Harnessのref_codeではなくcta_idやattribution_codeとして扱っている
よくある質問
Shopify管理画面をまったく触らずに制作できますか？
トップページや下層ページの見た目を作る工程は、管理画面のテーマエディタを触らずに進められます。
今回の制作でも、HPを完成させるまでに管理画面からセクション追加やデザイン設定を行っていません。テーマファイルを編集し、Shopify CLIで確認する形で進めました。
ただし、アカウント、権限、請求、アプリ連携、ストア設定など、Shopify運営上の確認で管理画面を見る場面はあります。この記事で扱っているのは、主にサイト制作とテーマ反映の進め方です。
Codex / Claude Codeだけで公開できるサイトになりますか？
Codex / Claude Codeだけでトップページらしい形までは作れます。
ただし、一発生成のままでは公開に使えるレベルになりにくいです。色、余白、文字、CTA、スマホ表示、ブランド印象、SEO、計測導線を確認する必要があります。
Codex / Claude Codeは制作速度を上げる道具として使い、Design systemと公開前チェックで仕上げるのが現実的です。
Dawn以外のテーマでも同じ流れで進められますか？
基本的な考え方は同じです。
ただし、テーマによってsections、snippets、templates、assetsの構造や既存CSSの作りが違います。Codex / Claude Codeに依頼するときは、使っているテーマの構造を先に読ませてから、追加・変更するファイルを小さく分ける方が安全です。
最初からLiquidで作った方が早いですか？
最終的にはLiquidに移す必要がありますが、最初からLiquid化とデザイン調整を同時に行うと、どこで崩れているのかが分かりにくくなります。
まず静的HTML/CSSで見た目を固め、その後にDawnテーマへ移す方が、Codex / Claude Codeへの依頼も確認作業も分けやすくなります。
まとめ
Codex / Claude CodeでShopifyサイト制作を進めるときは、最初から完成ページを狙うより、Design systemを先に作る方が安定します。
自然言語で依頼すれば、構成案、HTML/CSS、Design system board、Dawnテーマ化、Shopify CLIでの確認まで進められます。
ただし、一発生成のままでは公開品質になりにくいです。
色、余白、文字、ボタン、カード、CTAの見え方は、サイト全体で使うルールとして先に決めておく必要があります。
Codex / Claude Codeに任せるのは、決めたルールに沿って形にする作業です。人間が見るのは、そのルールと仕上がりが自社サイトとして合っているか、問い合わせ導線として自然か、公開して問題ないかです。
この分担ができると、Shopify管理画面で設定を積み上げる制作だけに頼らず、自然言語とShopify CLIを使ってサイト制作を進めやすくなります。