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

AIに直してほしいところは、たったひとつでした。AIが作ってくれたページの、日付がひとつ間違っていたんです。日付は直りました。ついでに、お気に入りだったティール色のボタンが紫になり、気に入っていた見出しの名前が変わり、二つ前のメッセージで足しておいた場所の注記が、いつのまにか消えていました。直してほしかったのは一つ。頼んでいない変更が三つ。

というわけで、先に結論を。AIが生成したHTMLを編集したいなら、小さな直しのために頼み直すのはやめましょう。ファイルをビジュアルエディタで開いて、テキストやリンク、色、画像をその場で変える。ページを作るときと、大きく書き直すときはAIに。最後の細かい仕上げは自分で直接いじる。そうすれば、ほかの部分はそっくりそのまま残ります。

この先は、なぜこの分担がうまくいくのか、そして実際にどうやるのかの話です。

なぜ小さな一箇所の変更が、まるごと新しいページになるのか

こういうチャット型のジェネレータは、あなたのファイルに手を伸ばして単語をひとつ動かす、なんてことはしません。毎回、まっさらな答えが返ってくるだけです。日付を変えてと頼めば、ページを最初から、自分の頭の中から書き直します。二回目の下書きは、新しい下書き。そして新しい下書きは、ずれていきます。

暗記している詩を誰かに暗唱してもらって、それから「もう一回、でも三行目だけ直して」と頼んでみてください。三行目は直してくれます。でも六行目の言い回しも、ほんの少し変わります。紙の上を直しているのではなく、全体をもう一度そらんじているからです。頼み直すたびに、それが起きます——詩を丸ごと暗唱し直し、どの行もわずかに違って出てくるチャンスを、また一つ与えているわけです。

別の詩がほしいときなら、それでいい。でも、九割五分よくできた詩が手元にあって、三行目だけ直したかったときには、気が変になります。

作ることと、仕上げることは、別の仕事

何もないところからページを生み出すのは、ひとつの仕事です。AIはこれが本当に得意。何かを言葉で説明すると、真っ白な画面が数秒で本物になる。これは立派なもので、やめておけなんて言う気はありません。

そのページを仕上げるのは、別の仕事です。上司が求める、まさにその言い回し。プレースホルダーではなく、正しい場所を指すリンク。AIの当て推量ではなく、あなたの本当のブランドに合う色。これはもう生成ではありません。編集です——ほぼ出来上がっているものへの、小さく、正確で、意図のある変更。

真っ白なページが求めるのはジェネレータ。ほぼ完成したページが求めるのはエディタ。仕上げ間近のページをジェネレータに突き返すのは、椅子を数センチずらすためだけに引っ越し業者をまた呼び戻すようなもの。仕事の大きさに対して、呼ぶ相手を間違えています。

自分で直せばいいもの

新しいプロンプトなんてほとんど要らない変更を、短いリストにしておきます。どれも一箇所だけの、局所的な修正です——直したいものを指して、それを直す。

• 誤字、というかどんな言葉でも。 テキストをクリックして、打ち直す。おしまい。
• 間違ったリンク、または仮のリンク。 ボタンや言葉が指す先のアドレスを変える。
• 画像。 元の指定を、正しいファイルやURLに差し替える。
• 色。 ボタンも、見出しも、背景も——本当に使いたかった色にする。
• 余白。 詰まりすぎ・空きすぎの隙間を、しっくりくるまで少しずつ動かす。

ビジュアルエディタなら、これをページそのものをクリックしてやります。大事なのは、楽だからではありません——閉じているからです。ボタンの色を変えれば、変わるのはボタンの色だけ。ファイルのほかの行は、一文字残らずそのまま。何もずれません。ほかは書き直されていないからです。

本当にAIに戻る価値があるとき

手作業の編集がいつでも正解だ、なんてふりはしません。正直に言えば、また頼み直すのが正しい手のこともあります。

ページ全体を並べ替えたい、まだ無い料金セクションを足したい、一列を三列レイアウトにしたい、あるいは文章をまるで違うトーンで書き直したい——それは直しではありません。二度目の「作る」です。そこはAIが正しい道具で、新しいセクションをクリックひとつずつ手で組み立てるほうが、遅くてつらい回り道になります。

そこで、頭に置いているざっくりした目安。変更がこの一つを別のものにするなら、自分で編集する。何か新しいものを作ってくれなら、AIに頼む。小さくて具体的ならエディタへ。大きくて構造的ならプロンプトへ戻る。

最初から最後まで、ぜんぶの流れ

実際に回している手順はこれです。

1. ファイルを一つもらう。 AIがページを生成するとき、「すべてインラインの、完結した一つのHTMLファイル」でと頼みます。そうすればスタイルもスクリプトも、フォルダに散らばらず一つの文書の中に収まります。page.html のような名前で保存しておきましょう。
2. 開く。 HTML Tweak でそのファイルを開きます。無料のブラウザツールで——インストール不要、アカウント不要。ネットなしで作業したいなら、パソコンに置いておけるオフラインの単一ファイルとしても動きます。
3. 編集する。 見出しをクリックして日付を直す。ボタンをクリックして色を決める。ビジュアルなページとコードが横に並んで、つねに同期しているので、どの変更が何をしたのかがそのまま見えます。レイアウトを崩さずに言葉だけ触りたいなら、書き換えのあいだ構造を固定するテキスト専用モードがあります。
4. 保存する。 Chrome か Edge なら、そのままファイルに保存し直します。ほかのブラウザなら、編集済みのコピーをダウンロードします。どちらにしても、変わったのは変えたところだけ。

それだけです。二度目のプロンプトも、神頼みも、AIが見ていない隙に何を動かしたかを探してページ全体を読み返すことも、いりません。

ずれは実際、こんなふうに出てくる

ファイル全体をチャットに貼り戻す。 完全なHTMLをプロンプトに貼って「この一箇所だけ変えて」と言うほうが安全だと思われがちです。違います。モデルはそれをやはり読み込み、反対側からまっさらな版を書き出します。同じ再生成、同じずれ。

小さな直し五つのために五回頼み直す。 一巡ごとに、ページ全体でもう一度サイコロを振っています。三つ目を直すころには、たいてい最初の二つが出した傷を直しています。

最初に単一ファイルを頼まない。 AIがページを別々のCSSとJSファイルに分けてしまうと、開いて編集するのが面倒になります。生成のときに「ぜんぶ一つのHTMLファイルに入れて」と一言添えれば、その手間が省けます。

単一ファイルのエディタに、プロジェクト丸ごとを期待する。 これが本当の境界線で、編集の途中でぶつかるより、いま私から聞いておくほうがいい。HTML Tweak が開くのは一つのページです。もしAIが、設定ファイルとビルド手順つきのReactやNextのコンポーネントが詰まったフォルダを渡してきたなら、それはページではなくコードベース。単一ファイルのビジュアルエディタでは扱えません——その仕事は、ちゃんとしたコードエディタの担当です。HTML Tweak は、すでに手元にあって仕上げたいだけの、あの一つの .html ページのためのものです。

AIページのいらだちの大半は、作るための道具に、編集の仕事をやらせることから来ています。この二つの仕事を分ければ、ぜんぶが落ち着きます。ページを生成する。それから開いて、自分で仕上げる。

だから次にAIページを一箇所だけ直したくなったら、頼み直したい衝動をこらえてください。HTML Tweak でファイルを開いて、本当に間違っているところだけに触れる——ほかはぜんぶ、AIが残したそのままです。