ChatGPT や Claude に資料を頼むと、HTML で返ってくることが増えました。見た目の整ったスライドや1枚のページがすぐにできる一方で、「一文字だけ直したい」「見出しの色を少し変えたい」ときに困ります。そこで、AIが作った HTML の資料を、コードを知らなくても画面の上で直して保存できるツール「UTNOA HTMLエディタ」を作りました。
一文字の誤字のために、全体を作り直す
HTML の資料を直す方法は、大きく2つあります。AI に説明し直して作り直してもらうか、コードを開いて自分で書き換えるかです。前者は、直したい所以外まで変わってしまうことがあり、確認のやり直しが増えます。後者は、どこを触ればよいか分からない方には難しい作業です。
資料づくりの最後の手直しは、多くの場合ほんの少しです。そのために毎回 AI へ頼み直さなくてよい道具が欲しいと考えました。
画面の上で選んで、ダブルクリックで直す
UTNOA HTMLエディタでは、資料を開いたまま、直したい所をクリックして選び、ダブルクリックでその場で文章を直せます。右のパネルでは、文字の大きさ・色・太字・揃え、背景の色、余白、横幅を変えられ、画像も差し替えられます。段落やカードは、まとまりごと複製・削除・並べ替えができます。
操作は最大100回まで元に戻せます。保存していない変更があるときは、閉じる前に確認します。試しに直してみて、気に入らなければ戻せることを大事にしました。
ファイルは、どこにも送らない
AI に作ってもらう資料には、社内の数字や取引先の名前が入っていることがあります。そこで、開いた HTML はパソコンの中だけで処理し、UTNOA を含めてどこにも送信しない作りにしました。
保存するときは、タイトルやスタイル、スクリプト、リンク先など、元の資料の構造を保ちます。標準は「別名で保存」で、対応するブラウザでは元のファイルへの上書きもできます。
できないことも、先に書く
React などのプログラムで作られた画面を元のプログラムに戻すことや、グラフ・動画の中身を直すことはできません。また、このツールは HTML を無害にするソフトではなく、保存したファイルには元のスクリプトが残ります。できないことを先にお伝えしておくほうが、安心して使っていただけると考えています。
開いた資料が元と違って見えるときは、その理由(別のファイルの画像を使っている、外部のプログラムで見た目を作っている、など)を画面の上部で案内します。
2つの使い方と、いまの状態
ページを開いて手元の HTML を選ぶ無料の Web 版と、Chrome で開いている HTML をそのまま直せる Chrome 拡張版を用意しています。拡張版は、登録なしで1日3回まで無料(無料のメール登録で1日10回)。回数の上限なしで使う場合は、1か月の無料体験のあと、月100円、または年1,100円(1か月分お得。どちらも税込)です。
いまは Web 版を無料で公開しています(Chrome 拡張版は公開の準備中)。ツールのページから、そのまま使い始められます。