目次
- はじめに：Claude Codeのスライド生成が熱い
- PPTXスキルの仕組みをおさらい
- SlideKitとは何か -- PPTXスキルとの違い
- 比較検証：同じ事業計画書で3パターン生成してみた
- 各パターンの詳細と生成結果
- 比較まとめ：あなたに合うのはどのパターン？
- SlideKitの導入方法
- おわりに
1. はじめに：Claude Codeのスライド生成が熱い
Claude Opus 4.6のリリース以降、SNSで大きな話題になっているのが PowerPointプレゼンテーション（PPTX）の自動生成機能 です。「直近の決算説明資料をPPTXで作って」と一言伝えるだけで、プロ品質のスライドが生成される。この衝撃は多くのエンジニアに驚きを与えました。
この機能の裏側には、Anthropic公式が提供する PPTXスキル が存在します。仕組みの詳細は、こちらのZenn記事で詳しく解説されています。
実際に使ってみると、確かにすごい。ただ、何度か試すうちに気になることが出てきました。
- デザインの精度をもっと上げられないか？ -- レイアウトパターンや配色の統一感をより細かくコントロールしたい
- 自社のテンプレートや、好みのデザインで作れないか？ -- 毎回ゼロから生成されるので、ブランドガイドラインに沿った資料の量産や、気に入ったデザインの再利用が難しい
そこで、PPTXスキルと連携しつつ デザインの制御性を高める Claude Codeスキル SlideKit を作ってみました。
本記事では、同じ事業計画書を入力として PPTXスキル単体 と SlideKit + PPTXスキル で生成し、その違いを比較します。「PPTXスキル単体での生成と、HTMLを経由する生成では、結果にどんな違いが出るのか？」-- この疑問に答えていきます。
2. PPTXスキルの仕組みをおさらい
まず、話題のPPTXスキルがどのようにスライドを生成しているのかを簡単に振り返ります。
生成フロー
ポイントは以下の通りです:
- PptxGenJS というNode.jsライブラリを使い、JavaScriptコードでスライドを構築
- react-icons でアイコンをSVG→PNG変換して埋め込み
- 生成後、PPTX→PDF→画像に変換し、Claude自身が目視チェック（リフレクション） を行う
- 問題があればスクリプトを修正して再生成
つまり、Claudeが 「コードを書く → 実行する → 結果を確認する → 修正する」 というAgenticなサイクルを回しています。
PPTXスキル単体のメリット
- 一発でPPTXが出る。中間ファイルは生成用のJSスクリプトのみ
- プロセスがシンプルで高速
- Claude Opus 4.6の高い生成能力がそのまま活かされる
3. SlideKitとは何か -- PPTXスキルとの違い
SlideKitの概要
前述の「デザインの精度をもっと上げたい」「自社テンプレートや好みのデザインで作りたい」という課題を解決するために作ったのが SlideKit です。PPTXスキルとの最大の違いは、HTMLを中間成果物として生成する アプローチを取っている点にあります。
GitHub リポジトリ: https://github.com/nogataka/claude-code-skills
2つのスキル
| コマンド | 概要 |
|---|---|
/slidekit-create |
HTMLスライドを新規作成（1スライド = 1 HTMLファイル、1280x720px） |
/slidekit-templ |
既存PDFからHTMLテンプレートを作成し、デザインを踏襲できるようにする |
PPTXスキルとの設計思想の違い
| 観点 | PPTXスキル単体 | SlideKit + PPTXスキル |
|---|---|---|
| 生成物 | PPTX直接 | HTML → PPTX |
| デザイン制御 | Claudeの判断に依存 | 5スタイル x 5テーマ x 15レイアウトパターン |
| ヒアリング | 最小限 | 出力先、スタイル、テーマ、枚数、カラー等を対話で確認 |
| 中間確認 | 画像化してClaudeがQA | HTMLをブラウザで人間が直接確認可能 |
| カスタマイズ | プロンプトで指示 | カスタムテンプレートで既存デザインを踏襲可能 |
| 品質チェック | 画像ベースのリフレクション | 18項目のチェックリスト + PPTX変換ルール準拠 |
SlideKitの仕組み
/slidekit-create は8つのフェーズで動作します:
特筆すべきは、SlideKitのHTMLが PPTX変換を前提としたDOM構造ルール で生成される点です。テキストは <p> / <h*> タグ、レイアウトはflex-based、DOMネストは5-6レベルまで、といった制約が SKILL.md に定義されており、PPTXスキルで変換した際の精度が高くなるよう設計されています。
なぜHTMLを経由するのか
一見すると「PPTX直接の方がシンプルでは？」と思うかもしれません。HTMLを経由するメリットは以下の通りです:
- 人間が中間成果物を直接確認できる -- ブラウザで即プレビュー、テキストエディタで修正も可能
- 15種類のレイアウトパターン が事前定義されており、デザインの再現性が高い
- カスタムテンプレート で既存デザインを踏襲できる
- print.htmlからPDFを直接生成できる -- ブラウザの印刷機能でそのままPDF化が可能
- HTML自体をWebコンテンツとしてそのまま公開できる
特に4と5は、SlideKitならではのアピールポイントです。SlideKitはHTML生成の過程で、全スライドを一覧表示する print.html を自動生成します。このファイルをブラウザで開けば、スライド全体を俯瞰して確認できるのはもちろん、ブラウザの「印刷」機能からそのままPDFとして書き出す こともできます。つまり、PPTX変換を経由せずとも、HTMLからダイレクトにPDFを手に入れられるわけです。
さらに、生成されたHTMLファイルはそのままWebサーバーに配置すれば Webページとして公開 することも可能です。プレゼン資料をWebサイト上で共有したい、社内ポータルに掲載したい、といったケースでは、わざわざPPTXやPDFに変換する必要すらありません。HTMLという汎用フォーマットを中間成果物にしているからこそ、PPTX・PDF・Webと多様な出力先に柔軟に対応できる のがSlideKitの強みです。
実際に生成されたPowerPointファイルと、そこから生成したPDFは GitHubリポジトリのexamples に公開しています。PPTXとPDFを見比べていただくと、HTML経由での変換精度やデザインの再現度を実感いただけるはずです。ぜひ覗いてみてください。
4. 比較検証：同じ事業計画書で3パターン生成してみた
比較条件
同じ 「AIレンタカー事業計画書」（内容.md）を入力として、以下の3パターンで生成しました。
| パターン | 構成 | 概要 |
|---|---|---|
| パターン1 | PPTXスキル単体 |
/pptx スキルのみで直接PPTX生成 |
| パターン2 | SlideKit + PPTXスキル |
/slidekit-create でHTML → /pptx でPPTX変換 |
| パターン3 | SlideKit（カスタムテンプレ） + PPTXスキル | カスタムテンプレート登録済みの状態で /slidekit-create → /pptx
|
3パターン並列比較
各パターンのスライド1〜3枚目を横に並べた比較です。
5. 各パターンの詳細と生成結果
パターン1: PPTXスキル単体
操作方法:
Claude Codeに一言伝えるだけです:
> "内容.md"の内容をPPTXスキルで作ってください。
Claudeは内容を読み取り、PPTXスキルをロードし、pptxgenjs を使ったJSスクリプトを生成・実行してPowerPointファイルを出力します。
生成結果: https://github.com/nogataka/claude-code-skills/tree/main/examples/ai-rental-car
- ダークカラーベースにグリーン系のアクセント
- 12スライド構成
- シンプルで見やすいレイアウト
- 一言の指示から数分で完成
パターン2: SlideKit + PPTXスキル
操作方法:
/slidekit-create を実行すると、対話形式のヒアリングが始まります。出力先、スタイル、テーマ、枚数などを選択していきます。
> /slidekit-create
生成結果: https://github.com/nogataka/claude-code-skills/tree/main/examples/slide-page01
- ダークネイビーベースにブルーとオレンジのアクセント
- 18スライド構成（より詳細な情報量）
- 目次スライドに番号付きの構造化レイアウト
- Noto Sans JP + Inter のフォントペアで日英バイリンガル表記
パターン3: SlideKit（カスタムテンプレート） + PPTXスキル
操作方法:
このパターンのポイントは、自社のPowerPointテンプレートや、気に入ったデザインのスライドをSlideKitに取り込める という点です。
カスタムテンプレートの作り方
/slidekit-templ を使うと、テンプレート化したいPowerPointをPDFエクスポートし、そのPDFからSlideKit用のHTMLテンプレートを生成できます。
手順は以下の通りです:
Step 1: PowerPointをPDFエクスポート
テンプレートにしたいPowerPointファイルを、PowerPointの「名前を付けて保存」や「エクスポート」からPDFとして書き出します。
Step 2: /slidekit-templ でHTMLテンプレートを生成
> /slidekit-templ
または自然言語で:
> このPDFからテンプレートを作ってください: ./my-template.pdf
Claudeが各ページをJPEG画像に変換し、画像を見ながらHTMLを再現します。ビジュアルQAプロセスも内蔵されているので、元のデザインに忠実なHTMLが生成されます。
Step 3: テンプレートディレクトリに配置
生成されたHTMLの中から、デザインの参考にしたいファイルを以下のディレクトリにコピーします:
# テンプレートの配置先
~/.claude/skills/slidekit-create/references/templates/
# 例: 生成された003.htmlをテンプレートとして登録
cp output/templ/003.html ~/.claude/skills/slidekit-create/references/templates/
これだけで登録完了です。最大5ファイルまで配置でき、テキスト内容はコピーされず ビジュアルデザインのみ が抽出されます。
Step 4: /slidekit-create を実行
> /slidekit-create
テンプレートが登録されていると、Claudeが自動的に検出し、デザイン要素を抽出します。画面を見ると、テンプレートから以下の要素が読み取られているのがわかります:
- カラー: Blue
#007BFF/ Amber#F59E0B/ Dark#333333 - フォント: BIZ UDGothic
- ヘッダー: アイコン + ブランド名
- 装飾: 右上に半透明の円形シェイプ
これらが新しいスライド全体に自動的に反映されます。
生成結果: https://github.com/nogataka/claude-code-skills/tree/main/examples/slide-page02
- テンプレートから抽出した配色・フォント・装飾を一貫して踏襲
- 20スライド構成（最も情報量が豊富）
- BIZ UDGothic で統一感のある日本語表現
つまり、自社のPowerPointテンプレートや、気に入ったデザインのスライドがあれば、そのデザインを踏襲した資料をClaude Codeで量産できる ということです。社内のブランドガイドラインに沿った資料はもちろん、「このデザインいいな」と思ったスライドをベースに新しい内容で作り直す、といった使い方もできます。
6. 比較まとめ：あなたに合うのはどのパターン？
比較テーブル
| 観点 | パターン1（PPTX単体） | パターン2（SlideKit + PPTX） | パターン3（SlideKitカスタムテンプレ + PPTX） |
|---|---|---|---|
| 手軽さ | 一言で生成開始 | ヒアリング対話あり | テンプレート準備 + ヒアリング |
| スライド枚数 | 12枚 | 18枚 | 20枚 |
| デザインの統一感 | Claudeの判断 | スタイル/テーマ指定 | テンプレート準拠で最も統一的 |
| レイアウトの多彩さ | シンプル中心 | 15パターンから自動選択 | 15パターン + テンプレートデザイン |
| ブランド一貫性 | 都度変わる | 方向性を指定可能 | 既存デザインを忠実に踏襲 |
| 中間確認 | PPTX完成後 | HTMLをブラウザで事前確認 | HTMLをブラウザで事前確認 |
| 情報の構造化 | 基本的 | 構造化されている | 最も構造化されている |
| 生成速度 | 最速 | やや時間がかかる | 最も時間がかかる |
どのパターンを選ぶべきか
3パターンのどれが「正解」ということはありません。用途やシーンによって使い分けるのがベストです。
パターン1（PPTX単体）が向いている場面:
- 「とにかく今すぐスライドが欲しい」
- 社内の軽い共有資料、アイデアの初期整理
- スライドの完成度よりスピードが優先
パターン2（SlideKit + PPTX）が向いている場面:
- 「デザインの方向性を自分で選びたい」
- クライアント向けの提案資料、社内プレゼン
- HTML段階で内容を確認・修正してからPPTXにしたい
パターン3（SlideKitカスタムテンプレ + PPTX）が向いている場面:
- 「自社のブランドガイドラインに沿った資料が必要」
- 統一デザインで資料を量産したい
- 既存のプレゼンデザインをベースに新しい内容で作りたい
あなたの用途には、どのパターンが合いそうですか？
7. SlideKitの導入方法
興味を持った方はすぐに試せます。
インストール
# SlideKitを一括インストール
claude install-skill https://github.com/nogataka/claude-code-skills
# PPTX変換も使いたい場合（Anthropic公式スキル）
claude install-skill https://github.com/anthropics/claude-code-agent-skills/tree/main/skills/pptx
基本的な使い方
# スライドを新規作成（対話形式でヒアリング）
> /slidekit-create
# 既存PDFからテンプレートを作成
> /slidekit-templ
# または自然言語で
> プレゼン資料を作ってください
カスタムテンプレートの登録
# slidekit-templで生成したHTMLを配置するだけ
cp output/templ/003.html ~/.claude/skills/slidekit-create/references/templates/
登録後は /slidekit-create 実行時に自動で検出・デザイン抽出されます。
対応スタイルとテーマ
| スタイル（5種） | テーマ（5種） |
|---|---|
| Creative -- 大胆な配色、遊び心 | Marketing -- 製品発表、市場分析 |
| Elegant -- 落ち着いたパレット、広い余白 | Portfolio -- ケーススタディ、実績紹介 |
| Modern -- フラット、鮮やかなアクセント | Business -- 事業計画、戦略提案 |
| Professional -- ネイビー/グレー、高密度 | Technology -- SaaS、DX、AI |
| Minimalist -- 少色、タイポグラフィ主導 | Education -- 研修、セミナー |
8. おわりに
Claude Opus 4.6のPPTX生成能力は本当に驚異的です。一言で高品質なスライドが生成される体験は、一度味わうと手放せなくなります。
ただ、実際に業務で使い込むほど、「デザインの精度をもっと上げたい」「自社のテンプレートで統一したい」「あのスライドのデザインを使い回したい」という欲求が出てきます。SlideKitはまさにその課題から生まれたスキルです。
PPTXスキルの手軽さとSlideKitのデザイン制御性は、競合するものではなく 補完関係 にあります。普段はPPTXスキル単体でサッと作り、ここぞという場面ではSlideKitでデザインにこだわる。そんな使い分けが、現時点でのベストプラクティスだと感じています。
ぜひ一度、それぞれのパターンを試してみてください。
SlideKit GitHub リポジトリ: https://github.com/nogataka/claude-code-skills
参考
- Claude Opus4.6はどのようにPPTXを生成しているか -- PPTXスキルの内部動作を詳しく解説されている記事です。本記事のPPTXスキルの仕組みの解説はこちらを参考にさせていただきました。
- Anthropic公式 PPTXスキル
- Claude Code ドキュメント