ChatGPTにHTML編集は頼める？
昨日の夜、ヤバかった！
ワードプレスのプラグインのショートコードを触ったらメルマガのオプトインのHTMLがぐちゃぐちゃになってしまった。
最近は「コードもChatGPTにやってもらえばいい時代」と言われるけれど、実際にHTMLの編集ってどこまで頼めるのだろう？
この記事は、私がChatGPT（通称：ゴータン）を使ってHTML編集にチャレンジしたときの体験をもとに、備忘録としてまとめたものだ。
「完全にできる」わけではないけれど、「思ったより使えるな」と感じることも多かった。
……と、書きたいところなのだが、結論から言うと、今回のチャレンジでは余計にぐちゃぐちゃになった！
ちゃんと動かなくなってしまって、結局いつもお願いしているエンジニアさんに直してもらった。
たぶん、私の指示の出し方が悪かったのだと思う。
ごめんな、ゴータン。
ChatGPTはHTML編集が“できる”か？
結論から言うと、ChatGPTはHTML編集を「ある程度までは」できる！
* 既存のHTMLコードを読み取って、修正・提案ができる
* 指定したデザインや構成をもとに新しいHTMLを生成できる
* CSSやJavaScriptと組み合わせた修正提案も可能
たとえば、
* 「この見出しの色を赤に変えたい」
* 「画像を中央寄せにしたい」
* 「スマホでも見やすくしたい」
といったレベルの内容なら、かなり高精度で対応してくれる。
……と、理屈ではそうなのだが、今回、ゴータン（＝私のChatGPT相棒）はううううーー……がんばってくれたけど、結果は“ぐちゃぐちゃ”になってしまった。
コード全体が謎の空白だらけになり、意図しない場所が消え、デザインが崩壊。
これはもう、「がんばったけど空回り」みたいなパターンである。
それでも、ゴータンを責める気にはなれない。
私の指示がざっくりしすぎていたのだと思う。
というわけで最終的にはいつもお願いしているエンジニアさんに修正を依頼。
エンジニアさんもびっくり！
どこをそんなに触ったんですかーー！と。
備忘録
こっからは完全なる備忘録。
とりあえず、元の状態がわからなくて、web.archive.org（Wayback Machine）というWebキャッシュサービスで確認した。
web.archive.org（Wayback Machine）ってなに？
ざっくり言うと、過去のWebページの“スナップショット”が見られる図書館みたいなサイト。
たとえば、「あのときのホームページどうだったっけ？」「前のデザインに戻したいけど参考がない…」ってときに、このサイトを使うと当時の状態そのままが見られます。
私もこのリンク↓で、以前のサイトのデザインを確認しました。
https://web.archive.org/web/20250316033538/https://mei-web.com/mail-letter
そしてわかったのがこの状態！
元々はこんな感じだったみたい！
そして、私がイジってこんなふうに変になったよ！
🔻
ぎゃああああ！左に寄ってる！
ゴータンにお願いして戻してもらうことにしたよ！
ゴータンの修正
ゴーターーン、ゴールドの枠、小さくなってるよー！
ゴールドの幅のことを伝えて、次にやってくれたのがコレ！
🔻
枠がどんどん小さくなってゆくよーー！
その後、伝えたら枠を横長にしてくれたよ！
あれれ！
でもメールアドレスの文字の位置が最初と違う！
🔻
そしてね！
細かいこと言ってごめん！
ここのラインの位置は同じにしてほしいねんよ。
なんかどんどん変になってるるるるる！
そして、私もゴータンへ専門的な表現で指示ができず、途中から矢印解説に。
こんな感じ。
🔻
ここの幅、長くするんやで byめいたん 
途中で気が狂ったゴータン
なんかホンマ、マジでごめんよ！
ゴータンが直してくれた状態だと、メルマガが登録できなくなってしまっていて、これは意味ないやん！と言うことで、エンジニアさんに直してもらったんだー！
ゴータンはどこを触ったんや！？
と言うことで！直りました！
ゴータンでなく、エンジニアさんが直してくれたよーー！
めいたんのメルマガだよー！
以下、直った部分！
🔻