Claude CodeでHTML文書を使い分ける方法

TL;DR

AIへの指示や人が編集する文書はMarkdown、人が読む最終成果物はHTMLという使い分けが有効です。HTMLなら図、画像、タブ、操作要素を一つのファイルにまとめてURL共有でき、長い文書の認知負荷や確認漏れを減らせます。ただし生成時間とトークン消費は増えるため、用途に応じた選択が必要です。

Transcript

おマさです。本日はですね、クロード コードの使い方の中で、ま、HTMLがね 、ま、有効だよみたいな話が結構ネットで ね、話題になってるんで、ま、これについ てお話していきたいと思います。ま、 マークダンファイルと言うたらね、AI エージェントと、ま、人間がやり取りして いく、ま、ファイル形式としてはね、白に なってるかなと思うんですけども、え、ま 、持ち運びやすいさであったりだとか、ま 、あの、ある程度のね、表現であったりだ とかっていうので、ま、しかもクロードと かやったらね、え、なんか図とかあの文字 とかで作ってくれてたりすると思うんです けど、ま、そういう部分でも驚くほどね、 え、上手になってきたんですけども、ただ AIエージェントが、ま、進化するにつれ てですね、ま、マークダウンって... Read More

Key Insights

• HTMLは、人が読む最終成果物に図、画像、カード、タブなどを組み込み、長いテキストの認知負荷を下げるための出力形式である。
• Markdownは、AIへの指示や人間による直接編集に適しており、CLAUDE.mdまでHTMLへ変更する必要はないと話者は注意している。
• HTMLの強みは、SVG、コード、画像、アニメーション、操作要素を一つのファイルに統合できる高い表現力である。
• HTML文書は、Cloudflareなどのファイル置き場へ配置してURLを渡せるため、画像や資料を含む成果物を共有しやすい。
• インタラクションは、タブやスライダーの操作に応じて表示を変えられるため、静的なMarkdownより探索しやすい資料を作れる。
• 実践用途は、仕様書、コードレビュー、スライド、デザインプロトタイプ、レポート、使い捨てエディターなど多岐にわたる。
• トークン効率はMarkdownの方が良い一方、人が読まない文書では意味がないため、話者は可読性への先行投資を重視している。
• 視覚的なレビュー資料は、人間が内容を確認しやすくすることで、AIの作業が意図した目標からずれる目標ドリフトの抑制に役立つ。
• 🎬 このチャンネルの他の動画:
  • Claude向け図解スキル3種を目的別に選ぶ方法
  • GBRAINでAI記憶システムを作る方法
  • GPT-OSSをローカルPCで使う方法は？
• 📺 このチャンネル: まさおAIじっくり解説ch

Questions & Answers

Q: Claude CodeでHTML文書を使う方法は？

Claude CodeへHTMLで資料を作るよう依頼し、生成された一枚のHTMLファイルをブラウザで確認します。必要に応じて図、画像、カード、タブ、操作要素を含め、Cloudflareなどへ配置すればURLで共有できます。話者はスラッシュコマンドからHTML資料を生成する運用も紹介しています。

Q: MarkdownとHTMLはどのように使い分けますか？

AIへの指示や人が直接編集する文書にはMarkdown、人が読む最終成果物にはHTMLを使うのが基本です。Markdownは持ち運びや編集がしやすく、HTMLはレイアウトや視覚表現、共有、操作性に優れます。すべてをHTML化するのではなく、読み手と目的に合わせて選びます。

Q: CLAUDE.mdをHTMLに変更するべきですか？

CLAUDE.mdをHTMLに変更する必要はありません。話者は、AIエージェント向けの指示はMarkdownのままにし、人間が読む仕様書、レビュー、レポートなどをHTMLにする適材適所が前提だと述べています。HTMLが有効という主張は、あらゆる文書の置き換えを意味しません。

Q: HTML文書はなぜ認知負荷を下げられるのですか？

HTML文書は、長い文章をカード、図、画像、タブなどへ整理し、視覚的なまとまりとして提示できるからです。情報密度を保ちながら読み進める順序を示しやすく、文章だけが長く並ぶ状態を避けられます。ただし、認知負荷がどの程度減るかを示す数値的な証拠は提示されていません。

Q: HTMLがMarkdownより優れている点は何ですか？

HTMLは、レイアウトの調整、視覚的な情報整理、URL共有、インタラクションの実装に優れます。SVG、画像、コード、アニメーション、タブ、スライダーなどを一つのファイルへまとめられるため、説明資料やプロトタイプを豊かに表現できます。一方、簡潔さや編集のしやすさではMarkdownに利点があります。

Q: HTML出力はどのような業務に使えますか？

HTML出力は、仕様書、コードレビュー、スライド、デザインプロトタイプ、レポートなどに使えます。さらに、一度だけ使うJSON編集画面や整形ツールのような使い捨てエディターも作れます。プルリクエストでは、作業過程をまとめたHTMLを公開し、そのリンクを添付する運用も提案されています。

Q: HTML文書を共有する方法は？

生成したHTMLファイルをCloudflareなどの公開可能な場所へ配置し、発行されたURLを共有します。一枚のHTMLに説明、画像、図、操作要素をまとめれば、受け手はブラウザから内容を確認できます。話者は、この共有のしやすさをHTMLの主要な利点の一つとして挙げています。

Q: HTML出力の欠点と注意点は何ですか？

HTML出力はMarkdownより生成に時間がかかり、タグなどによってトークン効率が悪く、内容が冗長になりやすい点に注意が必要です。また、単純な指示文や頻繁に手編集する文書までHTMLにすると利点が薄れます。視覚表現や共有性が必要な成果物へ限定して使うのが適切です。

Q: HTML文書にデザインシステムは必要ですか？

デザインシステムは必須ではありません。話者は、テンプレートを用意する方法もあるとしつつ、モデルに任せても一定程度は読みやすいHTMLが成立するとの見解を示しています。ただし、これは動画内の実践的な評価であり、品質比較や再現性を示す検証結果は提示されていません。

Q: HTMLによって目標ドリフトを防ぐ方法は？

作業内容や判断材料を図、画像、カードなどで読みやすく整理し、人間が途中や完了時に確認できる状態を作ります。確認されない長文を残すだけでは、AIの成果が当初の意図からずれても見逃されます。話者は、可読性へ先にトークンを投資し、人間のレビューを促すことが重要だと述べています。

Summary & Key Takeaways

• 基本方針は、すべてをHTMLへ置き換えるのではなく、読み手と用途で形式を選ぶことである。CLAUDE.mdなどAIエージェントへの指示や、人が頻繁に直接編集する文書にはMarkdownが向く。一方、AIが生成し、人が確認する仕様書、レビュー、レポートなどの最終成果物には、視覚表現を充実させられるHTMLが有力となる。

• HTMLは、カード、図、画像、SVG、タブ、アニメーション、スライダーなどを一つのファイルへ統合できる。情報密度を保ちながら視線を誘導でき、Cloudflareなどへ配置してURLで共有する運用も可能である。活用例として、仕様書、コードレビュー、スライド、デザインプロトタイプ、レポート、JSON編集用の使い捨てエディターが挙げられている。

• 判断基準はトークン効率だけでなく、人が実際に読み、目的とのずれを発見できるかである。HTMLはMarkdownより生成に時間がかかり、出力が冗長になりやすい一方、読みやすい成果物へ先にトークンを投資すれば、確認不足による手戻りや目標ドリフトを防ぎやすい。話者は、デザインシステムがなくても一定品質のHTMLは生成できるとの見解を示している。