LLMの出力をHTML化してブラウザで見る技

プロンプトの末尾に「HTMLで出力して」と加えるだけで、LLMの回答がブラウザで表示できるHTMLファイルになる。要は、チャットの回答を「見せられるアウトプット」に変換できるということ。Andrej Karpathy（元Tesla AI責任者、OpenAI共同創業者）がXで投稿して注目を集めた手法で、スライド形式での出力も可能だと言及されている。コードを書く必要はなく、既存のChatGPTやClaudeへの問いかけに一行添えるだけで始められる。

注目したいのは、この手法が「出力を人に渡せる形にする」という課題に直接答えている点だ。

LLMの回答はチャット画面の中で完結しがちで、そのまま他人に共有したり資料として使うには手間がかかる。スクリーンショットを撮る、コピペして整形する、Notionに貼り直す——こうした「後処理」の工程が地味に時間を奪う。

HTML出力はその工程をスキップする。ブラウザで開けるファイルとして受け取れるため、そのまま送付できるし、デザインをCSSで調整することも、印刷も可能になる。スライド形式を指示すればプレゼン資料として使える形にもなる。

ここ数ヶ月、AIによる成果物の「見た目の完成度」を上げることへの関心が高まっている。AIに指示するだけで営業資料が自動完成という流れとも重なるが、あちらが専用ツールの話であるのに対し、今回は追加ツール不要で今すぐできる点が異なる。

Karpathyが「これはかなりうまく機能する」と明言している点も見逃せない。業界で最も信頼されるLLM実務家の一人による実証的な言及は、単なる小ネタ以上の重みがある。スライド形式や音声形式（投稿では「audio is the next frontier」とも示唆している）まで視野に入れると、出力フォーマットの選択肢を広げること自体が、AIの使い倒し方を根本から変えるかもしれない。

Q. 生成されたHTMLを他人に送るには？

htmlファイルをそのままメールやSlackで添付するか、GitHubのGistやNotionの埋め込み機能を使う方法がある。受け取った相手がファイルをブラウザで開くだけで内容を確認できる。ただし、外部CSSや画像を参照している場合はリンク切れになることがあるため、スタイルをインラインで書くよう指示するか、確認してから送るのが安全。

Q. LLMによって出力品質に差はある？

Karpathyの投稿はLLM全般への言及で、特定モデルを指定していない。HTMLの生成はコーディング能力に依存するため、一般的にClaude・GPT-4o・Gemini 1.5 Pro以降のモデルで精度が高い傾向がある。無料プランでも試せるが、複雑なスライド構成を求める場合は有料プランのほうが安定する場面がある。まずは無料枠で簡単な出力を試して感触をつかむのが現実的。

Q. スライド形式にするには別途Reveal.jsなどが必要？

必須ではない。「HTMLのスライドショー形式で」と指示するだけで、CSSとJavaScriptを含んだ単一ファイルとして生成されることがある。よりリッチな見た目を求めるならReveal.jsを使うよう指定する手もあるが、その場合はCDN経由で読み込む形になるため、ネット接続が必要になる点は注意。