AI が作った HTML のレポートやスライドを見て、「この見出しだけ直したい」「この説明を短くしたい」と思ったとき、どうしていますか。
小さな文言修正なら、ページを見ながら直接直したい。構成を考え直すなら、対象の場所にコメントを付けて、AI エージェントに任せたい。さらに、生成に使った AI と、次の修正に使いたい AI が同じとは限りません。
Monofane Labs では、この作業のために Tagelia を開発しています。ローカルの HTML をドキュメントのように開き、対応するテキストやスタイルを見たまま編集できるデスクトップアプリです。ページ上で付けたレビューは、コピーやファイルの書き出しで、別の AI エージェントにも渡せます。現在はパブリックベータです。
中心にあるのは、次の 2 つです。
- 小さな変更は、その場で直接編集する。 HTML ソースを探したり、変更のたびに AI へ説明したりする手間を減らす。
- レビューを、生成元の AI から切り離して持ち運ぶ。 Claude で作った HTML を Codex で修正する、といった使い分けでも、対象と意図をまとめて渡せるようにする。
この記事では、この 2 つの使い方と、レビューを持ち運ぶための設計を紹介します。
まずは「見ている文章を、その場で直す」
Tagelia はローカルの .html / .htm ファイルを開いて使います。AI が生成したレポート、スライド、ダッシュボードなどが対象です。
編集モードでは、対応するテキストをダブルクリックして書き換えたり、要素を選択してスタイル、リンク、画像を変更したりできます。
たとえば、レポートを確認している途中で見つけた次のような修正です。
| やりたいこと | Tagelia での進め方 |
|---|---|
| 見出しの誤字や、短い説明文を直す | 対応するテキストをページ上で直接編集する |
| 強調の色や文字サイズを調整する | 要素を選択し、対応するスタイルを変更する |
| リンク先や画像を差し替える | 対応する要素の編集機能を使う |
| 結論の組み立てや、複数箇所の内容を考え直す | レビューとして意図を残し、エージェントに渡す |
閲覧・レビュー・編集・ソースのモードを切り替えられるため、表示を確認し、直接直し、必要ならソースと見比べる流れをひとつのアプリで進められます。保存したバージョンを振り返る機能もあります。
対応状況は HTML の構造に依存します。スクリプトが生成する内容や、未対応の構造は読み取り専用になる場合があります。Beta を試す際は、重要なファイルのコピーを残してください。
作った AI と、直す AI を自由に選ぶ
ひとつの AI アプリの中で生成からレビュー、修正まで済むなら、その中で作業を進められます。
Tagelia で扱いたいのは、ローカルに保存した HTML を、使うツールやセッションが変わっても編集・レビューできる作業環境です。生成元のチャットを開いていなくても、手元のファイルから始められます。
たとえば、次のような流れを想定しています。
Claude で HTML レポートを生成
↓ HTML を保存
Tagelia で確認・直接編集・コメント
↓ レビューと対象ファイルを渡す
Codex など、次に使いたいエージェントで修正
↓ 修正後の HTML を開く
Tagelia で結果を確認
これは使い方の例で、すべてのエージェントの組み合わせを検証した結果ではありません。受け手には、HTML とレビューを読めること、必要なファイルにアクセスできることが求められます。
持ち運ぶのは、対象ファイルとレビューです。 チャット履歴全体の移行や、各 AI アプリのコメント欄の自動同期は行いません。前の会話で決めた制約があれば、レビューや添付資料にも含めて渡します。
ページ上で指し、レビューを渡す
レビューモードでは、要素やテキストを選んでコメントを付けます。
「もっと見やすく」だけでなく、次のように完了を判断できる書き方にすると、戻ってきた結果を確認しやすくなります。
- 結論を 1 文にまとめ、数値を文頭に置く。
- 選択した 2 枚の KPI カードに、それぞれの変化が分かる小さなトレンド線を追加する。
- 表の対象行を背景色と太字で強調する。数値や並び順は変えない。
これらは説明用の例です。実際の指示は、対象の HTML と目的に合わせて書きます。
渡し方は、相手がローカルファイルを読めるかどうかで変わります。
| 相手 | 渡し方 |
|---|---|
| ローカルファイルを読める Claude Code や Codex など | プロンプトをコピーし、対象ファイルへアクセスできるセッションに貼り付ける |
| Web 版のチャットやファイルを添付する使い方 | レビューファイルと HTML 本体を渡す。添付可能な形式・容量は相手側の制限に従う |
元ファイルを修正するか、新しいファイルとして返してもらうかも選べます。
Tagelia が AI に自動送信する仕組みではありません。コピー・書き出し後に、どのツールへ渡すかを利用者が選びます。
修正後は、HTML を開き直し、コメントした場所と周辺の表示・操作を確認します。エージェントが「対応済み」と返したことだけで完了にせず、必要に応じてソースの差分も確認します。
修正指示に必要なのは、コメントだけではない
たとえば「結論を短くして」というコメントには、少なくとも次の情報を添えたいところです。
| 情報 | 例 | 必要な理由 |
|---|---|---|
| 対象ファイル | report.html |
別の出力を修正しないため |
| 対象の位置 | セレクター、ソース行 | ページ内の場所を絞るため |
| 対象の原文 | 現在の結論の文章 | 似た要素や位置のずれを見分けるため |
| 変更の意図 | 結論を 1 文にし、数値を先に出す | 何を達成したいかを伝えるため |
| 出力先 | 元ファイル、または新しいファイル | 元の版を残すか決めるため |
位置と意図を分けると、コメントを読む人にも、ファイルを読むエージェントにも扱いやすくなります。
ただし、行番号だけでは前の編集でずれます。CSS セレクターも HTML の構造が変われば一致しなくなります。原文も、同じ文が複数あれば一意には決まりません。
そこで Tagelia では、ソース行・要素のパスとセレクター・原文を、互いに照合できる形でレビューに含めています。ソース上の位置が分からない動的な要素では、無理に行番号を付けず、スクリプト生成の対象であることを示します。
レビューは、人も読める Markdown として渡す
レビューの受け渡しには、Tagelia 内部で TRF（Tagelia Review Format）と呼んでいる Markdown 形式を使っています。エージェントに専用プラグインや独自 API の実装を求めず、通常のファイルやテキストとして渡せる形です。
以下は構造を説明するために簡略化した例で、実際のファイルや実行結果ではありません。行番号とセレクターもこの例のためのものです。
## R1
結論を 1 文にまとめ、数値を文頭に置いてください。
> - Target: element
> - Path: body › main › section#summary › p
> - Selector: body > main > section#summary > p
> - Source lines: 42–44
>
> > 継続率は前回より改善しました。今回の継続率は 71% です。
この形式では、修正の指示を通常の本文に、対象の情報とページの原文を引用ブロックに置いています。何を依頼しているのかと、何を参照しているのかを分けるためです。
実際の出力には、ファイル、出力先、レビュー時刻などの情報と、修正時の指示も含めます。たとえば、次のような指示です。
- ソース行で位置を探し、原文とセレクターで照合する。
- 前の編集で行番号がずれることを考慮し、後ろのコメントから処理する。
- 元の HTML を開けない場合は、レビューや画像から再構築せず、ファイルの添付を求める。
- 対象以外を変更せず、各コメントへの対応結果を返す。
これらはエージェントへの依頼であり、出力の正しさを保証するものではありません。利用者による再確認は必要です。
また、TRF は現在の Beta で使っている形式で、公開標準としての互換性を約束するものではありません。
日本語の紹介動画と Beta
操作のイメージは、約 90 秒の日本語紹介動画でも確認できます。
2026 年 11 月 2 日時点の公開版は 0.1.0-beta.1 です。
Beta では、特に「自分の HTML を見たまま編集できるか」「生成元と別のエージェントへもレビューを渡せるか」「戻ってきた修正結果を確認しやすいか」を確かめたいと考えています。フィードバックの際には、生成に使った AI と修正に使った AI も教えていただけると参考になります。