ClaudeにMarkdownで返させるのはもう古い -- HTMLで返してもらうと体験が一気に変わる

はじめに

Claudeに調べ物を頼むとき、デフォルトで返ってくるのは大体Markdownです。
見出し、リスト、コードブロック、太字。きれいで、構造化されていて、一見十分に思えます。

でも実際にその出力をじっくり読み込んで理解しようとした瞬間、こんな経験はありませんか？

• スクロールしないと全体像が掴めない
• 比較したい項目を頭の中で並べ直す必要がある
• 「結論」「注意点」「次の行動」が同じ見た目で並んでいて優先順位が分からない
• 後から見返そうにも、どこに何があったか思い出せない

そんなときに、Xで「AIの出力はHTMLでもらうと体験が別物」という主旨の投稿を見かけました。たしかAnthropicのエンジニアの方だったと思います。
半信半疑で真似してみたところ、想像以上に読み心地が変わったので、それ以来Claudeへの依頼にこう添えるのが定着しました。

「（質問の最後に）HTMLで出力して」

本記事は、その実感を自分なりに整理したものです。

自己紹介

Qurated編集部のKです。

なぜMarkdownでは情報が頭に入らないのか

Markdownはエンジニアにとっては馴染み深い形式ですが、まとまった情報を読み込みたい場面では3つの弱点があります。

1. 視覚的な優先順位が表現できない

Markdownの記法は基本的に 「これは見出し」「これはリスト」 という構造の宣言で、「これは重要」「これは注意」「これは結論」 という意味の重み付けは表現できません。

太字（**text**）と斜体（*text*）くらいはあっても、Markdownレンダラによっては装飾が反映されないこともあります。結果として、3,000字のドキュメントが全部同じトーンで並ぶことになり、目が滑ります。

2. 並列比較が弱い

コードレビューの結果まとめ、構成案の比較、手順書、選択肢の評価。
こうした 「2〜3個のものを横並びで眺める」 作業では、Markdownのテーブルだとどうしても窮屈です。

• カラムが多いと折り返して読めない
• セル内に箇条書きやコールアウトを入れられない
• 色分けで「OK / 要注意 / NG」を表現できない

仕事のドキュメントでも、生活側の調べ物でも、複数の項目を見比べたい瞬間に情報密度が足りなくなります。

3. 一覧性が悪い

長文Markdownには目次が自動生成されません（一部のレンダラ除く）。
「あの項目どこだっけ？」となるたびにCtrl+Fで検索することになり、全体像を保持したまま深掘りするという読み方ができません。

HTMLで返してもらうと何が変わるか

同じ情報をHTMLで返してもらうと、次の要素が一気に手に入ります。

• サイドバー固定の目次（スクロールしても消えない）
• 色分けされたコールアウト（結論・注意・危険を視覚で区別）
• 比較テーブル（カラム多めでも崩れない、セル内に箇条書き可）
• 印刷対応（CSSの @media print でA4印刷もきれい）
• オフライン保存（ブラウザに保存しておけば後で参照可能）

しかも、最近のClaudeはCSSを同じファイルに埋め込んだ1枚のHTMLを躊躇なく出してくれます。外部CDNやJSフレームワークに頼らず、ダブルクリックでブラウザで開けるシンプルな形式です。

体感としては、Markdownで返ってきていた同じ情報が、HTMLにするだけで「資料」になる感覚です。ブラウザで開いた瞬間、目が休まる。スクロール量が減る。次に何をすればいいかが視覚で分かる。これが想像以上に効きます。

実際にやってみる：足すのは一言だけ

身構える必要はありません。いつもどおり質問や依頼をして、その語尾に「HTMLで出力して」と足すだけです。

（いつもの調べ物・依頼の文章）
…まとめてHTMLで出力して。

冒頭で触れた「HTMLで出力して」とは、要はこれだけのことです。プロンプトを作り込まなくても、目次・コールアウト・テーブルを備えたHTMLを、Claude側で構造を組んで返してくれます。

出力を見て足りない要素があれば「インラインCSSのみ」「A4印刷対応の @media print ルールを入れて」「左サイドバーに目次を固定」などと追加で頼むと、より読みやすく育っていきます。最初から完璧な指示を投げる必要はありません。

実際に作ってもらったドキュメントの構造

例として、私が個人用に作ったドキュメントは次のような構造でした。

• ヘッダー: 作成日・対応期限・関連数値などのメタ情報
• 結論ボックス（緑系の背景色）: 一番上に置き、迷ったらここを読めば良い
• 目次: 左サイドバーに固定。クリックでジャンプ
• 手順セクション: 番号付きのカード形式で、各ステップに「やるべきこと」と「補足」
• 書面テンプレート: <pre> で囲んで、プレースホルダ部分だけ強調色
• リスク一覧テーブル: 「論点 / 内容 / 対処」の3カラム
• 次のアクション（フッター）: 時系列の番号付きリスト

これをブラウザで開いた瞬間に内容の8割が頭に入る感覚があります。Markdownで同じ情報を渡されても、ここまでの整理感は出ません。

ちなみにこのドキュメントは、家の契約更新で「家賃の値上げって拒否できたっけ？」と困ったときにClaudeに作ってもらったものです。調べ物が”後で読み返せる資料”の形で手元に残るのは、想像以上に効きました。この使い方で生活側がどう変わったかは、また別の機会に書こうと思います。

注意点・ハマりどころ

実際に運用してみて、いくつか落とし穴がありました（いずれも2026年5月時点、Claudeで試した範囲の話です）。

1. トークン消費が増える

HTMLはMarkdownより冗長です。同じ情報量を表現するのに、タグの分だけ文字数が増えます。
Claudeの出力上限に当たることもあるので、**長大な内容は「セクションごとに分けて出してもらう」**運用が無難です。

2. 外部依存を許すと崩れる

Tailwind CDNやGoogle Fontsなどを許可すると、オフライン環境やCDN障害時に表示が壊れます。
「インラインCSSのみ・外部リソース禁止」をプロンプトで明示しましょう。

3. 印刷対応は別途指示が必要

@media print のルールを明示的に依頼しないと、サイドバー固定のままで印刷したらレイアウトが崩れるHTMLが出てきます。「A4印刷可」を必ず指示するのがおすすめです。

4. バージョン管理に向かない

HTMLはGit上の差分が読みづらいです。バージョン管理して育てたいドキュメントなら、MarkdownでソースをClaudeに編集させ、必要な時にHTMLにビルドさせるハイブリッド運用もアリです。

どんな場面で効くか

私が実際に効果を感じた使い方は、仕事側と生活側でだいたいこんな感じです。

仕事側

• コードレビュー結果のまとめ: 指摘の重大度（critical / major / minor）で色分け、ファイル別の一覧、修正前後の比較を一画面に集約
• 手順書 / Runbook: 各ステップをカード形式で、前提・操作・確認・トラブル時の挙動を色分けして強調
• アーキテクチャ検討の比較: 構成案A/B/Cを並列カラムで、コスト・運用負荷・スケーラビリティの軸で評価

生活側

• 契約・更新・解約の判断材料の整理
• 引っ越し先の候補比較
• 健康診断結果の項目別解釈
• 保険・サブスクの棚卸し

共通点は、**「複数の項目を、複数の軸で、自分なりに整理して読みたい」**こと。
1問1答で済む質問はMarkdownで十分です。比較・優先順位付け・手順の確認が絡む瞬間に、HTMLの恩恵が出ます。

まとめ

• Markdownは”読み物”には向くが、まとめて読みたい場面では重み付けが弱く目が滑る
• HTMLで返してもらえば「目次・色分け・テーブル・印刷対応」が一気に揃って読み心地が変わる
• プロンプトの語尾に「HTMLで出力して」と足すだけで、そこそこ整ったものが返ってくる
• トークン消費・外部依存・バージョン管理には注意が必要
• 比較・優先順位付け・手順確認が絡むドキュメントで特に効く

結論

AIに調べ物を頼むなら、出力形式までセットで頼む。

「Claudeに何を聞くか」だけでなく、「どう返してもらうか」を意識した瞬間から、AIの出力は”会話のログ”から”後で読み返せる資料”に変わります。
次にちょっと込み入った調べ物をするとき、まずはプロンプトの末尾に 「HTMLで出力して」 を足してみてください。読み心地が一段変わるはずです。