TL;DR
- Claude Design には PPTX を出力する仕組みがある。ただし 「テンプレートHTML +
CLAUDE.md」 がプロジェクト内にあると質が安定する - 問題は「そもそもテンプレが無い」状態。そこを埋めるために、PptxGenJS ベースの生成スクリプトを Claude にまとめて書かせる
- 結果、
theme.js/generate-template.js/ HTML テンプレ一式が手に入り、以降は 「会社紹介を作って」だけでスライドが量産できる
0. はじめに
本記事は、以下の 2 本の記事を読んだことが動機です。
以下記事で前提としているスライドを生成するためのテンプレートをどのように生成すれば良いかを考えました。
先に両方読んでもらえると流れが掴みやすいです。
- Claude Designでクラスメソッド社内用のテンプレートを作ってみた（るおんさん）
- AIでスライド作成！Anthropic公式pptxスキル＋PptxGenJSテンプレート活用術（k.ueharaさん）
それぞれが扱っている領域と、本記事が埋めようとしている領域は次のとおりです。
| 記事 | カバー範囲 |
|---|---|
| 記事A（るおんさん） | すでにある HTML テンプレを Claude Design に登録して使う |
| 記事B（k.ueharaさん） | PptxGenJS テンプレを pptx スキル＋Cursor/Claude Code で使う |
| 本記事 | HTML テンプレが無い状態から、HTML テンプレ自体を Claude Design 内で生み出す。その後は記事A のフローに合流する |
つまり本記事は「記事Bのやり方で土台を作って、記事Aのレールに乗せる」というブリッジ手法の話です。
1. なぜこのフローを考えたのか
Claude に「会社紹介のパワポ作って」と頼むと、毎回デザインがブレます。一方で PptxGenJS を毎回手書きするのは辛い。両方の課題を、テンプレートを資産化する ことで解決したい——というのがモチベーションです。
ただ、「すでにある HTML テンプレを登録する」フローは、テンプレが存在することが前提です。手元に何も無い状態からどう始めるか、という前段のドキュメントは意外と少ないと感じました。
そこで今回は、プロンプト1本で HTML テンプレと PPTX 生成スクリプトを同時に出させるやり方を試しました。
2. Claude Design で PPTX が出力できる仕組み
Claude Design には PptxGenJS 相当の Skill（PPTX エクスポート機能）が組み込まれています。Claude Design 上で組んだ HTML スライドを、ネイティブな PowerPoint オブジェクト（編集可能なテキスト・図形・画像）として .pptx に書き出してくれる仕組みです。
このとき重要なのが、
- 各スライドの HTML テンプレート
- その用途を記述した
CLAUDE.md（プロジェクト常駐の指示書）
の 2 点。これらがプロジェクト内にあると、Claude は勝手に色やフォントをでっち上げず、雛形ベースで組み立ててくれます。
3. 課題：そもそもテンプレートがない
いきなり 18 枚分の HTML テンプレを手書きするのは現実的ではないし、Claude にゼロから「いい感じのテンプレ作って」と投げても再現性が低い。
ここで効いてくるのが、PptxGenJS アプローチです。
PptxGenJS 用に「カラー / フォント / マージン / レイアウト 18 種を厳密に定義した仕様書」を書いて Claude に渡すと、
theme.js（デザイン定数）generate-template.js（PPTX 生成スクリプト）TEMPLATE.md（仕様書）
が一気に手に入ります。さらに 同じ仕様で HTML/CSS 版（<deck-stage> ベース）も生成させれば、Claude Design にそのまま置けるテンプレ一式が完成します。
つまり、
PptxGenJS テンプレ作成術を、HTML テンプレの初期生成に流用する
というのが本記事のキモです。
4. 全体フロー
5 ステップで完結します。
| # | アクター | ステップ | 主な成果物 |
|---|---|---|---|
| 1 | USER | プロンプト入力 | 詳細仕様プロンプト |
| 2 | CLAUDE | PptxGenJS 関連ファイル作成 | mypage-template.pptx |
| 3 | CLAUDE | HTML/CSS 版テンプレート作成 | 1920×1080 HTML デッキ |
| 4 | USER | Claude へ仕様を伝達 | コンテンツ仕様書 |
| 5 | CLAUDE | スライド作成（実コンテンツ流し込み） | 完成 HTML デッキ |
ステップ 1〜3 が「テンプレ生成フェーズ」、ステップ 4〜5 が「コンテンツ流し込みフェーズ」です。1〜3 は 一度やれば再利用可能 なので、実質的なコストはステップ 4〜5 だけになります。
5. 実践：テンプレート作成プロンプト
ステップ 1 で投げるプロンプトの骨格はこんな感じです
プロンプト
あなたはPptxGenJSとプレゼンテーションデザインに精通した熟練エンジニアです。 以下の仕様に従って、再利用可能なPowerPointテンプレートを生成するプロジェクトを作成してください。 ## 成果物 以下の3ファイルを生成してください： 1. **`theme.js`** — デザインシステムの定数定義 2. **`generate-template.js`** — PptxGenJSで各スライドレイアウトを定義する生成スクリプト 3. **`TEMPLATE.md`** — テンプレートの仕様書（レイアウト一覧・カラー・フォント・使い方） 実行すると `mypage-template.pptx` が出力される構成にしてください。 --- ## デザインシステム ### ブランドカラー - ブランドブルー: `#2C67E5` - ブランドレッド: `#DF3756` ### グレースケール - メインテキスト（GRAY_MEDIUM）: `#434343` - サブテキスト（GRAY_LIGHT）: `#595959` - 見出し用ダーク（GRAY_DARK）: `#262626` - ミュート（GRAY_LIGHTEST）: `#999999` ### 背景 - 標準背景: `#FFFFFF` - アクセント背景: `#F3F3F3` - ボーダー: `#D9D9D9` ### フォント - 見出し・本文: `Noto Sans JP`（太字は700ウェイト） - コード: `Consolas` ### サイズ（pt） - タイトル: 36pt / H2: 28pt / H3: 24pt / 本文: 16pt - 小テキスト: 14pt / キャプション: 12pt / ノート: 10pt - 統計用大数字: 60pt ### スライドサイズ - 16:9（10インチ × 5.625インチ） ### 共通レイアウト定数 - 左右マージン: 0.6in / 上下マージン: 0.5in - ヘッダー高さ: 0.7in / ヘッダー下線Y: 0.72in - コンテンツ開始Y: 0.95in / フッターY: 5.25in - カラム間ギャップ: 0.3in ### カードシャドウ（共通） - 外側、ぼかし6、オフセット2、角度135度、不透明度12% --- ## 必要なレイアウト（18種類） 各レイアウトは以下の用途・構成で作成してください。 すべてのプレースホルダー文言は `XXXX` プレフィックスを付け、日本語で記述すること。 | # | レイアウト名 | 用途 | 構成 | |---|-----------|------|------| | 1 | タイトル | 表紙 | ロゴ中央 + 大タイトル + サブタイトル + 区切り線 + 日付・発表者（背景: グレー） | | 2 | セクション区切り | 章の冒頭 | 左に青の縦アクセントバー + セクションタイトル + 説明（背景: グレー） | | 3 | 標準コンテンツ | 一般的な箇条書き | ヘッダーバー + 見出し + 4項目の箇条書き | | 4 | ヘッダーなし | 情報量の多いスライド | フルコンテンツ領域（ヘッダーバーなし）+ 大タイトル + 段落 + 箇条書き | | 5 | 画像中央 | 図表中心のスライド | ヘッダー + 中央に画像プレースホルダー（破線枠） + 出典 | | 6 | テキスト＋図（右） | 説明 + 図 | 左50%テキスト / 右50%グレー画像エリア（縦フルブリード） | | 7 | テキスト＋図（左） | 図 + 説明 | レイアウト6の左右反転 | | 8 | 2カラム | 並列の2項目 | 縦線で分割した2列、各列に見出し + 箇条書き | | 9 | 3カラム | 並列の3項目 | 縦線で分割した3列、各列に見出し + 箇条書き | | 10 | 主要指標 | KPI・数値強調 | 3枚のカード横並び（青上端アクセント + 円形アイコン + 大数字 + ラベル + 影） | | 11 | プロセス・手順 | 流れの説明 | 4ステップのタイムライン（番号付き青円 + 接続線 + タイトル + 説明） | | 12 | 比較（Before/After） | 改善前後の対比 | 2枚の大きなカード（左: グレーアクセント / 右: 青アクセント）、各カードに箇条書き | | 13 | アイコングリッド | 機能・特徴一覧 | 2行×3列のグリッド、各セルに円形アイコン + タイトル + 短い説明 | | 14 | 引用 | キーメッセージ | 引用符マーク + 大きなイタリック引用文 + 青の短い線 + 発言者情報（背景: グレー） | | 15 | アジェンダ | 目次 | 大見出し + 番号付き円バッジの5項目リスト（各項目下に区切り線） | | 16 | テーブル | データ表 | ヘッダーバー + 4列5行のデータテーブル（ヘッダー行はグレー背景） + 出典 | | 17 | 青アクセント | 強調セクション | 青背景に白テキストで大見出し + 説明文 | | 18 | クロージング | 結びのスライド | ロゴ + 「ご清聴ありがとうございました」 + 区切り線 + 連絡先（背景: グレー） | ### 共通要素 - ヘッダーバー（タイトル + 下に1pxの黒線）はレイアウト3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 16で使用 - ページ番号は右上、`#999999`、12pt（ヘッダーバー使用スライドのみ） - フッター注釈はレイアウト5, 16で使用 --- ## 実装要件 ### theme.js - すべての定数を `module.exports` でエクスポート - カラーは `#` なしの6文字HEX文字列（PptxGenJS要件） - `makeShadow()` `makeCardShadow()` 関数を提供（毎回新オブジェクトを返す。PptxGenJSのバグ回避） ### generate-template.js - `pres.layout = "LAYOUT_16x9"` を使用 - アイコンは `react-icons/fa` から取得し、SVGをPNGに変換して埋め込む（`sharp`使用） - ロゴはインラインSVGをPNG変換して使用（差し替え可能なサンプル） - 各スライドはコメント付きの独立ブロックで定義（`// ===== SLIDE N: 名前 =====`） - ページ番号カウンタを管理 - 出力先: `path.join(__dirname, "mypage-template.pptx")` - すべての座標・サイズは theme.js の定数から計算（マジックナンバー禁止） ### TEMPLATE.md - ファイル構成・レイアウト一覧表・デザインシステム表・使い方（コード例含む） --- ## コーディングスタイル - CommonJS（`require` / `module.exports`） - 関数は小さく分割（`addHeaderBar`, `addPageNumber`, `addFooterNote` など共通ヘルパー） - 座標は左上原点でインチ単位 - コメントは日本語OK --- ## 出力時の注意 - 完成したらREADMEで実行方法を明示（`node generate-template.js`） - `package.json` の依存パッケージ（`pptxgenjs`, `react`, `react-dom`, `react-icons`, `sharp`）も併せて提示 さらに、生成した generate-template.js の各レイアウトをHTML/CSSで再現したテンプレート（slides/XX-*.html + styles.css + slide-template.html）も同時に生成してください。<deck-stage> Web Componentで包む構成とし、1920×1080固定サイズ、Noto Sans JPのみ使用してください。
ポイントは 4 つ。
- レイアウトを 18 種類など具体的に列挙（「適当に」ではなく型を確定させる）
- カラー / フォント / マージンを数値で指定
- 「マジックナンバー禁止」など実装規約も書く
- PPTX と HTML の両方を一括で要求する
これで theme.js / generate-template.js / TEMPLATE.md / slide-template.html / styles.css / slides/01〜18.html が一気に出てきます。
6. 実践：スライド作成プロンプト
テンプレが揃ったら、スライドを作成します。
このテンプレートを使って、Claude Mythosについてスライドを作って。
「どのテンプレートを何枚目で使うか」までは指示しなくてもよく、Claude が文脈から雛形を選んでくれます。
7. 出力物の品質
実際に作った会社紹介デッキは、テンプレ流用ぶんが効いて 見出し位置・余白・カラーのブレがほぼゼロでした。手で直したのは：
- 数字（売上・社員数など）の差し替え
- 一部スライドのコピー調整
- 22px だった補助テキストを 24px に上げる（バリデータが指摘してくれる）
くらい。レイアウト調整に時間を取られないので、「内容を考える」だけに集中できることができます。
8. ハマりどころ・改善のヒント
実際にやって踏んだ罠です。
- フォントサイズが小さすぎる場合（24px 未満） → Claude Design のバリデータが指摘してくれる。プロジェクション用途なので 24px 以上を守る
- 文字が script-rendered になると後から編集しづらい → React や babel でループ生成すると、Claude Design の Edit 機能で直接編集できなくなる。静的 HTML で書くのが正解
<deck-stage>を使うとスケーリング・キーボードナビが無料 → 1920×1080 固定でレイアウトしておけば、ブラウザサイズに合わせて自動レターボックス- 会社固有の用語・数値はプロンプトに必ず含める → ここを省くと一般的な表現に引きずられて固有名詞が消える
9. CLAUDE.md に何を書くか（再利用のキモ）
ステップ 3 のあと、プロジェクトに CLAUDE.md を置いて、雛形の使い方を明文化しておくと、以降のスライド作成プロンプトが激的に短くて済みます。
最低限書いておくと効くのはこのあたり。
## このプロジェクトのルール ### 必ず雛形ベースで組む - 新しい色やフォントを発明しない - `slides/01-title.html` 〜 `slides/18-closing.html` をコピー＆編集する - レイアウトに迷ったら TEMPLATE.md のレイアウト一覧から選ぶ ### ブランドカラー - ブランドブルー: #2C67E5 - ブランドレッド: #DF3756 - グレー系は theme.js / styles.css の変数を使う ### フォント - 見出し・本文ともに Noto Sans JP のみ - 太字は 700 ウェイト ### 執筆ルール - スライドタイトルは34文字以内 - 箇条書きは1スライド最大4項目 - 24px 未満のフォントサイズは禁止 ### レイアウト選択ガイド - 表紙 → 01-title - 章扉 → 02-section - 並列3項目 → 09-3col - KPI強調 → 10-stats - 流れ・手順 → 11-process - Before/After → 12-compare （中略）
ステップ 1〜3 で生成された雛形に対して書き起こすぶんだけが今回の追加作業です。
10. まとめ
- HTML テンプレ +
CLAUDE.md= 自分専用のパワポ生成エンジン - ただし テンプレが無いところからどう作るか が抜けがちな論点だった
- PptxGenJS 仕様書を Claude に渡して PPTX 生成スクリプトと HTML テンプレを同時に出させる ことで、その前段が埋まる
- 一度作れば、社内資料・営業資料・採用資料に展開可能。初稿は数分、調整も含めて半日あれば 20 枚クラスのデッキが立ち上がる
PptxGenJS は書きません。仕様書だけ書いて、あとは Claude Design に任せる。 これが今回の結論です。
