Shopify AI Toolkitでブログ記事をClaude Codeから自動投稿してみた【環境構築から実践まで】

この記事の登場キャラクター
🙋‍♀️ はるのみ — Shopifyテーマ開発者。新しいツールはまず試してみるタイプ。
🤖 コードくん — はるのみの相棒のコードマスコット。技術的なことをやさしく解説してくれる。

はじめに

2026年4月9日、ShopifyがAI Toolkitを正式に発表しました。Claude Code・Cursor・VS Codeなどのツールから、Shopifyストアを直接操作できるようになるという大型アップデートです。

🙋‍♀️「管理画面を開かなくてもブログ投稿できるってこと…？試してみたい！」

🤖「やってみよう！ 結論から言うと、Notionの素案をClaude Code経由でShopifyブログに下書き投稿するところまで、ターミナルだけで完結できたよ。」

この記事では、Shopifyテーマ開発者の視点から、AI Toolkitの導入手順とブログ記事投稿を実践した流れをまとめます。「AI Toolkitって何ができるの？」「導入って難しい？」と感じている方の参考になれば嬉しいです。

Shopify AI Toolkitとは

🙋‍♀️「そもそもAI Toolkitって何なの？ ざっくり教えて。」

🤖「たとえ話で説明するね。今までのShopify管理画面はお店のレジカウンターだったんだ。商品を登録するにも、ブログを書くにも、必ずカウンターまで歩いていく必要があった。」

🙋‍♀️「うんうん、毎回ログインしてポチポチ…って感じだよね。」

🤖「AI Toolkitは、そのカウンターに電話回線を引いたようなもの。自分のデスク（ターミナル）から電話一本で『ブログ記事を下書きで入れておいて』とお願いできるようになったんだよ。」

🙋‍♀️「なるほど！ わざわざカウンターまで行かなくてよくなるんだ。」

できること

AI Toolkitには16種類のスキルが用意されています。主なものを紹介します。

🤖「テーマ開発者にとって特に嬉しいのは、shopify-liquidとshopify-admin-executionの2つ。Liquidの相談をしながらコードが書けて、管理画面を開かずにデータ操作もできるんだ。」

環境準備

1. Shopify CLIのアップデート

🙋‍♀️「さっそく使ってみよう！ …と思ったんだけど、いきなりつまずいたんだよね。」

🤖「何があったの？」

🙋‍♀️「AI Toolkitのshopify store executeってコマンドを使いたかったんだけど、『そんなコマンドないよ』って怒られた…。」

🤖「それはShopify CLIのバージョンが古いのが原因だよ。shopify store executeはCLI 3.93以上で追加された機能なんだ。まずバージョンを確認してみよう。」

# バージョン確認
shopify version
# → 3.79.0（古い！）

🙋‍♀️「3.79だった…。どうやってアップデートするの？」

🤖「まずどの方法でインストールしたかを確認するのが大事。Homebrewとnpmでは更新コマンドが違うからね。」

# インストール元を確認
which shopify
# → /opt/homebrew/bin/shopify ← Homebrewだ！

# Homebrewの場合
brew upgrade shopify-cli

# npmの場合
npm install -g @shopify/cli@latest

🙋‍♀️「私はHomebrewだった。brew upgradeしたら3.93.2になったよ！」

⚠️ つまずきポイント： npmでnpm install -g @shopify/cli@latestを実行したら、Homebrewの既存ファイルと競合してエラーになることがあります。which shopifyでインストール元を確認して、同じパッケージマネージャーで更新しましょう。

2. AI Toolkitプラグインのインストール

🤖「次に、Claude CodeにAI Toolkitのプラグインをインストールするよ。これは1行で終わる。」

claude plugin install shopify-ai-toolkit

🙋‍♀️「これだけ？」

🤖「これだけ。16個のスキルが全部使えるようになるよ。しかもどのディレクトリでClaude Codeを起動しても有効だから、プロジェクトごとにインストールし直す必要もなし。」

3. ストアとの認証

🙋‍♀️「ここが一番わかりにくかったところ。」

🤖「うん、初めての人にはちょっと戸惑うよね。でもやることはシンプルで、CLIとストアをつなぐ鍵を発行するだけなんだ。」

shopify store auth --store あなたのストア.myshopify.com --scopes read_content,write_content

🙋‍♀️「実行したらブラウザが開いて、なんかアプリのインストール画面が出てきたんだけど…。」

🤖「shopify-cli-connector-app っていうShopify公式アプリだよ。CLIからストアのAPIにアクセスするための『鍵』みたいなもの。無料で、請求は一切発生しないから安心して『承認する』を押して大丈夫。」

🙋‍♀️「なるほど、公式アプリなんだね。それなら安心。」

⚠️ つまずきポイント①： --scopesにはやりたい操作に必要な権限を指定します。ブログ記事を投稿するならwrite_contentが必須です。最初にread_contentだけで認証すると、投稿時にエラーになります。

⚠️ つまずきポイント②： 認証コマンドを途中で中断して再実行すると、「ポートが使用中」というエラーが出ることがあります。少し待ってから再実行すれば解決します。

実践：ブログ記事をClaude Codeから投稿する

ステップ1：ブログ一覧の確認

🤖「まず、ストアにどんなブログがあるか確認しよう。」

shopify store execute \
  --store あなたのストア.myshopify.com \
  --query 'query { blogs(first: 10) { nodes { id title handle } } }'

🙋‍♀️「おお、ちゃんとブログの名前とIDが返ってきた！ 私のストアには『ニュース』と『実装記録』と『Works』の3つがあるみたい。」

🤖「今回は『実装記録』ブログに投稿してみようか。ブログIDをメモしておいてね。」

ステップ2：記事データの準備

🙋‍♀️「投稿する記事のデータはどうやって準備するの？」

🤖「JSON形式でファイルに書き出すのがおすすめ。コマンドラインに直接長い本文を書くと、文字のエスケープで苦労するからね。」

{
  "article": {
    "blogId": "gid://shopify/Blog/XXXXXXXXX",
    "author": { "name": "はるのみ" },
    "title": "記事タイトル",
    "handle": "url-slug",
    "body": "<h2>見出し</h2><p>本文をHTMLで記述</p>",
    "summary": "記事の概要（メタディスクリプション）",
    "isPublished": false,
    "tags": ["Shopify", "タグ1", "タグ2"]
  }
}

🙋‍♀️「authorって省略できないの？」

🤖「できないんだ。authorは必須フィールドで、省略するとAPIエラーになる。実は私もここでハマったんだよね。」

🙋‍♀️「isPublished: falseにすると下書きになるんだね。いきなり公開されないのは安心。」

🤖「あと注意点がもう一つ。bodyにはHTMLで記述するよ。MarkdownじゃなくてHTMLね。」

ステップ3：投稿の実行

🤖「準備ができたら、いよいよ投稿だよ。」

shopify store execute \
  --store あなたのストア.myshopify.com \
  --allow-mutations \
  --query 'mutation CreateArticle($article: ArticleCreateInput!) {
    articleCreate(article: $article) {
      article { id title handle tags }
      userErrors { field message }
    }
  }' \
  --variables "$(cat /tmp/article-variables.json)"

🙋‍♀️「--allow-mutations って何？」

🤖「安全装置だよ。データを変更する操作（ミューテーション）は、このフラグを付けないと実行されないようになっているんだ。『本当に変更していいですよ』という意思表示だね。」

🙋‍♀️「実行したら…できた！！」

記事ID: gid://shopify/Article/564576518225
タイトル: Shopifyブログに自動番号付き目次を実装する方法
ステータス: 下書き（非公開）

🙋‍♀️「管理画面で確認したら、ちゃんと下書きが入ってる！ すごい！」

実際のワークフロー：Notion → Claude Code → Shopify

今回わかったのは、Notion → Claude Code → Shopifyという流れでブログ投稿が完結できるということです。

🤖「全体の流れを整理すると、こうなるよ。」

🙋‍♀️「毎回管理画面にログインして、エディタに本文をコピペして…っていう手間がなくなるのは地味に大きい。」

🤖「特にコードブロックを含む技術記事だと、管理画面のエディタで整形するのが面倒だったからね。HTMLで一発投稿できるのは助かるよ。」

おまけ：図解やイラストも試してみた

ブログ記事に図解やイラストを入れたくて、いくつかの方法を試してみました。

Figma MCP（FigJam）で図解

🙋‍♀️「Figma MCPでフローチャートを自動生成してみたんだけど…」

🤖「どうだった？」

🙋‍♀️「正直、ブログ用としてはわかりづらかった。技術ドキュメント向けの図解としてはありだけど、初心者に読んでもらう記事には合わない感じ。」

Gemini（Nano Banana 2）でイラスト生成

🙋‍♀️「そこで、Geminiの画像生成機能を試してみたら、これが大当たり！」

🤖「Claude Codeには画像生成機能がないけど、Claude側でイラスト用のプロンプトを作って、Geminiで画像生成するっていう合わせ技が使えるんだよね。」

🙋‍♀️「この記事のアイキャッチも、その方法で作りました。プロンプトにキャラクターの特徴（髪型、服装など）を入れると、統一感のあるイラストが作れるよ。」

まとめ

🤖「今回わかったことを振り返ろう。」

環境構築のポイント：

• Shopify CLI 3.93以上へのアップデートが必要
• shopify store authでストア認証 → shopify-cli-connector-appをインストール
• claude plugin install shopify-ai-toolkitでプラグイン導入

ブログ投稿のポイント：

• shopify store execute + --allow-mutationsで記事を投稿
• authorフィールドは必須（忘れるとエラー）
• JSONファイルに書き出して--variablesで渡すのがおすすめ

🙋‍♀️「正直、最初のCLIアップデートやストア認証でちょっと手間取ったけど、一度セットアップすれば後はスムーズ。ターミナルから離れずにブログ投稿できるのは、開発者にとってかなり便利だなと感じました。」

🤖「AI Toolkitはブログ投稿以外にも、商品データの取得やメタフィールドの操作など、できることがたくさんあるよ。まずは練習ストアで試してみて、慣れてきたら本番のワークフローに組み込んでいくのがおすすめ。」

🙋‍♀️「次は、テーマのLiquidカスタマイズもAI Toolkitで試してみたいと思います！」

関連タグ

Shopify, AI Toolkit, Claude Code, MCP, Admin API, GraphQL, ブログ投稿, 自動化