AIに設計書を書かせるなら、MarkdownだけでなくHTMLも選択肢になる

X上で「AIに書かせるならMarkdownよりHTML」という話題が広がっています。きっかけのひとつは、Claude Codeに関わるThariq氏のX Article「Using Claude Code: The Unreasonable Effectiveness of HTML」と、その実例集です。日本語圏でも、ECサイトの設計書をHTML/CSS/SVGでリッチに生成する動画が共有され、かなり反応を集めていました。

ただし、これは「Markdownはもう不要」という話ではありません。Markdownは今でも軽く、書きやすく、差分管理しやすい形式です。今回の論点は、AIに何を作らせるとき、どの出力形式を指定するのが一番伝わるかです。設計書、レビュー、提案資料、比較表、フロー図のような“見る資料”では、HTMLが現実的な選択肢になり始めています。

話題の中心は「HTMLは新しいMarkdownか」という問い

元になったThariq氏の投稿は、X APIで確認できる範囲では2026年5月8日に投稿され、確認時点で約337万表示、約6900いいね、約1.3万ブックマークの規模まで伸びていました。記事タイトルは「Using Claude Code: The Unreasonable Effectiveness of HTML」。プロフィール上ではClaude Code @Anthropicと記載されています。

あわせて公開されている実例集には、AIが生成した20個のself-contained HTMLファイルが並んでいます。探索、コードレビュー、デザイン、プロトタイピング、図解、調査、レポート、カスタムエディタなど、単なる文章ではなく「その場で開いて読める成果物」としてまとめられているのが特徴です。

Markdownは軽い。HTMLは「見て判断する資料」に強い

Markdownの本来の設計目標は、Daring Fireballの説明にある通り、読みやすく書きやすいplain text formatです。テキストのまま読めて、必要に応じてHTMLへ変換できる。これは今でも非常に強い特徴です。README、議事録、簡単な仕様メモ、変更履歴のような文書では、Markdownの軽さが効きます。

一方で、AIに「比較して」「図にして」「レビューしやすくして」「複数案を並べて」と頼む場面では、Markdownだけだと情報が縦に流れてしまいます。HTMLなら、カード、表、色分け、SVG図、ページ内ナビゲーション、折りたたみ、簡単なインタラクションまで一つのファイルに入れられます。

ECサイト設計書デモが示した「一気通貫」の強さ

日本語圏で共有されたきしだ(K1S)氏の投稿動画では、AIがECサイトの設計書をHTMLとして生成している様子が見えます。フレームを確認すると、技術スタック、システムアーキテクチャ図、データベースER図、サイトマップ、トップページや商品詳細ページのUI、購入フロー、管理画面、APIエンドポイント、セキュリティ設計、パフォーマンス最適化まで含まれていました。

ここで大事なのは、ひとつひとつの設計が完璧かどうかではありません。要件定義の初期段階で、関係者が同じ画面を見ながら「ここは違う」「このフローは足りない」「管理画面も必要」と話せる状態を、AIが短時間で作れることです。これは中小企業のプロジェクトでも、かなり現実的な効きどころがあります。

AIにHTMLで頼むと、レビューの形が変わる

Simon Willison氏は、Thariq氏の記事を紹介する中で、HTML出力ならSVG図、インタラクティブなウィジェット、ページ内ナビゲーションなどを入れられると述べています。これは、AIへの依頼を「文章で説明して」から「見て判断できる形にして」へ変える発想です。

たとえばPull Requestレビューなら、変更差分を色分けし、危険度をラベルで示し、関係するモジュールを図にして、確認順序をナビゲーション化できます。提案資料なら、3案を横並びにし、メリット・リスク・実装工数をカードで見せられます。人間が判断するための情報配置を、AIに同時に任せられるわけです。

明日から試すなら、この依頼文で十分です

いきなり社内の全資料をHTMLにする必要はありません。まずは、比較・設計・レビュー・提案のように「読むだけでなく、見て判断したい資料」だけで試すのがおすすめです。1ファイルのHTMLとして出してもらえば、ブラウザで開くだけで確認できます。

次の内容を、1つの self-contained HTML ファイルとして作ってください。
外部ライブラリは使わず、HTML/CSS/SVGだけで表現してください。

目的:
- 関係者がブラウザで開いて、すぐ判断できる資料にする

入れてほしい要素:
- 全体概要
- 重要な判断ポイント3つ
- 比較表
- Mermaid風またはSVG風のフロー図
- リスクと未決事項
- 最後に、次に確認すべき質問リスト

注意:
- 見た目より、判断しやすさを優先
- 推測と事実を分ける
- 不明点は不明点として残す

ポイントは「きれいなページを作って」ではなく、「判断できる資料にして」と依頼することです。HTMLはあくまで器です。中身の目的を決めないまま装飾だけ増やすと、逆に確認しづらくなります。

まとめ

• check_circle今回の話題は「Markdown不要」ではなく、AI出力形式の使い分けの話です
• check_circleMarkdownは軽い文書、HTMLは見て判断する資料に向いています
• check_circleMermaidはフロー図やER図のような構造化された図解に向いています
• check_circleECサイト設計書デモは、要件定義のたたき台づくりにHTMLが効くことを示しています
• check_circle中小企業では、まず提案書・仕様書・レビュー資料の一部から試すのが現実的です

結局のところ、AIに任せるべきなのは「文章を書くこと」だけではありません。情報をどう並べれば人が判断しやすいか、その資料の型まで一緒に作らせることができます。i-Styleでは、こうした小さな型化を積み重ねることが、半年後に効いてくるAI活用だと見ています。