ChatGPTが生成したHTMLを編集する方法

ChatGPTが、HTMLページを丸ごと差し出してきました——ヘッダー、ヒーロー、機能カードが一列、フッター。よくできています。九割五分、よくできている。でも、ボタンのひとつが「スタード」になっていて、あなたの手はもう、チャット欄へ「誤字を直して、生成し直して」と打ちにいこうとしている。

やめましょう。

もっと速い道があります。ChatGPTが書いたHTMLを編集するのに、細かいところで頼み直さないこと——そのコードを .html ファイルとして保存し、そのファイルをビジュアルエディタで開いて、テキストとコードを直接変えます。誤字、間違ったリンク、ずれた色——ファイルの中で直して、残りの95%には手を触れない。

この先は、実際の手順そのものと、人がつまずく二つ三つの場所です。

ページ全体を一つのファイルで、と頼む

何かを保存する前に、聞こえ以上に大事なことがひとつ。ChatGPTに、ページ全体を一つのファイルにまとめてと頼みます——HTMLも、スタイルも、JavaScriptのかけらも、すべてインラインで、すべて一つのブロックに。

なぜそこまで？単一のファイルは、開いて手に持てるものだからです。一つの .html、一つのページ、それで終わり。ChatGPTがそれを styles.css と script.js と部品の入ったフォルダに割り始めた瞬間、あなたが編集しているのはもうページではありません——小さなプロジェクトと格闘していて、それにはこの記事が扱わないコード環境が要ります。

だからプロンプトでは、はっきり言う。「CSSとJSはぜんぶインラインで、一つのHTMLファイルに、外部ファイルなしで」のように。返ってくるのは一つのコードブロック。それが、あなたのほしい形です。

チャットから出して、自分のディスクへ

チャット画面に座っているコードは、まだファイルではありません。ファイルについての、テキストです。

ブロック全体をコピーする——その隅にコピーアイコンがあります。何でもいいのでプレーンテキストのエディタを開き、貼り付けて、page.html として保存する。名前はどうでもいい。末尾の .html が肝心です。

Windowsでの落とし穴がひとつ。エディタによっては、黙って .txt をくっつけてきて、page.html.txt になってしまう——それはウェブページではなく、衣装を着たテキスト文書です。フォルダの表示で拡張子を出す設定にして、確かめましょう。ChatGPTがチャットのブロックではなくキャンバスでページを作ったなら、ここは全部飛ばして、そのダウンロードボタンを使えばいい。

ちゃんと見える場所で開く

では、ファイルをダブルクリック。ブラウザで開いて、あなたのページが——ボタンの誤字ごと——目の前に出ます。

ここに、誰もが一度ははまる落とし穴。そのブラウザの表示は、読み取り専用です。見られるけれど、触れない。何かを変えるには、ファイルをエディタで開く必要があります。ただ表示するだけではだめ。

種類は二つ。コードエディタは生のタグを見せてくれます。HTMLを読むのが趣味なら、それでいい。ビジュアルエディタはページそのものを見せて、その上をクリックさせてくれる——たいていの人が本当にほしいのはこっちです。HTML Tweak はビジュアルのほう。あなたの .html ファイルをブラウザでそのまま開き、本物のページを見せ、コードを横で同期させ続けます。無料、登録不要、そして一度に一つのファイルを開く——ChatGPTが今しがた作ったページには、それがちょうど問題の大きさに合っています。

言葉をクリックして、上から打つ

「直し」のほとんどは、ここに住んでいます。そしてこれは、AIでサイトが作れますよと売り込むとき、誰も言わない地味な真実です。あなたに必要な変更は、まず構造ではありません。ひとつの言葉。電話番号。example.com を指したままのリンク——ChatGPTがあなたの本当のURLを知らなかったから。

ビジュアルエディタでは、「スタード」と書かれたボタンをクリックして、「スタート」と打ちます。それだけ。見出しをクリックして、書き直す。段落をクリックして、締める。リンクを、どこか本物へ向ける。仮の画像を、自分のものに差し替える。

そして、このページを、コードを見ると慌てる人に渡すなら——編集のあいだレイアウトを固定する、テキスト専用モードがあります。ページの言葉を一語残らず書き換えても、デザインを物理的に崩せない。このモードを作ったのは、コードを書けない人が「誤字を直す」たびに、うっかり閉じタグを消すのを、何度も見てきたからです。

クリックで足りないときは、コードを開く

変えたいものが、テキストではないこともあります。

アクセントカラーが、ほんの少し青に寄りすぎ。ヒーローの下の余白が、詰まりすぎ。ChatGPTがタグを半分開いたまま残して、一つのセクションが壊れて見える。そういうときは、コード表示に切り替えて、その行を見つけて、変える——16進数の色、少しのパディング、抜けている >。

ファイル全体を理解する必要はありません。要るのは、その一行。双方向のエディタでは、ページ上の要素をクリックすると、そのコードが左で光ります。だから、正しい <div> を探して400行をスクロールすることはありません。行を変えて、ページが更新されるのを見て、次へ。

保存する——そしてブラウザの、ひとつの落とし穴

変更はすませました。保存しましょう。

ここでひとつ断っておきます。保存のしかたは、ブラウザによって変わるからです。Chrome と Edge では、HTML Tweak は変更を、あなたが開いたそのファイルにそのまま書き戻せます——ファイルを一度選べば、あとはその場に保存します。Firefox や Safari やその他では、代わりに編集済みのコピーをダウンロードし、あなたはそのコピーを持っておく。少し手間ですが、結果は同じ。どちらにしても、どこにもアップロードはされません。ファイルは、始めから終わりまであなたのマシンの上にいます。

誰かに見せる前に、自分で見る

保存したファイルを、もう一度だけブラウザで開いて、他人になったつもりで読んでみる。ここが、みんなが飛ばす一歩で——そして、その誤字が、メールで送ってしまった版の中で生き延びていた、と気づくのです。

「公開」に、特別なことは何もありません。あなたのファイルは、もう本物の .html ページです。ウェブホストにドラッグする、メールに添付する、共有フォルダに置く——そのページが何のためだったにせよ。もう、ほかのどのウェブページとも同じようにふるまいます。だって、ウェブページなのですから。

たいてい、ここでつまずく

いくつかのパターン。たいていは、私自身がやらかしたものです。

一語の直しのために、頼み直す。 ChatGPTに「誤字を直して」と頼むと、ページ全体を生成し直します——頼んでいない新しい言い回し、望んでいないレイアウトの変更、そしてあなたは、どこが動いたかを見つけようと二つの版を見比べている。最後の一手の直しは、ファイルの勝ちです。ゼロからやり直さずにAI生成のHTMLを編集するという、対になる記事もあります。もっと長い理屈がほしければどうぞ。

「ウェブサイト」を頼んで、プロジェクトを受け取る。 「ウェブサイトを作って」と言うと、ChatGPTは、十いくつものファイルに散らばったReactやNextの土台を渡してくることがあります。それは本物のものですが、開いてクリックで編集するページではありません。単一ファイルの流れがほしいなら、「単一のファイルで」と、口に出して頼むこと。

ブラウザのタブを編集して、残ると思い込む。 ファイルを見ることは、編集することではありません。ただのブラウザのプレビューで自分がしているつもりの変更は、どこにも行きません。ちゃんとしたエディタで開きましょう。

チャットの中にしか無かった画像。 ときどきページは、ChatGPTがURLをでっちあげた画像や、会話の中に生きていた画像にリンクしています。それは壊れて表示されます。その <img> タグを、あなたが実際に持っている本物のファイルへ向けてください。

大きな編集の前に、バックアップなし。 ページの半分を作り直すつもりなら、まずファイルを複製する。二秒で済んで、ひどい午後をひとつ、救ってくれます。

---

ChatGPTのコードをファイルにコピーして、HTML Tweak で開いて、本当に間違っている一箇所だけを直す。残りの95%に、知らせる必要はありません。