## 情報源
- URL: https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html
- 著者: Thariq Shihipar (Claude Codeチーム)
- 種別: Anthropic公式ブログ

## 核心主張
MarkdownをHTMLに置き換えることで情報密度・可読性・共有性・双方向性が大幅向上する。著者は「Markdown最大主義者からHTML最大主義者に転向した」と表明。

## HTMLのMarkdownに対する4つの優位性
1. **情報密度**: テーブル・CSSスタイリング・SVG図解・インタラクティブ要素・埋め込みスクリプトに対応。ASCII図の代替不要。
2. **視覚的明瞭性**: タブ・イラスト・レスポンシブデザインで構造化。100行超のMarkdownは読みにくいがHTMLは整理される。
3. **共有の容易さ**: ブラウザでネイティブレンダリング → リンクで共有可能（Markdownはメール添付が必要）。
4. **双方向インタラクション**: スライダー・パラメータ調整などのインタラクティブ要素で結果をClaude Codeに戻せる。

## 主要ユースケース5種
1. **仕様書・計画書**: 複数ファイル探索 + モックアップ + データフロー + 実装戦略
2. **コードレビュー**: レンダリングされたdiff + アノテーション + フローチャート + 重要度色分け
3. **デザイン・プロトタイプ**: パラメータ調整可能なインタラクティブコンポーネント + アニメーション調整
4. **レポート・学習**: SVG図解付き統合情報 + 解説ページ
5. **カスタムエディタ**: チケット優先順位付け・設定編集・プロンプトチューニング専用UI

## 使い方
- シンプルに「make an HTML file」または「make an HTML artifact」と指示するだけ
- GitHubテンプレート公開済み
- 使用ケースを知ることがテクニックより重要

## 実践的な習慣
- 単一の大きな計画書の代わりに複数のHTMLファイルを異なるプロジェクトステージ向けに作成
- 将来の検証エージェント向け参照として保持

## トークンコストについて
- MarkdownよりHTMLはトークン消費が多い
- ただしOpus 4.7の100万コンテキストウィンドウで実用的
- 表現力向上・可読性向上がコスト増を正当化

## 著者の動機
「HTMLはまさにそれだった。以前よりずっとループの中にいる感覚がある」—— 複雑化するClaudeシステムに対して人間の監視を維持するための手段。

## アクションアイテム
- vvv-bots のデバッグレポートをMarkdown→HTML化で可読性改善
- Claude Code計画書をHTMLで生成する習慣に切り替え
- コードレビューをHTMLレンダリングdiff+色分けで出力するSkill作成