こんにちは。
ChatGPT/Codex、Claude Code、Geminiなどへ調査や設計などの重いタスクを頼むと、どうしても出力結果が長くなりやすいですよね。
「Markdownで構造化して」と指示しても、整理はされていても結局どこを見ればよいのかを頭の中で組み直す、そんな読みづらさがあります。
これはMarkdownの表現力の限界です。そこでHTMLを使ってみてください。圧倒的に表現力が高いので、非常にわかりやすい画面を作ってくれます。
具体的にどのようなメリットがあるかを解説していきます。
Markdownで整理はされても、理解しやすいとは限らない
Markdownは記号を使って文章の見出し、箇条書き、表などを表現することができます。最近はChatGPTなどでもデフォルトでビジュアライズされるようになったので非常に便利な形式ですよね。
短い回答だったり、文章を編集する場面では非常に扱いやすいです。
しかし、情報の構造が複雑だったりそれぞれの関係性を意識しないといけない領域ではやや力不足といえます。
例えばアプリケーションの設計のように、
- 離れた場所にある情報が影響し合う
- 途中で枝分かれする処理がある
- 情報に複数の階層を持つ
といった場面では、読み手が前後を行き来してつながりを補わなければいけません。
こういったケースではぜひHTMLを使って表示させてみましょう。
HTMLは関係を画面の配置で表現できる
実際に、僕が開発中のプロジェクトについて動作内容をAIに説明してもらいました。まずはMarkdown版です。
見出し、番号付きリスト、太字を使って、内容はきちんと整理されています。
ただ、全体像を把握するには上から順番に読み、各工程の担当者と前後関係を頭の中でイメージしながら読む必要があります。
次に、同じ内容を単一HTMLファイルで説明してもらった画面です。
HTML版では各工程をカードで表現し、それぞれの工程のつながりが非常にわかりやすいですね。
情報の強弱もついて、視線の誘導がうまくできています。
使い方は、「HTMLで出力して」と言うだけ
基本的にどのAIもHTMLを書けるので、指示の最後に「HTMLで出力して」と言えばOKです。モデルやサービスごとにデザインのクセはあるので、微妙に感じた場合は以下の記事を参考にデザインスタイルやレイアウトの指示を追加してみてください。
実例：複雑な設計内容を一つのHTMLにまとめる
実例を見てみましょう。これはデジタル庁のデザインシステムをAgent Skillとして利用するために、AIへ設計を依頼したときのHTMLです。
Skillの役割、情報の持ち方、二つの利用モード、処理の流れ、ディレクトリ構成、更新方法、品質基準など、性質の異なる情報が含まれています。
Markdownでも内容自体は書けますが、この内容を文章のみで表現されると読むだけで一苦労ですよね。
HTMLであれば、
- 最初に結論をカードで要約
- 役割の違いは左右に並べる
- 処理の順番はフロー図で表現
- ファイル構成はツリーで表現
と、情報の種類ごとに適切な見せ方になっています。これなら全体像を先につかみやすく、必要な部分だけ詳しく読むこともできます。
HTMLは、分かりやすいが落とし穴もある
HTMLでは情報の関係性を図示してくれたり、情報に強弱をつけて視覚的に分かりやすく表現してくれます。基本的にはMarkdownよりHTMLの方が優れていると言って良いのですが、傾向として文章での説明が短くなりがちです。
よくよく読んでみると観点が漏れていたり、「そういえばこれってどういう意味だろう？」という点も出ることはあるので都度追加で確認をするようにしてください。
複雑な情報はHTMLがおすすめ
僕が試してみたところ、次のような内容はHTMLでの出力が効果的です。
- サイト全体の構造
- 画面遷移
- 業務フロー
- システム構成
- etc
もっとシンプルにいえば、Markdownで出力されたものを読んで「分かりにくいな」と思ったらHTMLでの出力を指示してみるのがおすすめです。
まとめ
というわけで、AIへ複雑な説明や設計を頼むときはHTMLがおすすめという話でした。
文字が多くて読みづらい、理解しにくいと感じたら「HTMLで出力して」と言う。これだけです。