チャットGPT、Gemini（ジェミニ）、Claude（クロード）などのAIが、どんどん賢くなって来ました。AIと会話していて、こう思ったことありませんか。
この会話の結論部分を
資料にしたい！
今回はAIに「ひと目で分かりやすい資料にしてもらう」やり方のご紹介です。
ポイントは「.html化して」。
出てくるコードは難解ですが、画面に表示させるのは、とっても簡単！です。
今回はその手順を丁寧にご紹介します。
グラレコ風の出力、パワポに出力など、その他の方法も含め、この記事でご案内します。
AIプロンプト「結論を見やすく.html化して」
まずはAIとのトーク内容をhtml化したサンプルを3つご紹介します。用いたプロンプトは下記です
①AIに質問「ダイエットに必要なことが色々多くて困っています。整理してもらえますか」
②AIに再質問「優先順位をつけてもらえますか」
③AIに指示（プロンプト）「この結論を分かりやすく.html化して」
これだけです。下記が3つのAI（チャットGPT・Gemini・Claude）が作ったhtmlファイルです。
サンプル1.Geminiが作った資料の特徴
使用したGeminiは（2.5Flash 無料版）です。ダイエットの優先順位について考えて、まとめてもらいました。
印象としては、十分分かりやすく、A4の1枚の資料としてプリントして使えそうです。
A4、1枚のペラで表現、ということをGeminiは心がけているのかな、と感じました。
サンプル2.チャットGPTが作った資料の特徴
下記がChatGPT有料版「GPT5」が作成した資料です（たまたま有料プランに加入中でした）。同じテーマで作ってもらいました。
とても凝った作りです。PCのホームページとして見やすい作りです。ただし無料版にすると、これは個人の感想ですが、下記のように感じることが多いです。
GPT無料版を使うと
情報を省くことが多いような…
サンプル3.Claudeが作った資料の特徴
使ったClaudeは、Sonet4.5 無料版です。こちらも同様のテーマで「ダイエットの優先順位」について見やすくしてもらいました。
Claudeは「スマホで表示する」ということを意識してるのかな、というのが個人的な感想です。
どのAIで作った資料が優れてる？無料版ならGemini
個人的な感想です、Gemini（無料版）が資料として、大人が使うのに、見心地が良いかなぁと。これは個人の感想です。
どれも無料で使えますから、試してみて下さい。
htmlファイルで貰うと、見やすい資料になっていることが、お分かりいただけたと思います。
次に「HTMLファイルをAIから貰ったら、次にやること」について、htmlを表示させる手順を紹介します。
AIが作ったHTMLファイルを画面に表示する方法
ここまで来ると「HTMLファイルって何？」という疑問が湧きます。
資料を表示させるのに「HTMLとは何？」を理解していなくても全然大丈夫です。
HTML（エイチ・ティー・エム・エル）は、Webページを作成するための言語です。
「タグ」と呼ばれる記号で文章や画像などの要素を囲み、ページのデザインを指示します。
すべてのWebページはHTMLファイルで構成されています。
そのためAIはHTMLを膨大に学習していて、正確な構造や見た目を再現するのが得意です。
手順1.AIが生成したHTMLファイルをコピー
ChatGPTやGeminiなどが出力したHTMLコード全文をコピーします。
下記はサンプルとしてGeminiの画面スクショです。
コピーボタンを押すと、一式がコピーされます。
またはご自身でドラッグしてコピーしても同じことになります。
ChatGPTでも同じような画面が登場します。
そしてたまに「ファイルをダウンロードするボタン」が出現することもあります。
その場合ボタンを押すとファイルのダウンロードが始まり、ファイルをダブルクリックするだけでビジュアル化した資料の状態で表示されるはずです。
ダウンロードボタンが出ない場合
次の手順に進んで
手順2. メモ帳にペースト→拡張子「.html」で保存
手順1でコピーしたコードをメモ帳に貼り付けます（macのメモ帳でもwinのメモ帳でもOK）。そして保存。とりあえずデスクトップに保存してみましょう。
保存の際には下記画像の4つのポイントをご確認ください。
①ファイル名に「.html」という拡張子をつける
②ファイルの種類を「すべてのファイル」を選択します。
③文字コード（エンコード）が「UTF-8」になっているかを確認します。
④保存します。
手順3.保存したファイルを開くだけ！
デスクトップに保存した場合、アイコンが表示されているはず。保存したファイルを開くと、webデザインされた状態で文書が表示されているはずです。
これにて完成です。
htmlページを共有しよう！どの拡張子ファイルを送る？
でき上がった資料は共有することができます。
1.HTMLファイルをそのまま送る
2.PDFに変換して送る
それぞれの特徴をチャットGPTにまとめてもらいました
| 目的 | 形式 | 理由 |
|---|---|---|
| ブラウザで閲覧してもらう | HTML | 軽くて速い・リンクが動く |
| 印刷・配布用に渡す | レイアウト固定で安心 | |
| AIやWebで再利用する | HTML | 構造が読み取れる |
| 完成報告・社内共有 | 改ざんされにくい |
HTMLファイルで送ると、内容の変更が可能です。
PDFファイルで送ると、慣れない人にも取り扱いが簡単です。
シーンによって選び分けましょう。
別のプロンプト「グラレコにして」も紹介
「グラレコ」とは、Graphic Recording。イラストや図で可視化する手法です。
プロンプトをご紹介します。
この会話の結論部分をグラレコ風にまとめてください。
横長の構図で、全体を俯瞰できるように。
ポイントは「横長」「引き気味」「色のトーン」などのワードを加えることです。
こちらがChatGPTが生成した「結論部分のグラレコ」です。
日本語の生成はちょっと苦手そう
とは言え、文字だけで情報を伝えるよりも、ずっと伝わり良いですね。
「パワポにして」の指示はイマイチ
ChatGPTでは「パワポファイルを作って」も対応しています。
しかし出来はあんまり良くない印象です。
これも気軽に試してみてください。
まとめ：AIにトーク内容をまとめてもらおう！
AIは“答えてくれる存在”から、“まとめてくれる存在”になった印象です。
同じ会話でも、「.htmlで見やすくして」「グラレコ風で」と伝えるだけで、あなたの思考をそのまま資料化・図解化してくれます。
テキストで終わらせず、「形にする」ことがこれからのAI活用のコツ。
- 会話の結論をHTMLで整理して残す
- 雰囲気や流れをグラレコで視覚化して共有する
- 必要に応じてPDF化して配布する
この3ステップを押さえるだけで、AIとのやり取りが「一瞬で使える資料」になります。
あなたの頭の中にあるアイデアや思考を、AIと一緒に“見える化”していきましょう。
コメント