Oikonです。
先日、「Claude Code初学者勉強会2 (Youtubeリンク)」でLT（ライトニングトーク）登壇の機会をいただきました。
登壇のためのスライドを作る必要があったのですが、せっかくならClaude Codeでスライドを作ってみようと思いました。
LT登壇後にClaude Codeでのスライド作成のポストに反響があったので、記事にしようと思います。
この記事では実際に試した方法について解説します。
スライド作成方針
最近のLT用のスライド作りは以下のような手法があります（個人調べ）
- 生成AI(ChatGPT, Gemini, etc.)
- Power Point
- Slidev
- Marp
- HTML
この中ではSlidevが人気があるように見えましたが、個人的に興味を持ったのはHTMLによるスライド生成です。しば田さんの以下のポストで興味を持ちました↓
本文にも引用させていただきます：
個人的AIスライド生成の最適解（結局HTML）：
- MD形式で骨子を作る（Obsidian）
↓- MDを元にスライド生成YAMLを生成（Claude Desktop）
↓- YAMLプロンプトを元に、Opus 4にArtifactsを生成してもらう、気にいるまでは数回ガチャ（Claude Desktop）
↓- Artifacts（HTML）をコピーしてファイルに貼る
↓- テキストやデザインの微調整（Cursor/Windsurf）
↓- HTMLをPDFに変換（puppeteer）
↓
完成、印刷！これかなり体験良かったのでおすすめ。Slidevとかよりも遥かに良かった。MarkdownからYAMLプロンプトを作るか否かはどっちでもいいんだけどYAMLにすると考慮漏れが炙り出せます。Cursor等IDE型で微調整する際はTailwindに書き換えてしまってもよいかも。常にスライドに適用しているレイアウトとかはこの段階で適用する。
HTMLをPDFに変換するスクリプトはSonnet4が1発で動くもの作ってくれました。（puppeteer使った50行くらいの簡単なJSスクリプト）このhtml、pdf、script、（+images）をセットで入れといてGithubに入れれば脱Google Driveとなります。
pathは、slides/{date}/ココ
にしてます。
この手法の良いと思ったところは以下の点です。
- HTML, CSSを知っていれば作れる
- GitHubに全てのArtifactsを置ける
- Slidev, Marpなどの学習コストがない
特に3つ目の「Slidev, Marpなどの学習コストがない」が急いでスライドを作る必要のある私には重要だったため、今回はHTMLで生成する方法を選択しました。
Claude Codeを使ったスライド作成
プロジェクト構成
slide-project/
├── slides.md # マスタースライド用
├── artifacts/
│ ├── slides.html # 生成されたHTMLプレゼンテーション
│ ├── slides.yaml # 構造化された中間データ
│ └── slides-output.pdf # 最終PDF出力
├── scripts/
│ ├── README.md # スクリプトドキュメント
│ └── html-to-pdf.js # PDF変換エンジン
├── fig/ # 画像
└── CLAUDE.md # Claude Code用プロジェクト設定
プロジェクト構造は上記の通りです。実際のプロジェクトが気になる方は、以下のリポジトリを見てください：
Claude Codeの機能の活用
CLAUDE.md
CLAUDE.mdは毎回読み込まれる指示のため、以下のようなことを記述しています。
- リポジトリ概要
- ファイル構成
- スライド生成時の注意点
- カラーパレット
スライド生成時の注意点としては以下のような記載をしました。
## スライド生成時の注意点
- 作成の流れ
1. md形式で骨子を作る
2. 構造理解のためにyamlに変換
3. htmlファイルにスライド出力
4. 必要に応じて微調整を繰り返す
- 画像ファイルは事前にサイズ計算をして16:9のスライドに適切に配置すること
- `##`でページ区切りを徹底
- ページ移動の矢印は不要
- スライド出力は`artifacts/`に保存(yaml,html,pdf)
- 最終的にはPDFでの印刷
またカラーパレットでスライドのテーマカラーを設定しました。Claude Codeに以下のような指示をまず出します。
Anthropicの公式HPを検索してカラーパレットを作成して
この結果、取得したカラーパレットをCLAUDE.mdに記載しました
## カラーパレット
Anthropicのブランドカラーを使用:
- Primary: #d4a37f (ウォームテラコッタ)
- Secondary: #d8ac8c (ライトコーラル)
- Accent: #ead1bf (ライトピーチ)
- Background: #fbf6f2 (ウォームホワイト)
- Text: #000000 (ブラック)
カスタムSlash Command
Claude Codeの機能であるカスタムSlash Commandもスライド作成時に活用しました。.claude/commands/update-slide.mdを配置して以下の指示を記載しました。
# mdの更新を検知してスライドに反映する
## 手順
- step1: mdの変更をyamlと比較して検知。
- step2: mdをyamlに変換（なければyamlを作成）
- step3: 既存のartifacts/slides.htmlをmdとyamlを参考に更新
- step4: スライドPDFをscript/html-to-pdf.jsで生成
## 注意点
- 更新は内容のみ
- レイアウトは変更しないように
つまりClaude Codeで/update-slideのカスタムSlash Commandを実行すれば
- Markdown -> YAML
- YAML -> HTML
- HTML -> PDF
の変換を一気にしてくれます。
スライド作成手順
基本的に変更するのはslides.mdのみです。
-
slides.mdを作成 -
slides.mdの登壇内容を更新 -
/update-slideでslides.mdからHTMLを生成 - レイアウトを見てHTML内のCSSを修正
-
html-to-pdf.jsを実行して成果物のPDFを生成
html-to-pdf.jsもClaude Codeにお願いして作成しています。
生成されたスライド
実際に登壇の際に使用したスライドです。プロジェクトの環境構築含めて4~5時間くらいでした。
個人的に感じたメリット
個人的に感じたメリットを記載します
メリット:
- mdファイル資産が使える
- GitHubリポジトリに置ける
- CSS調整で全ページ一括変更可能
- Marp/Slidevなどの学習コストが不要
- Web開発をしている人はレイアウト調整がしやすい
この方法は、静的サイトジェネレータのようなものなので、Web開発経験がある人は調整などしやすいと思います。今回は使用していませんが、CSSライブラリ（Tailwindなど）を使ってもいいです。
Obsidianなどのmd資産があれば、Obsidian MCPサーバーを使ってClaude Codeにドキュメント資産を読み込ませてスライド作成とかもできそうだなと思いました。この辺はMarp・Slidevなども同じだと思います。
まとめ
今回はClaude CodeでHTML形式でLTスライドを作成する方法を紹介しました。
記事にも書いたように学習コストが不要でスライド作成をできることが、この方法のメリットかと思います。
次の登壇機会にはSlidevも使ってみようと思うので、気が向いたら比較も追記します。
𝕏をフォローしてくれると嬉しいです！
𝕏でも情報発信しているので、フォローしていただけると励みになります！
最近のAI関係のポストは、ハイライトを見ていただければと思います。
参考文献
- 登壇スライド作成もClaude Codeに任せたい 〜家でも外でも移動中も〜
Views: 0
