突然ですが、今日みなさんの常識は崩れます。正直99%の人はClaude CodeでまだMarkdownを使っている。なんとAnthropicのClaude Codeチームの中の人が語ったのは、「それやめろ」って話でした。「もうMarkdownではなく、HTMLで出力した方が圧倒的にいい」という話。
なぜなら、Claude Codeの出力が高度になればなるほど、
Markdownでは読みにくい、伝わらない、共有されない。
一方でHTMLなら、
・図解できる
・色分けできる
・タブで整理できる
・スライダーやボタンまで作れる
・そのままブラウザで共有できる
つまり、Claude Codeの真価を引き出すには、
「何を出すか」だけでなく、
「どんな形式で出すか」がめちゃくちゃ重要になる。
断言します。
Claude Code時代の最適解は、
ただのMarkdownではなく、HTMLファーストです。
で、実際にこの記事が出る前からClaudeCodeStudioはこの方法を活用しており、スライド資料も全部1発でこのクオリティーが出るようにしています👇
この記事を最後まで見れば、なぜそんなことができるようになるのかわかると思うのでぜひ！
ところで、みなさん突然ですが、こんな経験ありませんか？
・Claude Codeに計画書を書かせたけど、100行超えたあたりから読む気が失せた
・Markdownの仕様書をチームに共有したけど、誰も最後まで読んでくれなかった
・ASCIIアートの図を見て「…これ何？」となった
・色やレイアウトで情報を整理したいのに、Markdownだと表現できなかった
・作った計画書をSlackに貼っても、添付ファイルとして埋もれた
これ、全部「出力フォーマットの問題」だったんです。
Claude Codeの開発チームに所属するThariq（@trq212）が書いた記事「Using Claude Code: The Unreasonable Effectiveness of HTML」が、Xで1,100万View超えの大バズ中😳
ThariqはAnthropicのClaude Codeチームのメンバーで、YC W20出身のエンジニア。つまり、Claude Codeを毎日最前線で使い倒している人間が「Markdownやめた」と宣言した記事です。
今回はその内容を、具体的なプロンプト例も含めてわかりやすく噛み砕いて解説します👇
元ポストはこちら：https://x.com/trq212/status/2052809885763747935
■ 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻の何が問題なのか
Markdownは長年、AIエージェントと人間のコミュニケーション手段として使われてきました。シンプルで、どこでも使えて、リッチテキストもある程度書ける。Claude Codeも当然、デフォルトではMarkdownで出力します。
でも、正直なところ心当たりありませんか？
Claude Codeが複雑なタスクをこなせるようになればなるほど、出力される計画書や仕様書は長くなる。100行を超えたMarkdownファイルを、あなたは本当に最後まで読んでいますか？
Thariqは記事の中でこう書いています：
"I find it difficult to read a markdown file of more than a hundred lines."
（100行を超えるMarkdownファイルを読むのは難しいと感じる）
しかも最近は、自分でファイルを編集することすら減っている。仕様書として参照したり、ブレストの出力として使ったり。編集するときもClaudeに「ここ直して」と頼む。つまり、Markdownの最大のメリットだった「人間が手で編集しやすい」という利点が、もはや意味をなさなくなっているんです。
これは多くのClaude Codeユーザーが無意識に感じていた問題を、見事に言語化しています。
■ 𝗛𝗧𝗠𝗟という選択肢が「異常に効果的」な理由
Thariqが提唱するのは、Claude Codeの出力フォーマットをMarkdownからHTMLに変えること。
「HTMLって、Webページ作るやつでしょ？」と思うかもしれません。でもHTMLの表現力は、Markdownとは比較にならない。
具体的にHTMLで表現できるものを見てみましょう：
・テーブルによる構造化データ
・CSSによるデザインとカラーリング
・SVGによるイラスト・図解
・scriptタグによるコードスニペット
・JavaScriptとCSSによるインタラクション
・SVGとHTMLを組み合わせたワークフロー図
・絶対位置指定やcanvasによる空間データ
・画像タグによる画像埋め込み
Thariqはこう断言しています：
"I would go so far as to say that there is almost no set of information that Claude can read that you cannot fairly efficiently represent with HTML."
（Claudeが読める情報で、HTMLで効率的に表現できないものはほぼ存在しないと言い切れる）
MarkdownでASCII図を描かせたり、Unicode文字で色を表現しようとした経験がある人は、この言葉の重みがわかるはずです。あの「フェラーリでコンビニに行く」ような非効率さから解放されるわけです。
■ 情報密度が圧倒的に違う
HTMLの最大の強みは「情報密度」です。
同じ内容をMarkdownとHTMLで書いた場合、HTMLの方が圧倒的に多くの情報を、圧倒的に読みやすく伝えられる。タブで切り替えたり、色分けしたり、図を埋め込んだり。
100行のMarkdownを読む気になれなくても、同じ情報量がタブとカラーで整理されたHTMLなら、すっと頭に入ってくる。
これは単なる「見た目の問題」ではありません。読まれない仕様書は、存在しないのと同じ。読まれる形式で出力することは、仕事の質そのものに直結します。
■ 共有のしやすさ
Markdownファイルを誰かに共有しようとすると、だいたいこうなります：
・Slackにファイルとして添付 → 誰も開かない
・メールに添付 → 誰も開かない
・GitHubに置く → エンジニア以外アクセスできない
HTMLなら、S3にアップロードしてリンクを送るだけ。ブラウザさえあれば誰でも読める。モバイルでも読めるようにレスポンシブにもできる。
Thariqの原文：
"The chance of someone actually reading your spec, report or PR writeup is much much higher if it's in HTML."
（仕様書やレポート、PRの説明がHTMLなら、実際に読まれる確率は格段に高くなる）
これ、地味だけど実務では致命的に重要なポイントです。
■ 双方向インタラクションという革命
ここからがHTMLの真骨頂です。
HTMLはただの「読むもの」ではない。操作できるんです。
例えばデザインの微調整。Claude Codeに「スライダー付きのHTMLを作って」と頼めば、アニメーションの速度やイージング、色をリアルタイムで調整できるファイルが出てくる。気に入ったパラメータが見つかったら、「コピー」ボタンを押してClaude Codeに貼り直す。
この双方向のやり取りは、テキストプロンプトだけでは絶対にたどり着けない精度の調整を可能にします。
「もうちょっと右」「もう少し速く」「この色じゃない」を、言葉で伝えるストレスから解放される。スライダーを動かすだけでいい。
■ 具体的なユースケース（プロンプト例つき）
Thariqは記事の中で、HTMLの活用パターンを具体的なプロンプト例とともに紹介しています。これがとにかく実践的なので、そのまま紹介します。
𝟭. 設計・計画・探索
Claude Codeで複雑なタスクに取り組むとき、Markdownの計画書1枚ではなく、複数のHTMLファイルで「探索の網」を張る使い方。
プロンプト例：
「オンボーディング画面のどの方向に行くか決められない。6つの全く異なるアプローチを生成して、レイアウト・トーン・密度を変えて、1つのHTMLファイルにグリッドで並べて比較できるようにして。それぞれのトレードオフをラベルに書いて。」
「HTMLファイルで詳細な実装計画を作って。モックアップ、データフロー、レビューすべき重要なコードスニペットを含めて。読みやすく消化しやすくして。」
𝟮. コードレビュー・理解
GitHubのdiff画面より読みやすいコードレビューが作れます。
プロンプト例：
「このPRをレビューするHTMLアーティファクトを作って。ストリーミング/バックプレッシャーのロジックに詳しくないのでそこを重点的に。実際のdiffをインラインのマージン注釈付きで描画して、重要度で色分けして。」
Thariqは「今、すべてのPRにHTML形式のコード解説を添付している」と書いています。
𝟯. デザイン・プロトタイプ
Claude Designの基盤がHTMLであるように、HTMLはデザイン表現に極めて優れている。最終的な実装がReactやSwiftであっても、まずHTMLでスケッチしてから書き換えるワークフローが有効。
プロンプト例：
「新しいチェックアウトボタンのプロトタイプを作りたい。クリックするとアニメーションして紫に変わる。スライダーとオプションでアニメーションの各パラメータを試せるHTMLファイルを作って。うまくいったパラメータをコピーするボタンもつけて。」
𝟰. レポート・リサーチ・学習
Claude Codeは複数のデータソースを横断して情報を合成し、読みやすいレポートにまとめることが得意。Slack、コードベース、git履歴、インターネットを検索させて、リーダーシップ向けのレポートやインシデントレポートを作れる。
プロンプト例：
「レートリミッターの仕組みがわからない。関連コードを読んで、1つのHTML解説ページを作って。トークンバケットのフロー図、重要なコードスニペット3-4個に注釈付き、最後に「落とし穴」セクション。1回読んで理解できるように最適化して。」
𝟱. カスタム編集インターフェース
これが個人的に一番衝撃的だったユースケース。テキストボックスでは伝えにくい操作を、使い捨てのHTMLエディタで実現する。
プロンプト例：
「30件のLinearチケットの優先順位を整理し直したい。各チケットをドラッグ可能なカードにして、Now / Next / Later / Cutの4列に配置するHTMLファイルを作って。最初はあなたの推測で並べて。「Markdownとしてコピー」ボタンで、最終的な並び順を各バケットの理由1行付きでエクスポートできるようにして。」
「このシステムプロンプトを調整中。左右並びのエディタを作って。左に編集可能なプロンプト（変数スロットをハイライト）、右にサンプル入力3つで、テンプレートがリアルタイムで反映されるようにして。文字数/トークンカウンターとコピーボタンをつけて。」
この発想、すごくないですか？ 必要なUIを、その場で、その作業のためだけに生成する。再利用しなくていい。完璧じゃなくていい。でもテキストだけでやるより100倍効率的。
■ よくある疑問への回答
Thariqは記事の中で、HTMLに対するよくある疑問にも答えています。
「トークン効率が悪くない？」
→ Markdownより多くのトークンを使うのは事実。でも表現力と「実際に読まれる確率」を考えると、トータルでは効率的。Opus 4.7の100万トークンコンテキストでは、増加分は気にならないレベルとのこと。
「生成に時間がかからない？」
→ Markdownの2-4倍かかる。でも結果がそれだけの価値がある、とThariq本人は感じているそうです。
「バージョン管理は？」
→ これは正直デメリット。HTMLのdiffはMarkdownに比べてノイズが多く、レビューしづらい。現状ではHTMLの最大の弱点の一つ。
「デザインがダサくなるんだけど？」
→ Claude Codeのフロントエンドデザインプラグインを使うと改善する。さらに自社のコードベースをClaude Codeに読ませて「デザインシステムHTMLファイル」を作らせ、それを以降の参照元にすると、自社のスタイルに統一できる。
■ なぜ「今」𝗛𝗧𝗠𝗟なのか
この記事が刺さる理由は、タイミングにあります。
Claude Codeが複雑なタスクをこなせるようになった今、出力は長く、密度が高くなっている。それをMarkdownという「テキストに毛が生えた」フォーマットで受け取り続けるのは、もはやボトルネック。
Thariqの結論がこれです：
"I feel much more in the loop than ever before when using HTML."
（HTMLを使うことで、Claudeとの協働でかつてないほど「ループの中にいる」と感じる）
Claude Codeに任せきりにするのではなく、出力をHTMLにすることで「人間が理解し、判断し、フィードバックする」サイクルが回る。これこそがAIとの協働の本質です。
■ 実践ポイントまとめ
・難しいスキルや設定は不要。「HTMLファイルを作って」とClaude Codeに言うだけ
・最初からスキルファイルを作ろうとしない。まずは素のプロンプトで試す
・計画書、レビュー、レポート、プロトタイプなど、「人に読ませたいもの」から始める
・スライダーやコピーボタンなど「双方向性」を意識すると効果が倍増する
・生成されたHTMLはブラウザで開くか、S3にアップして共有
Markdownが悪いわけではありません。でも、Claude Codeの出力がここまで高度になった今、受け取る側のフォーマットもアップグレードする時が来ている。
まずは次にClaude Codeに計画書を作らせるとき、「HTMLで作って」と一言加えてみてください。その違いに驚くはずです。
この記事が少しでも参考になった方へ。
𝗖𝗹𝗮𝘂𝗱𝗲 𝗖𝗼𝗱𝗲 𝗦𝘁𝘂𝗱𝗶𝗼 @ 𝗝𝗮𝗽𝗮𝗻（@ClaudeCode_love）は、
Claude Codeガチ勢3人で運営しているアカウントです。
実務レベルのCLI活用・自動化を毎日発信しています。
現在は上場企業とAIエージェントを共同開発中。
普段の発信内容👇
・Claude CodeやClaudeを活用したリアルなプロダクト開発事例
・Claude Code活用／Vibe Coding／開発トレンドの整理
・海外のClaude Codeに関する最新情報
開発思想から設計、実装、改善まで、
「作って終わり」ではなく動くプロダクトを世に出すところまでを
海外の情報や１次情報をまとめています。
ご関心のある方は、ぜひフォローしてチェックしてみてください👀有益だと思います！
