平素よりmakeshopをご利用いただき、誠にありがとうございます。
これまで、ショップ様より下記のようなお問い合わせを多くいただいておりました。
・テンプレート編集だけでは、理想のデザインに近づけるのが難しい
・外部の制作会社に依頼すると、時間や費用がかかってしまう
これらのお悩みを解決するため、クリエイターモードデザインスキルをリリースいたしました。
※自動更新済のため、ショップ様にて「makeshop byGMO MCP」の更新作業は不要です。
※管理画面（分析・販促管理 / エージェントスキル）から「クリエイターモードデザインスキル」のダウンロードは必要です。
概要
チャットで「〇〇のようなデザインを作ってください」とお伝えいただくだけで、AIがコーディングをおこない、クリエイターモードにインポートできる専用ファイル（.cdarファイル）を自動で作成する新機能です。
実際にどのようなデザインが作れるのか、サンプルショップをご用意しました。ぜひご覧ください。
サンプルショップ「Nuance」
https://skillsshop01.shop2.makeshop.jp/
ページ構成からフォント・余白の設計、アニメーションまで、すべてチャットのやりとりだけで作成しており、コーディングは一切おこなっていません。
特徴
コーディングの知識がなくても、チャットするだけ
スタイルの調整やアニメーションの追加まで、すべてチャットで指示するだけで作成できます。
「もう少し高級感のある雰囲気に」といった抽象的なご要望や、既存サイトのリニューアルにも対応します。
クリエイターモードに取り込まなくても、お手元で仕上がりを確認できる
従来は、コードをクリエイターモードに保存しないと実際の見た目を確認できず、少し直しては保存して確認、という往復が必要でした。
本機能では、コーディングが完了すると、AIがお手元のパソコン上にサンプルデータを使った簡易プレビューを作成します。クリエイターモードに取り込む前に仕上がりを確認でき、プレビューのデザイン崩れもAIが自動でチェック・修正するため、確認や手直しの手間がかかりません。
そのまま取り込める.cdarファイルを生成
クリエイターモード専用の.cdarファイルも自動で生成するため、管理画面からインポートするだけでデザインを反映できます。
気に入らなければ、追加で指示するだけ
「ローディングアニメーションを入れたい」「商品画像をもう少し大きく」のようにお伝えいただくだけで、納得のいくデザインになるまで何度でも調整できます。
初回設定
※外部ツールのため、makeshopカスタマーサポートでは各AIエージェントの操作についてサポートを承っておりません。
本内容では参考となる情報をご紹介しておりますが、ショップ様にて確認の上、ご利用くださいますようお願いいたします。
ご利用の前に、4つの設定をお願いします。最初の一度だけで、以降はチャットするだけでデザインを作れます。
Claude Codeは
claude と入力すると開きます。1. Claude Codeをインストールする
AIとやりとりするためのツールです。公式ドキュメントに従ってインストールしてください（Win/Macで手順が異なります）。
https://code.claude.com/docs/ja/quickstart
ターミナル操作に不慣れな方は、あわせて下記もご参照ください。
https://code.claude.com/docs/ja/terminal-guide
インストール後は使用モデルをご確認ください。仕上がりはモデルによって変わるため、Claudeの最上位モデル（Opus 4.8 high、Fable 5 high など）を推奨します。
モデルは、Claude Codeで /model と入力すると切り替えられます。
2. MCPサーバーを設定する
Claude Codeとmakeshopをつなぐ設定です。デザインに必要な情報を、AIが参照できるようになります。
以下を参考に、http://claude.ai/ にmakeshop byGMO MCPを設定してください。
https://manual.makeshop.jp/hc/ja/articles/57393089254553-makeshop-byGMO-MCP
コネクタの画面から「クリエイターモードタグリファレンスを取得する」が表示され、権限が許可になっていることを確認してください。
次に、Claude Codeを開き /mcp と入力し、claude.ai makeshop byGMO MCP と表示されていれば設定完了です。
3. スキルを設定する
デザインの作り方をAIに教えるファイルで、今回リリースした「クリエイターモードデザインスキル」がこれにあたります。管理画面（分析・販促管理 / エージェントスキル）からダウンロードしてください。
解凍したスキルを、下図のフォルダ構成になるよう配置します（Mac/Windowsで配置場所が異なります）。
Macの場合
以下のコマンドでFinderを開き、~/.claude/skills/ の配下に配置します。skillsフォルダはご自身で作成してください。
open ~/.claude/
Windowsの場合
エクスプローラーを開き、C:\Users\ユーザー名\.claude\skills の配下に配置します。skillsフォルダはご自身で作成してください。
配置後、Claude Codeで /skills と入力し、creator-mode-design が表示されれば設定完了です。
4. Claude in Chromeを設定する
AIがブラウザを見られるようにする設定です。
参考サイトや現在ご利用中のショップを、AIが確認できるようになります。
Chromeの拡張機能「Claude」をインストールし、あらかじめログインしておきます。
https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn
次に、Claude Codeで /chrome と入力し、
StatusがEnabled、ExtensionがInstalled、Enabled by defaultがYesになっていれば設定完了です。
Yesになっていない場合は Reconnect extension を選択して再接続します。
これで4つの設定はすべて完了です。さっそくデザインを作ってみましょう。
ご利用方法
デザインを作りはじめる
Claude Codeでチャットを開き、はじめに /creator-mode-design と入力してから、どんなショップにしたいかをお伝えください。この入力が、デザインを作成するスキルを呼び出す合図になります。
あわせてショップのURLをお伝えいただくと、AIが実際のショップをブラウザで開いて現在のデザインを確認したうえで新しいデザインを考えます。具体的なイメージが決まっていなくても、「シンプルに」「動きをつけて」といった方向性だけで大丈夫です。
/creator-mode-design
https://skillsshop01.shop2.makeshop.jp/ のショップデザインを考えてください。現在のデザインはデフォルトのデザインです。具体的なデザインは決まっていないですが、以下の点をデザインに盛り込んでください。
・シンプルなデザインにしてください
・シンプルだけどアニメーションを入れることによりサイトに動きをつけてください
「こんなショップのようにしたい」という参考サイトがある場合は、そのURLをお伝えください。
/creator-mode-design
https://tplbaycross.makeshop.jp/ のようなショップデザインを考えてください。
デザインはまずトップページから作りはじめ、方向性を固めてから残りのページに進みます。
プレビューで確認する
ページができあがると、AIがお手元のパソコンにプレビューを作成します。ブラウザで開いて仕上がりをご確認ください。
気になるところを、追加で指示する
一度で思いどおりの仕上がりになるとは限りません。プレビューを見て気になったところは、そのままチャットでお伝えください。「ロゴをもっと大きく」「商品の並びを3列にして」のようにお伝えいただければ、AIがその場で修正します。
納得のいく仕上がりになったら「次は〇〇ページを作って」とお伝えください。トップページで固めた雰囲気に揃えて次のページが作られ、この繰り返しでショップ全体のデザインができあがります。
.cdarファイルを取り込む
ページができあがるごとに.cdarファイルが作成されます。管理画面（ショップデザイン / テンプレート選択・編集 / クリエイターモード）からインポートすると、プレビューとほぼ同じデザインが反映されます。
ベーシックモードをご利用中の方へ
旧デザインモード（ベーシックモード）は今後廃止を予定しております（詳細は「専門知識がなくてもショップデザインを編集できる「ノーコードデザイン」を提供開始」のお知らせをご覧ください）。
切り替え先としては、ノーコードデザインのほか、クリエイターモードもございます。
今回のクリエイターモードデザインスキルを使えば、コーディングの知識がなくてもチャットでご要望をお伝えいただくだけで、クリエイターモード用のデザインを作成できます。切り替えの一つの方法としてぜひご検討ください。
■注意事項
・本機能のご利用には、Claude Code（またはClaude Desktop、Codex）およびClaude in Chromeのご用意が必要です。Claude Codeでのご利用を推奨しております。
・デザインの仕上がりは、ご利用のモデルによって変わります。Claudeの最上位モデル（Opus 4.8 high、Fable 5 high など）のご利用を推奨しております。
・自動プレビューと、実際にクリエイターモードにインポートしたあとのデザインが、若干異なる場合があります。
・本リリースに伴うショップ様での管理画面設定の変更は不要です。
・外部ツールのため、makeshopカスタマーサポートでは各AIエージェントの操作についてサポートを承っておりません。
ショップ様にて確認の上、ご利用くださいますようお願いいたします。
■対象画面
管理画面
分析・販促管理 / エージェントスキル
ショップデザイン / テンプレート選択・編集 / クリエイターモード
今後も、ショップオーナー様のご要望を実現してまいります。
引き続き、makeshopをどうぞよろしくお願いいたします。
