Anthropic で Claude Code を担当するエンジニア Thariq Shihipar（@trq212）が X に記事「Using Claude Code: The Unreasonable Effectiveness of HTML」を投稿しました。公開からわずか16時間で440万ビュー・8,200いいね・15,700ブックマークを集め、開発者コミュニティで大きな議論を巻き起こしています。

その主張は一言で言えば「HTML is the new Markdown」。AI が出力するフォーマットとして、もう Markdown に縛られる必要はない、というものです。

背景：なぜ今 HTML なのか

Markdown が AI 出力の事実上の標準になったのは GPT-4 の時代、コンテキストウィンドウが小さくトークン節約が最優先だったころの話です。

現在の LLM は百万トークン超のコンテキストを扱えます。トークン効率という制約が事実上消えたいま、出力フォーマットとして HTML を選ばない理由はほとんどありません。

Thariq はこの変化を踏まえ、Claude Code に依頼する成果物の多くを HTML で生成するよう切り替えました。その体験をまとめた記事と、20 の実例サイト を公開したのが今回の反響の発端です。

HTML が Markdown より優れている 5 つの理由

1. 情報密度（Information Density）

HTML はテーブル・SVG・CSS・JavaScript・画像・インタラクションを 1 つの自己完結ファイルに収められます。Markdown には構造的な限界があり、複雑な情報表現には向きません。

2. 読みやすさの閾値（Readability Threshold）

「100 行を超える Markdown ファイルをちゃんと読んでいる人はほとんどいない」

HTML であればタブ切替・折りたたみセクション・レスポンシブレイアウトを使い、長大なドキュメントを人が実際に読める形にできます。

3. 共有の効率（Sharing Efficiency）

ブラウザは HTML をそのままレンダリングします。Markdown ファイルは受け取った側が変換ツールを介さないと読めませんが、HTML は URL を共有するだけで即座に読める状態になります。

4. 双方向インタラクション（Two-Way Interaction）

スライダー・ノブ・ボタンを埋め込んだ HTML は、ドキュメントを「静的な成果物」ではなく探索ツールに変えます。仕様書を読みながらパラメータを調整したり、コードの振る舞いを確認したりできます。

5. 体験の質（Joy Factor）

よく設計された HTML は Markdown よりも単純に使っていて気持ちいい。これは些細なことに見えますが、毎日触れるツールにとっては重要な要素です。

トークンコストの現実

HTML はトークン消費が増えます。Thariq が示したベンチマーク：

フォーマットトークン数コスト（概算）
Markdown~1,140$0.017
軽量 HTML~2,760$0.041
フル HTML~5,480$0.082

HTML は Markdown の 2〜4 倍のコストがかかります。しかし Opus 4.7 のコンテキストウィンドウ全体の 1% 未満に収まります。生成時間は増えますが、得られる価値と比べれば許容範囲内とするケースがほとんどです。

単一ファイルルール（Single-File Rule）

HTML の実用的な制約として、Thariq は以下のルールを推奨しています：

  • CSS はインライン記述（外部スタイルシート不可）
  • JavaScript も埋め込み（CDN インポート不可）
  • 画像は Base64 または SVG（外部 URL 不可）
  • フォントはシステムフォントのみ
  • ネットワーク通信なし

なぜか？ 単一 HTML ファイルにすることで、依存関係なしにどこでも開けます。添付ファイルとして送ることも、そのままブラウザで開くことも、ローカル保存することも可能です。

9 カテゴリー・20 事例

Thariq が 公開した例 は 9 カテゴリー・20 事例：

カテゴリ主な用途
探索・計画実装アプローチ比較、ビジュアルデザイン方向性、実装計画
コードレビューインライン注釈付き PR レビュー、モジュールマップ
デザインデザインシステム、コンポーネントバリエーション
プロトタイピングアニメーション、クリッカブルフロー
図解・ダイアグラムSVG 図表、フローチャート
スライドデッキキーボード操作可能なプレゼンテーション
学習・調査機能説明、概念解説
レポートステータス報告、インシデント分析
カスタム編集 UIチケット管理、フラグエディタ、プロンプト調整ツール

すぐ使えるスタータープロンプト

Thariq が紹介している実践的なプロンプト例：

複数アプローチの比較

1
2

6 種類の実装アプローチを 1 つの HTML ファイルにグリッド形式でまとめて。
各カードにコードスニペット、トレードオフ、いつ使うかを含めること。

PR レビュー

1
2

このプルリクエストの HTML アーティファクトを作成して。
実際の差分をインラインのマージン注釈付きでレンダリングして。

コード解説

1
2
3

HTML の解説ページを作成して：
トークンバケットフローのダイアグラム、注釈付きの主要コードスニペット、
インタラクティブなシミュレータを含めること。

Markdown が依然として優れているケース

Thariq は HTML を万能解とは言っていません。以下のケースでは Markdown が適切です：

  • リポジトリの README（GitHub がネイティブでレンダリング）
  • Slack / Discord スニペット（チャット環境での埋め込み）
  • 他の LLM への入力ドキュメント（LLM は HTML よりも Markdown が読みやすい場合がある）
  • Git blame が必要なファイル（差分履歴の追跡が重要な場合）
  • 個人メモ（シンプルさが価値を持つ場面）
  • RSS フィード・ニュースレター（フォーマット要件が決まっている）

セキュリティ上の注意点

HTML 出力には注意すべきリスクもあります：

  • プロンプトインジェクション：HTML ファイルを再度 LLM に渡すとき、埋め込まれた指示が実行される可能性
  • 意図しない JavaScript 実行：企業ドメインで HTML を開いた場合
  • ダウンストリームパイプラインの脆弱性：HTML を自動処理するパイプラインでのサニタイジング漏れ

対策：サンドボックスサブドメインから配信する、信頼できないソースの HTML は自動処理前にサニタイズする。

まとめ

コンテキストウィンドウが巨大化しトークンコストが下がった現在、AI 出力のフォーマット選択は「いかにトークンを節約するか」から「いかに人間が使いやすい形で届けるか」に主眼が移っています。「HTML is the new Markdown」というメッセージの本質は、その変化に合わせてフォーマットを選び直すべきだ、ということです。

Claude Code に限らず、AI ツールを使って成果物を生み出す場面で「そのまま人が開ける HTML」という選択肢を一度試してみる価値があるでしょう。

参考リンク