ワードプレスでAI(ChatGPT)に頼んだデザインが反映されない、もしくはサイトのレイアウトを壊してしまう事がある理由について解説いたします。
AIに頼んだデザイン変更(スタイル)をstyle.cssにコピペしても効かない理由
下記のコードの例は、AIにボタンをオレンジ色にするようなスタイルシートを作成してもらったコードの例です。
.button {
background-color: orange;
padding: 15px 30px;
font-size: 18px;
}
このコード自体は誤りではなく、ちゃんと効くサイトもあるかもしれませんが、意図した色に変わらない場合も多いかと考えられます。
AIが作ったスタイルシートが効かないもしくは、レイアウトを崩してしまう理由は、ページ全体のHTMLやその他のスタイルシートの影響を考慮せずにコードを作っているからです。
AIのスタイルが効かない、もしくはレイアウトを壊す理由
・スタイルを適応する要素指定が誤っている
・AIの書きだしたコードより後に別のスタイルが適応され上書きされている
・スマホのレスポンシブ対応を考慮しないコードになっている
・サイズの指定が、枠幅を無視している
・視覚的な検討をAIはできない
等
どのようにAIに聞けば正しいコードを作ってくれる？
AIには詳細な情報を与えて聞く方が、ちゃんと動くコードを作ってくれる場合が多いです。
× サイトのボタンをオレンジ色にするスタイルお願い
○ form要素内にあるmybuttonというクラス名のボタンの色をサイズはそのままでオレンジ色にするCSS作って
出力例は下記となります
form .mybutton {
background-color: orange; /* 背景をオレンジに */
color: white; /* 文字色（見やすくするため） */
border: none; /* 必要なら枠線を消す */
}
より正確なコードが出力されました。
ただ、この場合でも多少無駄なコードがあり、!importantという最優先にする指定もない為、これでもコピペしても動かない可能性があります。
結局コーディングの知識が必要？
AIの作ったCSSのコードがちゃんと効かない、もしくはレイアウトを壊してしまうという問題は２０２６年現在非常によく報告されています。
この場合、より詳細な聞き方をしていただき、質問を重ねていただくと、ちゃんと反映されるCSSを作ってくれる可能性が高くなっていくかと存じます。
※AIと共同で作業を行う場合は、該当部分のバックアップを取ったうえでテストサイトで作業を進める方が安全です。
ただ、やはりCSSの知識やページ内のHTMLや、サイト全体に適応されているスタイルのコードを包括的にみるが必要だったりする場合も多い為、このような場合は視覚的な検討が可能で、包括的な視点でサイトを見ることが出来る人間の技術者が実作業を行う方が早かったり安全である場合がまだまだ多いと考えられます。
