# AIが作ったHTML資料を、頼み直さずに直すための「HTMLエディタ」を作りました | UTNOA

UTNOA のツールづくり

# AIが作ったHTML資料を、頼み直さずに直すための「HTMLエディタ」を作りました

執筆：UTNOA ｜ 2026-09-26

AIに作ってもらったHTMLの資料を、コードを知らなくても画面の上で直して保存できるツール「UTNOA HTMLエディタ」。作った理由と、ファイルを送らない・元の形のまま保存するなど、作るときに決めたことを紹介します。

この記事の内容
- [一文字の誤字のために、全体を作り直す](#section-1)

- [画面の上で選んで、ダブルクリックで直す](#section-2)

- [ファイルは、どこにも送らない](#section-3)

- [できないことも、先に書く](#section-4)

- [2つの使い方と、いまの状態](#section-5)

ChatGPT や Claude に資料を頼むと、HTML で返ってくることが増えました。見た目の整ったスライドや1枚のページがすぐにできる一方で、「一文字だけ直したい」「見出しの色を少し変えたい」ときに困ります。そこで、AIが作った HTML の資料を、コードを知らなくても画面の上で直して保存できるツール「UTNOA HTMLエディタ」を作りました。

## 一文字の誤字のために、全体を作り直す

HTML の資料を直す方法は、大きく2つあります。AI に説明し直して作り直してもらうか、コードを開いて自分で書き換えるかです。前者は、直したい所以外まで変わってしまうことがあり、確認のやり直しが増えます。後者は、どこを触ればよいか分からない方には難しい作業です。

資料づくりの最後の手直しは、多くの場合ほんの少しです。そのために毎回 AI へ頼み直さなくてよい道具が欲しいと考えました。

## 画面の上で選んで、ダブルクリックで直す

UTNOA HTMLエディタでは、資料を開いたまま、直したい所をクリックして選び、ダブルクリックでその場で文章を直せます。右のパネルでは、文字の大きさ・色・太字・揃え、背景の色、余白、横幅を変えられ、画像も差し替えられます。段落やカードは、まとまりごと複製・削除・並べ替えができます。

動画を見る(約20秒)✓Chrome 拡張版の使い方の動画(約20秒・音声なし)。開いている HTML の右側のパネルで、文章や色をその場で直しています。

操作は最大100回まで元に戻せます。保存していない変更があるときは、閉じる前に確認します。試しに直してみて、気に入らなければ戻せることを大事にしました。

## ファイルは、どこにも送らない

AI に作ってもらう資料には、社内の数字や取引先の名前が入っていることがあります。そこで、開いた HTML はパソコンの中だけで処理し、UTNOA を含めてどこにも送信しない作りにしました。

保存するときは、タイトルやスタイル、スクリプト、リンク先など、元の資料の構造を保ちます。標準は「別名で保存」で、対応するブラウザでは元のファイルへの上書きもできます。

## できないことも、先に書く

React などのプログラムで作られた画面を元のプログラムに戻すことや、グラフ・動画の中身を直すことはできません。また、このツールは HTML を無害にするソフトではなく、保存したファイルには元のスクリプトが残ります。できないことを先にお伝えしておくほうが、安心して使っていただけると考えています。

開いた資料が元と違って見えるときは、その理由(別のファイルの画像を使っている、外部のプログラムで見た目を作っている、など)を画面の上部で案内します。

## 2つの使い方と、いまの状態

ページを開いて手元の HTML を選ぶ無料の Web 版と、Chrome で開いている HTML をそのまま直せる Chrome 拡張版を用意しています。拡張版は、登録なしで1日3回まで無料(無料のメール登録で1日10回)。回数の上限なしで使う場合は、1か月の無料体験のあと、月100円、または年1,100円(1か月分お得。どちらも税込)です。

いまは Web 版を無料で公開しています(Chrome 拡張版は公開の準備中)。ツールのページから、そのまま使い始められます。

### 関連リンク

- [UTNOA HTMLエディタ(ツールのページ)](/html-editor/)

## UTNOA HTMLエディタ について、
くわしく見る。

できること、使い始め方、よくあるご質問をまとめています。

[UTNOA HTMLエディタ のページを見る](/html-editor/)[ほかのツールを見る](/tools/)