Claude Codeで自社ブランドの提案書スキルを作った話

最近のAIツールを使えば、提案書のスライドはさくっと作れます。見た目もそれっぽい。ただ、実際に使ってみると「意図がズレている」「修正に結局時間がかかる」というパターンに何度もハマりました。

原因はシンプルで、いきなりスライド生成に飛びついているからでした。

提案書で大事なのは見た目よりも「何を、どの順番で、誰に伝えるか」という構成です。ここを曖昧なまま「スライド作って」とAIに投げると、見た目はきれいだけど中身がズレた資料ができあがる。結局、手戻りで時間が溶けます。

そこで考えたのが、壁打ち→構成→資料化をすべて同じツール内で完結させること。Claude CodeやCoworkなら、まず対話で構成を練って、そのままスライド生成まで一気通貫で進められます。途中で「やっぱり3枚目と4枚目を入れ替えたい」となっても、文脈が残っているのですぐ対応できる。

この「構成ファースト」のワークフローを自社ブランドの提案書に特化させるために、Anthropic公式のpptxスキルをベースにカスタマイズしたスキルを作りました。その過程を共有します。

Claude Codeの「スキル」って何？

まず前提から。Claude Code（AnthropicのCLIツール）にはスキルという仕組みがあります。

スキルは、Claude Codeに「特定のタスクの専門知識」を持たせるプラグインのようなものです。たとえば「PDFを作れるスキル」「Excelを操作できるスキル」「PPTXを生成できるスキル」など、用途ごとに追加できます。

スキルの実態は SKILL.md というMarkdownファイルが中心で、Claudeへの指示書（プロンプト）＋参照ファイル＋スクリプトで構成されています。

my-skill/
├── SKILL.md              # Claudeへの指示書（核）
├── references/           # 参照ドキュメント
├── scripts/              # ビルドスクリプト等
└── assets/               # ロゴ、画像など

スキルの検索・インストールは npx skills コマンドで行えます。ただ、毎回ターミナルで npx skills find ... と打つのは面倒です。

便利なのが find-skills というスキル自体をインストールしてしまう方法です。

# まずfind-skillsスキルをインストール
npx skills add https://github.com/vercel-labs/skills --skill find-skills

これを入れておくと、Claude Codeの対話の中で「〇〇のスキルある？」と聞くだけでスキルを検索してくれます。ターミナルに戻る必要がありません。

今回のpptxスキルも、find-skillsで見つけてインストールしました。

# pptxスキルのインストール
npx skills add https://github.com/anthropics/skills --skill pptx

今回はこの仕組みを使って、公式のpptxスキルをフォークし、自社用にカスタマイズしました。

ベーススキルの選定

なぜpptxスキルを選んだか

Anthropic公式のpptxスキルは、HTMLでスライドをデザインして、それをPowerPointに変換するというワークフローを持っています。

HTMLファイル → html2pptx.js → .pptx

この「HTMLでレイアウトを書く」アプローチが、カスタマイズのしやすさという点でかなり良かったです。HTML/CSSなら、ブランドカラーやフォントの指定が直感的に書けます。

pptxスキルの構成を調べる

公式pptxスキルのファイル構成はこんな感じです。

pptx/
├── SKILL.md               # メインの指示書
├── html2pptx.md           # html2pptx の使い方ドキュメント
├── ooxml.md               # OOXML直接編集の解説
├── ooxml/                 # XMLスキーマ、バリデーションスクリプト
│   ├── schemas/           # ISO OOXML スキーマ群
│   └── scripts/           # pack/unpack/validate
└── scripts/
    ├── html2pptx.js       # HTMLをPPTXに変換するコアスクリプト
    ├── thumbnail.py       # サムネイル生成
    ├── inventory.py       # テンプレート解析
    ├── rearrange.py       # スライド並べ替え
    └── replace.py         # テキスト置換

このスキルは汎用的に設計されていて、「新規作成」「テンプレートベース作成」「既存ファイル編集」の3つのワークフローをカバーしています。

自社提案書スキルに必要なのは**「新規作成」だけ**。なので、テンプレート操作やXML編集まわりは不要と判断しました。

カスタマイズの実践

何を残して何を削るか

まず、ベーススキルとの差分を設計しました。

残すもの（pptxスキルから継承）:

• html2pptx.js — HTMLをPPTXに変換するコアスクリプト。これが肝
• pptxgenjs — PowerPoint生成のnpmライブラリ
• スライドサイズ（720pt × 405pt、16:9）

削るもの:

• 既存PPTXの編集ワークフロー（unpack/pack/validate）
• テンプレートベース作成（rearrange.py, inventory.py, replace.py）
• サムネイル検証（thumbnail.py）
• 汎用カラーパレット18種

追加するもの:

• JQITブランドのデザインシステム
• 8つのレイアウトテンプレート（HTML）
• ロゴ自動挿入
• AI画像生成連携（Gemini API）
• 対話的ワークフロー

SKILL.mdの書き方

SKILL.md はスキルの核になるファイルです。Claudeがこのファイルを読んで「何をすべきか」を理解します。

ヘッダーのメタデータで、スキルの名前と発火条件を定義します。

---
name: jqit-proposal
description: JQIT提案書PPTX生成。「提案書を作って」「JQITの資料」「プレゼン作成」「スライド作成」「提案資料」などで発火
---

description に書いたキーワードでスキルが自動的に呼び出されます。「提案書を作って」と言うだけで、このスキルが起動する仕組みです。

デザインシステムの組み込み

ブランドの統一感を出すために、カラーパレット・フォント・共通パーツを SKILL.md 内に定義しました。

### カラーパレット（6色）

| 名前 | HEX | 用途 |
|------|-----|------|
| Navy (Primary) | #1C2833 | テキスト主色 |
| Teal (Secondary) | #277884 | カード上ボーダー、ラベル色 |
| JQIT Red (Accent) | #D32F2F | サイドバー、強調カード |
| Light Gray (BG) | #FAFBFC | 背景色 |
| Mid Gray (Text) | #5D6D7E | 本文テキスト |
| Muted Gray | #AAB7B8 | メタ情報、日付 |

ポイントは、色の用途まで書くこと。「このNavyはどこに使うのか」をClaude自身が判断できるようにしています。

全スライドに共通で入るサイドバーとヘッダーバーのHTMLも、具体的なコードで指定しました。

<!-- JQIT赤サイドバー（全スライド共通） -->
<div style="position: absolute; left: 0; top: 0;
            width: 8pt; height: 405pt;
            background: #D32F2F;"></div>

こうしておくと、Claudeがスライドを生成するときに毎回このパーツを含めてくれます。

レイアウトテンプレートの作成

references/layouts.md に8つのレイアウトパターンを定義しました。

レイアウト	用途
title	表紙・中扉
card-list	サマリー、会社紹介
card-grid-2x2	4項目の並列比較
card-3col	3機能/3ポイントの説明
flow-diagram	プロセス・システム構成
dark-checklist	デモ紹介、次のステップ
two-column	比較/対照
timeline	スケジュール・ロードマップ

各テンプレートは {{プレースホルダー}} 形式で書いてあり、Claudeが内容を差し替えて使います。

たとえばタイトルスライドはこんな感じです。

<!-- メインタイトル -->
<div style="position: absolute; left: 40pt; top: 100pt; width: 640pt;">
  <h1 style="color: #1C2833; font-size: 30pt; font-weight: bold;">
    {{タイトル}}
  </h1>
</div>

<!-- アクセントライン -->
<div style="position: absolute; left: 40pt; top: 195pt;
            width: 200pt; height: 3pt; background: #D32F2F;"></div>

<!-- サブタイトル -->
<div style="position: absolute; left: 40pt; top: 215pt;">
  <p style="color: #5D6D7E; font-size: 14pt;">{{サブタイトル}}</p>
</div>

8パターンあれば、たいていの提案書はカバーできます。実際に使ってみて足りなければ追加すればいい、という割り切りです。

ビルドスクリプトのテンプレート化

pptxスキルの html2pptx.js は、document-skillsプラグインのキャッシュフォルダに入っています。パスにハッシュ値が含まれるため、動的にパスを解決するヘルパーを書きました。

function resolveHtml2pptx() {
  const baseDir = '~/.claude/plugins/cache/anthropic-agent-skills/document-skills';
  const entries = fs.readdirSync(baseDir);
  for (const entry of entries) {
    const candidate = path.join(baseDir, entry, 'skills/pptx/scripts/html2pptx');
    try {
      require.resolve(candidate);
      return require(candidate);
    } catch { /* try next */ }
  }
  throw new Error('html2pptx not found');
}

これを scripts/build-pptx-template.js として用意しておき、提案書ごとにスライドリストを書き換えるだけでビルドできるようにしました。

AI画像生成の統合

ここが一番面白かったところです。Gemini API（Nano Banana Pro）を使って、スライド用の画像を自動生成する機能を組み込みました。

なぜ画像生成を入れたか

テキストとHTML/CSSだけでも見た目のいいスライドは作れます。ただ、提案書にはテキストだけでは表現しづらい要素がたくさんあります。フロー図、グラフ、ワークフロー、比較表......。これらをHTML/CSSで頑張って組むこともできますが、複雑なレイアウトになると崩れやすく、調整コストが高い。

Nano Banana Proはテキスト描画が正確なので、ラベル付きのグラフやフロー図をそのまま画像として生成できます。ドーナツチャートで費用内訳を見せたり、3段階のワークフロー図を描いたり、ガントチャート風のスケジュールを作ったり。「図解が欲しいスライド」にサッと差し込めるのが強みです。

ICSフレームワーク

画像生成のプロンプトにはICSフレームワークというルールを設けました。

• I（Image type）: 画像の種類を具体的に指定
• C（Content）: スライドのテキストデータを構造的に渡す
• S（Style）: ブランドカラー・フォーマットの共通指定

プロンプトのコツ

試行錯誤で分かった、いくつかのコツを紹介します。

1. テキストラベルは積極的に含める

Nano Banana Proはテキスト描画が得意です。「テキストなし」と指定するより、ラベルや数値を含めた方が良い結果になりました。唯一の例外は表紙のヒーロー画像で、これだけは「No text, no labels」にしています（テキストはpptxgenjs側で描画するため）。

2. 抽象的な指示は品質が落ちる

# ダメな例
「ビジネスっぽいフロー図を作って」

# 良い例
「3段階のフロー図。左から右に: Step 1 "データ収集"（アンケート, ログ連携）→
Step 2 "AI分析"（感情分析, パターン検出）→ Step 3 "通知"（アラート, レポート）」

具体的なデータと配置指示を渡すほど、望みどおりの画像が出てきます。

3. コンサルファーム風のスタイル参照が効く

プロンプトの末尾に "Clean flowchart style, similar to McKinsey presentation diagrams" と添えると、プロフェッショナルな仕上がりになりやすかったです。

4. プロンプトは英語で書く

日本語のラベルを含む画像でも、プロンプト自体は英語で書いた方が品質が高かったです。

5. 共通スタイルブロックで統一感を出す

全画像のプロンプト末尾に同じスタイル指定を付与しています。

Visual Style:
- Color palette: Dark Navy (#1C2833), Teal (#277884),
  Accent Red (#D32F2F), Light Gray (#FAFBFC), White (#FFFFFF).
- Modern, clean, professional flat design.
- Format: Landscape, 16:9 aspect ratio, 4K resolution.
- Typography: Clean sans-serif font. All text labels must be clearly legible.
- No watermarks, no stock photo elements, no decorative borders.

実際のワークフロー — 壁打ちから資料化まで

このスキルで一番こだわったのは、いきなりスライドを作らないワークフローです。

1. 「提案書を作って」と入力
2. Claudeが対話でヒアリング（誰に？何を？どの順番で？）
3. スライド構成を提案 → ユーザーと壁打ちで調整
4. 構成が固まったら、レイアウトテンプレートを選択
5. 各スライドのHTMLを /tmp/pptx-slides/ に生成
6. （画像あり）Gemini APIで画像を生成
7. build-pptx.js でHTMLをPPTXに変換
8. /tmp/proposal.pptx が完成

ステップ2〜3の壁打ちフェーズが肝です。「この提案、先にメリットを見せるべきか、課題認識から入るべきか」「スケジュールは必要か」といったやり取りを、Claude Code上で対話しながら詰めていきます。

ここがGoogleスライドやCanvaのAI機能との違いです。あちらは「生成→修正→再生成」のループになりがちですが、Claude CodeやCoworkなら構成の壁打ちと資料生成が同じコンテキスト内で完結します。壁打ちで決めた構成の意図がそのまま資料に反映されるので、「なんか違う」が起きにくい。

構成が固まってからの生成は数分で終わります。

振り返り

やってみて分かったことをまとめます。

AI資料作成は「構成ファースト」が9割。さくっと作れる時代だからこそ、いきなり生成に飛びつくと手戻りで時間を溶かします。壁打ちで構成を固めてから資料化する。このフローをスキルのワークフローに組み込んだことで、「見た目はいいけど意図がズレてる」問題がだいぶ減りました。Claude CodeやCoworkなら構成検討と資料生成が同じツール内で完結するので、文脈が途切れないのが大きいです。

スキルのカスタマイズは「何を削るか」が大事。pptxスキルは汎用的で高機能ですが、自社提案書には不要な機能も多かった。必要な部分だけ残して、ブランド固有の設計を足す、という引き算のアプローチがうまくいきました。

デザインシステムは「用途まで書く」のがコツ。色のHEX値だけ書いても、Claudeは「どこに使えばいいか」を迷います。「Navyはテキスト主色」「Tealはカード上ボーダーとラベル」のように、用途を明記しておくと安定した出力になります。

AI画像生成のプロンプトは、具体性がすべて。抽象的な指示では期待した画像が出ません。テキストデータ、レイアウト指示、スタイル指定の3点を構造的に渡す（ICSフレームワーク）ことで、再現性のある画像生成ができるようになりました。

次は、生成したPPTXのサムネイル自動検証や、テンプレートバリエーションの追加にも挑戦してみる予定です。

関連記事

• Claude Codeのskills機能でブログ執筆を自動化してみた — skills機能の基本
• Claude Codeで動画マニュアルを自動生成してみた — Playwrightスキルの活用例