HTML 出力は見やすくて自由度が高い
Claude Code に成果物を出力させる際、プレーンテキストや Markdown ではなく HTML で出力させると、そのままブラウザ (Chrome など) で開くことができ、Markdown の本部プレビューと比べて人間にとって非常に見やすくなります。
HTML は見出しや箇条書きにとどまらず、各 HTML 要素や CSS, JavaScript, SVG などを組み合わせて多彩な表現ができます。Markdown と比べてはるかに自由度が高いです。
Claude Code チームも 2026/05 に、Markdown ではなく HTML を出力形式として推奨する記事を公開しています。
HTML での問題: 見た目やフォーマットがばらつく
一方で、HTML を出力するつど見た目やフォーマットにばらつきが生じて困るという問題があります。
- 出力のたびに配色やレイアウトが変わる
- スタイルがインラインで書かれて再利用しづらい
- 全体のトーンが統一されない
解決策: 好きな CSS フレームワークを指定する
そこで、自分の好きな CSS フレームワークを使うように Claude Code に指示すると便利です。
Tailwind CSS や Bootstrap など使い慣れたフレームワークを指定するだけで、一定の品質と統一感のある見た目が手に入ります。CDN 読み込みを指定すれば、出力された HTML ファイルを開くだけで表示できます。
僕は Tailwind CSS ベースのコンポーネントライブラリである daisyUI を使っています。
このセッションの内容を HTML で出力して。
CSS フレームワークとして daisyUI を使って。
コンポーネントを指定して見た目をコントロール
さらに、必要に応じて 任意のコンポーネントを指定すると、見た目を細かくコントロールできます。
手順の部分はタイムライン (https://daisyui.com/components/timeline/) コンポーネントで描画して。
テーマの指定もできる
多くのフレームワークはテーマを提供しています。例えば daisyUI なら light/dark/ cupcake/night などのテーマが提供されていおり (テーマ一覧)、任意のテーマ名を指定するだけで全体の配色を切り替えられます。
テーマは cupcake にして。
実例: Rails を 8.0 から 8.1 にアップグレードする手順を HTML 出力する
実際に次のような指示を出してみます。フレームワーク (daisyUI) と、手順の部分に使うコンポーネントを具体的に指定します。
https://railsguides.jp/8_1_release_notes.html や
https://github.com/rails/rails の各種 CHANGELOG.md を参考に、
Rails 8.0 のアプリケーションを Rails 8.1 に更新する手順を示してください。
結果は HTML ファイルとして出力してください。
HTML では CSS フレームワークとして daisyUI を使用してください。
手順の部分はタイムライン (https://daisyui.com/components/timeline/) のコンポーネントを使って描画してください。
これだけで Claude Code は参考リンクを読み込んで内容をまとめ、daisyUI を CDN 経由で読み込んだ HTML ファイルを出力します。アップグレード手順は指定どおりタイムラインコンポーネントで、新機能はカードで、注意書きはアラートで描画されています。ブラウザで開いて読める成果物です。
HTML 出力後にテーマを変更し、見た目を更新する
HTML 出力後にテーマ名を伝えるだけで全体の配色を差し替えられます。Claude Code はファイルを作り直すことなく、先ほど出力した HTML の data-theme 属性を更新します1。
テーマを dim に変更して。
-<html lang="ja" data-theme="light">
+<html lang="ja" data-theme="dim">
まとめ
- HTML 出力は Markdown より見やすく自由度が高い
- ただし素のままだと見た目がばらつく
- CSS フレームワークを指定すれば統一感が出る
- コンポーネント指定で見た目を細かくコントロールできる
- テーマ指定で配色もコントロール
ぜひご自身の好きな CSS フレームワークでお試しあれ 😉
バージョン情報
- Claude Code: 2.1.199
- Model: Opus 4.82