はじめに
reveal.js は、HTMLベースのプレゼンテーションフレームワークです。HTMLとCSSで構造化されたスライドを作成できるため、バージョン管理がしやすく、コードでの表現力も高いという特徴があります。
reveal.jsに出会ってから、HTMLを使ったスライド作成がすっかり気に入ってしまいました。
最近ちゃんと使い始めたClaude Codeと組み合わせて、スライドを自動生成できないか試してみることにしました。
やりたいこと
今回の目標は、以下の要件を満たすスライド自動生成環境を作ることです。
- シンプルな指示でスライド生成: 「○○に関するスライド作って」という一言で、構造化されたスライドが完成する
- デザインの一貫性を保つ: レイアウト、タイポグラフィ、テーマカラーなどは事前に定義したテンプレートを参照し、統一感のある見た目にする
- Tailwind CSSで保守性を高める: 素のCSSでも可能ですが、人間が後から調整しやすいようにTailwind CSSを採用
-
reveal.js固有の機能を活用: フラグメント表示、スピーカーノート、
r-stretchなどreveal.js特有のクラスや機能を使いこなす
環境を作成
まずは、Claude Codeがスライドを生成するためのベースとなる環境を整えます。
リポジトリ構成
今回作業するリポジトリは以下のような構成にしました
slide-template/
├── src/ # スライドコンテンツ
│ ├── index.html # メインスライド
│ └── assets/ # 画像など
├── examples/
│ └── index.html # デザインパターン集
├── lib/
│ └── tailwind/ # Tailwind設定
│ └── config.js # カラーテーマ、カスタムクラス定義
├── customizations/ # カスタマイズスクリプト
├── reveal.js/ # reveal.js (submodule)
├── dist/ # ビルド出力
├── build.js # ビルドスクリプト
└── package.json
examples/index.html - パターンライブラリ
Claude Codeが参照するための「お手本」として、examples/index.htmlにさまざまなスライドレイアウトパターンを用意しました。
- タイトルスライド（中央揃え）
- 2カラムレイアウト（テキスト+画像、コード+説明など）
- リスト形式の箇条書き
- 引用やコードブロックの配置
- reveal.js固有のクラス（
r-stretch、フラグメント、スピーカーノート）の使用例
.claude/CLAUDE.md - ルール定義
Claude Codeは、プロジェクトルート配下の.claude/CLAUDE.mdを自動的に読み込み、プロジェクト固有のルールとして認識します。
今回は、テンプレート作成を進めながら気づいた「最低限守ってほしいルール」を以下のようにまとめました
## プロジェクト概要
汎用HTMLスライド、reveal.js、tailwind css(CDN)
## 構成
```
slide-template/
├── src/ # スライドコンテンツ
│ ├── index.html # メインスライド
│ └── assets/ # 画像など
├── examples/
│ └── index.html # デザインパターン
├── lib/
│ └── tailwind/ # Tailwind
├── customizations/ # カスタマイズスクリプト
├── reveal.js/ # reveal.js (submodule)
├── dist/
├── build.js
└── package.json
```
## ルール
- 日本語で記述
- HTML構造: `.slides>section>section` のように section を入れ子にする
- 全 `<section>` 直下に r-stretch ラッパー: 上ぞろえ `r-stretch grid` / 中央ぞろえ `r-stretch grid place-items-center`
- `<section>` に `padding` や `margin` をつけない
- r-stretch と同じ要素に `gap` は使わない
- カスタムクラスは `c-` プレフィックス、定義は `lib/tailwind/config.js` に
- カラーコードは原則使わない、tailwind/config で定義された色を使う
- `ul`, `ol`, `li` 禁止 → `div` 使用
- 絵文字はユーザー要求時のみ
これらのルールは、Claude Codeがスライドを生成する際に常に参照され、コーディング規約として機能します。
検証1：基本的なスライド生成（素の状態）
まずは、skillsやプラグインを一切入れない、いわば「素の状態」のClaude Codeにスライドを作成してもらいます。
実行したプロンプト
src/slide-01 に スライドを作成してください
テーマは「世界のお茶事情」です
構成やスライドのレイアウトは、examples/index.html を参考にしてください
Claude Codeは、examples/index.htmlをしっかり参照し、テンプレートにあるレイアウトパターンを活用してスライドを生成してくれました。スタイルもすべてTailwind CSSのユーティリティクラスで記述されており、コードの見通しも良好です。
一見良さそうに見えますが、いくつか気になる点がありました。
統計データや事実関係が正確かどうか怪しい部分があります。
一部のスライドでは要素がはみ出したり余白が不自然だったりする箇所も見られました。
検証2：Web検索機能の追加
Web検索を行ってからスライドを生成する仕組みを作ります。
Skillの作成
Claude Codeには「skill」という機能があり、.claude/skills/<skill-name>/SKILL.mdにプロンプトを定義することで、独自のコマンドを作成できます。
今回は、.claude/skills/slide-research/SKILL.mdを作成し、以下のような指示を記述しました：
スライドのテーマについて、WebSearchツールを使って調査を行います。
調査結果は構造化してまとめ、その情報を元にスライドを生成してください。
参照元のURLは、各スライドのスピーカーノート（<aside class="notes">）に記載します。
これにより、/slide-researchコマンドでWeb検索を伴うスライド生成が可能になります。
実行したプロンプト
/slide-research テーマは「世界のお茶事情」です。
調査結果を土台にして src/slide-03 に スライドを作成してください
構成やスライドのレイアウトは、examples/index.html を参考にしてください
「世界のお茶事情」「お茶 消費量 国別」「緑茶 紅茶 市場規模」などのキーワードで複数回Web検索を実行し、それを元にスライドを作成してくれたようです。
各スライドのスピーカーノートには参照URLも記載されるようになりました。
examples/index.html に参照付きslideを用意していなかったため、スライド内には参照を入れてくれませんでしたが、テンプレートを追加すれば、さらに一貫したフォーマットで出典を記載できるようになりそうです。
検証3：スクリーンショットによる視覚的チェック
「スタイル崩れ」の問題に対処するため、視覚的にチェックする機能を追加します。
agent-browserの導入
ブラウザ操作にはagent-browserを使用します。
agent-browserは、ブラウザを操作するCLIツールで、以下のような機能があります
- ページのスクリーンショット取得
- 要素のクリックやフォーム入力
- ページ遷移や待機処理
- インタラクティブ要素の識別（
@e1、@e2のような参照番号付与）
Skillの作成
.claude/skills/screenshot-slide/SKILL.mdを作成し、以下のワークフローを定義しました：
実行結果
/screenshot-slideコマンドを実行すると、以下のような流れで処理が行われます：
● スクリーンショットを取得しました。各スライドをチェックします。
● Read 4 files (ctrl+o to expand)
● スライド2-5のチェック結果：
- スライド2（目次）: ✓ 問題なし
- スライド3（セクションタイトル）: ✓ 問題なし
- スライド4（グローバル市場規模）: ✓ 問題なし
- スライド5（お茶消費量トップ5）: ✓ 問題なし
・・・
取得したスクリーンショットを視覚的に分析し、CLAUDE.mdで定義したレイアウトポリシー（はみ出し・重なり・余白のルール）に基づいてチェックを行います。
問題が見つかった場合は、HTMLを修正して再度スクリーンショットを取得し、問題が解消されるまで繰り返します。
ある程度直してくれた部分はありますが、要素のはみだしを見逃していた部分もあったので、さらに改善が必要そうです。
いろいろなスライドを作ってみる
ここまでで作ったSKILLを使ってスライドを作ってみます。
/slide-research 北日本コンピューターサービスについて調べて、src/slide-kitacom にスライド作成して
/screenshot-slide すべてのスライドをチェックして
/slide-research claude code の skills の使い方について調査して
src/claude-code にスライド作成して
/screenshot-slide すべてのスライドをチェックして
おわりに
雑に作ったテンプレートだったのでスタイルが洗練されてない感は目立ちましたが、
カラーパレットやタイポグラフィの設定を常に守ってくれていたのがだいぶうれしいです。
調査→全体構成の検討→各スライドに用いるテンプレートの決定→スライドの作成・・・みたいに作業を細かく分割したら質はもっと上がりそうな気がします。
スライドにあった挿絵やグラフをその都度生成したり、drawioとかmermaidでフロー図書かせて表示したりまでできると、かなり便利そうです。
claude を API で使ってたのでちょっとびっくりする請求がきてました。codex でも試してみたいと思います。
参考
https://qiita.com/hirokidaichi/items/243bd176b84900f4cc0d
https://zenn.dev/loglass/articles/a8b4b069c09002
https://qiita.com/iida_ryota/items/50d3d047b4714dcc5be6
https://note.com/conaxam/n/n922ef87955de