こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。

ベーシックモードで作り込んだデザインを、クリエイターモードで一から作り直すのは大変です。
makeshop byGMO MCPの「クリエイターモードデザインスキル」を使うと、今のショップのURLをAI（Claude）に伝えるだけで、同じような色・レイアウト・雰囲気のクリエイターモード用デザインを作ることができます。

コードを書く必要はありません。AIに依頼して、できあがったデザインを確認し、気になるところを伝える、のくり返しで仕上げていきます。

作例

この方法で、ベーシックモードのテンプレート（ENKELなど）のサンプルショップをもとに作成したデザインセットです。画像をクリックすると、.cdarファイル（ZIP形式）をダウンロードできます。
AIでどこまで再現できるかの参考としてご覧ください。ショップで使う場合は、必ず表示と動作をご確認のうえご利用ください。

• 
  
  【ENKEL】風.cdarファイル（ZIP）をダウンロード
  
• 
  
  【プレーン】ホワイト風.cdarファイル（ZIP）をダウンロード
  
• 
  
  【シンプル】ブラック風.cdarファイル（ZIP）をダウンロード
  
• 
  
  【シンプルモダン】ブラウン風.cdarファイル（ZIP）をダウンロード
  

※ダウンロードしたZIPファイルは解凍し、中に入っている.cdarファイルをインポートしてください（.cdarファイル自体は解凍せず、そのままインポートします）。
※上記の.cdarファイルはあくまでも作例のため、内容の編集方法につきましてはサポートの対象外です。
※AIの操作方法や、AIが作成した内容についても、makeshopカスタマーサポートのサポート対象外となります。

はじめる前に

必要なもの

・Claude CodeまたはClaude Desktop
・makeshop byGMO MCPの設定
・「クリエイターモードデザインスキル」の配置
・AIがショップのページを開けるブラウザ環境（Claude in Chromeなど）

※Claude CodeやClaude Desktopのご利用には、各サービスのアカウント（プラン）が必要です。

ショップ側で準備しておくこと

・年齢認証・会員制・メンテナンス表示を設定している場合
AIが今のデザインや商品の情報を読み取れないことがあります。
設定を外したくない場合は、元にしたベーシックモードのテンプレートのサンプルショップのURLや、ショップ画面のスクリーンショットをAIに渡して依頼してください。

・商品を数点登録しておく
実際の商品名・画像・価格で確認できるので、表示の崩れに気づきやすくなります。

・元にしたベーシックモードのテンプレート名を確認しておく（例：ENKEL）
テンプレートのサンプルショップのURLを伝えると、動きまで合わせやすくなります。

・デザインセットの空き枠を確認しておく
デザインセットは最大5個まで作成できます。5個ある場合は、不要なデザインセットを「エクスポート」で保存してから削除し、空き枠を作ってください。

移行の流れ

ショップ様がおこなうのは「AIに依頼する → .cdarファイルをインポートする → 確認して直してほしいところを伝える」のくり返しです。
コードを書くことや、.cdarファイルを作ることはAIがおこないます。

手順1）今のデザインを読み取ってもらう

ショップのURLを入れて、次のように依頼します。

/creator-mode-design
https://（ショップのURL）/ の今のデザインを見てください。
同じような色・レイアウト・雰囲気で、クリエイターモードのデザインを作ってください。

※1行目の「/creator-mode-design」は、クリエイターモードデザインスキルを呼び出すための合図です。依頼文の最初の1行に、そのまま入れてください。

AIがブラウザでショップを開き、色・文字・余白・商品の並べ方などを読み取ります。

※クリエイターモードはレスポンシブに対応しているため、PCとスマートフォンで1つのデザインになります。AIはPCのデザインをもとに、スマートフォンでも見やすい表示を自動で作ります。ベーシックモードのスマートフォン用テンプレートのデザインに合わせる必要はありません。

手順2）最初の1ページで方向性を決める

まずはトップページを作ってもらいます。ヘッダー・フッターもいっしょにできあがります。
ここで色や雰囲気を確定させておくと、あとのページで大きなやり直しがなくなります。

手順3）インポートして確認する

作成された.cdarファイルを、デザインセット一覧の「デザインセットのインポート」ボタンからインポートします。
.cdarファイルの保存場所はAIが教えてくれます。わからない場合は「.cdarファイルはどこに保存されましたか？」と聞いてください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード

プレビューで表示を確認し、気になるところをページ名といっしょにAIに伝えます。

手順4）残りのページを1ページずつ作ってもらう

商品詳細ページを作ってください。

おすすめの順番は、商品詳細 → カテゴリー → 買い物かご → 検索結果 → 会社概要・特定商取引法・ご利用ガイド・プライバシーポリシーです。
会社概要など文章が中心のページは、まとめて依頼しても問題ありません。

※1ページ作るごとに.cdarファイルが作り直され、それまでに作ったページもすべて含まれています。毎回、最新のファイルをインポートして確認してください。
※インポートするたびにデザインセットが追加されます。デザインセットが5個ある場合は、不要なものを削除してから新しいファイルをインポートしてください。

手順5）細かい違いを直してもらう

全ページそろったら、気になるところを伝えて仕上げます。

商品詳細ページの価格が「540（税込）」と数字だけになっているので、「円」を付けてください。

「どのページの、どこが、どうなっていて、どうしたいか」を伝えると、一度で直りやすくなります。確認用の商品ページのURLを添えるのもおすすめです。

独自ページをフリーページに移行する

ベーシックモードの「独自ページ」（/html/pageXX.html）は、クリエイターモードでは「フリーページ」（/view/page/ページID）として作り直します。
独自ページをフリーページへ自動で変換する機能はありませんが、AIに独自ページのURLを伝えると、本文の取得からデザインセットの見た目に合わせた組み直しまでをまとめて進められます。

用意するもの

※URLから読み取れるのは、ショップに表示された結果だけです。非公開・パスワード付きのページは、管理画面のソースもあわせてAIに渡すと確実です。

依頼のしかた

下記の独自ページを、クリエイターモードのフリーページに移行してください。
ショップのURL：https://（ショップのURL）/
・/html/page15.html　ノウハウ集
・/html/page16.html　ご利用ガイド
ページIDは、元のページの番号に合わせてください。

AIが各ページを読み取り、ヘッダー・フッターを除いた本文を、デザインセットの見た目に合わせて組み直します。あわせて、次のこともおこないます。

・独自ページ同士のリンクを、移行後のフリーページのURLに書き換える
・買い物かごやマイページへのリンクを、クリエイターモードのタグ（<{$url.cart}> など）に置き換える
・http から始まる画像のURLを https に変更する
・移行できなかったもの、確認が必要なものを一覧にして報告する

できあがった.cdarファイルは、ほかのページと同じように「デザインセットのインポート」から取り込んで確認してください。

移行しやすいページ・確認が必要なページ

※移行しやすさはページの内容によって異なります。移行後は、ページごとに表示と動作を必ずご確認ください。

※ヘッダー・フッターのない独自ページは、フリーページでもヘッダー・フッターを外して作ることができます。

元のテンプレートの「動き」まで再現するコツ

スクロールやマウスオーバーの動きまで合わせたいときは、元にしたテンプレートのサンプルショップのURLを伝えて「同じにして」と依頼するのが確実です。

元にしたベーシックモードのテンプレートはENKELで、
PCではスクロールするとヘッダーのロゴが動くデザインでした。
https://tplenkel.shop33.makeshop.jp/ と同じ動きを再現してください。

・違うところは具体的に伝えます。
→例：「検索窓の位置がENKELと違う」
・いらない動きもはっきり伝えます。
→例：「トップページ以外では、ロゴが動く必要はありません」
・動きは、実際のショップでしか確認できないことがあります。インポート後は「ページを開いた瞬間」「スクロールしたとき」「マウスを乗せたとき」の3つを確認しましょう。

つまずきやすいポイント

実際に移行を試したときに起きたことと、伝え方の例です。先に伝えておくと手戻りが減ります。

インポート後に見た目がずれたときは、ショップのURLを渡す

AIの手元のプレビューには、makeshopのシステムが読み込むCSS（スライドショーなど）が含まれていません。
そのため、インポート後のショップで初めて、影や枠などの見え方の違いに気づくことがあります。
実際のショップのURLを渡すと、AIがブラウザでページを開いて「どのCSSが原因か」を調べ、修正まで進めてくれます。

・場所：どのページの、どの部分か（例：トップページのスライドショー）
・見え方：見たままの言葉で問題ありません（例：影が出ている、白いフチがある、余白が広い）
・URL：インポート後のショップのURL、またはクリエイターモードのプレビューURL
・直し方：消したい、色を変えたい、ほかの部分には影響させたくない、など

トップページのスライドショーの周りに、影と白い枠のようなものが出ています。消したいです。
実際のページはこちらです：https://（ショップのURL）/
原因を調べて、デザインセット側のCSSで消してください。

・手元のプレビューで直っていてもショップで直らない場合は、「デザインセット以外から出ている可能性も含めて、実際のページで調べてください」と添えてください。
・ショップが非公開などでAIがページを開けない場合は、プレビューURLかスクリーンショットを渡してください。
・「システムのCSSは書き換えず、デザインセット側で打ち消してください」と添えると、安全な方法で直してもらえます。

ショップのスクリーンショットを渡す

URLを渡せない場合は、スクリーンショットと簡単な説明だけでも、AIは修正できます。

インポート後のチェックリスト

AIの手元のプレビューでは、カートなど実際の処理は動かせません。
次の項目は、必ずショップ上で、PCとスマートフォンの両方で確認してください。

全ページ共通

□ ヘッダーの検索欄から検索できる
□ スマートフォンのメニューが開閉できる
□ カテゴリーのメニューが開き、リンク先が正しい
□ ページを開いた瞬間に、ロゴやアイコンが動いて見えない

商品まわり

□ バリエーションあり・なしの商品の両方で、カートに入れられる
□ カスタムセレクト・名入れの内容と追加料金がカートに反映される
□ 価格の表示が正しい（バリエーションを選んで金額が変わったあとも）
□ カテゴリー・検索結果の並び替えとページ送りが動く

買い物かご

□ 数量の変更で、小計・合計が変わる
□ 商品を削除できる
□ 購入手続きに進める

その他

□ レビューが表示される
□ 会社概要・特定商取引法・ご利用ガイド・プライバシーポリシーが崩れずに表示される
□ 年齢認証・会員制を外して作業した場合、設定を元に戻したあとも認証画面から先へ進める

確認が終わったら、デザインセット一覧の「ショップに適用」ボタンで公開します。

よくある質問

Q. AIのプレビューでは問題なかったのに、ショップで表示が崩れるのはなぜですか？

AIの手元のプレビューは、実際のショップの表示を近似したものです。インポートしてはじめてわかる違いもあるため、崩れたページのURLやスクリーンショットを伝えて修正を依頼してください。

Q. トップページイメージやバナー、商品を変えるときもAIが必要ですか？

作成されたデザインが、トップページイメージなどを表示する変数タグを使っている場合は、これまでどおり管理画面の設定がそのまま反映されます。
画像や文字が直接書き込まれている場合は、「管理画面の設定が反映されるようにしてください」のように依頼してください。