powered by TechFeed
表示モード
ハウツー

Claude Codeの出力をHTML化するだけで情報の読み取り効率が大幅に上がる — ターミナルのプレーンテキストを「読めるレポート」に変える実践手法

9月11日、データサイエンティスト・ソフトウェアエンジニアのEivind Kjosbakkenが「How to 5x Your Communication Effectiveness with Claude Code」と題した記事を公開した。Claude CodeなどのAIコーディングエージェントとのやり取りをHTML出力に切り替えることで、情報の読み取り効率を大幅に改善する手法について、自身の実践をもとに詳しく解説している。

9月11日、データサイエンティスト・ソフトウェアエンジニアのEivind Kjosbakkenが「How to 5x Your Communication Effectiveness with Claude Code」と題した記事を公開した。Claude CodeなどのAIコーディングエージェントとのやり取りをHTML出力に切り替えることで、情報の読み取り効率を大幅に改善する手法について、自身の実践をもとに詳しく解説している。


コーディングエージェントの出力が「読めない」問題

Claude CodeをはじめとするAIコーディングエージェントを日常的に使っていると、ある共通の問題に突き当たる。エージェントがターミナル上に出力する情報がプレーンテキストで流れてくるだけで、重要な情報がスレッドの途中に埋もれたり、整形されていないテキストの塊を何度も読まされたりする。

Kjosbakkenは自身の経験として、1日に数百回はエージェントの出力を読んでいると述べている。その中で「重要な情報を見落とす」「読み疲れる」という問題が繰り返し発生した。

この問題の根本は、ターミナルの出力がTXTファイル相当の表現力しか持たないことにある。改行はできても、見出しも太字もない。機械が読むには十分でも、人間の目には優しくない。


解決策:エージェントにHTML形式で出力させる

Kjosbakkenが採用した解決策はシンプルだ。情報の提示をHTML形式に切り替えるよう、エージェントに常時指示する。

彼によれば、コーディングセッションで情報を受け取る場面の約90〜95%でHTMLを使っているという。ターミナルのインライン出力を読むのは、ごく単純な確認のときだけだ。

具体的には、Claude Codeが常時読み込むユーザーレベルのMarkdownファイルに以下のような指示を書いておく。このファイルはClaude Codeにおける「メモリファイル」と呼ばれるもので、~/.claude/CLAUDE.md(ユーザーホーム直下)に配置することで、すべてのセッションにまたがってエージェントが参照し続ける、永続的なシステム指示として機能する(詳細は公式ドキュメントのMemoryセクションを参照)。

Whenever you present information to me, always make sure that you present it at
the bottom of the thread. I do not read any other parts of the thread than the
bottom of it. And if you are to present me some significant piece of information
and not just a simple task or something to verify, you always have to present it
to me in an HTML file and open it in my superset browser.

「スレッドの末尾にまとめる」という指示と「HTMLファイルとして出力する」という指示を組み合わせることで、エージェントは常に整形されたレポートを生成するようになる。

なお、指示中の「superset browser」とはApacheが開発するBIツールApache Supersetに付属するブラウザ機能ではなく、ここではKjosbakkenが使用する独自のブラウザ環境を指す表現として使われている。要はエージェントに「生成したHTMLをブラウザで開け」と指示しており、一般的な環境では単に「open it in the browser」と置き換えて読んで差し支えない。

HTMLが有効な理由

HTMLにすることで、エージェントは以下を自由に使える:

  • 見出しで情報を階層化
  • 太字・ハイライトで重要箇所を強調
  • コードブロックでコードを整形
  • スクリーンショットや画像の埋め込み
  • 引用ブロックでオリジナルの要件を明示

人間の脳はビジュアル情報をテキストより直感的に処理できる。全文を読まなくても、視覚的な構造から文脈を把握できるため、読む負荷が下がり、意思決定が速くなる


最も刺さる活用:テストレポートの自動生成

Kjosbakkenが紹介する中で特に実践的なのが、「テストレポート」スキルの活用だ。

エージェントが実装を完了したタイミングで、以下の内容を含むHTMLレポートを自動生成させる:

  • 各タスクを個別のセクションとして整理
  • 実際にテストできるページへの直リンク
  • テスト手順のステップバイステップガイド
  • SlackメッセージやLinearタスクなどの元の要件を逐語引用
  • 承認・却下のフィードバックを書き込めるUI

実装のレビューをターミナルのテキストで追うのと、整形されたHTMLレポートで確認するのとでは、情報の拾いやすさが大きく異なる。


図解ツール「Archify」でシステム構造を可視化

HTML出力のもう一つの用途として、アーキテクチャ図の自動生成がある。

Kjosbakkenが活用しているのが、GitHubで公開されているArchifyというパッケージだ。情報密度の高い視覚的なダイアグラムを生成でき、「ドキュメントのアップロード処理がどのようなパイプラインを経るか」といったシステムの流れを、テキストを読まずとも把握できる形で表示できる。

複数のダイアグラムパッケージを試した中で、このパッケージが情報密度の面で優れていると評価している。


まとめ

この手法の要点は以下の2点に集約される:

  1. エージェントへの情報提示はすべてスレッド末尾に集約させる
  2. まとまった情報はHTMLファイルとして出力させ、ブラウザで確認する

AIコーディングエージェントとのやり取りは今後さらに増える。エージェントが書くコードの量が増えるほど、人間が担う役割は「実装する」から「判断・承認する」へとシフトしていく。その局面で、エージェントからの情報をいかに速く正確に読み取れるかが、開発速度を左右する。

この観点でKjosbakkenの提案が示唆するのは、「AIエージェントへの指示をどう書くか」と同等か、それ以上に「AIエージェントからの出力をどう受け取るか」の設計が重要になってきた、ということだ。プロンプトエンジニアリングの議論がインプット側に偏りがちな中、アウトプット側のUXを能動的に設計するという視点は、エージェント活用の成熟度を一段引き上げるものといえる。

※編集部の考察:メモリファイルによる永続指示とHTML出力の組み合わせは、チーム開発での標準化にも応用できる可能性がある。プロジェクト単位のCLAUDE.mdにレポート出力ルールを記載しておけば、メンバー間でエージェント出力のフォーマットを統一する運用も考えられる。

詳細はHow to 5x Your Communication Effectiveness with Claude Codeを参照していただきたい。