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を生成しているか