[{"data":1,"prerenderedAt":351},["ShallowReactive",2],{"post-claude-html-context-optimization":3,"blog-categories":154,"blog-sidebar-banners":350},{"post":4},{"id":5,"date":6,"date_gmt":7,"guid":8,"modified":10,"modified_gmt":11,"slug":12,"status":13,"type":14,"link":15,"title":16,"content":18,"excerpt":21,"author":23,"featured_media":24,"comment_status":25,"ping_status":26,"sticky":20,"template":27,"format":28,"meta":29,"categories":31,"tags":33,"acf":34,"aioseo_notices":35,"_links":36,"_embedded":78},676,"2026-05-28T00:00:00","2026-05-27T15:00:00",{"rendered":9},"https://blog.cloco.co.jp/?p=676","2026-05-28T17:43:51","2026-05-28T08:43:51","claude-html-context-optimization","publish","post","https://blog.cloco.co.jp/claude-html-context-optimization/",{"rendered":17},"ClaudeにHTMLでコンテキストを渡す方法と理由【実例コード付き】",{"rendered":19,"protected":20},"\n\u003Cp>ClaudeにコンテキストやレポートをMarkdown形式で渡してた人、ちょっと聞いてください！\u003Cbr>HTML形式に切り替えると情報の伝わり方がめちゃくちゃ変わる可能性があって、2026年5月8日にAnthropicエンジニアのThariq ShihiparがHTMLをコンテキストに使う利点をまとめた記事「The Unreasonable Effectiveness of HTML」を公開したら、エンジニアコミュニティでほんまに大きな議論が起きたんですよ。\u003C/p>\n\n\n\n\u003Cp>本記事では、その背景・理由・具体的な実装方法をまとめていくので、一緒に確認してみてください。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Cdiv id=\"ez-toc-container\" class=\"ez-toc-v2_0_62 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n\u003Cdiv class=\"ez-toc-title-container\">\n\u003Cp class=\"ez-toc-title \" >目次\u003C/p>\n\u003Cspan class=\"ez-toc-title-toggle\">\u003Ca href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\">\u003Cspan class=\"ez-toc-js-icon-con\">\u003Cspan class=\"\">\u003Cspan class=\"eztoc-hide\" style=\"display:none;\">Toggle\u003C/span>\u003Cspan class=\"ez-toc-icon-toggle-span\">\u003Csvg style=\"fill: #424242;color:#424242\" xmlns=\"http://www.w3.org/2000/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\">\u003Cpath d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\">\u003C/path>\u003C/svg>\u003Csvg style=\"fill: #424242;color:#424242\" class=\"arrow-unsorted-368013\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\">\u003Cpath d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"/>\u003C/svg>\u003C/span>\u003C/span>\u003C/span>\u003C/a>\u003C/span>\u003C/div>\n\u003Cnav>\u003Cul class='ez-toc-list ez-toc-list-level-1 ' >\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-1\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91%E3%81%AF1%E4%BA%BA%E3%81%AEAnthropic%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%8A%95%E7%A8%BF\" title=\"きっかけは1人のAnthropicエンジニアの投稿\">きっかけは1人のAnthropicエンジニアの投稿\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-2\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9CMarkdown%E3%81%8C%E3%80%8CAI%E5%90%91%E3%81%91%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%80%8D%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B\" title=\"そもそもなぜMarkdownが「AI向けデフォルト」になったのか\">そもそもなぜMarkdownが「AI向けデフォルト」になったのか\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-3\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#HTML%E3%81%8CMarkdown%E3%82%88%E3%82%8A%E9%81%A9%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B5%E3%81%A4%E3%81%AE%E7%90%86%E7%94%B1\" title=\"HTMLがMarkdownより適している5つの理由\">HTMLがMarkdownより適している5つの理由\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-4\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#%E5%AE%9F%E4%BE%8B%E3%82%B3%E3%83%BC%E3%83%89%EF%BC%9A%E5%90%8C%E3%81%98%E5%86%85%E5%AE%B9%E3%82%92Markdown%E3%81%A8HTML%E3%81%A7%E6%AF%94%E8%BC%83\" title=\"実例コード：同じ内容をMarkdownとHTMLで比較\">実例コード：同じ内容をMarkdownとHTMLで比較\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-5\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%B3%E3%82%B9%E3%83%88%E3%81%AE%E7%8F%BE%E5%AE%9F%EF%BC%9AHTML%E3%81%AF%E9%AB%98%E3%81%8F%E3%81%A4%E3%81%8F%E3%81%AE%E3%81%8B\" title=\"トークンコストの現実：HTMLは高くつくのか\">トークンコストの現実：HTMLは高くつくのか\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-6\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#HTML%E3%81%8C%E5%90%91%E3%81%8B%E3%81%AA%E3%81%84%E3%82%B1%E3%83%BC%E3%82%B9%EF%BC%88%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%81%AE%E5%9F%BA%E6%BA%96%EF%BC%89\" title=\"HTMLが向かないケース（使い分けの基準）\">HTMLが向かないケース（使い分けの基準）\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-7\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#CLAUDEmd%E3%81%B8%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E4%BE%8B%EF%BC%88%E4%BB%8A%E6%97%A5%E3%81%8B%E3%82%89%E4%BD%BF%E3%81%88%E3%82%8B%EF%BC%89\" title=\"CLAUDE.mdへの追加プロンプト例（今日から使える）\">CLAUDE.mdへの追加プロンプト例（今日から使える）\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-8\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#%E3%81%BE%E3%81%A8%E3%82%81\" title=\"まとめ\">まとめ\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-9\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#FAQ\" title=\"FAQ\">FAQ\u003C/a>\u003C/li>\u003Cli class='ez-toc-page-1 ez-toc-heading-level-2'>\u003Ca class=\"ez-toc-link ez-toc-heading-10\" href=\"https://blog.cloco.co.jp/claude-html-context-optimization/#%E5%8F%82%E8%80%83%E6%83%85%E5%A0%B1\" title=\"参考情報\">参考情報\u003C/a>\u003C/li>\u003C/ul>\u003C/nav>\u003C/div>\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91%E3%81%AF1%E4%BA%BA%E3%81%AEAnthropic%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E6%8A%95%E7%A8%BF\">\u003C/span>きっかけは1人のAnthropicエンジニアの投稿\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>2026年5月8日、AnthropicのエンジニアThariq ShihiparがAnthropic公式ブログに「The Unreasonable Effectiveness of HTML」を公開したんですよね（\u003Ca href=\"https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html\">原文リンク\u003C/a>）。\u003C/p>\n\n\n\n\u003Cp>この記事に連動したX（旧Twitter）の投稿は440万ビュー・8,200いいね・15,700ブックマークを記録したんですよ。\u003Cbr>数多くのエンジニアが「自分もMarkdownをやめた」「ずっとそうすべきだった」と反応して、SNS上でめちゃくちゃ広く拡散されました。\u003C/p>\n\n\n\n\u003Cp>著名な開発者Simon Willisonも同日、自身のブログ（simonwillison.net）でこの記事を取り上げて、長年のMarkdownデフォルト使用を見直して試した結果かなり良好だったという姿勢を示してるんですよね。\u003Cbr>単なる追従ではなく検証を経た上での評価なんやからこれは信頼性も高いじゃないかなと思います。\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">なぜこれほど反響を呼んだのか\u003C/h3>\n\n\n\n\u003Cp>MarkdownはAIへのコンテキスト渡しにおいてぶっちゃけ長年のデファクトスタンダードだったんですよ。\u003Cbr>それを根拠とともに否定する投稿が、Anthropic公式ブログから発信されたことが反響の大きさにつながったんですよね。\u003Cbr>「公式が言うなら試してみよう」という動機も相まって実際に検証したユーザーからの報告が次々と上がる展開になりました。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9CMarkdown%E3%81%8C%E3%80%8CAI%E5%90%91%E3%81%91%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%80%8D%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%8B\">\u003C/span>そもそもなぜMarkdownが「AI向けデフォルト」になったのか\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>じゃあ、まずはMarkdownがデフォルトになった理由から整理するんですけど、これは技術的な制約にあるんですよ。\u003Cbr>2022年頃のGPT-4時代、コンテキストウィンドウの上限は8,192トークンで限られたトークン数でできる限り多くの情報を詰め込むには、HTMLタグのオーバーヘッドを排除したMarkdownが合理的な選択だったんです。\u003C/p>\n\n\n\n\u003Cp>「トークンを節約するためにMarkdownを使う」って慣習はこの制約から生まれて、そのまま惰性的に引き継がれていったんですよね。\u003C/p>\n\n\n\n\u003Cp>で、2026年現在、主要LLMのコンテキストウィンドウはマジで大幅に拡張されて、Claude Sonnet 4.6・Opus 4.6以降では100万トークン規模に達してるんですよ。\u003Cbr>「トークンが足りない」という制約はほとんど消えてるから、トークン節約を理由にMarkdownを選ぶ根拠は、現在の技術環境ではもう成立しなくなってるんです。\u003Cbr>前提が変わった以上、フォーマット選択の判断軸も更新してみる余地がじゅうぶんあるんじゃないかな。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"HTML%E3%81%8CMarkdown%E3%82%88%E3%82%8A%E9%81%A9%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B5%E3%81%A4%E3%81%AE%E7%90%86%E7%94%B1\">\u003C/span>HTMLがMarkdownより適している5つの理由\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg fetchpriority=\"high\" decoding=\"async\" width=\"1254\" height=\"1254\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2026/05/markdown-vs-html-context-comparison.png\" alt=\"\" class=\"wp-image-680\"/>\u003C/figure>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">1. 情報密度\u003C/h3>\n\n\n\n\u003Cp>まず1つ目は情報密度なんですけど、MarkdownはプレーンテキストとHTMLタグの限定的なサブセットしか扱えないんです。\u003Cbr>HTMLであれば、CSS・SVG・テーブル・インラインスクリプトを組み合わせることで、色分け・グラフ・バッジなど視覚的な構造を1ファイルに収められるんですよね。\u003Cbr>同じ情報量をMarkdownで表現しようとすると複数ファイルや外部画像に頼ることになってコンテキストが分散しちゃう。\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">2. 可読性\u003C/h3>\n\n\n\n\u003Cp>次2つ目は可読性で、エンジニアコミュニティでは「長大なMarkdownは実際には読まれない」って指摘がよく共有されてます。HTMLの\u003Ccode><details>\u003C/code>タグと\u003Ccode><summary>\u003C/code>タグを使えば、長いレポートをデフォルトで折りたたんだ状態で提供できるんです。目次や内部リンクも実装できるから、人間が参照するドキュメントとして、ほんまにちゃんと機能するんですよね。\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">3. 共有性\u003C/h3>\n\n\n\n\u003Cp>3つ目は共有性なんやけど、HTMLファイルはブラウザで直接表示できるんですよ。チームメンバーへの共有はURLまたはファイル送付のみで完結して、Markdownレンダラーやツールへの依存がないから、ローカルで開いても同じ見た目になって再現性が高いんです。\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">4. 双方向性\u003C/h3>\n\n\n\n\u003Cp>4つ目は双方向性で、HTMLであれば、スライダーやボタンを使ったインタラクティブなパラメータ調整をページ内に組み込めるんですよね。「このパラメータを変えたらどうなるか」をその場で試せるレポートって、Markdownでは実現できないんですよ。これマジでえぐいと思いません？\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">5. コンテキストの豊富さ\u003C/h3>\n\n\n\n\u003Cp>最後5つ目はコンテキストの豊富さで、SlackやLinear、gitログといったMCPツールからの情報をHTMLに整形してClaudeに渡すと、情報の構造がそのまま保持されるんですよ。Markdownに変換する過程で失われる階層や色分けの情報を維持できるやから、モデルが参照できるコンテキストの質がめちゃくちゃ上がるんです。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"%E5%AE%9F%E4%BE%8B%E3%82%B3%E3%83%BC%E3%83%89%EF%BC%9A%E5%90%8C%E3%81%98%E5%86%85%E5%AE%B9%E3%82%92Markdown%E3%81%A8HTML%E3%81%A7%E6%AF%94%E8%BC%83\">\u003C/span>実例コード：同じ内容をMarkdownとHTMLで比較\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>じゃあ、同じ週次ステータスレポートをMarkdownとHTMLそれぞれで書いた場合の差を確認してみましょう。\u003C/p>\n\n\n\n\u003Cp>\u003Cstrong>Markdown版：\u003C/strong>\u003C/p>\n\n\n\n\u003Cpre class=\"prism line-numbers lang-markdown\" data-lang=\"markdown\">\u003Ccode>## 週次ステータスレポート\n### 完了タスク\n- ユーザー認証の実装\n- APIエンドポイントのテスト\n### 課題\n- パフォーマンス改善が未完了\u003C/code>\u003C/pre>\n\n\n\n\u003Cp>\u003Cstrong>HTML版：\u003C/strong>\u003C/p>\n\n\n\n\u003Cpre class=\"prism line-numbers lang-html\" data-lang=\"html\">\u003Ccode><!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"UTF-8\">\n<style>\n  body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; }\n  details { border: 1px solid #ddd; border-radius: 4px; margin: 0.5rem 0; padding: 0.5rem; }\n  summary { font-weight: bold; cursor: pointer; }\n  .done { color: #16a34a; }\n  .issue { color: #dc2626; }\n</style>\n</head>\n<body>\n<h1>週次ステータスレポート</h1>\n<details open>\n  <summary>✅ 完了タスク</summary>\n  <ul class=\"done\">\n    <li>ユーザー認証の実装</li>\n    <li>APIエンドポイントのテスト</li>\n  </ul>\n</details>\n<details>\n  <summary>⚠️ 課題</summary>\n  <ul class=\"issue\">\n    <li>パフォーマンス改善が未完了</li>\n  </ul>\n</details>\n</body>\n</html>\u003C/code>\u003C/pre>\n\n\n\n\u003Cp>HTML版では、完了タスクと課題がそれぞれ色分けされて折りたたみ可能なセクションに分かれてるんですよね。情報量はMarkdown版と同じなんやけど、状態（完了・課題）が視覚的にばっちり区別されてるから、Claudeがコンテキストとして読んだ場合にも構造が明確に伝わるんです。ブラウザで開けばそのまま確認できる点も、共有コストをめちゃくちゃ下げてくれますよ。\u003C/p>\n\n\n\n\u003Cp>実例20件はThariqのGitHubページ（thariqs.github.io/html-effectiveness）で公開されてるんで、様々なユースケースでの活用パターンをぜひ確認してみてください。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%B3%E3%82%B9%E3%83%88%E3%81%AE%E7%8F%BE%E5%AE%9F%EF%BC%9AHTML%E3%81%AF%E9%AB%98%E3%81%8F%E3%81%A4%E3%81%8F%E3%81%AE%E3%81%8B\">\u003C/span>トークンコストの現実：HTMLは高くつくのか\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cfigure class=\"wp-block-image size-full\">\u003Cimg decoding=\"async\" width=\"1693\" height=\"929\" src=\"https://blog.cloco.co.jp/wp-content/uploads/2026/05/token-cost-markdown-lean-full-html-chart.png\" alt=\"\" class=\"wp-image-681\"/>\u003C/figure>\n\n\n\n\u003Cp>HTMLはMarkdownよりトークン数が多くなるのは事実なんですよ。pasqualepillitteri.it（2026年5月）が実施した検証データによると、同じ内容での比較はこんな感じです。\u003C/p>\n\n\n\n\u003Cfigure class=\"wp-block-table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>フォーマット\u003C/th>\u003Cth>トークン数（目安）\u003C/th>\u003Cth>コスト概算\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Plain Markdown\u003C/td>\u003Ctd>約1,140\u003C/td>\u003Ctd>$0.017\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Lean HTML\u003C/td>\u003Ctd>約2,760\u003C/td>\u003Ctd>$0.041\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Full HTML（CSS・バッジ等込み）\u003C/td>\u003Ctd>約5,480\u003C/td>\u003Ctd>$0.082\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\u003C/figure>\n\n\n\n\u003Cp>出典：pasqualepillitteri.it（2026年5月）\u003C/p>\n\n\n\n\u003Cp>数字だけ見るとFull HTMLはMarkdownの約5倍のコストになるんですよね。でも、100万トークンのコンテキストウィンドウを基準に考えると、Full HTMLのコンテキスト使用率は0.55%にすぎないんですよ。コンテキスト全体から見たら残り99.45%は依然として使用可能な状態にあるんやから、「HTMLは高い」ってびびる必要はないじゃないかな。\u003C/p>\n\n\n\n\u003Cp>「HTMLは高い」って印象は、ぶっちゃけトークン制限が厳しかった時代の感覚が残ってるだけのケースが多いんですよ。\u003Cbr>絶対値じゃなくて使用率で考えたとき、情報の構造品質を優先した選択のほうが最終的なアウトプットの質に直結する場面って、ほんまにたくさんあるんです。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"HTML%E3%81%8C%E5%90%91%E3%81%8B%E3%81%AA%E3%81%84%E3%82%B1%E3%83%BC%E3%82%B9%EF%BC%88%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%81%AE%E5%9F%BA%E6%BA%96%EF%BC%89\">\u003C/span>HTMLが向かないケース（使い分けの基準）\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>じゃあ、HTMLに全部切り替えればいいかというとそうでもなくて、使い分けの基準を一旦整理しておくのが大事なんですよね。\u003Cbr>最も有効な判断軸は「その情報は人間が読むのか、AIが読むのか」ってこと。\u003C/p>\n\n\n\n\u003Cp>\u003Cstrong>Markdownが依然として有利なケース\u003C/strong>\u003C/p>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Cstrong>Gitで管理・チームが編集するドキュメント\u003C/strong>：HTMLタグはdiffが汚染されるんですよ。\u003Ccode></div>\u003C/code>や\u003Ccode><style>\u003C/code>の変更がコードレビューのノイズになって、共同編集コストが上がっちゃう。\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>短い指示・簡単なメモ\u003C/strong>：数百字の指示であれば、HTMLのオーバーヘッドはコスト対効果の面で合わないんです。Lean HTMLでも2倍以上のトークンを消費するからね。\u003C/li>\n\n\n\n\u003Cli>\u003Cstrong>エージェントループ内部でAIのみが読む中間出力\u003C/strong>：AIが次のステップで処理する中間データは、構造よりも機械可読性が優先されます。HTMLの視覚的構造はこの用途では不要なんです。\u003C/li>\n\u003C/ul>\n\n\n\n\u003Cp>HTMLが力を発揮するのは「人間が確認し、Claudeが参照して作業する」っていう構成のとき、あるいは「Claude自身が成果物としてHTMLを生成する」ときなんですよ。コンテキストのフォーマットを変えることは、出力品質に直接影響するんですよね。\u003C/p>\n\n\n\n\u003Cp>「md原本＋html共有用」のCompanion Fileパターンも、現実的な運用として機能するんですよ。\u003Cbr>Gitで管理するMarkdownファイルと、チームや外部共有用のHTMLファイルを並存させることで、両方の利点を目的別に使い分けられるから、めちゃくちゃ柔軟な運用ができるんです。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"CLAUDEmd%E3%81%B8%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E4%BE%8B%EF%BC%88%E4%BB%8A%E6%97%A5%E3%81%8B%E3%82%89%E4%BD%BF%E3%81%88%E3%82%8B%EF%BC%89\">\u003C/span>CLAUDE.mdへの追加プロンプト例（今日から使える）\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>そしたら、実際に試してみる方法も紹介しますね。HTMLでの出力をClaudeに指示する場合、CLAUDE.mdへの追記が最もシンプルな方法なんですよ。beginnersinai.orgが公開しているプロンプト例をベースにした記述はこんな感じです。\u003C/p>\n\n\n\n\u003Cpre class=\"prism line-numbers\">\u003Ccode># CLAUDE.mdに追記する場合\nOutput format: HTML\nUse semantic HTML tags. Include color callouts for warnings and tips.\nPrefer real <table> elements over Markdown pipe tables.\u003C/code>\u003C/pre>\n\n\n\n\u003Cp>記述する際の注意点として、シングルファイルルールを守ることが大事なんですよ。外部CDNへの参照（BootstrapやTailwindなど）を使うと、ファイルが単体で機能しなくなってしまうやから、インラインCSSとインラインJSで完結させることで、どの環境でも同じ表示になる再現性が担保されるんです。\u003C/p>\n\n\n\n\u003Cp>コンテキストとして渡すHTMLを自分で作成する場合も、同じシングルファイルの原則が適用されるんですよね。CSSは\u003Ccode><style>\u003C/code>タグ内に、JavaScriptは\u003Ccode><script>\u003C/code>タグ内に記述して一つのファイルにまとめてみてください。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"%E3%81%BE%E3%81%A8%E3%82%81\">\u003C/span>まとめ\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cp>Markdownがデフォルトになったのはトークン制限っていう技術的制約があったからで100万トークン時代にその前提が消えた今、フォーマット選択の判断軸を更新してみる余地がめちゃくちゃあるんです。\u003C/p>\n\n\n\n\u003Cp>HTMLへの切り替えが有効なのは、人間がレビューしてClaudeが参照するコンテキストを扱うとき、\u003Cbr>そしてClaudeが成果物として読みやすいドキュメントを生成するときなんですよね。\u003Cbr>Gitで管理するドキュメントや短い指示では、Markdownのシンプルさが引き続き有効に機能するから、そこは使い分けでオッケーです。\u003C/p>\n\n\n\n\u003Cp>とりあえず、すぐ試せる出発点として3つ挙げておきますね。\u003C/p>\n\n\n\n\u003Col class=\"wp-block-list\">\n\u003Cli>CLAUDE.mdに\u003Ccode>Output format: HTML\u003C/code>を追記してClaudeの出力フォーマットを変えてみてください\u003C/li>\n\n\n\n\u003Cli>週次レポートや調査サマリーなど、定期的に参照するコンテキストをHTMLに移行してみて\u003C/li>\n\n\n\n\u003Cli>必要に応じてCompanion Fileパターン（md原本＋html共有用）で運用を設計してみてください\u003C/li>\n\u003C/ol>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"FAQ\">\u003C/span>FAQ\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">Q. ClaudeへのコンテキストにHTMLを渡すとは何ですか？\u003C/h3>\n\n\n\n\u003Cp>ClaudeにコンテキストとしてHTMLファイルを入力することで、CSS・SVG・テーブル・折りたたみセクションなどを含む構造化された情報を渡す手法です。2026年5月にAnthropicエンジニアThariq Shihiparが「The Unreasonable Effectiveness of HTML」として提唱して、エンジニアコミュニティでほんまに広く注目されたんですよね。Markdownに比べて情報の構造と視覚的な区別が保たれるから、モデルが参照しやすいコンテキストを構築できるんです。\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">Q. HTMLとMarkdownどちらをClaudeに渡すべきですか？\u003C/h3>\n\n\n\n\u003Cp>「その情報を人間が確認してからClaudeが参照するか」を判断軸にするといいです。人間が読む共有レポートやステータスドキュメントにはHTMLが有効で、Gitで管理するチーム編集ドキュメントや短い指示にはMarkdownが合理的なんですよね。エージェントループ内でAIのみが読む中間出力はMarkdownが向いてるんで、用途に合わせて使い分けてみてください。\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">Q. CLAUDE.mdでHTMLを指定するにはどうすればいいですか？\u003C/h3>\n\n\n\n\u003Cp>CLAUDE.mdに以下の3行を追記するだけでオッケーです。\u003Cbr>\u003Ccode>Output format: HTML\u003C/code>、\u003Cbr>\u003Ccode>Use semantic HTML tags. Include color callouts for warnings and tips.\u003C/code>、\u003Cbr>\u003Ccode>Prefer real <table> elements over Markdown pipe tables.\u003C/code>。\u003Cbr>外部CSSライブラリへの参照は避けて、インラインCSSとインラインJSで完結させるシングルファイル形式を守ってみてください。\u003C/p>\n\n\n\n\u003Ch3 class=\"wp-block-heading\">Q. HTMLはMarkdownよりトークンを多く消費しますか？\u003C/h3>\n\n\n\n\u003Cp>消費するのは本当ですね。pasqualepillitteri.it（2026年5月）の検証によると、Plain MarkdownはClaude APIで約1,140トークン（コスト概算$0.017）で、Full HTMLはCSS・バッジ込みで約5,480トークン（$0.082）になるんです。でも、100万トークンのコンテキストウィンドウを持つモデルにおけるFull HTMLのコンテキスト使用率は0.55%にとどまるんですよね。絶対コストじゃなくて、コンテキスト全体に占める比率で判断するほうが現実的じゃないかなと思います。\u003C/p>\n\n\n\n\u003Chr class=\"wp-block-separator has-alpha-channel-opacity\"/>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">\u003Cspan class=\"ez-toc-section\" id=\"%E5%8F%82%E8%80%83%E6%83%85%E5%A0%B1\">\u003C/span>参考情報\u003Cspan class=\"ez-toc-section-end\">\u003C/span>\u003C/h2>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>Anthropic公式ブログ「The Unreasonable Effectiveness of HTML」（https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html）\u003C/li>\n\n\n\n\u003Cli>Simon Willison’s Weblog（https://simonwillison.net）\u003C/li>\n\n\n\n\u003Cli>pasqualepillitteri.it トークンコスト検証記事（https://pasqualepillitteri.it）\u003C/li>\n\n\n\n\u003Cli>Thariq Shihipar GitHubページ（https://thariqs.github.io/html-effectiveness）\u003C/li>\n\n\n\n\u003Cli>beginnersinai.org プロンプト例（https://beginnersinai.org）\u003C/li>\n\u003C/ul>\n",false,{"rendered":22,"protected":20},"\u003Cp>MarkdownよりHTMLがClaudeコンテキストに適している5つの理由を解説。トークンコスト比較・実例コード・CLAUDE.md設定例まで網羅。\u003C/p>\n",13,679,"closed","open","","standard",{"om_disable_all_campaigns":20,"_monsterinsights_skip_tracking":20,"_monsterinsights_sitenote_active":20,"_monsterinsights_sitenote_note":27,"_monsterinsights_sitenote_category":30,"_themeisle_gutenberg_block_has_review":20,"footnotes":27},0,[32],9,[],[],[],{"self":37,"collection":40,"about":43,"author":46,"replies":50,"version-history":53,"predecessor-version":57,"wp:featuredmedia":61,"wp:attachment":64,"wp:term":67,"curies":74},[38],{"href":39},"https://blog.cloco.co.jp/wp-json/wp/v2/posts/676",[41],{"href":42},"https://blog.cloco.co.jp/wp-json/wp/v2/posts",[44],{"href":45},"https://blog.cloco.co.jp/wp-json/wp/v2/types/post",[47],{"embeddable":48,"href":49},true,"https://blog.cloco.co.jp/wp-json/wp/v2/users/13",[51],{"embeddable":48,"href":52},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=676",[54],{"count":55,"href":56},2,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/676/revisions",[58],{"id":59,"href":60},682,"https://blog.cloco.co.jp/wp-json/wp/v2/posts/676/revisions/682",[62],{"embeddable":48,"href":63},"https://blog.cloco.co.jp/wp-json/wp/v2/media/679",[65],{"href":66},"https://blog.cloco.co.jp/wp-json/wp/v2/media?parent=676",[68,71],{"taxonomy":69,"embeddable":48,"href":70},"category","https://blog.cloco.co.jp/wp-json/wp/v2/categories?post=676",{"taxonomy":72,"embeddable":48,"href":73},"post_tag","https://blog.cloco.co.jp/wp-json/wp/v2/tags?post=676",[75],{"name":76,"href":77,"templated":48},"wp","https://api.w.org/{rel}",{"author":79,"wp:featuredmedia":93,"wp:term":131},[80],{"id":23,"name":81,"url":27,"description":27,"link":82,"slug":83,"avatar_urls":84,"acf":86,"_links":87},"Yui","https://blog.cloco.co.jp/author/yui/","yui",{"24":85,"48":85,"96":85},"https://blog.cloco.co.jp/wp-content/uploads/2026/05/yui.png",[],{"self":88,"collection":90},[89],{"href":49},[91],{"href":92},"https://blog.cloco.co.jp/wp-json/wp/v2/users",[94],{"id":24,"date":95,"slug":96,"type":97,"link":98,"title":99,"author":100,"featured_media":30,"aioseo_notices":101,"acf":102,"caption":103,"alt_text":27,"media_type":104,"mime_type":105,"media_details":106,"source_url":115,"_links":116},"2026-05-28T16:45:01","claude-html-context-optimization_hero","attachment","https://blog.cloco.co.jp/claude-html-context-optimization/claude-html-context-optimization_hero/",{"rendered":96},1,[],[],{"rendered":27},"image","image/png",{"width":107,"height":108,"file":109,"filesize":110,"sizes":111,"image_meta":112},1672,941,"2026/05/claude-html-context-optimization_hero.png",2067674,{},{"aperture":113,"credit":27,"camera":27,"caption":27,"created_timestamp":113,"copyright":27,"focal_length":113,"iso":113,"shutter_speed":113,"title":27,"orientation":113,"keywords":114},"0",[],"https://blog.cloco.co.jp/wp-content/uploads/2026/05/claude-html-context-optimization_hero.png",{"self":117,"collection":119,"about":122,"author":125,"replies":128},[118],{"href":63},[120],{"href":121},"https://blog.cloco.co.jp/wp-json/wp/v2/media",[123],{"href":124},"https://blog.cloco.co.jp/wp-json/wp/v2/types/attachment",[126],{"embeddable":48,"href":127},"https://blog.cloco.co.jp/wp-json/wp/v2/users/1",[129],{"embeddable":48,"href":130},"https://blog.cloco.co.jp/wp-json/wp/v2/comments?post=679",[132,153],[133],{"id":32,"link":134,"name":135,"slug":136,"taxonomy":69,"acf":137,"_links":138},"https://blog.cloco.co.jp/category/it_industry_news/","業界最新情報","it_industry_news",[],{"self":139,"collection":142,"about":145,"wp:post_type":148,"curies":151},[140],{"href":141},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/9",[143],{"href":144},"https://blog.cloco.co.jp/wp-json/wp/v2/categories",[146],{"href":147},"https://blog.cloco.co.jp/wp-json/wp/v2/taxonomies/category",[149],{"href":150},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=9",[152],{"name":76,"href":77,"templated":48},[],[155,175,195,215,235,255,276,296,315,335],{"id":23,"count":156,"description":27,"link":157,"name":158,"slug":159,"taxonomy":69,"parent":30,"meta":160,"acf":161,"_links":162},3,"https://blog.cloco.co.jp/category/dx/","DX","dx",[],[],{"self":163,"collection":166,"about":168,"wp:post_type":170,"curies":173},[164],{"href":165},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/13",[167],{"href":144},[169],{"href":147},[171],{"href":172},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=13",[174],{"name":76,"href":77,"templated":48},{"id":176,"count":100,"description":27,"link":177,"name":178,"slug":179,"taxonomy":69,"parent":30,"meta":180,"acf":181,"_links":182},6,"https://blog.cloco.co.jp/category/qa/","QA","qa",[],[],{"self":183,"collection":186,"about":188,"wp:post_type":190,"curies":193},[184],{"href":185},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/6",[187],{"href":144},[189],{"href":147},[191],{"href":192},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=6",[194],{"name":76,"href":77,"templated":48},{"id":196,"count":55,"description":27,"link":197,"name":198,"slug":199,"taxonomy":69,"parent":30,"meta":200,"acf":201,"_links":202},14,"https://blog.cloco.co.jp/category/web_app/","webアプリ","web_app",[],[],{"self":203,"collection":206,"about":208,"wp:post_type":210,"curies":213},[204],{"href":205},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/14",[207],{"href":144},[209],{"href":147},[211],{"href":212},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=14",[214],{"name":76,"href":77,"templated":48},{"id":216,"count":156,"description":27,"link":217,"name":218,"slug":219,"taxonomy":69,"parent":30,"meta":220,"acf":221,"_links":222},10,"https://blog.cloco.co.jp/category/architect/","アーキテクト","architect",[],[],{"self":223,"collection":226,"about":228,"wp:post_type":230,"curies":233},[224],{"href":225},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/10",[227],{"href":144},[229],{"href":147},[231],{"href":232},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=10",[234],{"name":76,"href":77,"templated":48},{"id":236,"count":55,"description":27,"link":237,"name":238,"slug":239,"taxonomy":69,"parent":30,"meta":240,"acf":241,"_links":242},4,"https://blog.cloco.co.jp/category/infra/","インフラ","infra",[],[],{"self":243,"collection":246,"about":248,"wp:post_type":250,"curies":253},[244],{"href":245},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/4",[247],{"href":144},[249],{"href":147},[251],{"href":252},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=4",[254],{"name":76,"href":77,"templated":48},{"id":256,"count":257,"description":27,"link":258,"name":259,"slug":260,"taxonomy":69,"parent":30,"meta":261,"acf":262,"_links":263},12,8,"https://blog.cloco.co.jp/category/mobile_app/","スマホアプリ","mobile_app",[],[],{"self":264,"collection":267,"about":269,"wp:post_type":271,"curies":274},[265],{"href":266},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/12",[268],{"href":144},[270],{"href":147},[272],{"href":273},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=12",[275],{"name":76,"href":77,"templated":48},{"id":277,"count":55,"description":27,"link":278,"name":279,"slug":280,"taxonomy":69,"parent":30,"meta":281,"acf":282,"_links":283},5,"https://blog.cloco.co.jp/category/design/","デザイン","design",[],[],{"self":284,"collection":287,"about":289,"wp:post_type":291,"curies":294},[285],{"href":286},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/5",[288],{"href":144},[290],{"href":147},[292],{"href":293},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=5",[295],{"name":76,"href":77,"templated":48},{"id":156,"count":156,"description":27,"link":297,"name":298,"slug":299,"taxonomy":69,"parent":30,"meta":300,"acf":301,"_links":302},"https://blog.cloco.co.jp/category/project_management/","プロジェクトマネージメント","project_management",[],[],{"self":303,"collection":306,"about":308,"wp:post_type":310,"curies":313},[304],{"href":305},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/3",[307],{"href":144},[309],{"href":147},[311],{"href":312},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=3",[314],{"name":76,"href":77,"templated":48},{"id":316,"count":236,"description":27,"link":317,"name":318,"slug":319,"taxonomy":69,"parent":30,"meta":320,"acf":321,"_links":322},11,"https://blog.cloco.co.jp/category/beginner/","初心者","beginner",[],[],{"self":323,"collection":326,"about":328,"wp:post_type":330,"curies":333},[324],{"href":325},"https://blog.cloco.co.jp/wp-json/wp/v2/categories/11",[327],{"href":144},[329],{"href":147},[331],{"href":332},"https://blog.cloco.co.jp/wp-json/wp/v2/posts?categories=11",[334],{"name":76,"href":77,"templated":48},{"id":32,"count":336,"description":27,"link":134,"name":135,"slug":136,"taxonomy":69,"parent":30,"meta":337,"acf":338,"_links":339},16,[],[],{"self":340,"collection":342,"about":344,"wp:post_type":346,"curies":348},[341],{"href":141},[343],{"href":144},[345],{"href":147},[347],{"href":150},[349],{"name":76,"href":77,"templated":48},[],1779961189733]