筆者は ShipPress という Mac アプリの開発者です。記事の最後に自作ツールの紹介を少し含みますが、本文の頼み方と戻し方はどの AI ツール（Claude Code、Codex、Cursor など）でもそのまま使えます。
AI に「トップページをもう少しおしゃれにして」とだけ送ると、ヘッダーの色、見出しのフォント、ボタンの角丸、フッターの文言までまとめて変わって返ってくることがあります。どれが良くてどれが余計だったのか分からないし、戻すにも全部戻すしかありません。
WordPress サイトを AI にチャットで直してもらうとき、結果を左右するのはモデルの性能よりも頼み方だと感じています。ここでは、サイトができあがったあとの「修正」に絞って、うまくいきやすい頼み方と、失敗したときの戻し方をまとめます。
1. 1 メッセージにつき変更は 1 つ
まずこれです。
# 避けたい例
ヘッダーを緑にして、FAQ を追加して、電話番号も直して、全体的に余白を広めに
# こう分ける
1. ヘッダーの背景を濃い緑、文字を白にしてください
2. （確認してから）「席の予約」セクションの上に FAQ を追加してください
3. （確認してから）電話番号を 075-123-4567 に直してください
まとめて頼むと、AI は複数のファイルやブロックをまたいで一度に書き換えます。そのうち 1 つだけ気に入らなかったとき、その 1 つだけを戻すのが難しくなります。1 回 1 変更なら、1 回の作業も短く済み、戻すときの単位も小さくなります。
「全体的に」「いい感じに」のような範囲のない指示も、同じ理由で避けたほうが無難です。
2. 場所は「画面に見えている言葉」で指定する
AI はサイトのファイルやブロックの構造を読んで場所を探します。人間側が「2 つ目のところ」「真ん中あたり」と言っても、AI からは対応が取れません。画面に表示されている見出しやボタンの文言で場所を伝えると、ほぼ迷わなくなります。
| 曖昧な言い方 | 伝わりやすい言い方 |
|---|---|
| 上のほうの画像 | トップページのいちばん上、「港町で焙煎するコーヒー」という見出しの背景画像 |
| 2 つ目のセクション | 「メニュー」の見出しがあるセクション |
| FAQ を追加 | 「席の予約」セクションの上に FAQ を追加 |
| ボタンを目立たせて | 「予約する」ボタンだけ、背景をオレンジ、文字を白に |
あわせて範囲も一言添えます。「トップページだけ」「全ページ共通のヘッダー」「このボタンだけ」のどれなのかで、AI が触る場所が大きく変わります。
3. 色は「値」と「どこまで変えるか」をセットで
色の指示で一番起きやすいのは、こちらは 1 か所のつもりなのに、AI がサイト全体の配色を変えてしまうケースです。ブロックテーマでは色が theme.json のカラーパレットで管理されていることが多く、パレットの色を変えると、その色を使っている箇所がすべて変わります。
# 1 か所だけ変えたい
ヘッダーの背景色だけ #1F4D3A にしてください。パレットの色は変えないでください
# サイト全体のテーマカラーを変えたい
メインカラー（ボタンやリンクに使っている緑）を #1F4D3A に変えてください。サイト全体に反映してください
カラーコードが分からなければ「濃い緑」でも通じますが、何度かやり取りすると微妙に色がずれていくので、決まったら値で固定しておくと安定します。「今のフッターと同じ色」のように既存の要素を基準にするのも有効です。
4. 文言は「そのまま使う文章」を渡す
最初に AI が作ったサイトには、電話番号、価格、営業時間などの仮の値がよく入っています。これを直すとき、AI に推測させないことが大事です。
# 避けたい例
営業時間をそれっぽく直して
# こうする
営業時間を次の内容に置き換えてください。サイト内のすべての箇所が対象です。
平日 8:00〜18:00 / 土日 9:00〜17:00 / 水曜定休
ポイントは 2 つです。
- 実際の文章をカギカッコや改行で区切って渡す（AI が言い換えないように「この文言のまま」と書いておく）
- 「すべての箇所」か「このページだけ」かを書く
電話番号や住所はフッター、お問い合わせページ、構造化データなど複数の場所に入っていることがあります。「すべての箇所」と頼んだら、どこを直したかも答えてもらうようにすると、抜け漏れに気づけます。
5. 1 ターンごとに「何が変わったか」を確認する
変更が返ってきたら、次の依頼を送る前に確認します。見る場所はだいたい決まっています。
- AI の説明: 何をどこで変えたか。頼んでいないファイルやページを触っていないか
- プレビュー: 対象のページを上から下までスクロール。共通パーツ（ヘッダー・フッター）を変えたなら別のページも 1 つ見る
- スマホ幅: 余白や文字の折り返しは、PC 幅では問題なくてもスマホで崩れていることが多い
- 差分（git を使っている場合）:
git status
git diff --stat
説明に出てこないファイルが差分に入っていたら、その時点で聞くか戻します。何回か先に進んでから気づくと、どの指示が原因か分からなくなります。
6. うまくいかなかったときの戻し方
直し方を言い直す前に、まず戻す
結果が気に入らないとき、「さっきのは違う、こうして」と上書きで直してもらうこともできます。ただ、失敗した変更の上に修正を重ねると、不要なコードや CSS が残りがちです。大きく外れたときは、いったん元の状態に戻してから頼み直したほうがきれいに仕上がります。
ファイル側: git
テーマやプラグインのファイルは git で戻すのが確実です。依頼を送る前にコミットしておくと、1 依頼 = 1 コミットで戻せます。
# 依頼の前
git add -A && git commit -m "before: ヘッダーの背景色を変更"
# 直前の依頼の変更を捨てる（未コミットの変更を破棄）
git restore .
git clean -nd # AI が新しく作ったファイルの一覧（まだ消さない）
git clean -fd # 一覧を確認してから削除
DB 側: WordPress ならではの注意
WordPress では、ファイルだけ戻しても元に戻らない変更があります。
- 固定ページや投稿の本文 → DB（リビジョンが残っていれば管理画面の「リビジョン」から戻せる）
- サイトエディターで編集したテンプレートやテンプレートパーツ、グローバルスタイル → DB の
wp_template/wp_template_part/wp_global_styles
ブロックテーマで「theme.json を戻したのに色が変わらない」ときは、DB 側のカスタマイズが優先されていることがあります。WP-CLI で確認できます。
wp post list --post_type=wp_template,wp_template_part,wp_global_styles --fields=ID,post_type,post_name,post_modified
作業の前に DB を書き出しておけば、まとめて戻すこともできます。
wp db export backups/before-$(date +%Y%m%d-%H%M).sql
wp db import backups/before-20261029-0900.sql # 戻すとき
頼み方のテンプレート
最後に、毎回使っている形をまとめておきます。
【場所】トップページの「メニュー」セクション
【変更】見出しの下に、次の文章を 1 段落で追加
【内容】「豆は毎朝、店の奥で焙煎しています。」（この文言のまま）
【範囲】このページだけ。ほかのセクションとスタイルは変えない
【報告】どのファイル・どのブロックを変えたか教えてください
ここまで書かなくても通じることは多いですが、思った通りにならなかったときは、たいていどれかの項目が抜けています。
おまけ：ShipPress での場合
ここまでの確認と戻しを手作業でやるのが面倒だったので、Mac 用の無料アプリ ShipPress では最初から組み込んでいます。
- 左にチャット、右にサイトのプレビュー。「公開する」を押すまで、変更はすべて手元の Mac の中だけ
- 依頼のたびに「変わったところ」が表示され、「プレビューで見る」で結果を確認できる
- 「この変更を元に戻す」や画面上部の「履歴」から、以前の状態に戻せる
- プレビューは「スマホ」表示に切り替えられる
- AI の作業中に送ったメッセージは「次に実行」で待機するので、1 つずつ順番に処理される
ヘッダーの色を変える、FAQ を追加する、電話番号を差し替える、という上の流れを実際にやっている動画です。
手順の詳細はチュートリアルにまとめています。
- チュートリアル「チャットでサイトを編集する」: https://shippress.codotx.com/ja/docs-edit-by-chat?ref=qiita-ja
- 前回の記事（AI に WordPress を触らせる前の安全策）: https://qiita.com/shippress/items/fdebe217b46bfde7d56c
みなさんは AI にサイトを直してもらうとき、どんな書き方をしていますか。「これを書くようになってから失敗が減った」という一言があれば、コメントで教えてください。