WordPressのブログ固定ページを一部修正してほしいとAIに依頼しました。
直したのはページの一部分、のつもりでした。
ところが確認してみると、お問い合わせセクションのレイアウトが崩れ、ボタンの表示もおかしくなっていました。
修正を頼んでいないはずの場所が、気づいたら変わっていたんです。
これはAIの実装精度の問題だと最初は思いました。
でも原因はそこではなく、依頼の書き方、スコープ定義の問題でした。
目次
この記事のまとめ
- AIへの実装依頼には「直す場所」だけでなく「触らない場所」も必要
- WordPressや共通CSSがある案件では影響範囲の管理が特に重要になる
- 対象ファイル・対象セレクタ・変更禁止エリア・確認ページをセットで書くと安定する
直したのは一部分のはずだった
きっかけは、ブログ固定ページの見た目を少し整えたかったことです。
特定のセクションのmarginがずれていて、そこだけ修正してほしいと依頼しました。
指示の内容は「このセクションのレイアウトを直してほしい」というシンプルな伝え方。
返ってきたコードを適用すると、確かに対象セクションは直っていました。でも画面全体を確認すると、別の場所が崩れていたのです。
お問い合わせセクションの配置がずれ、CTAボタンの表示サイズが変わっていた。
修正を頼んでいないはずの場所に、変更が波及していました…。
というわけで今回は、原因と防ぎ方について解説していきます。
なぜ関係ない場所まで変わったのか
原因を調べてわかったのは、共通のCSSクラスに変更が入っていたことでした。
対象セクションで使われていたクラスは、実はサイト全体で共通して使われていたもの。
そのクラスのスタイルを修正したので、同じクラスを使っている別のセクションにも影響が出た、という流れです。
AIは「このセクションを直してほしい」という依頼を、「このセクションに使われているスタイルを整える」と解釈しました。
その解釈は間違っていないですし、意図もわかります。でも共通クラスを変えることの影響範囲は、ページを超えて広がっていた。
問題はAIの判断ではなく、「このセクションだけ直してほしい。共通クラスは触らないでほしい」という条件を伝えていなかったことでした。
「局所修正のつもり」が局所修正ではなかった
この経験から気づいたのは、CSSの修正は思っている以上に影響範囲が広いということです。
特にWordPressのテーマや、複数ページで共通のスタイルシートを使っている案件では、ひとつのセレクタを変えた瞬間に、まったく別のページやセクションが影響を受けることがあります。
「あのページは触っていないのに」と思っていても、CSS側では繋がっていたりする。
この繋がりを把握していないと、局所修正のつもりが広範囲の修正になってしまいます。
しかもAIへの依頼だと、その繋がりを伝えていないと、AIは「全体を整える方向」で解釈しやすいです。
指示が曖昧なほどAIは善意で判断を補い、想定外の場所に及ぶことがあるということですね。
解決した指示の書き方
何度か失敗を繰り返した後、指示のフォーマットを変えました。
今は以下の項目をセットで書くようにしています。
対象ファイル：修正するファイルを明示する（例：page-contact.css）
対象セレクタ：変更していいクラスやIDを限定する（例：.section-heroのみ）
変更禁止エリア：絶対に触らないファイル・クラスを明記する（例：common.cssは変更禁止、.btnクラスは変更禁止）
確認対象ページ：修正後に動作確認すべきページを指定する（例：トップページ・お問い合わせページ・固定ページ3点）
完了条件：何を確認したら修正完了とするかを書く（例：対象セクションのマージンが整い、ほかのページで表示崩れがないこと）
これだけで、AIが勝手に共通スタイルを変えて別の場所が崩れる、というパターンがかなり減りました。
指示が長くなりますが、戻し作業を考えると圧倒的に早いです。
AIへの実装依頼で本当に必要なこと
AIに任せるメリットは、修正のスピードと試行回数を増やしやすいことです。
手作業ではちょいと厳しいところを「少し違う、こっちの方向で試して」と何度も繰り返せるのは効率が上がります。
一方で、共通部分に触れた瞬間に想定外の崩れが起きやすく、確認コストが増えるというデメリットもあります。
修正が速い分、確認が追いつかなくなることも。
このバランスを取るには、「何を作るか」より「どこまで触っていいか」の管理が先に必要だと感じています。
実装そのものより、影響範囲の明文化のほうが成果に効く。これが今回の一番の学びでした。
曖昧な依頼は、速く進む代わりに戻し作業も増えやすい。
そのトレードオフを意識して指示を書くようになってから、AIとの作業がだいぶ安定してきた気がしています。
まとめると、依頼の前にスコープを決める
AIへの実装依頼で失敗しやすいのは、「直す場所」だけを書いて「触らない場所」を書かないケースです。
特にWordPressや共通CSSを使っている案件では、影響範囲の管理を先に考えておくことが大事になります。
指示に「変更禁止エリア」と「確認対象ページ」を足すだけで、結果がかなり安定します。
最初は指示を書くのに少し時間がかかりますが、崩れてから直す時間と比べれば、先に書いた方がずっと早いです。
ここら辺は、使っていれば感覚が掴めてくると思います。
今日もコツコツ積み上げていきましょう！
