⑤EC-CUBE 4をAIでカスタマイズしてみた｜ChatGPT無料版で見た目（CSS）を変える【AI活用・入門編】

対象バージョン: EC-CUBE 4.3.1-p1（④の記事で作った、検証用の環境）。使ったAI: ChatGPT（無料版）。検証日: 2026年10月10日

検証用の環境での記録です。実際にお店を運営した記録ではありません。

「ショップの見た目を、自分の好みに変えたい。でも、プログラムは書けない」。そんなときに、ChatGPTなどのAIに頼めば、できるのでしょうか。

この記事では、ChatGPTの無料版に頼んで、EC-CUBEのヘッダーの色とボタンの色を変えてみた結果を、そのまま紹介します。うまくいった点と、間違えた点の両方を書きます。

この記事は、AIを使ったカスタマイズの、いわば入門編です。無料のAIと、「色を変える」というシンプルなお題から、まずは手始めに試しています。

先に、この記事の範囲を書いておきます。

• 試したAIは、ChatGPTの無料版だけです。モデル名は、画面から確認できませんでした（入力欄に「思考」の切り替えボタンがありましたが、検証のときはオフでした）。ほかのAIでは、結果が変わるかもしれません。
• 試したお題は、「色を変える」という1つのことです。
• ここで書く結果は、この1回の検証で起きたことです。いつでも同じになるとは限りません。

この記事で分かること

• AIに「バージョンを伝えない場合」と「伝えた場合」で、結果がどう違ったか
• AIの回答が、うまくいかなかったときの直し方
• AIに頼むときの、プロンプト（依頼文）の例

やったこと

EC-CUBEの管理画面にある、CSSを書き込む場所に、AIが作ったCSSを貼って、見た目の変化を確認します。

「CSS」は、色や大きさなど、画面の見た目を決める言葉です。

お題

• ヘッダー（画面の上の部分）を、濃い緑にする
• 商品ページの「カートに入れる」ボタンを、オレンジにする

変更する場所

管理画面の「コンテンツ管理」の中にある、「CSS管理」です。

変更前の画面

作業の前に必ずやること

AIが作ったコードで、うまくいかないことがあります。そのため、貼る前に、CSS管理に入っている内容を、テキストファイルに保存しておきます。元に戻せるようにするためです。

1回目：バージョンを伝えずに頼む

まず、EC-CUBEのバージョンも、画面の情報も伝えず、次のように頼みました。

EC-CUBEのサイトのヘッダーの背景色を濃い緑にして、購入ボタンの色をオレンジにしたいです。CSSを書いてください。

ChatGPTの回答

/* ヘッダーの背景色を濃い緑にする */
header,
.c-header,
.ec-headerRole {
    background-color: #14532D !important;
}

/* 購入・カート関連ボタンをオレンジにする */
.ec-blockBtn--action,
.ec-inlineBtn--action,
.ec-blockBtn--primary,
button[type="submit"] {
    background-color: #F97316 !important;
    border-color: #F97316 !important;
    color: #FFFFFF !important;
}

/* （以下、ホバー時の色と、ヘッダー内の文字色を白にする指定が続く） */

※全文は、記事の最後にまとめて載せています。

結果

そのまま貼ったところ、ヘッダーは濃い緑になり、「カートに入れる」もオレンジになりました。ここまでは、頼んだとおりです。

ただし、次の点が、頼んだことと違いました。

見た目	結果
「お気に入りに追加」ボタン	「カートに入れる」と同じオレンジになった（もとは灰色がかった紫）。2つの区別がつきにくくなった
ヘッダーの検索ボタン	オレンジになった
ヘッダーのサイト名「テスト」	黒いままで、濃い緑の背景の上では読みにくい
右上の「新規会員登録」「お気に入り」「ログイン」	暗い色のままで、読みにくい

考えられる原因は、回答のCSSに入っていた button[type="submit"] という書き方です。これは、「画面の中の、送信ボタンすべて」を指す書き方なので、購入ボタン以外にも、色が当たったと考えられます（ブラウザの開発者ツールで、完全に確かめたわけではありません）。

また、ほとんどの指定に !important という、「ほかの指定より強く優先する」書き方がついていました。あとで直すときに、扱いにくくなる書き方です。

ポイント: バージョンを伝えなくても、動くCSSは出ました。ただし、「購入ボタンだけ」という範囲の指定は守られませんでした。

2回目：バージョンと、画面のHTMLを伝えて頼む

新しい会話を開き、次の情報を足して頼みました。

• EC-CUBEのバージョン（4.3.1-p1）
• 条件（ほかのボタンは変えない、!important は必要なとき以外使わない）
• ヘッダーと「カートに入れる」ボタンのHTML（ブラウザの開発者ツールでコピー）
• クラス名に確信がないものは、「確認が必要」と書いてもらう

EC-CUBE 4.3.1-p1（PHP 8.3、標準テーマ）を使っています。管理画面の「コンテンツ管理 → CSS管理」に貼るCSSを書いてください。
条件:
・ヘッダー全体の背景色を濃い緑にする。ヘッダー内の文字（サイト名、会員メニュー）は、読みやすい色にする
・商品ページの「カートに入れる」ボタンだけをオレンジにする。「お気に入りに追加」や検索ボタンなど、ほかのボタンは変えない
・`!important` は、必要な場合を除き使わない
・クラス名に確信がないものは、「確認が必要」と書いて、確認方法も教えてください
現在のHTMLの一部は、次のとおりです。
（ヘッダー部分のHTMLと、「カートに入れる」ボタンのHTMLを貼る）

HTMLの取り方

1. ブラウザで、ショップのページを開き、F12キーを押します（開発者ツールが開きます）。
2. 変えたい部分を、右クリックして「検証」を選びます。
3. 選ばれた部分を右クリックし、「コピー」→「outerHTML」を選びます。

ボタンは、フォーム全体ではなく、ボタンの部分だけをコピーしました。フォームには、認証用の値が入っていることがあるためです。

ChatGPTの回答

/* ヘッダーのナビゲーション部分 */
.ec-headerNaviRole {
    background-color: #14532D;
}

/* ヘッダー内の文字・リンク・アイコン */
.ec-headerNaviRole,
.ec-headerNaviRole a,
.ec-headerNaviRole .ec-headerNav__itemIcon,
.ec-headerNaviRole .ec-cartNavi__price,
.ec-headerNaviRole .ec-cartNavi__icon,
.ec-headerNaviRole .ec-headerNavSP {
    color: #FFFFFF;
}

/* 商品ページのカートボタンだけを変更 */
.ec-productRole__btn button.ec-blockBtn--action.add-cart {
    background-color: #F97316;
    border-color: #F97316;
    color: #FFFFFF;
}

（ホバー時の色などは省略）

回答には、次の説明も付いていました。

• 「提示されたHTMLで確認できるのは .ec-headerNaviRole というナビゲーション領域です。サイト名やロゴを含むヘッダー全体が、この要素の内側にあるかは、まだ分かりません」
• 「もしサイト名の背景だけ白いまま残った場合は、ロゴ部分を囲んでいる要素を確認する必要があります」
• 確認方法（右クリック → 検証）と、反映されないときの手順

AIが、分からない点を、自分から書いてくれました。

結果

見た目	結果
「カートに入れる」	オレンジになった
「お気に入りに追加」	変わらなかった（頼んだとおり）
検索ボタン	変わらなかった（頼んだとおり）
ヘッダーの緑	上の細い帯だけが緑。サイト名のエリアは、白のまま
右上の「新規会員登録」「お気に入り」「ログイン」	暗い色のままで、緑の上では読みにくい
カートの白い枠の中の金額	白い文字になって、見えなくなった

ボタンの範囲は、正確に絞れました。ただし、見た目の組み合わせには、問題が出ました。回答が心配していたとおり、サイト名の周りは白いままでした。

ヘッダーの「全体」という言い方が、AIには、「上の帯」と解釈されたようです。

3回目：問題を、具体的に伝えて直してもらう

同じ会話の中で、スクリーンショットを見せながら、次のように頼みました。

貼ってみたところ、次の2つが問題でした。直してください。
1. 緑の帯の右上にある「新規会員登録」「お気に入り」「ログイン」の文字が暗いままで、読みにくい
2. カートの白い枠の中の金額が白くなって、見えなくなった
それ以外の部分は変えないでください。

ChatGPTの回答

/* 修正1：会員メニューの文字・アイコンを白にする */
.ec-headerNaviRole .ec-headerNav__item a,
.ec-headerNaviRole .ec-headerNav__itemLink,
.ec-headerNaviRole .ec-headerNav__itemIcon {
    color: #FFFFFF;
}

/* 修正2：カート金額を暗い色に戻す */
.ec-headerNaviRole .ec-cartNavi__price {
    color: #333333;
}

回答は、原因を「会員メニューの文字には別のCSSが優先されている可能性がある」「カート金額にも白色が適用されてしまった」と、断定せずに説明していました。

結果

頼んだ2つは、一度で直りました。

ただし、もう1つ、問題が残っていました。カートのアイコンが、白い枠の中で、ほとんど見えない状態です。これは、頼んだ2つに入っていなかったので、直りませんでした。

4回目：残った点を、頼む

ありがとうございます。2点とも直りました。
もう1つ、カートの白い枠の中のカートのアイコンが、白くて見えません。
アイコンだけを、見える色に直してください。それ以外は変えないでください。

ChatGPTの回答

/* カートアイコンだけ色を変更 */
.ec-headerNaviRole .ec-cartNavi__icon {
    color: #333333;
}

結果

カートのアイコンが、濃いグレーで見えるようになりました。ほかの部分は、変わりませんでした。

結果のまとめ

回	頼み方	結果
1回目	バージョンなし	ヘッダーとボタンの色は変わった。ただし、ほかのボタンまで変わり、文字が読みにくくなった
2回目	バージョンとHTMLあり	ボタンの範囲は、正確になった。ただし、文字の色の組み合わせで、見えない部分が出た
3回目	問題を、2点、具体的に伝えた	2点とも、一度で直った。依頼に入れていないカートのアイコンは、残った
4回目	残った点を、頼んだ	一度で直った

この検証で分かったこと

実際に起きたことから、次のことが言えます。

1. バージョンと、画面のHTMLを渡すと、ボタンの範囲を絞れました。
2. AIの回答は、画面で確かめないと、問題が分かりませんでした。文字が白い枠の中で消える問題は、回答の説明には出てきませんでした。
3. 「ヘッダー全体」のような、あいまいな言い方は、解釈がずれました。範囲は、具体的に書くほうが安全です。
4. 直してもらうときは、「どこが」「どう困っているか」を、具体的に伝えると、早く直りました。
5. 頼まなかったことは、直りませんでした。気づいた点は、まとめて伝えるほうが、回数を減らせます。

ただし、冒頭に書いたとおり、ChatGPTの無料版を使った、1回の検証の結果です。

AIを使うときの心がけ

• 作業の前に、必ずバックアップを取る。貼る前の内容を、テキストファイルに保存する
• いきなり本番では試さない。検証用の環境で、確認してから使う
• AIのコードは、「下書き」と考える。画面で確かめて、問題があれば、具体的に伝えて直してもらう
• パスワードや、お客様の情報を、AIに貼らない。無料のAIは、入力した内容が、サービスの改善に使われる設定になっていることがあります
• 画面のHTMLを渡すときは、フォームの中身（認証用の値など）を含めないようにする

コピーして使える、プロンプトの例

次の形で、頼むと、範囲を絞りやすくなります。（ ）の部分を、自分の内容に変えて使ってください。

EC-CUBE （バージョン。管理画面の「設定 → システム設定 → システム情報」で確認できます）を使っています。
管理画面の「コンテンツ管理 → CSS管理」に貼るCSSを書いてください。
条件:
・（変えたいこと1）
・（変えたいこと2）
・（変えたくないこと。例: ほかのボタンは変えない）
・`!important` は、必要な場合を除き使わない
・クラス名に確信がないものは、「確認が必要」と書いて、確認方法も教えてください
現在のHTMLの一部は、次のとおりです。
（変えたい部分のHTML）

2回目〜4回目の回答を、つなげたCSS

ChatGPTの2回目〜4回目の回答を、順につなげたものです。検証のあとで、貼った内容を消してしまったため、実際に貼ったときと、完全に同じかどうかは、確認できていません。

/* ヘッダーのナビゲーション部分 */
.ec-headerNaviRole {
    background-color: #14532D;
}

/* ヘッダー内の文字・リンク・アイコン */
.ec-headerNaviRole,
.ec-headerNaviRole a,
.ec-headerNaviRole .ec-headerNav__itemIcon,
.ec-headerNaviRole .ec-cartNavi__price,
.ec-headerNaviRole .ec-cartNavi__icon,
.ec-headerNaviRole .ec-headerNavSP {
    color: #FFFFFF;
}

.ec-headerNaviRole a {
    text-decoration: none;
}

/* 商品ページのカートボタンだけを変更 */
.ec-productRole__btn button.ec-blockBtn--action.add-cart {
    background-color: #F97316;
    border-color: #F97316;
    color: #FFFFFF;
}

.ec-productRole__btn button.ec-blockBtn--action.add-cart:hover {
    background-color: #EA580C;
    border-color: #EA580C;
    color: #FFFFFF;
}

/* 修正1：会員メニューの文字・アイコンを白にする */
.ec-headerNaviRole .ec-headerNav__item a,
.ec-headerNaviRole .ec-headerNav__itemLink,
.ec-headerNaviRole .ec-headerNav__itemIcon {
    color: #FFFFFF;
}

/* 修正2：カート金額を暗い色に戻す */
.ec-headerNaviRole .ec-cartNavi__price {
    color: #333333;
}

/* カートアイコンだけ色を変更 */
.ec-headerNaviRole .ec-cartNavi__icon {
    color: #333333;
}

※このCSSは、EC-CUBE 4.3.1-p1の標準テーマで、この検証をしたときの回答が元です。バージョンやテーマが違うと、同じ結果にならないことがあります。

まとめ

• ChatGPTの無料版に頼んで、ヘッダーとボタンの色を変えることは、できました（頼み直しを含めて、4回）
• バージョンと、画面のHTMLを伝えたほうが、範囲を絞れました。ただし、見た目の問題は、画面で確かめて、人が気づく必要がありました
• 直してもらうときは、問題を具体的に伝える
• バックアップと、検証用の環境が、大事

次の記事では、色ではなく、ページの中身（Twig）を、AIに頼んでみました。

ほかにも、有料版のAIを使うと結果がどう変わるか、EC-CUBEの公式GitHubの情報を読ませて修正を頼むとどうなるかなど、この入門編より一歩進んだテーマも気になっています。試せたら、このブログで紹介します。

商品説明文などをAIで作るときの注意

この記事の内容とは別に、AIで商品説明文を作る場合は、景品表示法に注意が必要です。事実と違う効果や、実際より良く見せる表現は、書かないようにしてください。