ChatGPTやClaudeなどのAIチャットツールに、変更したいページの「今のソース」と、参考にしたい「よくある質問」の記事内容の2つを渡すことで、ご自身のテンプレートに合わせた具体的な変更箇所を教えてもらうことができます。
お使いのブラウザでAIチャットツールを開き、コピー＆ペーストだけで進められる方法です。
※MCPを利用してAIとmakeshopを連携させる方法ではありません。
この方法が向いているケース
- よくある質問の説明どおりに直したいが、自分のソースのどこを直せばいいかわからない
- 複数箇所の書き換えが必要で、抜け漏れなく直したい
- 変更前・変更後を見比べながら、自分で反映していきたい
準備するもの
始める前に、以下の3点を用意してください。
①変更したいページの「今のソース」
以下の画面から変更したいページを開き、HTML欄（必要であればCSS欄も）の中身をコピーしておきます。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / [ページ名]
※変更したい部分がわかっている場合は、その部分（例：商品一覧を表示している部分）だけをコピーしてもかまいません。ページ全体のソースが長く、一度に貼り付けられない場合は、記事後半の「ソースコードが長く、一度に貼り付けられない場合」を確認してください。
②参考にしたいよくある質問の記事
実現したい内容が書かれているよくある質問の記事を1つ選び、URLまたは記事本文をコピーしておきます。
③デザインセットのバックアップ
ソースを書き換える前に、必ずバックアップを取ってください。保存した内容は上書きされるため、バックアップがない場合は元の状態に戻せないことがあります。
【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。
AIへの伝え方（プロンプトテンプレート）
AIチャットツールの入力欄に、以下の内容を貼り付けて利用してください。【 】の下の（ ）内を、ご自身の内容に置き換えます。
あなたはECサイト構築サービス「makeshop」のクリエイターモードのテンプレート編集を手伝うアシスタントです。 【今のソース】 （編集したいページの「HTML」欄の中身をそのまま貼り付け） 【参考にしたい説明】 （参考にしたいよくある質問の記事のURL、または本文をそのまま貼り付け） 【やりたいこと】 上記の説明に沿って、私の「今のソース」を書き換えてください。 変更が必要な箇所だけを、変更前→変更後の対比がわかる形で教えてください。 説明の中に、私のテンプレートには存在しない要素がある場合は、その旨を指摘してください。
「今のソース」と「参考にしたい説明」を両方渡したうえで、「変更前→変更後」の形で答えてもらうよう指定するのがポイントです。差分の形で受け取ることで、どこを直せばいいかがひとめでわかり、反映の際の見落としも防げます。
実例：カテゴリーページの商品一覧に税抜価格を追加する場合
「カテゴリーページの商品一覧に、税込価格とあわせて税抜価格も表示したい」という例で、実際の使い方をご紹介します。
手順1) 今のソースを確認する
「ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品カテゴリー」の「HTML」欄から、商品一覧を表示している部分（「<{section name=i loop=$category.item.list}>」から「<{/section}>」の前後）をコピーします。ここでは、テンプレート【Complete】の「商品カテゴリー」の「HTML」欄に、次のように書かれていたとします。
<!--カテゴリーアイテム-->
<{if $category.item.has_item}>
<ul class="item-list">
<{section name=i loop=$category.item.list}>
<li>
<div class="item-icon">
<{if $category.item.list[i].is_soldout}>
<p class="item-soldout">SOLD OUT</p>
<{elseif $category.item.list[i].is_sale}>
<p class="item-sale">SALE</p>
<{/if}>
</div>
<div class="item-list-image">
<a href="<{$category.item.list[i].url}>"><img src="<{$category.item.list[i].image_L}>" alt="" loading="lazy"></a>
<div class="favorite item-list-favorite">
<a href="<{$category.item.list[i].favorite_entry_url}>" class="favorite-icon favorite-off <{if $category.item.list[i].is_favorite}>hide<{/if}>"></a>
<a href="<{$category.item.list[i].favorite_remove_url}>" class="favorite-icon favorite-on <{if !$category.item.list[i].is_favorite}>hide<{/if}>"></a>
</div>
</div>
<{if $category.item.list[i].base_category.url}>
<p class="item-category"><a href="<{$category.item.list[i].base_category.url}>"><{$category.item.list[i].base_category.name}></a></p>
<{/if}>
<p class="item-name"><a href="<{$category.item.list[i].url}>"><{$category.item.list[i].name|escape:html}></a></p>
<{if $category.item.list[i].is_sale}>
<p class="price original-price">￥<{$category.item.list[i].original_price|number_format}><span>（税込）</span></p>
<p class="price item-sale-price">￥<{$category.item.list[i].price|number_format}><span class="tax">（税込）</span>
<span class="sale-discount-rate">[<{$category.item.list[i].sale_rate}>%OFF</span>]</p>
<{else}>
<p class="price">￥<{$category.item.list[i].price|number_format}><span>（税込）</span></p>
<{/if}>
<div class="review-summary-container" data-gname="<{$category.item.list[i].system_code}>" data-pid="<{$category.item.list[i].system_code}>" data-group="true" data-action="summary"></div>
<div class="item-list-cart">
<{if $category.item.list[i].is_soldout}>
<div class="item-list-sold item-list-btn">売り切れ</div>
<{else}>
<a href="<{$category.item.list[i].cart_entry_url}>" class="item-list-btn add-list-cart cart-order-btn">カートに入れる</a>
<{/if}>
</div>
</li>
<{/section}>
</ul>この中には、セール中の商品と通常の商品それぞれに価格の記述があり、税抜価格を追加する箇所が複数あります。
手順2) 参考にするよくある質問の記事を選ぶ
税抜価格の表示方法については、以下の記事が該当します。
手順3) プロンプトに貼り付けて質問する
プロンプトテンプレートに当てはめると、次のようになります。
あなたはECサイト構築サービス「makeshop」のクリエイターモードのテンプレート編集を手伝うアシスタントです。 【今のソース】 （手順1)でコピーした商品一覧の部分をそのまま貼り付け） 【参考にしたい説明】 https://help.makeshop.jp/hc/ja/articles/25738425574425 https://help.makeshop.jp/hc/ja/articles/29635448321945 【やりたいこと】 上記の説明に沿って、商品一覧の価格の下に税抜価格も表示されるように、私の「今のソース」を書き換えてください。 変更が必要な箇所だけを、変更前→変更後の対比がわかる形で教えてください。 説明の中に、私のテンプレートには存在しない要素がある場合は、その旨を指摘してください。
※AIチャットツールによっては、URLを貼り付けても記事の内容を読み込めない場合があります。その場合は、記事本文をコピーして貼り付けてください。
手順4) AIからの回答をもとに反映する
この例では、AIから次のような回答が返ってくることを想定しています。
■変更箇所1：セール中の商品の販売価格
【変更前】
<p class="price item-sale-price">￥<{$category.item.list[i].price|number_format}><span class="tax">（税込）</span>
<span class="sale-discount-rate">[<{$category.item.list[i].sale_rate}>%OFF</span>]</p>
【変更後】
<p class="price item-sale-price">￥<{$category.item.list[i].price|number_format}><span class="tax">（税込）</span>
<span class="sale-discount-rate">[<{$category.item.list[i].sale_rate}>%OFF</span>]</p>
<p class="price">￥<{$category.item.list[i].price_excluded_tax|number_format}><span>（税抜）</span></p>
■変更箇所2：通常の商品の販売価格
【変更前】
<p class="price">￥<{$category.item.list[i].price|number_format}><span>（税込）</span></p>
【変更後】
<p class="price">￥<{$category.item.list[i].price|number_format}><span>（税込）</span></p>
<p class="price">￥<{$category.item.list[i].price_excluded_tax|number_format}><span>（税抜）</span></p>
※割引前の価格（original_price）については、参考の説明に税抜価格の書き方が記載されていないため、変更していません。「商品カテゴリー」の「HTML」欄で「変更前」の記述を探し、1箇所ずつ「変更後」の内容に置き換えて保存すれば完了です。
よくある質問に書かれている「変数名の末尾に _excluded_tax を付ける」という一般的なルールを、AIがご自身のソースの中の該当箇所をすべて探して当てはめてくれるのが、この方法のポイントです。また、参考の説明に書かれていない部分（この例では割引前の価格）は、AIに指摘してもらうことで、存在しない変数を使ってしまうことを防げます。
ソースコードが長く、一度に貼り付けられない場合
商品詳細ページなど、「HTML」欄のソースコードが長く、AIチャットツールの入力欄に一度で貼り付けられない場合は、「テキストファイルとして添付する」か「複数回に分けて貼り付ける」方法でソースコード全文を渡すことができます。
分けて貼り付ける場合は、最初のメッセージで「続けてソースコードを送ります」と宣言してから送るのがポイントです。
| 方法 | 向いているケース |
|---|---|
| 方法A：テキストファイルとして添付する | お使いのAIチャットツールでファイルを添付できる場合（おすすめ） |
| 方法B：複数回に分けて貼り付ける | ファイルを添付できない場合 |
※ファイル添付の可否や、一度に送信できる文字数は、ご利用のAIチャットツールやプランによって異なります。
方法A：テキストファイルとして添付する
方法A 手順1) ソースコードをテキストファイルに保存する
以下の画面から変更したいページを開き、「HTML」欄の中身をすべてコピーします。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / [ページ名]
コピーした内容を、メモ帳（Windows）やテキストエディット（Mac）などに貼り付け、「item_detail.txt」のようなわかりやすい名前でテキストファイルとして保存します。
※テキストエディット（Mac）をお使いの場合は、「フォーマット」メニューから「標準テキストにする」をクリックしてから保存してください。
方法A 手順2) ファイルを添付してプロンプトを送る
AIチャットツールの入力欄に保存したファイルを添付し、以下のプロンプトを貼り付けて送信します。（ ）内をご自身の内容に置き換えてください。
あなたはECサイト構築サービス「makeshop」のクリエイターモードのテンプレート編集を手伝うアシスタントです。 【今のソース】 添付ファイル（item_detail.txt）が、編集したいページの「HTML」欄の全文です。 【参考にしたい説明】 （参考にしたいよくある質問の記事のURL、または本文をそのまま貼り付け） 【やりたいこと】 上記の説明に沿って、添付したソースの中から変更が必要な箇所を探して書き換えてください。 ・ソース全文を書き直すのではなく、変更が必要な箇所だけを、変更前→変更後の対比がわかる形で教えてください。 ・変更箇所が見つけやすいように、変更前のコードは前後の数行も含めて提示してください。 ・説明の中に、私のテンプレートには存在しない要素がある場合は、その旨を指摘してください。
方法B：複数回に分けて貼り付ける
方法B 手順1) 最初のメッセージで、続けて送ることを宣言する
いきなりソースコードを貼り付けると、AIが途中までの内容で回答を始めてしまうことがあります。最初に以下のメッセージを送り、すべて送り終わるまで回答を待ってもらうよう伝えます。
あなたはECサイト構築サービス「makeshop」のクリエイターモードのテンプレート編集を手伝うアシスタントです。 これから、編集したいページの「HTML」欄のソースコードを、長いため複数回に分けて送ります。 すべて送り終えたら「以上です」と送りますので、それまでは内容の解説や回答はせず、「受け取りました（1/3）」のように受け取った旨だけを返信してください。
方法B 手順2) ソースコードを分割して、番号を付けて送る
「HTML」欄の中身を、入力欄に収まる長さに分けて、順番に送ります。どこまで送ったかがわかるよう、それぞれの先頭に番号を付けます。
【ソース 1/3】 （HTML欄の1つ目のまとまりを貼り付け）
【ソース 2/3】 （HTML欄の2つ目のまとまりを貼り付け）
【ソース 3/3】 （HTML欄の3つ目のまとまりを貼り付け）
※分割する位置は、タグの途中ではなく、行の区切りの良いところにしてください。
※貼り付ける順番を入れ替えたり、途中の部分を抜かしたりしないよう注意してください。
方法B 手順3) 「以上です」と伝えて、やりたいことを送る
すべて送り終えたら、最後に以下のメッセージを送ります。
以上です。ここまでの【ソース 1/3】〜【ソース 3/3】をつなげたものが、「HTML」欄の全文です。 【参考にしたい説明】 （参考にしたいよくある質問の記事のURL、または本文をそのまま貼り付け） 【やりたいこと】 上記の説明に沿って、受け取ったソースの中から変更が必要な箇所を探して書き換えてください。 ・ソース全文を書き直すのではなく、変更が必要な箇所だけを、変更前→変更後の対比がわかる形で教えてください。 ・変更箇所が見つけやすいように、変更前のコードは前後の数行も含めて提示してください。 ・説明の中に、私のテンプレートには存在しない要素がある場合は、その旨を指摘してください。
回答を反映するときのポイント
変更箇所だけを反映する
長いソースコードの場合、AIに全文を書き直してもらうと、途中が「（省略）」などで省かれてしまい、必要な記述が消えてしまうことがあります。AIの回答をそのまま「HTML」欄に上書きせず、「変更前」のコードを「HTML」欄の中から探して、その部分だけを「変更後」の内容に置き換えてください。
変更箇所が複数ある場合は1つずつ確認する
変更箇所が複数提示された場合は、1箇所ずつ置き換えて保存し、表示を確認しながら進めると、うまくいかなかったときに原因の箇所を特定しやすくなります。
ご利用にあたっての注意点
※AIの回答をそのまま信用しすぎないでください。AIが提示する変更内容は、必ずしも正しいとは限りません。反映後は実際の画面表示を確認し、崩れや表示ミスがないか確認してください。
※AIチャットツールに渡す内容に注意してください。ソースコードに、外部に共有したくない情報が含まれていないかを確認のうえ、利用してください。
※存在しないタグを提案されることがあります。AIが、実際にはmakeshopに存在しない変数やタグを提案する場合があります。
反映後に正しく表示されない場合は、クリエイターモードタグリファレンスを確認してください。
※jQuery・JavaScript・Smarty・PHPを使った変更は対象外です。この方法は簡易的なHTML/CSSの書き換えを想定したものです。AIの回答にjQueryやJavaScriptなどが含まれる場合、その実装についてはデザイン質問掲示板のサポート対象外となりますので、あらかじめご了承ください。
関連記事
■マニュアル
クリエイターモード各ページ
クリエイターモードタグリファレンス
■makeshopサポート記事
【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。
【クリエイターモード】税抜と税込の価格を表示させたい。書き方を教えてください。
【クリエイターモード】税抜価格を表示させる方法を教えてください。