2025年6月18日 12:47 - 山手線車内
ついにPixel 9 Pro Foldを手に入れて、意気揚々と電車に乗り込んだ。
窓の外の景色を眺めながら、「今日は何しよう」なんて考えていたら...
あ、やばい。来週のLT発表、何も準備してない。😱
でも待てよ。最近Claude Codeでスライド生成の仕組みを整えたばかりじゃないか。
これ、もしかして電車の中でLTスライドが完成するんじゃ...？
2025年6月18日 13:15 - まだ電車内
結論から言うと、本当に電車内でLTスライドが完成した。
こんにちは、kagaya(@ry0_kaga)です。
今回は登壇スライド作成もClaude Codeに任せたいという話です。
Claude Code × Marpのスライド生成を一度テンプレートを育てたらもう戻れなそうな雰囲気です。
スライド作成、毎回同じ作業してませんか？
個人的にはモデリングみたいで、図をぽちぽち配置していくのは気分転換にもなるので結構好きです。
でも、思考の整理にAIを付き合わせることが当たり前になった昨今、そこからスライドに起こすのは非常に作業ゲー感もあり、スライド作成する機会が増えれば増えるほど気分転換とは断言しづらくなってきました。
幸い、弊社は会社スライドテンプレートの整備が行われているので、楽な方ではあると思います。
とはいえ登壇一回当たり、スライドのレイアウトを完成させるだけで、少なくとも半日近くは時間を要していました。
それでも、Marpに手がでない。しかし、Claude Codeが全部やってくれた
MarpやSlidevでスライド作成を行ってる事例はよく知っていましたが、会社テンプレートに寄せていくのが手間なので、全然やっていませんでした。
CSS苦手なので、全然書けるイメージがわかなったのです。ただ、そんな重い腰を上げるきっかけを作ってくれたのが、Claude Code（とGoogle Pixel 9 Pro Fold）です。
「モック画像を与えて、コードを生成→スクリーンショットを撮ってイテレーションを回す」方法が公式でも紹介されていましたが、プロダクト開発でこのやり方をやってる時に、スライドレイアウト整えるのも出来るよな？を思い、移動中にスライド作り放題の世界を目指してみました。
出典: https://www.youtube.com/live/6eBSHbLKuN0?si=7LxtTvU6-wMd8elq
現時点でのクオリティ
こんな感じのスライドが生成可能です。スライドの構成も良い感じに組み合わせてくれるので、叩き台であれば雑多にAIに思いや話したいことを書いておいて、それを勝手に文章・構成にして、スライドまで作ってくれます。
全体像
構成はシンプルです。
（熊井さんのcursor-to-marpを最初に参考にさせて頂きました）
├── .claude/ # Claude Code設定
│ ├── commands/ # カスタムコマンド
├── .cursor/ # Cursor設定
│ └── rules/
│ └── slide_rules.mdc # スライド作成の詳細ルール
│ └── compelling-content.mdc # コンテンツ作成ルール
├── .images/ # 画像アセット
│ ├── background.png
│ ├── logo_primary.png
│ ├── logo_vertical.png
├── themes/
│ └── theme.css # カスタムテーマ
├── input/ # 入力ファイル
│ ├── input-example.md
├── output/ # 生成されたスライドとPDF
│ ├── output-example.md
│ ├── output-example.pdf
├── resources/ # 参照する過去の記事やブログ
├── YYYYMMDD_template.md # スライドテンプレート
├── YYYYMMDD_template.pdf # テンプレートPDF
├── CLAUDE.md # Claude Code向けルール
├── README.md
要は「input.mdに書いたらoutputにスライドができる」という仕組みです。シンプル・イズ・ベスト！
設計
正しい言葉の使い方か不明ですが、デザインシステム・コンポーネント集を整理する考え方で作っています。
まだ寄せきれてない・クオリティが甘い部分もあるのですが、再現性の高いスライド自動生成を目指すために、テンプレートMarkdownファイル、テーマCSS、スライド作成ガイドラインを積み重ね続けることで、クオリティを向上させられることがわかりました。
theme.css - コンポーネントライブラリ
Marpのテーマ・CSSに加えて、ReactやVueでいう「コンポーネントライブラリ」の役割。30種類以上の再利用可能なCSSコンポーネントを定義しています。
例えば下記のようなデータ比較用のテーブル、KPI表示用のメトリックカードなどのコンポーネントをクラス名・スタイルを定義しています。
基本的にはここで定義したクラスを組み合わせることでスライドを生成します。
/* KPI表示用のメトリックカード */
.metric-card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
/* McKinsey風の戦略グリッド */
.strategy-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
/* データ比較用の表 */
.comparison-matrix th {
background-color: var(--color-primary);
color: white;
}
他にも色々コンポーネントを作成しました・している途中です。もっと色々作りたい・クオリティ上げたいのみならず、もっと華麗に管理したいというTODOもあります。
-
.comparison-matrix- 機能比較表 -
.roadmap- 実装計画 -
.tech-stack- 技術スタック -
.testimonial- お客様の声 -
.case-study- 事例紹介
slide_rules.mdc - スライドレイアウトのルール
制約や使用ガイドラインを定義。Figmaのデザインシステムでいう「Design Tokens」や「Usage Guidelines」の役割（らしい）です。
スライド作成ガイドラインと言っても相違はないでしょう。
例えば、文字数制限から、コンポーネントの説明、さらにはレビュー用のチェックリストなどを定義しています。
AIに「いい感じのスライド作って」だけでは再現性が足りないので、具体的なガイドラインや制約を列挙しています。
（何も言わなければ、アイコンを多用したりしますよね）
### データ表示コンポーネント
- **数値強調**: `.metric-card` - 重要な数値やKPIを視覚的に強調
- 3列表示: `.columns-3`内で使用
- 単一強調: `style="max-width: 400px; margin: 20px auto;"`で中央配置
- **戦略グリッド**: `.strategy-grid` - 戦略や提案を2列で整理
- **比較マトリックス**: `.comparison-matrix` - 表形式での機能比較
### 制約ルール
- タイトル: 最大30文字
- 本文: 1行最大40文字
- 1スライドあたり: 最大400文字、12行
### レイアウト制約
- 画像: 最大2枚/スライド（多すぎると見づらい）
- 見出し: h1-h3のみ（h4以降は小さすぎ）
- リスト: 最大3階層まで（深すぎると追えない）
3. YYYYMMDD_template.md - 実装例とベストプラクティス
StorybookやComponent Libraryのように、各コンポーネントの実際の使用例を示します。
ここで実際に利用されているスライドパターンを参考に、スライドを生成します。
なので、基本的にはYYYYMMDD_template.mdファイルを愚直にパターン追加・細部の修正を今も繰り返しています。
<!-- メトリックカードの使用例 -->
<div class="columns-3">
<div class="metric-card">
<div class="metric-number">380<small>億円</small></div>
<p>2023年 市場規模</p>
</div>
<div class="metric-card">
<div class="metric-number">900<small>億円</small></div>
<p>2028年 市場規模予測</p>
</div>
<div class="metric-card">
<div class="metric-number">19<small>%</small></div>
<p>年平均成長率(CAGR)</p>
</div>
</div>
<!-- 戦略グリッドの使用例 -->
<div class="strategy-grid">
<div class="strategy-section">
<h3>💬 Slack連携</h3>
<p>チャットで依頼、結果も通知</p>
<p>コミュニケーションコスト削減</p>
<span class="badge success">効率化</span>
</div>
<div class="strategy-section">
<h3>💻 IDE統合</h3>
<p>開発環境内で直接操作</p>
<p>コンテキストスイッチの削減</p>
<span class="badge primary">UX改善</span>
</div>
</div>
会社のブランドに合わせたテーマを作る
会社テンプレートに出来るだけ寄せたカスタムテーマをどう作るか？です。
実はこれ、Claude Codeに「ログラスのブランドカラーでプロフェッショナルなテーマ作って」をひたすら根気強く指示するだけでした。
差分を見つけて、スクショも渡して、ひたすら細かくチューニングしています。
まだ寄せきれてない・クオリティが甘い部分もあるのですが、テンプレートMarkdownファイル、テーマCSS、スライド作成ガイドラインを積み重ね続けることで、かなりクオリティを上げることが出来ました。
/* themes/theme.css */
@theme ltheme
/* ブランドカラーの定義 */
:root {
--brand-color: #0A2E5B; /* ネイビー */
--accent-color: #2352C8; /* アクセントブルー */
}
/* ロゴを全スライドの右上に表示 */
/* （タイトルスライドとかは除外） */
section:not(.title_slide):not(.section_divider):not(.end_slide)::before {
content: "";
position: absolute;
top: 30px;
right: 60px;
width: 150px;
height: 65px;
background-image: url('../.images/logo_primary.png');
background-size: contain;
background-repeat: no-repeat;
z-index: 9999; /* 最前面に！ */
}
Puppeteer MCP serverを設定させると、良さげにスライドレイアウトをアップデートしてくれます。
プロジェクトコマンドで更に便利に
このリポジトリには6つのカスタムコマンドを仕込んでいます。Claude Codeのプロジェクトコマンド機能を使うと、定型作業が更に楽になります。
.claude/commands/
├── generate-slides.md # スライド生成
├── research-and-slides.md # リサーチ＋生成
├── validate-constraints.md # 制約チェック
├── analyze-slides.md # 品質分析
├── export-pdf.md # PDF出力
└── validate-slides.md # 制約検証（日本語版）
下記のようなルールを配置しておけば、それをスラッシュコマンドから呼び出すことが出来ます。
/research-and-slides EPM市場について調べてスライド作って
# 裏で起きること
1. WebSearchで最新情報を収集
2. input/input.mdに調査結果を保存
3. スライドを自動生成
4. 市場分析、競合分析、将来予測まで完備
それ以外には制約違反を見つけるルールや、スライドの品質レビューを行うコマンドを登録してみています。
⏺ スライド制約検証レポート
検証対象: 20250118_ai_engineer_product_builder_lt.md
検証日時: 2025-01-18
サマリー
- 総スライド数: 19
- 違反スライド数: 2
- 準拠率: 89.5%
違反詳細
スライド 6（世界のリーダーたちの声）
- 違反項目: 行数超過
- 現在値: 14行
- 制限値: 12行
- 修正提案: 各リーダーの説明文を短縮するか、2スライドに分割
スライド 15（Claude Codeとの効果的な協働）
- 違反項目: 行数超過
- 現在値: 21行
- 制限値: 12行
- 修正提案: 「3つの重要ポイント」と「効率化Tips」を別スライドに分割
制約準拠状況（詳細）
✅ 準拠している項目
- タイトル文字数: すべて30文字以内（最大: 29文字）
- 本文1行: すべて40文字以内
- スライド全体文字数: すべて400文字以内
- 画像枚数: 0枚/スライド（制限: 最大2枚）
- テーブル数: 最大1個/スライド
- コードブロック: 最大7行（制限: 20行以内）
- 見出しレベル: h1-h3のみ使用
- CSSクラス使用: 適切に活用
⚠️ 違反している項目
- 行数制限: 2スライドで12行超過
CSSコンポーネント使用状況
- title_slide: 2回（タイトル、エンドスライド）
- section_divider: 3回（セクション区切り）
- columns: 2回
- columns-3: 3回
- highlight-box: 8回
- metric-card: 3回
- case-study: 2回
- feature-cards: 3回
- roadmap: 1回
- four-column-grid: 1回
推奨事項
1. 行数超過の解消
- スライド6は内容が密集しているため、2スライドに分割を推奨
- スライド15は2つのトピックを別々のスライドに分けることを推奨
2. 全体的な構成
- ストーリーラインは明確で、3幕構成が効果的
- データビジュアライゼーションが適切に使用されている
3. 改善可能な点
- 画像を追加してビジュアルインパクトを強化（現在0枚）
- slide-summaryコンポーネントを活用して重要ポイントを強調
プロジェクトコマンドの作り方は非常に簡単で、.claude/commands/配下にmdファイルを配置するだけです。
<!-- .claude/commands/my-command.md -->
# My Command
カスタムコマンドの説明をここに書く
## 実行内容
1. ファイルを読む
2. 処理する
3. 結果を出力
## 使用例
`claude "my-command input.md"`
これだけ！Claude Codeが勝手に認識してくれます。
Claude Code Actionで移動中にスライド
Claude Code Actionも設定すると、移動中にもスライド作成をそこそこ快適に進めることが出来ます。
私は最近折りたたみスマホを購入したので、Youtubeを見ながら、たまにGithub Appから@claudeを呼び続けることで、オフィスに到着した時にはスライドPDFが生成されています。
おすすめです。
Zenn記事→即LTスライドの錬金術
Zenn記事を書く → Claude Codeに投げる → LTスライド完成！
つまり、記事を書いたら即登壇できます、ちゃんとした会社テンプレートっぽいスライドで。
他にも議事録を報告スライドにしたり、リリースノートをチーム共有のスライドにしたり、もっぱら遊んでるところです。
ここまでの仕組みの自動生成チャレンジ
蛇足ですが、参考スライドPDFを渡したら、そのスライドレイアウトを自動でMarpで再現するためのスクリプトをClaude Code SDKで作ってみています。
参考スライドを投げたら、その会社のフォーマットのスライドをすぐに再現できる夢の世界です。
PDFから文章を抜き出し、スライド構成・レイアウトを抽出して、テンプレート・テーマ・ガイドラインファイルを自動生成して、そのままMarpで再現可能にする。
上記の一致度をベンチマークとして、閾値を超えるまで永遠とぐるぐるし続けるプログラムです。
イメージはAirbnbのワークフロー。
ちなみに現時点では動いてはいるが、震えるほどクオリティが低いです。
前者のスライドをインプットにしたら
下記Marpスライドがテーマ・テンプレート・ガイドラインとセットで生成
これから頑張ります（Claude Codeが）
まとめ
昨今のAIの進化はとてつもないので、このシステムもそのうちモデルの進化に引きづられて進化することに期待しています。
（もしくは不要になり、淘汰される。厳密に言えばGenSparkでも会社スライド風のスライドは生成できた）
より複雑なレイアウトの自動生成やら、テキスト被せがち..などを中心にもう少し整備したいことはあります。油断するとスライド右上の会社ロゴの表示が消えてしまいがちです。
とはいえ、登壇スライド作成がもっと手軽になる世界には辿り着けそうでハッピーハッピーです。
登壇内容を考えることに集中できるので、スライドレイアウト組み上げの叩きを作ってくれるくんとして利用していきたい気持ちです。
（レイアウト組み上げくんとしてもそのままノールックで使うにはまだ物足りない）
ちなみに本記事を題材に登壇スライドをポンだしさせたアウトプットの一部が下記です。
今回は以上です！
参考リンク
Discussion