LLMがHTMLを全部書けるようになるのは、最初から確定していた
🧱 今朝ニュースで見て、その日のうちに触った
今朝のテックニュースで nexu-io/html-anything が GitHub Trending に上がっているのを見つけて、休みの日だったんですが、その場で手元に落として動かしました。
html-anything(=ローカルで動く「AIエージェント用HTMLエディタ」。Markdownを渡すと最終形のHTML 1枚を組んでくれる)を触った第一印象は、正直に言うと——「驚きはなかった」でした。
良くできています。でも「来たか」であって「すごい」ではなかった。今日はその理由を、ツール紹介ではなく、Web畑で長くやってきた人間の視点から書きます。AIでデザインを作る話に興味がある人ほど、たぶん刺さります。
🔮 「自明だった」話 — Markdownを吐ける時点でHTMLは確定していた
私はもともとWeb、というかWebデザインの経緯がある人間です。だからLLMが出てきた最初の段階で、もうこの結論は見えていました。
LLMがMarkdownを生成できる。その時点で、いずれHTMLも全部生成できるようになるのは確定していた。
理屈は単純です。
- Markdown → HTML変換(=
#を<h1>に、-を<li>に変える処理)は、LLMが来るずっと前から存在する枯れた技術です - その変換自体をLLMがやれるなら、間に挟まっていたMarkdownという「中間形態」を飛ばして、最初からHTMLを書けるようになるのは時間の問題でした
- さらに言えば、既存のWebデザインは、中身を知っている人間にとっては元から"持っている"ものです。Appleのあのレイアウトも、洗練されたSaaSのLP(=ランディングページ、商品紹介の1枚物)も、構造を分解できる人間にはコピー可能な状態だった。LLMがそれを学習データとして持っているなら、再現できて当たり前なんです
気づいていた人はたくさんいると思います。私だけの慧眼みたいな話ではない。Web畑の人間なら見えていた地平線です。
だから本当の意味で意外だったのは、技術そのものではなく——
🐢 意外だったのは「遅さ」だった
「思ったより時間がかかったな」
これが正直な印象でした。HTMLを吐くだけなら、もっと早く来てよかったはずなんです。なぜ遅れたのか。手元で長く観察してきて、私はこう見ています。
🎨 最後まで残ったのは「アニメーションと細かいUI/UX」
静的なHTMLの構造とCSSは、わりと早い段階でLLMが書けるようになりました。詰まったのはその先です。
- ✨ アニメーション(=スクロールで要素がふわっと出る、hoverで動く、といった動きの演出)
- 🖐️ 細かいUI/UX(=押し心地、間の取り方、視線の誘導といった、見ただけでは言語化しづらい質感)
このあたりは、コードを吐くだけでは到達できない。「出来上がった画面を見て、ズレに気づいて、自分で直す」という能力が要るからです。
🧠 私の仮説:コード生成と画像認識で、進化スピードが違った
ここが今日いちばん言いたい部分です。
LLMの中で、コードを生成する能力と、画像を認識して自己修正する能力は、進化のスピードが揃っていなかった——というのが私の見立てです。
- コード生成は早かった。だから「それっぽいHTML」はわりと前から出せた
- でも「生成した画面のスクショを見て、デザインのおかしさに気づいて、自分で直す」という、画像認識ベースの自己修正ループは、コード生成より遅れて進化した
デザインの仕上げ——特にアニメーションや余白の質——は、作る能力(コード)ではなく、見て気づいて直す能力(画像認識)に依存します。そこのスピード差が、HTML自動生成の「最後の1割」を長く塞いでいた。それがようやく揃った。これが本当のニュースなんだと思います。「AIでHTMLが作れる」自体は、もう答えが出ていた問題でした。
🏢 3階建ての品定め — Claude Design / Open Design / html-anything
この文脈で、今ある選択肢を3つ並べると、きれいに「降りてくる」流れが見えます。
| 段 | 名前 | 何者か |
|---|---|---|
| 1 | Claude Design | Anthropic公式。cloud限定(claude.ai上でしか動かない)のデザイン生成機能 |
| 2 | Open Design（nexu-io/open-design） | OSS、4万★超。AIにデザインHTMLを書かせる本体。同じチームの本丸 |
| 3 | html-anything（nexu-io/html-anything） | 2と同じチームの新作。用途を「HTMLエディタ」に絞った軽量版。今朝のニュースのやつ |
1️⃣ Claude Design — 大手LLM企業の第一弾、しかし割に合わない
大きなLLM企業が出した、この種のものとしては最初の一手がClaude Designだと思います。が、実際に使ってみての正直な感想は厳しいです。
- 🎯 精度が、割の良さに見合わない
- 🔥 トークン(=AIが処理する文字の単位、使うほど枠を消費する)を馬鹿食いする
- ⏳ 使用量の枠が決まっているので、こんなものは一瞬で溶ける
手元でHTMLを作れるのに、なぜわざわざクラウドの有限な枠を溶かしてまでそこでやるのか。 この問いに答えられないんです。だから——
2️⃣ Open Design — 「クラウドでやる理由がない」への回答。ただし過剰
その不満への回答として、Open Designが出てきたのはよく分かります。自分の手元の、ログイン済みのコーディングエージェント(=Claude CodeやCursorなど)のセッションをそのまま使い、APIキーすら不要で、ローカルでデザインHTMLを生成する。クラウドの枠を溶かさない。理にかなっています。
ただ、実際に見てみると——ちょっと過剰なんですよね。
重いし、だるい。HTMLを作るだけなのに、あの規模の仕組みは要らないはずなんです。4万★が示すように、本体としては立派に育っている。でも「育ちすぎ」とも言える。やりたいことの本質に対して、装備が多すぎる。
3️⃣ html-anything — 過剰を削いだ「適正サイズ」として来た
そして今朝、3番目が来た。同じチームが、Open Designの過剰を削ぎ落として「HTMLエディタ」に用途を絞った軽量版がhtml-anythingです。
実際に触ると、思想は正しい。Markdownを貼って⌘+Enter、ローカルのClaude Codeセッションが走って、サンドボックス(=隔離された安全な領域)の中にHTMLが組み上がる。APIキー不要。「本質はHTMLを1枚作ること」に降りてきている。
「Claude Designが割に合わない → だからOpen Design → でも過剰 → だからhtml-anything」。この降りてくる流れそのものが、この分野の答えが収束しつつあることを示しています。
🪞 自分にも刺さる — 「自分はもう手元で同じことをやっている」
ここで正直に書きます。html-anythingは良くできている。でも"私にとっての"価値は、実は薄い。
なぜなら、ほとんど同じことを、私はもう手元で前からやっているからです。冒頭に書いた通り、これは自明だった。気づいた人間は、ツールを待たずに自分で手を動かしてきました。私もその一人です。
だから今朝の出来事は、私にとっては新発見ではなく——答え合わせでした。
これは「ツールが優れている/劣っている」という話ではありません。意味はこうです。
早くから気づいて手を動かしてきた手法が、ついにプロダクトとして一般化した。html-anythingは、その"到達点のマーカー"である。
優れたツールの登場として読むより、「この手法が普及した日付」として読むほうが正確だと思っています。
⚠️ 「Built with AI, not by AI」— 事実だけは人が見ておく、くらいの話
以前の記事で、Robin Moffatt氏の 「Built with AI, not by AI」(=AIで作るのと、AIに作らせるのは違う。判断と文体は人間が持つ)という線引きを紹介しました。今日、それを軽く思い出す場面がありました。
html-anythingに、この記事の前段にあたる原稿を一度組ませてみたら、出力HTMLにこんな"勝手な創作"が混じっていました。
- 👤 著者名が別人になっていた — 私の名前は高村裕貴ですが、出力には実在しない「髙村 大樹」という署名が入っていた
- 🔗 リンクが開発サーバーのアドレスのままだった — CTA(=行動を促すボタン)が
http://localhost:3000/services。そのまま公開したら死にリンク
これは1回試しただけなので、毎回こうなるとは限りません。ただのハルシネーション(=AIがそれっぽい嘘で隙間を埋めてしまう現象)で、珍しくもない話です。
言いたいのは「AIはダメだ」ではありません。デザインは任せても、署名・リンクみたいな"事実"のところだけは、人間が一度見ておいたほうがいいよね——くらいのことです。仕上がりは見事でした。そのうえで事実だけ確認する。特別な身構えは要りません✍️
🧬 メタな実演 — この記事自体を html-anything で組むと
せっかくなので、今あなたが読んでいるこの記事そのものを、html-anything で組んだものを置いておきます。しかもダーク版とライト版の2枚。
このブログ自体は、お使いの端末のOS設定(ダーク/ライト)に追従して表示が変わります。そのうえで、同じ原稿を html-anything に通すと、雑誌レイアウトの別物が——しかも明暗2通りで——出てくる。同じ中身が、レンダラー次第でここまで変わる。この記事の主題そのものを、リンクで体験できるようにしました。
(注:2枚とも、上に書いた「著者名・リンクの取り違え」を人間が直したうえで配置しています。AIが組み、人間が事実を保証した、という状態です)
🎯 まとめ — 答えはとっくに出ていた、来たのは「普及」のほう
| ❌ こう読むと外す | ✅ こう読むと正確 |
|---|---|
| AIでHTMLが作れる、すごい新時代だ | Markdownを吐ける時点で確定済み。新しくはない |
| ついに技術的ブレイクスルーが起きた | ブレイクスルーは「画像認識の自己修正」が追いついた点。それ以外は既定路線 |
| 最強のツールが出た、乗り換えよう | ツールの優劣ではなく「手法が一般化した到達点」のマーカー |
| AIに任せれば記事もデザインも完成 | デザインはAIに任せてOK。署名・リンクみたいな事実だけ人が一度見る |
LLMが出た最初の日から、HTMLは確定していました。意外だったのは遅さで、その遅さの正体は「見て気づいて直す力」の遅れだった。それがようやく揃い、Claude Design → Open Design → html-anything と適正サイズまで降りてきた。
そして、早くから気づいて手を動かしてきた人間にとって、これは新発見ではなく答え合わせです。
それでも、答え合わせには価値があります。「自分の見立ては合っていた」と確認できることは、次の地平線を読む自信になるからです🛠
📮 infoHiroki ぼちぼち便り — 月1程度の不定期メールマガジンをやっています。よかったら登録してみてください