世界を動かす技術を、日本語で。

「Claude Code」の活用: HTMLの非合理的な効果

2026年5月9日原文(twitter.com)

概要

HTML の効果的な活用事例を紹介 シンプルなHTML が持つ強力な利点を解説 Simon Willison の記事の関連性を整理 現代Web開発における HTMLの有用性 を再評価 実用例とともに ポイント をまとめて提示

HTMLの驚くべき効果

  • HTML はシンプルでありながら、 非常に高い表現力 を持つマークアップ言語
  • CSSJavaScript なしでも、 情報伝達構造化 に十分な力を発揮
  • SEOアクセシビリティ の観点でも、 HTMLのみ のページが優位性
  • 軽量 かつ 高速な表示 が可能で、モバイル端末でも高いパフォーマンス
  • メンテナンス性 の高さ、 学習コスト の低さが特徴

実例:HTMLの効果的な活用

  • Thariq Shihiparによる HTML活用例 の紹介
    • 純粋なHTML のみで構築されたシンプルなWebページ
    • 読みやすさ即時アクセス が実現
    • 余計な装飾やスクリプト がなく、 本質的な情報 に集中
  • 小規模なツールドキュメントメモ 用途での有効活用
  • GitHub Pages などの静的ホスティングとの相性の良さ

関連記事:Simon Willisonの視点

  • Simon Willisonによる HTMLの「不合理なほどの効果」 に関する考察
    • HTML単体 で多くのニーズを満たせることへの驚き
    • Webアプリケーションデータ可視化 におけるHTMLの可能性
    • JavaScriptやフレームワーク の導入前に、まず HTMLでの実現 を検討する重要性

現代Web開発への示唆

  • 過度な技術導入 を避け、 HTMLの本来の力 を再評価
  • プロトタイピング初期リリース 段階では、まず HTMLのみ での実装を推奨
  • アクセシビリティパフォーマンス を重視するプロジェクトでの有用性
  • 学習者非エンジニア でも扱いやすいことから、 情報発信の民主化 に寄与

まとめ

  • HTMLシンプルながら強力 なWeb技術
  • 実用例専門家の意見 からも、その有用性が明確
  • 現代Web開発 でも、 HTML中心 の設計を選択肢として検討する価値

Hackerたちの意見

ウェブ技術って本当にすごいところがたくさんあるよね。みんな文句言うけど、実際は素晴らしい。前の仕事では、バイブでコーディングされたアプリを使ってたんだけど(それが理由で辞めたんだけど)、Next.jsのSPAフロントエンドと別のAPIバックエンドがあったから、ユーザーが見るURLとバックエンドのエンドポイントが一致しなかったんだ。AIがすべてにReactフックを使うから、状態はメモリ内にあって、URLベースのルーティングはそれに合わせて設計しない限り存在しないんだよね。だからリンクが自由じゃなくて、ユーザーがトップレベルのエントリーポイント以外にリンクを貼る方法がないんだ。リンク!特に内部ツールでは、すべてがリンク可能であることが協力や問題解決にとって重要なんだ。30年か40年前に、均一なリソースの場所や動詞の必要性がすごくよく考えられてたんだよ。

え、じゃあ別のページやタブに移動したとき、URLは更新されないの?

「最近、Markdownの代わりにHTMLを出力フォーマットとして好むようになってきたし、Claude Codeチームの他の人たちもそう使っているのをよく見る。これが理由だ。長いエージェントの出力を読むときは、VIMとMacOSのQuicklook(レンダリング用のMarkdown拡張付き)を使ったり、MarkEdit(プレビューウィンドウ付きのエディタ)に出力を貼り付けたりしている。最悪の場合、エージェントにMarkdownを解釈してレンダリングするシンプルなローカルウェブページを作ってもらうこともできる。Markdownはウェブシンタックスのショートハンドとして発明されたんだ。それが目的なんだよ!エージェントにネイティブのMarkdownをHTMLに変換してもらうのに、これらよりも多くのトークンと時間を使っていると思うよ。」

もし本当にバイブを重視するなら、長い出力を要約してもらうようにボットに頼んでみたら?ボットを使うのはすごく面白いし、自己言及的だよね。

実際の開発者には理解できるけど、非開発者(俺みたいな)でLLMを使ってドキュメントを編集する人には、あまりストレスにならないと思う。

どのQuick Look拡張を使ってるの?いいのを探してるんだ。

新しいアイデアやツールを探るとき、私の定番のプロンプトは「index.htmlに依存関係なしで、スパーススタイリングで、アプリを作成する」なんだ。AIが出る前から、小さなツールを作るときはこうしてたし、友達にそのツールをメールで送って「変更したいなら、LLMに投げてね!」って言えるのが素敵なんだよね。

この使い方についてはあまり考えたことがなかったから、ちょっとバカみたいに感じてる。役立つのが明らかに見えるのにね。今までLLMに集中してたのはアプリの方で、アプリの周りの補助的なものはあまり考えてなかった。補助的なものは完全に仕上げる必要もないし、すべてのケースに対応する必要もない。使える程度に機能してればいいんだ。終わったら捨てて、明日また新しいのを作ればいい。

同じだね。新しいクライアントのデザインを繰り返すときは、インラインCSS付きのシンプルなindex.htmlを作って、結果に満足したらそのファイルをプロジェクトテンプレートファイルの横に置いて、LLMにindex.htmlからデザインを取ってテンプレートファイルに組み込むように頼むんだ。

これが正解だね!ダッシュボードや小さなアプリ、APIとやり取りしたりデータを取得したりできるユーティリティを作るのに、スタイルやJSを含む1つのHTMLファイルでここまでできるなんてすごいよ。共有サーバーの自分の~フォルダにポンと置くだけで、みんながすぐにチェックできるし、使えるんだ!

AIにTailwindCSSとAlpineを使わせるのをおすすめするよ。これで軽量でダイナミックなウェブページが作れるから。

うちのマネージャーがこれをやって、真顔で「これを本番に入れて」って持ってくるんだけど、5分以上かかる理由を不思議がってる。こういうツールが人の頭をめちゃくちゃにしてるのが本当に嫌だ。

Hacker Newsで議論の続きを見る