対象バージョン: EC-CUBE 4.3.1-p1（④の記事で作った、検証用の環境）。使ったAI: ChatGPT（無料版）。検証日: 2026年10月11日
検証用の環境での記録です。実際にお店を運営した記録ではありません。
⑤の記事では、ChatGPTの無料版に頼んで、ヘッダーとボタンの色を変えました。今回は、もう一歩進んで、ページの中身（HTMLの部分）を変えてみます。
EC-CUBEの画面は、「Twig（トゥイッグ）」というテンプレートのファイルで作られています。この記事では、商品詳細ページのTwigファイルを、そのままChatGPTに渡して、注意書きを1行足してもらいました。うまくいった点と、直してもらった点の両方を、そのまま書きます。
先に、この記事の範囲を書いておきます。
- 試したAIは、ChatGPTの無料版だけです。モデル名は、画面から確認できませんでした。ほかのAIでは、結果が変わるかもしれません。
- 試したお題は、「注意書きを1行足す」という1つのことです。
- ここで書く結果は、この1回の検証で起きたことです。いつでも同じになるとは限りません。
この記事で分かること
- 商品詳細ページのTwigを、管理画面のどこで開けるか
- ファイルをそのまま渡して、AIに頼んだときの結果
- AIの回答を貼る前に、確認したこと
- 見た目が気になったときの、直してもらい方
お題と、変更する場所
お題
商品詳細ページの「カートに入れる」ボタンのすぐ下に、次の注意書きを足します。
※サイズや色は、画像と実物で見え方が異なる場合があります。返品の条件は、ご利用ガイドをご確認ください。
服などを売るお店で、よくある注意書きです。今回は、検証用の環境に入っている商品（アイスサンド）で試しているので、文言は、試すための例です。
変更する場所
管理画面の「コンテンツ管理」→「ページ管理」→「商品詳細ページ」の編集画面です。ここに、商品詳細ページのTwigのコードが、そのまま表示されます。
画面には、app/template/default/Product/detail.twig というファイル名が表示されます。コードの欄に、EC-CUBEの商品詳細ページのTwigが、全部（今回は446行）入っています。
なお、この画面の上には、「この機能の利用頻度が低い場合、使用しない間は無効化することでセキュリティを更に向上させることができます」という案内が出ます。ページのコードを管理画面から書き換えられる、強い機能だからです。使わなくなったら、案内のとおり、無効にすることも考えてください。
作業の前に必ずやること
Twigは、書き間違えると、ページ全体が表示されなくなる可能性があります（今回は、起きませんでした）。そのため、作業の前に、編集画面のコードを全部コピーして、テキストファイルに保存しておきます。元に戻せるようにするためです。
AIに頼む
⑤の記事で、「バージョンと、画面の情報を伝えると、範囲を絞れた」という結果でした。そのため、今回は最初から、バージョンと条件を伝え、Twigの全文をつけて頼みました。
EC-CUBE 4.3.1-p1（PHP 8.3、Symfony 6、Twig）を使っています。管理画面のページ管理にある「商品詳細ページ」のTwigを、次の条件で修正してください。
・「カートに入れる」ボタンのすぐ下に、次の一文を足す
「※サイズや色は、画像と実物で見え方が異なる場合があります。返品の条件は、ご利用ガイドをご確認ください。」
・それ以外のコードは、変更しない（整形・削除・並べ替えもしない）
・変更した箇所だけが分かるように、「どの行の、どこに足したか」を説明する
・コード全文を、そのまま貼り直せる形で出す
現在のコードは次のとおりです。
（ここに、Twigの全文を貼る）ポイントは、次の3つです。
- 「それ以外は変更しない」と、はっきり書く。AIが、親切のつもりで、ほかの部分まで直すのを防ぐためです。
- 「どこに足したか」の説明も頼む。貼る前に、人が確認しやすくなります。
- 「そのまま貼り直せる形」で、全文を頼む。部分的な回答だと、貼る場所を間違えやすいためです。
AIの回答
ChatGPTは、元のコードに、次の1行だけを足した、全文を返しました。
<p>※サイズや色は、画像と実物で見え方が異なる場合があります。返品の条件は、ご利用ガイドをご確認ください。</p>貼る前に確認したこと
AIのコードは、「下書き」と考えて、貼る前に確認します。今回は、元のコードと回答のコードを比べて、違う行を洗い出しました（この記事の制作を手伝っているAI「Claude」にも、差分を取ってもらいました。検証に使ったChatGPTとは、別のAIです）。
確認した結果は、次のとおりです。
| 確認したこと | 結果 |
|---|---|
| 足された行は、いくつか | 1行だけ（元のコードは、整形・削除・並べ替えされていません） |
| 足された場所は、頼んだ場所か | 「カートに入れる」ボタンの、すぐ下でした |
| 存在しない変数や関数を使っていないか | 使っていません（固定の文字だけの行です） |
⑤の記事のように、「頼んでいない部分まで変わる」ことは、今回は、ありませんでした。
貼った結果（1回目）
ページ管理の編集画面で、コードを回答の全文に置き換えて、「登録」しました。エラーは出ませんでした。
注意書きは、頼んだ場所に出ました。ただし、見た目に、気になる点がありました。
- 注意書きの上下に余白がなく、すぐ下の「お気に入りに追加」ボタンに、くっついて見える
- 文字の大きさが、商品の説明文と同じで、少し目立つ
エラーではなく、「画面を見ないと分からない問題」です。
直してもらう（2回目）
同じ会話で、画面を見て気づいた点を、具体的に伝えました。
貼ってみたところ、注意書きは正しい場所（「カートに入れる」ボタンの下）に出ました。ただ、次の点が気になります。直してください。
・注意書きの上下に余白がなく、下の「お気に入りに追加」ボタンにくっついて見える
・本文より少し小さい文字（目立ちすぎない大きさ）にしたい
それ以外は変えないでください。変更した箇所だけを、差分で示してください。ChatGPTの回答は、注意書きの1行を、次のように置き換えるものでした。
<p style="margin: 12px 0; font-size: 0.9em;">※サイズや色は、画像と実物で見え方が異なる場合があります。返品の条件は、ご利用ガイドをご確認ください。</p>「margin: 12px 0」が上下の余白、「font-size: 0.9em」が、文字を本文の0.9倍にする指定です。元のコードと比べて、変わったのは、この1行の style の部分だけでした。
結果
貼り直して、確認しました。一度で、直りました。
依頼は、全部で2回（最初の依頼と、直しの依頼）でした。
確認できなかったこと、残ったこと
- 在庫がない商品では、注意書きは出ません。AIが、「在庫がある場合」の側にだけ足したためです。今回の依頼に、「品切れのとき」の指定がなかったので、間違いとは言えませんが、品切れのときも出したい場合は、そう頼む必要があります。
- サイズなどの選択肢（規格）がある商品での動作は、確認していません。今回の商品は、規格がありませんでした。
- スマホでの見え方は、確認していません。
- 「ご利用ガイド」のページは、作っていません。注意書きは、文字だけで、リンクではありません。
まとめ
- 商品詳細ページのTwigは、管理画面の「ページ管理」で開ける。コードの全文を、そのままAIに渡せた
- 「それ以外は変えない」「どこに足したか説明する」と書いたら、1行だけ足した全文が返ってきた。今回は、頼んだ場所に入った
- 貼る前に、元のコードと差分を取って確認すると安心。画面を見ないと分からない問題（余白）は、見た目を具体的に伝えて、直してもらうと、一度で直った
- 作業の前に、元のコードを保存しておく。いきなり公開中のお店では試さず、検証用の環境で試す
今回の結果は、ChatGPTの無料版と、1つのお題での記録です。コードを貼る前に、自分で内容を確認する習慣は、どのAIでも変わらず大事だと考えています。
AIを使うときの心がけ
- 作業前に、必ず元のコードを保存する
- いきなり本番で試さず、検証用の環境で試す
- AIのコードは「下書き」と考え、何が変わったかを確認してから、画面で確かめる
- パスワードや顧客情報などを、AIに貼らない（今回貼ったTwigには、含まれていません）
商品の注意書きや説明文を、AIで作るときの注意
この記事の注意書きは、文言を、こちらで決めて頼んだものです。AIに、商品の説明文や注意書きの文言そのものを作ってもらう場合は、景品表示法に注意が必要です。事実と違う効果や、実際より良く見せる表現が入っていないか、人が確認してください。
