ChatGPT や Claude が作った HTML 資料を、頼み直さずに直す方法

ChatGPT に頼んだ提案資料が、HTML で返ってきた。見た目は整っていて、そのまま使えそう。ところが、お客様の社名が1文字違っている。「社名を『サンプル商事』に直して」と頼むと、今度は見出しの色や、表の並びまで少し変わって返ってくる。また全体を見直すことになる。1文字直すために、確認のやり直しが増えていきます。

この記事では、AI が作った HTML の資料を、頼み直さずに直す方法を説明します。

AI が作った HTML を直す、よくある方法

AI に頼み直す

直してほしいところを説明して、作り直してもらう方法です。手軽ですが、直したいところ以外まで変わることがあります。毎回、全体を見直す必要があります。

コードを開いて自分で直す

HTML のファイルをテキストエディタで開き、文字を探して書き換える方法です。直したいところが分かれば確実ですが、コードの中から目的の文字を探すのは、慣れていないと時間がかかります。誤ってタグを消すと、見た目が崩れます。

別のソフトに貼り直す

Google ドキュメントや Word に貼り付けて直す方法です。文字は直しやすくなりますが、AI が作ったレイアウトや色は崩れます。

頼み直しが増える理由

資料づくりの最後の手直しは、多くの場合ほんの少しです。誤字、数字、社名、見出しの言い回し。AI は資料を一から作るのは得意でも、「ここだけを、ほかは変えずに」直すのは苦手なことがあります。小さな直しほど、自分で直したほうが早く確実です。

UTNOA HTMLエディタなら、画面の上でダブルクリックして直せる

UTNOA HTMLエディタは、AI が作った HTML の資料を、コードを知らなくても画面の上で直して保存できる無料のツールです。

HTML の資料を開きます(Web 版ではページを開いてファイルを選ぶ。Chrome 拡張版では、Chrome で開いている資料の右側のパネルで「このページを編集する」を押す)。
直したいところをクリックして選び、ダブルクリックします。
その場で文字を直します。Enter で改行、Esc で確定します。
保存します。標準は「別名で保存」です。

日本語の変換入力や改行にも対応しています。
文字の大きさや色、余白も、右のパネルで変えられます(→HTML の文字の色や大きさを、コードを書かずに変える方法)。
操作は最大100回まで元に戻せます。
開いたファイルはパソコンの中だけで処理し、UTNOA を含め、どこにも送信しません。

Web 版も Chrome 拡張版も無料で、登録も回数の上限もありません。

できないこと

React などのプログラムで作られた画面を、元のプログラムに戻すこと
グラフ・動画・埋め込みの中身を直すこと

グラフの数字を変えたいときなど、中身を作り直す必要がある直しは、AI に頼むほうが向いています。小さな直しは自分で、大きな作り直しは AI に、と使い分けると、確認の手間が減ります。