はじめに
最近，生成AIの進歩が目覚ましい。Claude-Opus-4やChatGPT-o3-proなど，新しいモデルが出るたび世間を騒がせてる。
先の記事でもいくつか触れたが，単純な指示を出すだけで驚くほど程完成度の高いアウトプットが返ってくるようになった。
この回答に，正直筆者は不満だった。
というのも，CopilotやChatGPTに資料作成を依頼しても，基本的には構成を考えてくれるだけで資料そのものを作ってくれるわけではない。また，生成してもらったグラフや画像も崩壊していることが多い。
そのため，資料作成に関しては生成AIはあくまで補助的な役割で，業務を大幅に改善しうるとは到底思えていなかった。
しかし，対話を進めていくにつれ「資料をHTMLコードで出力させればよいのでは？」という考えに至った。生成AIはコード出力が得意で構成を考える能力があるため，長所を掛け算できるのではないかと思ったのだ。
HTMLコードとは
HTMLコードとは、ウェブページの構造や内容を記述するためのマークアップ言語で，タグを使ってテキスト、画像、リンクなどを配置し、ブラウザが解釈して表示する。大体のホームページ（このブログも）HTMLを使用して作動している。
なので，HTMLコードを作成することで画像や動きを付けたページを作成することができるのだ。
資料としてのHTMLコード作成
と言っても，筆者にHTMLの知識は全くない。今回も生成AI頼みだ。
今回はClaude-Opus-4先生に頼んでみた。2025年5月に発表された，Claudeで最も高機能なモデルだ。
「あなたはプログラミングの得意な化学者です。
Webからの情報をもとに，フリーデルクラフツ反応について理解してください。
初学者にも分かりやすいように，フリーデルクラフツ反応についてHTMLコードで図表やアニメーションを用いて教えてください。」
結果，以下のHTMLコードが出力された。大体700行くらいのコードだ。
ブログ記事上ではうまく動作させられなかったので，ファイルをそのまま貼っておく。
出力されたHTMLコードについて
驚いたのが，その視認性の良さだ。
教育系のウェブサイトを見ているのかと思うくらい，綺麗なレイアウトで作られていた。
また，文章もしっかり作りこまれており，分かりやすく理解できる内容であった。
アニメーションも，若干レイアウトが崩壊しているものの，歩み寄れば理解できる範囲のものだった。巻き矢印や中間体の表記も，細かい点を修正すれば問題なさそうだ。
また，インタラクティブ学習コーナーなるものが作成されており，ボタンを押してクイズに回答できるというものだった。教科書の例題くらいの難易度の問題が自動生成されていた。
全体的に面白いと思ったのが，パワーポイントと違い，アニメーションやボタンなどの機能を追加しやすい点だ。特にボタンを押して機能が発現する，というのはパワポでは実装しづらい点だろう。そのため，これまでのパワーポイントでの仕様にとらわれない，柔軟な使い方が出来そうだ。
まとめ
以上の結果から，
・HTMLコードで出力させる手法は有効
・HTMLではアニメーションやボタン配置などの機能を追加できる
ことが分かった。
これらの機能から，研究発表などはもちろん，教育的な現場で特に力を発揮するだろうと考えられる。
後輩や部下に，文章では分かりにくい指示や概念を，分かりやすく教えるのに有用だと考えられる。
ちょっとしたことなら生成AIに放り込んでおけばある程度見られる資料ができるので，パワポ作成に割く時間を削減できると考えられる。
今回の例からわかるように，生成AIはインプットデータ（今回はWeb）があれば，自動で中身を「理解」し構成を考え，機能とともにHTMLコードを作成してくれる。
今後，生成AIを実際の業務でさらに応用できないか？という所を試していきたい。
コメント