SlideKitは、Claude Codeでプレゼンテーション資料を作るためのスキルセットになる。「スライド作って」と伝えるだけで、HTMLスライドが生成され、PowerPointやPDFに変換できる。
本記事は使い方に特化した実践ガイドになる。設計思想やパイプラインの内部構造が知りたい方は、以下の関連記事を参照してほしい。
関連記事
- PPTXスキルとSlideKitの比較記事 — 3パターンの比較検証
- パイプラインの裏側を全部見せる — 43パターン、HTML制約、設計思想の解説
GitHub リポジトリ: https://github.com/nogataka/SlideKit
1. インストール
# SlideKitをインストール
claude install-skill https://github.com/nogataka/SlideKit
これだけで以下の4つのスキルが使えるようになる。
| コマンド | 役割 |
|---|---|
/slidekit-create |
HTMLスライドを新規作成 |
/slidekit-templ |
既存PDFからHTMLテンプレートを作成 |
/pptx |
HTMLをPowerPointに変換 |
/imgen |
スライド用の画像をAI生成 |
PPTX変換も使いたい場合は、Anthropic公式スキルも追加する。
claude install-skill https://github.com/anthropics/claude-code-agent-skills/tree/main/skills/pptx
slidekit-templの前提条件
PDFからテンプレートを作る/slidekit-templを使う場合は、Popplerが必要になる。
# macOS
brew install poppler
# Ubuntu/Debian
sudo apt-get install poppler-utils
2. ゼロからスライドを作る（/slidekit-create）
基本の流れ
> /slidekit-create
または自然言語で指示してもよい。
> AI事業の投資家向けピッチデッキを20枚で作って
対話形式で以下の質問に答えていく。ほとんどが番号選択で、自由入力はタイトルくらいになる。
ヒアリング項目
| # | 質問 | 回答例 |
|---|---|---|
| 1 | 出力ディレクトリ | ./output/slides |
| 2 | コンテンツソース | テキストファイルのパス or 口頭説明 |
| 3 | プレゼンタイトル | 「DX推進プロジェクト提案書」 |
| 4 | スライド枚数 | 10 / 15 / 20（推奨） / 25 / 自動 |
| 5 | 会社名・ロゴ | 任意 |
| 6 | スタイル | Creative / Elegant / Modern / Professional / Minimalist |
| 7 | テーマ | Marketing / Portfolio / Business / Technology / Education |
| 8 | カラー希望 | 「青系で」「#1B3A5C を基調に」など |
| 9 | 背景画像 | あり / なし |
出力されるファイル
output/slides/
├── 001.html # 表紙
├── 002.html # 目次
├── 003.html # 本編スライド
├── ...
├── 020.html # 最終スライド
└── print.html # 全スライド一覧（俯瞰確認用）
各HTMLファイルは1280×720pxの自己完結したスライドで、ブラウザで直接開ける。
print.htmlの使い方
print.htmlをブラウザで開くと、全スライドが縦に並んで表示される。
- 俯瞰確認: デッキ全体のデザインや流れを一覧でチェック
- PDF書き出し: ブラウザの印刷機能（Ctrl/Cmd + P）でそのままPDFに変換
- Web公開: そのままWebサーバーに配置すればプレゼン資料として公開可能
3. PowerPointに変換する（/pptx）
HTMLスライドが出来たら、PowerPointに変換する。
> このHTMLスライドをPowerPointに変換して
または明示的にスキルを呼ぶ。
> /pptx
変換後、fix_pptx.pyが自動実行されてPptxGenJSの既知の問題14件が修正される。PowerPointで「修復が必要です」と表示される問題を防ぐ。
HTMLスライドはPPTX変換を前提としたDOM構造で生成されているが、100%の再現ではない。変換後にPowerPoint上で微調整が必要な場合がある。
4. 既存PDFからテンプレートを作る（/slidekit-templ）
自社のPowerPointや気に入ったデザインのスライドを、SlideKitのテンプレートとして取り込める。
Step 1: PDFを用意する
テンプレートにしたいPowerPointをPDFとしてエクスポートする。PowerPointの「名前を付けて保存」→「PDF」で書き出せばよい。
Step 2: テンプレート生成
> /slidekit-templ
または指定のPDFを渡す。
> このPDFからテンプレートを作ってください: ./my-template.pdf
内部では以下が実行される。
- PDFを
pdftoppmでスライドごとのJPEG画像に分割 - Claude Visionが各画像を読み取り、HTMLを再現
- ビジュアルQAプロセスで元デザインとの整合性を確認
Step 3: テンプレートとして登録
生成されたHTMLの中から、参考にしたいファイルを選んで配置する。
# テンプレートディレクトリを作成
mkdir -p ~/.claude/skills/slidekit-create/references/templates/my-design
# HTMLファイルをコピー（最大5ファイル）
cp output/templ/001.html ~/.claude/skills/slidekit-create/references/templates/my-design/
cp output/templ/002.html ~/.claude/skills/slidekit-create/references/templates/my-design/
cp output/templ/003.html ~/.claude/skills/slidekit-create/references/templates/my-design/
テンプレートからはビジュアルデザインのみが抽出される。テキスト内容はコピーされない。抽出される要素はカラーパレット、フォントスタイル、ヘッダー/フッターのパターン、装飾要素など。
Step 4: テンプレートモードで新規作成
> /slidekit-create
テンプレートが登録されていると、自動的に検出される。デザイン関連の質問（スタイル・テーマ・配色）がスキップされ、テンプレートのデザインを踏襲した新しいスライドが生成される。
5. 事前構築済みテンプレートを使う
ゼロからデザインを考えるのが面倒なら、11セットの事前構築済みテンプレートを使える。
| テンプレート | テーマ | 向いている用途 |
|---|---|---|
| abc-navy | Navy + Gold | 汎用ビジネス |
| venture-split | Orange + Green | スタートアップ提案 |
| biz-plan-blue | Blue + Amber | 事業計画書 |
| greenfield | Forest Green | 新規事業提案 |
| novatech | Navy + Orange | テック系提案 |
| skyline | Cyan + Red | 次世代戦略 |
| ai-proposal | — | AI事業提案 |
| customer-experience | M+1 font | CX変革 |
| ai-tech | — | AI技術紹介 |
| marketing-research | — | 市場調査レポート |
| digital-report | Navy + Gold | デジタル戦略 |
導入方法
リポジトリのslide-templates/ディレクトリからコピーする。
# 例: abc-navyテンプレートを導入
TEMPLATES_DIR=~/.claude/skills/slidekit-create/references/templates
REPO_DIR=~/.claude/skills/slidekit-create # インストール先に合わせて変更
mkdir -p "$TEMPLATES_DIR/abc-navy"
cp slide-templates/abc-navy/00[1-5].html "$TEMPLATES_DIR/abc-navy/"
導入後は/slidekit-createを実行すると自動検出される。
6. スライド用の画像を生成する（/imgen）
スライドに使う画像素材をAIで生成できる。Azure OpenAIのgpt-image-1.5を使用する。
背景画像を作る
> スライドの背景に使えるテクノロジー感のある画像を作って。
カラーは濃紺(#1B3A5C)とティール(#2D8B7A)のグラデーションで。
CLIで直接実行する場合はこのようになる。
npm run dev --prefix /path/to/imgen -- image gen \
"ミニマルなテクノロジーの抽象的背景、濃紺とティールのグラデーション" \
-q high -s 1536x1024 -o slides/bg-tech.png
アイコン・イラストを作る
npm run dev --prefix /path/to/imgen -- image gen \
"フラットデザインのチームワークイラスト、白背景" \
-q high -s 1024x1024 -o slides/team-icon.png
既存画像の配色を調整する
スライドのカラーパレットに合わせて既存画像のトーンを統一できる。
npm run dev --prefix /path/to/imgen -- image edit \
slides/photo.jpg "カラートーンを濃紺とゴールドに統一" \
-s 1536x1024 -o slides/photo-adjusted.png
サイズプリセット
| プリセット | サイズ | 用途 |
|---|---|---|
builtin:landscape |
1536×1024 | 全面背景、ワイド画像 |
builtin:square |
1024×1024 | アイコン、図解 |
builtin:portrait |
1024×1536 | 縦型画像、人物写真 |
builtin:draft |
1024×1024 (low) | ラフ案確認用 |
7. ユースケース別レシピ
投資家向けピッチデッキ
> AI事業の投資家向けピッチデッキを20枚で作って。
スタイルはProfessional、テーマはBusiness。
内容はこのファイルを参照: ./business-plan.md
自社テンプレートで量産
# 1回だけ: テンプレート登録
cp my-corporate-template/00[1-5].html \
~/.claude/skills/slidekit-create/references/templates/corporate/
> /slidekit-create
> （テンプレートが自動検出される）
> 今月の月次報告を20枚で作って。内容は ./monthly-report.md
既存資料のリデザイン
> /slidekit-templ
> このPDFのデザインを取り込んでください: ./old-deck.pdf
> （HTMLテンプレートが生成される）
> （テンプレートとして登録）
> /slidekit-create
> 新しい内容でスライドを作ってください。内容は ./new-content.md
画像付きの提案資料
> まず背景画像を作って。テクノロジー感のある青系グラデーションで。
> （imgenで画像生成）
> 次にこの画像を使ってスライドを作って。
> （slidekit-createで生成、画像を配置）
> PowerPointに変換して。
> （pptxで変換）
8. Tips
スタイルとテーマの組み合わせ
| やりたいこと | おすすめの組み合わせ |
|---|---|
| 投資家向けピッチ | Professional × Business |
| 社内勉強会 | Modern × Technology |
| クライアント提案 | Elegant × Marketing |
| 新規事業プレゼン | Creative × Portfolio |
| 研修資料 | Minimalist × Education |
カラー指定のコツ
- 「青系で」「暖色系で」のようなざっくり指定でも、適切なパレットが選ばれる
- 特定のブランドカラーがある場合は、hex値で指定する（例:
#1B3A5C） - 3色以上指定すると、Primary / Accent / Warmに自動割り当てされる
スライド枚数の目安
| 枚数 | 向いている場面 |
|---|---|
| 10枚 | 社内共有、ライトニングトーク |
| 15枚 | 標準的なプレゼン |
| 20枚 | 投資家ピッチ、提案書（推奨） |
| 25枚 | 詳細な事業計画書 |
修正したいとき
生成されたHTMLはテキストエディタで直接編集できる。Tailwind CSSのクラスを変更すればレイアウトも調整できる。ブラウザでリロードすれば即座に反映される。
特定のスライドだけ作り直したい場合は、そのスライドの番号を指定して再生成を依頼する。
> 005.htmlのレイアウトをKPI Dashboardパターンに変えて
まとめ
| やりたいこと | コマンド |
|---|---|
| スライドを新規作成 | /slidekit-create |
| PDFからテンプレート作成 | /slidekit-templ |
| PowerPointに変換 | /pptx |
| 画像を生成 | /imgen |
| PDFに変換 |
print.htmlをブラウザで印刷 |
基本は/slidekit-createだけで完結する。テンプレートを登録すればデザインの統一も自動化される。PowerPointが必要なら/pptxで変換、PDFが必要ならprint.htmlから印刷。
GitHub リポジトリ: https://github.com/nogataka/SlideKit
参考
- PPTXスキルとSlideKitの比較記事 — どのパターンが自分に合うか検討できる
- パイプラインの裏側を全部見せる — 43パターンの全リスト、HTML制約、設計思想
- Claude Opus4.6はどのようにPPTXを生成しているか