概要
スライドといえばPowerPointが定番ですが、
AIが発達した今だからこそ、HTMLベースの構造化ドキュメントが便利です。
テキストで内容を管理し、CSSで見た目を整えられるため、
作成から公開までの工程でAIの力を存分に借りやすくなりました。
この記事では実際にreveal.jsを使って資料を作ったフローと気づきを紹介します。
🔗 実際に作成したスライド
📕 作成に使ったライブラリ
利点の紹介
ここからはHTMLベースでスライドを作成した時に感じたメリットの詳細です。
冒頭にも述べた通り、構造化テキストはプロンプトから生成・要約・校正がしやすく、再利用も簡単です。
個人的にAIとの親和性を感じた点は以下の通りです。
1. AIモデルに縛られない
HTMLベースなので、実質どのAIモデルとも繋げられるのが大きな利点です。
出力内容に不満を感じたら、さっとツールを変えるだけなので、一番大きな利点に感じました。
2. スライドの作成フローが簡素化
大まかにこのようなフローで作成できました。
特に各章立てや見出しには困ることが多かったのですが、AI任せにすることでとても進めやすくなりました。
今回のスライドの作成フロー
- プレゼン時間と発表したい内容を提示し、見出しと要約、章立てを生成。
- 目次をベースに、雛形HTMLをAIへ依頼して
slides/index.htmlを新規作成＆配置。 - デザインは「タイトルスライドの背景色と余白を整えて」など要望を伝え、
slides/style.cssの差分を生成。 - 仕上げは
?print-pdfビューを一緒に見ながら細部を調整し、そのままPDF化。
3. 目次や文章の構成がしやすい
「各スライドのh2タグをもとに、目次を作成してください」と指示すれば、目次を作成してくれます。
個人で作成していた時は構成変更の度に修正が発生していたので、とても楽できました。
また文量調整や表記揺れの統一も面倒を見てくれます。
校正用途のプロンプトを用意しておくと、誤字・脱字の指示出しのハードルも下がり、繰り返し作業が苦にならなかったです。
4. 学習コストを下げられる
HTMLスライドライブラリは成熟しているので、AIに「reveal.jsの基本設定を教えて」と尋ねれば、
npm ciやnpx http-server -p 5173 .といったコマンド込みで手順を返してくれます。
使い方が分からないと二の足を踏むことは多かったですが、AIが肩代わりしてくれるため、学習コストが低く感じました。
5. スタイルの統一が容易
CSSでスタイルを管理できるので、「.title__leadに16pxの余白とコーポレートカラーを適用して」と伝えるだけで、統一感のある差分を返してくれます。
CSSなので適用範囲も調整できるのもいいですね。普段のWeb開発と同じノリでテーマを整えられました。
また参考にしたいスライドテーマがあれば、テーマスライドのスクリーンショットを渡して、テーマを寄せることも容易でした。
6. スライドのレイアウトを揃えやすい
たとえば「id=page5と同じ2カラムレイアウトをpage10にも適用して」と頼むと、
必要なHTMLフラグメントやreveal.jsの設定をすぐ提案してくれます。図版入りスライドも同じグリッドで並べられました。
7. Gitで管理できる
HTMLベースなのでGit管理との相性も抜群です。
Pull Requestで「この差分を要約して」と投げると、レビューコメント案まで生成してくれます。
内容を戻したい場合、gitコマンド一発で戻せるので校正作業がとても楽でした。
まとめ
何かと手間に感じることが多かった資料作成ですが、AIと協業することでぐっとハードルを下げることが出来ました。
今回使ったreveal.jsならHTMLで内容を管理しつつCSSで見た目を整えられるので、配布や公開もスムーズでした。
これからもAIと協働しながら、より良いスライド作成フローを磨いていきます。
Discussion