Claude + Shopify MCP——30 時間 100 万トークンで検証した EC ページ自動生成の全記録

2026 年 3 月、E コマースファネルビルダーの Olivier 氏（@oliviercroguy）が X で**「Claude + Shopify MCP の設定ガイドと AI ランディングページの作り方」**を公開した。

i've been testing this for 30+ hours and millions of tokens. at some point you stop counting and just keep going because the results keep getting better.

30 時間以上、100 万トークン以上を費やして検証した結果だ。

本稿はこのガイドの概要、設定手順、そして AI 生成 EC ページの品質を解説する。

Claude + Shopify MCP とは何か

Claude + Shopify MCPは、Claude を Shopify に MCP（Model Context Protocol）接続する仕組みだ。

何ができるのか

商品の読み書き - 商品、価格、在庫の参照と編集
注文の管理 - 注文、フルフィルメント状況の参照と更新
顧客情報の管理 - 顧客情報、注文履歴の参照と更新
ページ・ブログの管理 - ページ、ブログ記事の作成と編集
テーマの編集 - テーマファイルの作成、プレビュー、公開

2 つのツール

ツール	役割
MCP コネクタ	商品、注文、顧客、ページを処理。バックグラウンドで自動実行
Shopify CLI	テーマファイル（セクション、テンプレート、デザイン）を処理

これらを直接管理する必要はない。Claude が裏側で使用する。

設定手順（15 分）

必要なもの

Shopify ストア
Shopify パートナーアカウント（無料）
Node.js（v18+）
Claude Code + ストア用フォルダ
Shopify CLI（テーマ変更に必要）

ステップ 1: Node.js をインストール

Node.js は Claude と Shopify の間のコネクタを実行する。

nodejs.org にアクセス
LTS バージョンをダウンロード
インストーラーを実行し、デフォルトを受け入れる
ターミナルで確認：

node --version

ステップ 2: Claude Code をインストール

npm install -g @anthropic-ai/claude-code

ステップ 3: Shopify CLI をインストール

npm install -g @shopify/cli @shopify/theme

確認：

npx shopify version

ステップ 4: Shopify アプリを作成

Shopify 管理画面 → 設定 → アプリ → アプリを開発 → 「開発ダッシュボードでアプリを構築」をクリック
「アプリを作成」をクリックし、「Claude MCP Integration」などの名前を付ける
アプリ URL を https://example.com に設定（必須フィールドだが Claude は実際に使用しない）
アクセススコープで必要な権限を追加

必要な権限

権限	タイプ	Claude ができること
read_products	読み取り	商品、価格、コレクションを参照
write_products	書き込み	商品を作成・編集
read_orders	読み取り	注文、フルフィルメント状況を参照
write_orders	書き込み	注文を更新、メモを追加
read_customers	読み取り	顧客情報、注文履歴を参照
write_customers	書き込み	顧客レコードを更新
read_content	読み取り	ページ、ブログ記事を参照
write_content	書き込み	ページ、ブログ記事を作成・編集
read_themes	読み取り	テーマファイルを参照
write_themes	書き込み	ストアデザインファイルを編集
read_inventory	読み取り	在庫レベルを確認
read_locations	読み取り	ストア所在地を参照

ステップ 5: プロジェクトフォルダを作成

Claude が作業するフォルダをコンピューター上に作成する。

my-brand/
├── .mcp.json              ← 接続設定
├── CLAUDE.md              ← 必須情報、毎セッション自動読み取り
└── brand/
    ├── design-system.md   ← 色、フォント、間隔、UI ルール
    ├── brand-voice.md     ← トーン、執筆ルール、単語リスト
    └── page-patterns.md   ← ランディングページの構造とレイアウトルール

ステップ 6: Claude を Shopify に接続

.mcp.json をテキストエディターで開き、以下を貼り付ける：

{
  "mcpServers": {
    "shopify": {
      "command": "npx",
      "args": [
        "-y",
        "shopify-mcp",
        "--clientId=YOUR_CLIENT_ID",
        "--clientSecret=YOUR_CLIENT_SECRET",
        "--domain=your-store.myshopify.com"
      ]
    }
  }
}

YOUR_CLIENT_ID、YOUR_CLIENT_SECRET、your-store.myshopify.comを実際の値に置き換える。

ステップ 7: テストする

Claude に以下を入力：

List all my products with prices

商品名、価格、ステータスが表示されるはずだ。

Show my recent orders

注文番号、日付、顧客名が表示されるはずだ。

ステップ 8: ブランドを教える

CLAUDE.mdはチートシートだ。毎セッション自動的に読み取られる必須情報。

brand/ フォルダは完全な参照ライブラリだ。詳細なガイドラインは、Claude が必要に応じて参照する。

ステップ 9: Shopify Liquid スキルをインストール

npx skills add benjaminsehl/liquid-skills

または Claude にインストールするように依頼する。

これは Shopify のプロダクトディレクター Benjamin Sehl 氏によって作成された 3 つのオープンソーススキルファイルだ。

AI 生成 EC ページ：実際に機能するもの

機能しないもの

アプローチ	結果	理由
「ランディングページを再設計して、コンバージョン最適化して」	1/10	Claude のフロントエンドスキルは SaaS/サービス向けで、EC 向けではない
「[商品] ページを再設計して、[URL] からインスピレーションを得て」	3/10	セクションが不足し、参照ページが長いほど出力が悪化
好きなページのスクリーンショット +「このページと全く同じに商品ページを再設計して」	5/10 以下	URL よりも良いが、長いページでは依然として崩れる
「商品用のコンバージョンするリストicle ランディングページを作成して」	使用不可	曖昧すぎる。通常のグラデーションスタイルの AI 生成 UI になる

機能するもの

ルール 1：常に参照を使用する

既存のセクション/ページのスクリーンショット、ビデオ録画を使用する。例なしで最初からページを作成するように Claude に依頼しても機能しない。

リストicle から始める

リストicle は、コードが比較的単純なので、構築が最も簡単なランディングページタイプだ。

アプローチ 1：ベストプラクティスからの詳細プロンプト（デザイン 7/10、コピー 7/10）

3 つの最高のリストicle を見つけて Claude に依頼：

この 3 つのリストicle を良いプラクティスの参照として使用して、最高のリストicle ランディングページを作成するプロンプトを作成してください：コピー、デザイン、構造。

アプローチ 2：複製して適応（デザイン 8/10、コピー 6/10）

好きなリストicle を見つけて Claude に伝える：

このページを正確に liquid で複製して、サイトにライブプッシュしてください。
この方法を使用します：
1. ブラウザ DevTools → ページを完全保存
   （F12 → ネットワークタブ → キャッシュを無効化 → 更新 →
   右クリック → 名前を付けて保存 → ウェブページ、完全）
フッターとヘッダーメニューは無視します。
このページ：[リストicle の URL]

Claude はストアに正確な複製を作成する。

商品ページ/ランディングページ

複雑な商品ページを確実に複製して適応することはまだできない。崩れる。

代わりに機能するのは、参照ページを極端に詳細に分析し、すべての要素の正確な説明を生成し、その説明からページを構築するように Claude に依頼することだ。

最良のアプローチは、セクション単位で作業することだ。

1 つのセクションのスクリーンショットまたはビデオ録画を Claude に渡し、そのセクションを商品に適応して複製するように依頼する。

遅いが、一貫して最良の結果を生み出す。8/10 のページがこの方法で可能だ。

クイック調整は簡単

何か気に入らないことがあれば、ただ言えばいい。

「UGC セクションを成分セクションの下に配置して」
「ヒーローセクションの 10 の見出しを作成して。最良のものを選ぶ」
「CTA ボタンを大きくして、色を [hex] に変更して」

ここでワークフローが速くなる。初期構築には effort がかかるが、反復は瞬時だ。

今後の展望

まだ初期段階で、結果は非常に有望だ。

すぐに 9/10 から 10/10 の EC ページを作成できるようになるだろう。

すでに可能だと思うが、適切なプロンプトとスキルにまだ追いついていないだけだ。

Claude を Shopify と API に接続する可能性は無制限だ。

参考：

引用元・参考リンク

Olivier 氏の X 投稿

Claude + Shopify MCP の設定ガイド

X Articles

Claude + Shopify MCP: The setup guide & how to make ai landing pages

詳細ガイド記事

#Claude #Shopify #MCP #EC #自動生成 #ランディングページ #AI エージェント #e コマース

免責事項 — 掲載情報は執筆時点のものです。料金・機能は変更される場合があります。最新情報は各公式サイトをご確認ください。