Claude CodeにLTスライドをHTMLで作ってもらった話

投稿日: 2025年7月12日

この記事は人力で書かれています。
筆者はスライド作成ツールSlidev・Marpなどは使ったことないです。ご容赦ください。

Oikonです。

先日、「Claude Code初学者勉強会2 (Youtubeリンク)」でLT（ライトニングトーク）登壇の機会をいただきました。

登壇のためのスライドを作る必要があったのですが、せっかくならClaude Codeでスライドを作ってみようと思いました。

LT登壇後にClaude Codeでのスライド作成のポストに反響があったので、記事にしようと思います。

@tweet

この記事では実際に試した方法について解説します。

スライド作成方針

最近のLT用のスライド作りは以下のような手法があります（個人調べ）

生成AI(ChatGPT, Gemini, etc.)
Power Point
Slidev
Marp
HTML

この中ではSlidevが人気があるように見えましたが、個人的に興味を持ったのはHTMLによるスライド生成です。しば田さんの以下のポストで興味を持ちました↓

@tweet

本文にも引用させていただきます：

個人的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用プロジェクト設定

プロジェクト構造は上記の通りです。実際のプロジェクトが気になる方は、以下のリポジトリを見てください：

GitHub - oikon48/slide_20250705_claude_code

Contribute to oikon48/slide_20250705_claude_code development by creating an account on GitHub.

github.com

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で生成

## 注意点

- 更新は内容のみ
- レイアウトは変更しないように