HTML出力戦略（Claude Code）

Anthropic で Claude Code を開発している Thariq Shihipar（@trq212）が提唱した「Markdown より HTML で出力すべき」という考え方。プロンプトの末尾に 1 行追加するだけで、人に届ける成果物の品質を大幅に高められる実践論。

フォーマット税（Format Tax）とは

読まれない出力フォーマットを選び続けることで発生する「目に見えないコスト」。

毎日積み上がる小さな摩擦が、コミュニケーション品質全体を蝕んでいくという概念。

プロンプトの末尾に以下のいずれか 1 行を追加するだけでよい：

「HTML ファイルで出して」
「HTML の 1 枚もので出して」
「読み手がそのまま開けるように HTML にして」

Skill 化は「使い方が固まってから」。最初の 1 週間は 1 行プロンプトで十分。

HTML 出力が特に有効な場面：

週報・リサーチ要約 — Slack ログ・GitHub・Notion を横断して HTML 1 枚にまとめ、URL 共有。受け取った側がブラウザで開くだけで全情報にアクセスできる
企画書 6 案の並列比較 — 1 枚の HTML にグリッドで並べ、意思決定者が 1 画面で比較できる
デザイン微調整 — 色・アニメーション速度をスライダーで操作できる HTML プロトタイプ。Vibe Design の実践に直結
判断のための編集画面 — ドラッグで振り分けできる Now/Next/Later/Cut ボード
PR レビュー資料 — 差分に色とコメントを付け、コードを読まない人も参加できる

用途	形式
記録・変更履歴・CLAUDE.md・SKILL.md など AI とのやり取り	Markdown（未作成）
人に届ける・触ってもらう・複数案を並べる・色付きで判断してもらう成果物	HTML

核心は「誰が読むか」。AI との会話ログは Markdown（未作成）で十分だが、人間が読む成果物は HTML にすることでフォーマット税をゼロにできる。

コピー回帰ボタンを置く — 編集 UI を作る場合は必ず末尾に「Markdown でコピー」「JSON でコピー」ボタンを置く（Claude への戻し用）
Skill 化は後で — 最初の 1 週間は 1 行プロンプトで十分。使い方が固まってからスキル化する
デザインシステムを共用 — design-system.html をプロジェクト直下に置いておくとトーン統一が楽になる

形式	特徴・用途
HTML	ブラウザで開ける・URL 共有。リアルタイム閲覧・インタラクション
PDF	印刷・正式提出。レイアウト固定
PPTX	相手が編集できる形式（marp-cli —pptx）
SVG	図解・グラフの再利用部品