AIに資料を頼むなら「HTMLで」と言う──企画書・比較表・レポートの頼み方を変える一言
ChatGPTやClaudeに資料作成を頼むとき、「単一HTMLファイルで」と一言足すだけで出力の見た目と構造が変わる。編集部が日常運用している頼み方の型、実例プロンプト、そして正直な限界をまとめた。
結論から書く。ChatGPTやClaudeに企画書・比較資料・レポートを頼むとき、出力形式を指定しないか「Wordで」「テキストで」と頼むより、「単一HTMLファイルで作って」と一言足す方が、見た目と構造の揃った資料が返ってくる——これが編集部の運用経験だ。本記事はその理由と、そのまま使える頼み方の型を紹介する。
3行まとめ
- AIに資料を頼むとき「単一HTMLファイルで」と指定すると、レイアウト・配色・表・カードUIまで入った1ファイルの資料が返る
- ブラウザで開くだけで見られ、共有はファイル1個、ブラウザの印刷機能でPDF化もできる
- 限界もある——細かい修正はAIへの再依頼が必要で、PowerPoint納品が標準の職場ではそのまま使えない
なぜ「HTMLで」なのか
理由は4つある。いずれも編集部の運用経験に基づく整理で、外部の統計調査ではない。
①AIはHTML/CSSの表現に強い。 LLMの学習データにはWebページが大量に含まれており、HTMLとCSSはAIにとって書き慣れた言語だ。Word形式やスライド形式で頼むより、HTMLで頼んだときの方がレイアウトの引き出しが多い。
②1ファイルで見た目まで完結する。 見出しの階層、比較表、色分けされたカードUI、強調ボックスまで、CSSを含めた単一ファイルに全部入る。プレーンテキストの箇条書きでは表現できない「資料としての見た目」がその場で付いてくる。
③開くのも共有もブラウザだけ。 専用ソフト不要。ファイル1個を渡せば、相手はダブルクリックで開ける。
④PDF化もできる。 ブラウザの印刷機能(Cmd+P / Ctrl+P)から「PDFとして保存」を選べば、そのまま配布用PDFになる。
頼み方の型
編集部で使っている指定の型を表にまとめる。
| 指定項目 | 入れる文言 | 理由 |
|---|---|---|
| 形式 | 「単一HTMLファイルで」 | CSSやJSを別ファイルに分けさせない。1個で完結させる |
| 依存 | 「外部ライブラリ・CDNなしで」 | ネット接続なしでも開ける。表示崩れの原因を減らす |
| 表示 | 「スマホでも読めるように」 | 共有相手がスマホで開いても崩れない |
| 用途 | 「印刷してPDFにする前提で」(必要な場合) | 印刷時のレイアウトを考慮した作りになる |
ビフォー/アフターの実例
ビフォー(形式を指定しない頼み方)
ChatGPTとClaudeとGeminiの違いを比較資料にまとめて
この頼み方だと、返ってくるのはチャット欄の箇条書きテキストか簡素なMarkdown表だ。そのまま人に見せられる体裁にはならず、結局自分でWordやスライドに貼り直すことになる。
アフター(HTML指定の頼み方)
ChatGPTとClaudeとGeminiの違いの比較資料を、単一HTMLファイルで作って。外部ライブラリなし・スマホでも読めるように。比較表と、それぞれの向き不向きが一目で分かるカードを入れて
これで、配色・比較表・カードUIまで入った1ファイルが返る。ブラウザで開けばそのまま資料として通用する見た目になっている。
もう1つ、報告書パターン。
今月のSNS運用の振り返りレポートを単一HTMLファイルで。見出し構成は「サマリー→やったこと→数字→来月の方針」。数字は私が後で埋めるのでプレースホルダーにして。印刷してPDFにする前提で
数字を「後で自分が埋める」と明示するのがポイントだ。AIに数字を作らせず、器だけ作らせる。
応用が利く場面
- 会議資料: 議題・論点・決定事項のテンプレートを作らせ、会議ごとに中身を差し替える
- 学習ノート: 勉強した内容を「単元ごとのカード+用語集の表」の形で整理させる
- 調査レポート: 調べた内容を渡して「出典リンク付きのレポートHTML」に整形させる
- 提案書: 構成(課題→提案→費用→スケジュール)を指定して器を作らせ、固有の数字は自分で入れる
正直に書く——この方法の限界
①細かい修正が自分でやりにくい。 Wordなら誤字1文字を自分で直せるが、HTMLは慣れていないと開いて直すのに抵抗がある。修正のたびにAIへ再依頼することになり、「ここの色だけ変えて」の往復が発生する。
②社内標準がPowerPointの職場ではそのまま使えない。 「pptxで提出」がルールの環境では、HTML資料は最終納品物にならない。下書き・構成検討用と割り切るか、PDF化で通るか、職場のルール次第だ。
③見た目の細部は毎回揺れる。 同じプロンプトでも、生成のたびに配色や余白の取り方は変わる。「前回とまったく同じデザインで」は再現しにくい。毎回そこそこ整った資料が出る、というのが正確な期待値だ。
編集部の運用事実
この方法は机上の提案ではない。編集部では、このサイトに載せる図解の構成指示や、動画企画の比較資料を、日常的に「単一HTMLファイルで」方式で作っている。この記事で挙げた頼み方の型は、その運用の中で毎回書いている文言をそのまま抜き出したものだ。
出典・但し書き
- 出典: AI時短ラボ編集部の運用検証(https://www.ai-jitan-hub.com/about)
- 本記事の「品質が変わる」という評価は編集部の運用経験に基づくもので、外部の統計・調査データによる裏付けではない
- AIの出力品質はモデル・バージョン・プロンプトによって変わる。本記事の型を使っても同じ結果を保証するものではない
次に読む・試す
まずは手元のChatGPTかClaudeで、上のアフター例をコピペして試してみてほしい。「こういう頼み方も効いた」「ここで崩れた」という報告があれば、この記事の頼み方の型に反映していく。
📎 出典・一次ソース
このニュースの解説動画も作っています
解説動画はYouTube、速報はX(旧Twitter)で毎日更新中。
コメント
まだコメントはありません。最初のコメントを書いてみませんか?
AIについて聞きたいことはありますか?
質問箱で無料で受け付けています。回答は公開され、他の方の参考にもなります。
質問箱を見る →