対象バージョン: EC-CUBE 4.3.1-p1（④の記事で作った、検証用の環境）。使ったAI: Claude Code（Claude Sonnet 5.5）。検証日: 2026年10月11日
検証用の環境での記録です。実際にお店を運営した記録ではありません。
EC-CUBEを入れた直後のトップページは、どのお店も同じ見た目です。「自分のお店らしいデザインにしたい」と思ったとき、AIに頼めば、どこまで変えられるのでしょうか。
⑤の記事では色を、⑥の記事では商品ページの1行を、ChatGPTの無料版に頼んで変えました。今回は、トップページ全体のデザインを、「和風」に一新してもらいました。
先に、この記事の範囲を書いておきます。
- 試したAIは、Claude Code（Claude Sonnet 5.5）だけです。⑤⑥のChatGPT無料版とは別のAIなので、優劣は書きません。
- この記事の制作を手伝っているAIも、同じClaudeです。 誰が何をしたかは、区別して書きます。
- 触ってよい範囲は、管理画面から編集できるものに限りました。
- ここで書く結果は、この1回の検証で起きたことです。いつでも同じになるとは限りません。
この記事で分かること
- トップページを変えるとき、管理画面のどこを触ることになるか
- CSSだけでは変えられなかったこと
- AIに複数のデザイン案を作ってもらい、比べて選ぶ流れ
- 途中で起きた問題と、直し方
やったことの全体
Claude Codeに、次のように頼みました（実際のやり取りを、短くまとめたものです）。
トップページのデザインを、一新したい。管理画面から編集できるものは、すべて触ってよい。
Claude Codeは、保存したトップページのデータを読み、画面を描画して確かめながら、コードを出しました。私は、それを管理画面に貼って、実機で確かめる役です。
| 段階 | 変えた場所 | 内容 |
|---|---|---|
| 1 | CSS管理 | CSSだけで、白地・緑のミニマルなデザインに |
| 2 | TOPページ（ページ管理） | スライダーを、キャッチコピーのヒーローに置き換え |
| 3 | CSS管理 + TOPページ | デザイン案を5つ作って比べ、「和風」に全面変更 |
JavaScript管理やブロック管理も使ってよい範囲でしたが、実際に使ったのは、CSS管理とTOPページ（ページ管理）の2か所だけでした。
準備: 変更前のトップページを保存する
まず、トップページを、ブラウザの「ウェブページ、完全」で保存しました。HTMLに加えて、CSSと画像も保存されます。
保存データから、次のことが分かりました。
- CSS管理の中身は、空でした。JavaScript管理は、初期のコメントだけでした。
- 標準のCSS（
style.css）は、公式の4.3.1と同じでした。 - TOPページのTwigは、画像スライダーだけです。そのほかの部分は、レイアウト管理で並べた「ブロック」でした（EC-CUBE公式の4.3.1のソースで確認）。
段階1: CSSだけで一新する
CSS管理に貼るCSSだけで、色・文字・余白・ボタンを変えました。
- 灰色の帯をやめて、白地に
- 見出しは、英字を小さく緑、日本語を大きく
- ボタンは、緑の丸型に
- 画像は、角丸に
起きた問題と、直し方
問題1: 画面を見て、直した点（ローカルの描画）
Claude Codeは、描画した画面を見ながら、4回直しました。主な点は次のとおりです。
- 「more」ボタンが、黒のまま残った（ボタンの種類が違うクラス名だったため）
- 灰色の帯を消したら、ダミー画像だけの「カテゴリー」欄が、薄い絵だけになって目立った
- 新着情報の右端の丸が、黒のまま残った
問題2: 貼っても、実機に反映されなかった
CSSを貼ったあと、実機の画面は、変更前のままでした。保存データを調べると、CSS管理のファイル（customize.css）が、0バイトのままでした。
原因は、CSSの中の、次の1行でした。
body.front_page .ec-role:has(.ec-categoryRole),CSS管理は、:has() という書き方をエラーにして、保存できていませんでした。このエラーは、管理画面の表示を見た私が、Claude Codeに伝えました。AIには、管理画面のエラーが見えませんでした。
直し方は、その1行を外すだけでした。外しても、見た目（ページの高さ）は変わりませんでした。貼り直して、登録すると、反映されました。
段階2: CSSでは変えられなかったもの
スライダーの画像には、「EC-CUBE」という文字が、画像の中に入っています。文字の色や大きさを変えるCSSでは、どうにもなりません。
そこで、TOPページのTwig（ページ管理 →「TOPページ」）を直して、スライダーを、文字だけのヒーロー（キャッチコピーとボタン）に置き換えました。
作業の前に、元のTwigを、ファイルに保存しました。元に戻せるようにするためです。
起きた問題
ヒーローのボタンが、中央ではなく、左に寄りました。標準のボタンの指定が、横幅いっぱいの形だったためです。CSSを1か所足して、直りました。
段階3: デザイン案を作って比べる
「どんなデザインにするか」を決めずに進めると、AIは、無難な案にまとめます。そこで、Claudeのデザインキャンバス（デザインの試作を、並べて見られる機能）で、案を5つ作ってもらいました。店名・商品名・価格は、検証用のお店の実際の内容です。
| 案 | 方向 | 特徴 |
|---|---|---|
| A | ミニマル・グリーン | 白地に濃い緑。明朝体の見出し |
| B | ジェラートカラー・ポップ | 商品の色（ピンク・ミント・黄）を使う。丸ゴシック |
| C | ミッドナイト・ブティック | 濃紺の地に、ミントのアクセント |
| D | 和風 | 生成り・墨・藍・朱。縦書きのキャッチ |
| E | Apple風 | 大きな文字と余白。ロゴや書体は使っていない |
私は、D（和風）を選びました。
和風への全面変更
和風は、色・書体・文字の向きまで変える、大きな変更でした。
- 色: 生成り（背景）・墨（文字）・藍（見出しの縦棒）・朱（「カートに入れる」と角印）
- 書体: 明朝体（Shippori Mincho、Zen Old Mincho）を、Google Fontsから読み込む
- ヒーロー: 縦書きのキャッチを、右から左へ。朱の角印「季」
- 見出し: 藍の縦棒＋日本語のみ
- ボタン・カード: 罫線のみ
起きた問題と、直し方
ローカルの描画で見つけて、直した点です。
- 縦書きの読む順が、逆だった。 縦書きは、右の行から左へ読みます。最初は、左から右に並んでいました（
flex-direction: row-reverseで直した） - カテゴリーナビの白い背景と、罫線のはみ出し。 標準のCSSが、ナビに白い背景を付けていた
- 画像の白い余白が、生成りの背景に合わない。 画像の白い部分が、四角く浮いた（
mix-blend-mode: multiplyで、背景になじませた） - 商品詳細ページで、ナビのすぐ下に写真が接した。 余白を足した
TOPページのTwigとCSSを貼って、実機で確認しました。
スマホでは、縦書きのキャッチが縦に積まれます。
ほかのページへの影響
ヘッダー・ボタン・背景は、全ページ共通のCSSで変えています。商品一覧と商品詳細も、保存データから描画して確認しました。
商品一覧・商品詳細は、崩れていませんでした。「カートに入れる」が朱に、「お気に入りに追加」が罫線のボタンになりました。
確認できなかったこと、残ったこと
- スマホでは、縦書きのキャッチが縦に長くなります。 画面を占める量が多いので、スマホだけ横書きにする方法もあります。
- 「About」の説明文は、標準のダミー文のままです。 ブロック管理で、書き換えられます。
- カテゴリー欄は、CSSで隠しただけです。 本来は、レイアウト管理でブロックを外します。
- 写真は、標準のダミー画像のままです。 自分のお店の写真に、差し替える必要があります。
まとめ
- 管理画面から編集できる範囲（CSS管理と、TOPページのTwig）だけで、トップページのデザインを、全面的に変えられた
- AIは、パソコンの中で画面を描画して確かめながら、直せた。ただし、管理画面のエラー（
:has()が保存できない）は、AIには見えず、人が見つけて伝える必要があった - 「どんなデザインにするか」は、AIに案を複数作ってもらい、人が選ぶと決めやすかった
- CSSでは変えられないもの（画像の中の文字）は、TOPページのTwigを直す必要があった。作業の前に、元の内容を保存した
AIを使うときの心がけ
- 作業前に、変更する場所の中身を、必ず保存する
- いきなり本番で試さず、検証用の環境で試す
- AIの出したコードは、画面（PCとスマホ）で確かめる。管理画面にエラーが出たら、そのまま伝える
- 全ページ共通の指定（ヘッダー・ボタンなど）は、ほかのページへの影響も確認する
- 外部のフォント（Google Fontsなど）を読み込むと、外部のサービスにアクセスが発生する。使うかどうかは、自分で判断する
商品の紹介文やキャッチコピーを、AIで作るときの注意
この記事のキャッチコピー（「季節のおいしさを、ひとつずつ丁寧に。」）は、検証用の仮の文言です。実際のお店で、AIにキャッチコピーや商品の説明文を作ってもらう場合は、景品表示法に注意が必要です。事実と違う効果や、実際より良く見せる表現が入っていないか、人が確認してください。
