生成AIの活用が進むにつれ、プロンプトの改善前・改善後を並べて見せる資料を作る機会が増えました。
そこで毎回ぶつかるのがパワポの限界です。
プロンプトとAIの出力はとにかく文字量が多く、改善後のプロンプトは数十行に及びます。スライドに収めようとすると、文字を極小にするか複数枚に分割するかの二択になり、どちらを選んでも「見比べる」という本来の目的が果たせません。
この記事では、その解決策として実践している「比較資料をHTMLで作り、Googleサイトに埋め込んで見せる」方法を、実際の生成結果とあわせて紹介します。
パワポと長文比較資料の相性が悪い理由
1. 固定サイズに収まらない
スライドは16:9の固定キャンバスでプロンプトや出力は長さが不定です。「改善前は1行、改善後は40行」という非対称な内容を綺麗に収めるには、縮小・分割・省略のいずれかしかありません。並べて綺麗に表示することで「実際の出力がここまで変わる」という見せ方がより良くなります。
2. 分割すると見づらい
BeforeとAfterは同一画面に並んでいた方が比較が圧倒的にしやすいです。改善前スライドが3枚目、改善後スライドが6枚目というように並んでいると、聞き手は思い出しながら話を聞かないといけなくなって比較がしにくくなります。
3. AIに作らせると文字組が不安定
パワポは全要素を座標とサイズで絶対指定する仕組みです。AIは生成時点でテキストの折り返しを正確に予測できないため、はみ出しや重なり、違和感のある改行が発生しやすいです。
プロンプトの指定等である程度制御できますが、HTMLの方が文字配置は安定している印象があります。
解決策：HTMLで作ってGoogleサイトに埋め込む
HTMLなら「スクロール」が使える
HTMLはコンテンツの長さに合わせて伸縮し、収まらない部分はスクロールで見せられます。
左右2カラムで改善前・改善後を並べ、長い部分は枠内スクロールにすれば、全文を省略せずに同一画面で見比べられます。
そしてGoogleドライブ経由で簡単にHTMLを共有できるGoogleサイトという機能を使うと
プレゼンや画面共有をしての提案などでもスムーズにパワポに入れ込んでサイトに遷移できます。
Googleサイトへの埋め込み手順（Googleドライブから開けます）
- HTMLファイルを用意する
- Googleサイトの編集画面で「挿入」→「埋め込む」を選択
- 「埋め込みコード」タブにHTMLを貼り付けて挿入
Googleサイト編集画面の「挿入」パネルから「埋め込む」を選択
これだけで、スクロール付きの資料がGoogleサイト上で動きます。サーバーは不要です。
検証ではページ全体ではなく枠内だけが正しくスクロールすることを確認できました。
埋め込み後の表示。右カラムには「スクロール可」の枠があり、長いプロンプトも全文が枠内スクロールで収まっている
パワポに埋め込みたい際は保存しているURLをパワポに貼り付けてしまえばプレゼン中にすぐ開くことができます。
スライドよりHTMLが安定する理由
HTML/CSSは「流し込み」のレイアウトで、文字量の変動を吸収する仕組みが言語仕様に備わっています。テキストが長ければボックスが伸び、溢れればスクロールさせればよく、AIが折り返し位置を予測する必要がありません。加えてWeb上に学習素材が豊富なため、生成AIはHTMLの記述に習熟しており、デザインの一貫性も崩れにくいのです。
実際に比べてみる
同じ題材（Gemini Enterpriseのプロンプト改善前後と、それぞれの出力全文）を使い
「スライドで」「HTMLで」と指示だけ変えてAIに生成させました。
スライド生成では、出力結果の比較だけで3枚のスライドに分割されました。
別のスライドでは、下記のように文章が枠の下端で見切れる崩れも発生することがありました。
プロンプトと解説文が枠からあふれ、途中で見切れている
文章量が多すぎる場合、スライド生成のプロンプトがうまく指示できないと崩れてしまうこともあるようです。
何度か試してみましたが今回の場合パワポだとうまく1枚でまとめることができず
同じ内容をHTMLで生成すると、ページ分割なしで1画面に収まりました。
HTML生成では同じ情報量が1画面に収まり、崩れも起きていない
使い分けの目安
パワポがダメというわけではありません。ストーリーに沿って1枚ずつ見せるプレゼンや、印刷・PDF配布が前提の資料はパワポ。プロンプト比較のような長文の見比べや、コード・ログ・AI出力など原文をそのまま見せたい資料はHTML＋Googleサイト。本体はパワポで作り、比較デモだけGoogleサイトのURLに飛ばすハイブリッド構成が現実的です。
まとめ
- 長文・不定長のコンテンツは、固定キャンバスのスライドと根本的に相性が悪い
- HTMLならスクロールで、全文を省略せず同一画面で見比べられる
- 作成したHTMLはGoogleサイトの埋め込み機能でそのまま共有・投影できる
- AIに資料を作らせる場合も、スライドよりHTMLの方が崩れにくい
「AIの出力をそのまま見せたいのに、スライドに収まらない」と感じたことのある方は、ぜひ一度試してみてください。
簡単30秒