HTML2WEB
メニュー
日本語

workflows公開 9 分で読めますHTML2WEBチーム

Claude CodeのHTMLをターミナルに埋もれさせない：共有する3ステップ

Claude Codeのコード監査やプロジェクト計画を読みやすい単一HTMLレポートにし、一時的なブラウザーリンクで共有する実践手順です。

Claude Codeのターミナル出力が読みやすいHTMLダッシュボードへ変わる場面

Claude Codeの長い出力を非開発者に見せるとき、ターミナルのスクリーン ショットを送る必要はありません。完全な単一HTMLファイルを作らせ、 ローカルで確認してからHTML2WEBへアップロードすれば、相手はリンク一つで 同じレポートを見られます。

Claude Codeの出力にHTMLが向く理由

AnthropicのUsing Claude Code: The unreasonable effectiveness of HTML は、長いMarkdownよりHTMLの方が色、図、可視化、読書体験を豊かにできる 実例を紹介しています。

すべての出力をHTMLにするという意味ではありません。次のように「人が 読んで判断すること」が目的の場合に特に役立ちます。

  • コード監査とセキュリティレビュー
  • 市場・競合分析
  • プロジェクト計画とマイルストーン
  • 性能比較とベンチマークレポート
  • PM、デザイナー、顧客向けのUIモックアップ

PR説明や継続編集する技術文書ならMarkdownが適します。読みやすさと 視覚比較が重要なときにHTMLを選びます。

すぐ共有する3ステップ

1. 誰がどの判断をするか先に決める

「きれいなHTMLを作って」より、読者と必要な判断を伝える方が良い結果に なります。コード監査なら最初の画面に次を置きます。

  1. 監査対象と対象外
  2. 指摘の重大度分布
  3. 今すぐ行う三つの作業
  4. 各主張の ファイルパス:行番号
  5. 未確認の仮定と制限

見た目の完成度は事実確認を置き換えません。整ったレポートほど根拠のない 断定も信頼できるように見えるため、出典を明示します。

2. 完全な単一HTMLを依頼する

次のプロンプトをClaude Codeへコピーし、角括弧の部分を変更します。

[対象: このリポジトリのsrcディレクトリ]のコード監査レポートを
audit-report.htmlという単一HTMLファイルで作ってください。

[内容]
- 最上部に要約: 指摘数、重大度分布、今すぐ行うこと3件。
- 監査範囲、方法、確認していない領域を明記。
- 各指摘にタイトル、根拠、影響、推奨対応を記載。
- コード根拠はファイルパス:行番号、外部根拠は実リンクで表示。
- 未確認は「未確認」、根拠のない計画は「仮定」と表示。
- 専門用語は初出時に非開発者にも分かる一文で説明。

[形式]
- <!doctype html>から</html>までの完全な文書一つ。
- CSSは<style>、必要な小さなJavaScriptは<script>へインライン化。
- 外部CSS、JavaScript、Webフォント、ビルドツールを使わない。
- header、nav、main、section、article、footerを意味に合わせて使用。
- 表にはcaptionとth scopeを含める。
- 360pxのモバイル幅でも読めるようにする。
- html lang="ja"、意味のあるtitle、キーボードフォーカス、画像altを含める。
- システムフォントを使い、ファイル全体を1MB以下にする。

[セキュリティ]
- APIキー、トークン、パスワード、接続文字列、個人情報、顧客データ、
  内部ホスト名、社内URLを含めない。
- 必須の例は<redacted>で隠し、加工済みと表示。
- 既存ソースは変更せず、audit-report.htmlだけを新規作成。
- 完成後、秘密情報候補と外部素材パスが残っていないか再検査。

プロジェクト計画なら [内容] を次に置き換えます。

- 最上部に目標、期間、最大のリスク一つを要約。
- マイルストーン表: 名前、期間、成果物、担当、前提条件。
- 依存関係は外部グラフライブラリなしでCSSまたはインラインSVGにする。
- 各リスクに発生可能性、影響、緩和策、早期警告シグナルを表示。
- 未解決の質問ごとに、誰がいつまでに決めるかを明記。

同じ形式を繰り返すなら、リポジトリの CLAUDE.md に成果物ルールを 置けます。設定と権限はClaude Code公式文書 で確認します。

3. ローカル確認後に一時リンクで公開する

macOSでは生成ファイルを次のように開きます。

open audit-report.html

fetch() やモジュールスクリプトを使った場合は file:// 環境で挙動が 異なることがあります。その場合だけローカルサーバーで確認し、終了後は 必ず停止します。

python3 -m http.server 8000
# http://localhost:8000/audit-report.html を確認後 Ctrl+C

次のコマンドは候補の高速検索であり、人のレビューを置き換えません。

ls -lh audit-report.html
grep -nEi 'api[_-]?key|secret|token|password|bearer|-----BEGIN' audit-report.html
grep -nEo '(src|href)="[^"]+"' audit-report.html

ブラウザーでは次も確認します。

  • 開発者ツールのコンソールにエラーがないか。
  • 幅360pxで本文と表が読めるか。
  • 外部リンクが実際の根拠へつながるか。
  • ローカルパスと秘密情報が残っていないか。
  • シークレットウィンドウでも同じ画面が見えるか。

準備できたらHTML2WEBのHTML-to-URLツールへアップロード するかコードを貼り付けます。ログイン不要の無料経路は1MBまで対応し、 30分・1時間・24時間から有効期限を選べます。標準は1時間、共有結果は 標準で noindex です。

共有後に壊れる原因

ローカル相対パス

./assets/chart.png は作成者のコンピューターにしかありません。 HTML2WEBは単一ファイルを公開するため、隣のフォルダーの画像とCSSは 付きません。公開HTTPS URL、小さなインラインSVG、HTML内のスタイルを 使います。

CDNとWebフォント

Chart.js、Tailwind CDN、Google Fontsが社内ネットワークで遮断されると レポートの見た目が変わります。最初の確認版は外部依存なしで自立させる 方が堅牢です。

Base64画像による容量超過

スクリーンショットを複数data URLで入れると1MBをすぐ超えます。比較に 必須の画像だけ残し、単純なグラフは表、CSS、インラインSVGへ変えます。

ローカルデータを読むスクリプト

別のJSONファイルを fetch() するコードは公開後にファイルを見つけられ ません。レビュー用データは機密情報を削除してHTML内へ入れます。

Markdownの方がよい場合

  • PR、Issue、Wiki本文へ直接移す
  • 行単位のdiffとバージョン管理が必要
  • 相手が内容をコピーして継続編集する
  • 内容が短く、文章とリストだけである

簡単な基準は、読んで判断する成果物はHTML、編集して追跡する原本は Markdownです。詳しくはAI出力のMarkdownとHTMLの選び方 で比較します。

一時リンクと本番デプロイの境界

コード監査の草案、会議資料、モックアップのように今日意見を受け取る 成果物には一時リンクが向きます。固定URL、検索表示、利用者入力、継続 更新が必要なら本番ホスティングへ移します。

パスワードを設定してもAPIキーと個人情報を公開してはいけません。共有 リンクを受け取った人は内容を保存・転送できます。秘密情報の削除が最初の 防御線です。

よくある質問

Claude Codeが複数ファイルを作った

「CSSとJavaScriptをインライン化した完全な単一HTML一つにまとめて」と 再依頼します。最初のプロンプトに条件を入れる方が速くなります。

複雑なグラフはどう入れるか

単純な棒、ドーナツ、タイムラインはCSSやインラインSVGで十分です。外部 データを継続取得するダッシュボードなら、一時共有より本番デプロイが 適しています。

リンク失効後に元ファイルも消えるか

共有リンクだけが開けなくなります。ローカルの audit-report.html は 別に保管します。

ClaudeのArtifact共有と何が違うか

会話内のArtifactをそのまま共有するならClaudeの内蔵共有が便利です。 独立した .html を複数ツールで作り、有効期限とパスワードを選んで 一時レビューするならHTML2WEBの流れが適します。

このページの目次