Claude CodeやCodexのようなAIエージェントを使うと、MarkdownやCSV、議事録などをもとに、見やすいHTML資料を作ると喜ばれました。実は、ChatGPTとかでもできてましたが。。
HTMLにすると、ブラウザで開けるうえに、グラフ、カード型レイアウト、スライド表示、ボタン操作などを組み込めます。単なる文章よりも、社内共有やプレゼンで使いやすい資料になります。
主な使い道は次のとおりです。
- アンケート結果をHTMLレポートにする
- Markdownの長文資料を読みやすく整える
- PowerPoint風の横スライドHTMLを作る
- 会議用のディスカッションボードを作る
- 比較表や技術検討資料を見やすくする
ポイントは、AIに文章を書かせるだけでなく、見せ方まで作らせることです。
基本の作り方
やることはシンプルです。
- 元データを用意する
- Claude CodeやCodexに読み込ませる
- HTML化を依頼する
- ブラウザで確認する
- 必要に応じて修正する
たとえば、CSVのアンケート結果をレポート化するなら、次のように依頼します。
このフォルダ内の survey.csv を分析して、
社内共有向けのHTMLレポートを作成してください。
要件:
- index.html として出力
- 1ファイルで完結
- 満足度、改善要望、自由回答の傾向をまとめる
- グラフやカード型レイアウトを使う
- ブラウザでそのまま開ける
これで、AIエージェントがデータを読み取り、構成を考え、HTML/CSS/JavaScriptを生成してくれます。
スライド風HTMLにする
発表で使いたい場合は、レポート形式ではなくスライド形式にします。
この内容をプレゼン用のスライド風HTMLにしてください。
要件:
- 1920×1080の横長スライド
- 左右キーでスライド移動
- 1スライド1メッセージ
- 表紙、課題、分析結果、提案、まとめの構成
- PowerPoint風の見た目
PowerPointを作り込む前に、構成確認用として使うのも便利です。そのまま画面共有して発表することもできます。
操作できるHTMLも作れる
HTMLなら、読むだけでなく操作できる資料も作れます。
たとえば会議用に、議題カードを動かせるボードを作る場合はこう頼みます。
チームミーティング用のディスカッションボードを
1つのHTMLファイルで作ってください。
要件:
- 議題カードを表示
- 「今すぐ議論」「後で検討」「見送り」の3列
- カードをドラッグ&ドロップで移動
- 担当者を入力
- 最後にMarkdown形式で結果をコピーできる
こうすると、会議中に画面共有しながら使える簡易ツールになります。
修正は自然文で頼めばいい
最初から完璧に作る必要はありません。生成されたHTMLを見て、気になるところを追加で直してもらいます。
文字を大きくしてください社内資料らしく落ち着いたデザインにしてください情報量が多いので、スライドを分けてくださいスマホでも見やすくしてくださいHTMLやCSSを詳しく知らなくても、見た目の要望を日本語で伝えれば十分です。
注意点
HTMLはMarkdownより表現力がありますが、その分、生成量が多くなります。AIエージェントの使用量も増えやすいです。
また、社内情報を扱う場合は、外部公開しないことが重要です。共有するなら、ローカルで開く、または社内限定の場所に置くのが安全です。
AIエージェントを使えば、HTMLレポートやスライド風HTMLは簡単に作れます。
Markdownでまとめるだけでは読まれにくい資料も、HTMLにすると一気に見やすくなります。
まずは手元のCSVやMarkdownを使って、
これを見やすいHTMLレポートにしてくださいと頼んでみるのがおすすめです。使えば使うほど質は上がっていきます。
