Claude Codeでプレゼン資料を自動生成する方法｜HTML→PDF変換で営業資料・提案書を量産する

Q: 画像やロゴはHTMLスライドに入れられますか？

はい、通常のHTMLと同じ方法で画像を埋め込めます。ローカルファイルのパス指定（<img src="./logo.png">）、またはURLでの読み込みが可能です。PDF変換時にも画像は正しくレンダリングされます。ただし、外部URLの画像を使う場合は、PDF変換時にネットワークアクセスが必要になる点に注意してください。

Q: 生成したPDFの品質はPowerPointと比べてどうですか？

ヘッドレスブラウザでレンダリングするため、画面表示とほぼ同一の品質でPDFが出力されます。printBackground: trueを指定すれば背景色やグラデーションも再現されます。テキストはPDF内でコピー可能なベクターテキストとして埋め込まれるため、PowerPointからPDFに変換した場合と遜色ありません。

Q: Chart.jsのグラフはPDF変換後も表示されますか？

はい。waitUntil: 'networkidle0'（Puppeteer）またはwaitUntil: 'networkidle'（Playwright）を指定することで、Chart.jsの描画が完了してからPDF変換が実行されます。JavaScriptで動的に描画されるグラフも、PDF上では静止画として正確にレンダリングされます。

2026年4月11日
最終更新: 2026年5月5日

この記事の結論

Claude CodeはHTMLスライドをPuppeteer/PlaywrightでPDF変換するワークフローで、デザイナー不要の営業資料・提案書量産を実現します。テンプレートHTMLに顧客名・数値・グラフを差し替えるだけで個別資料を量産でき、PowerPoint作業時間を90%以上削減できます。

ブログ目次

記事の内容を、そのまま実務に落とし込みたい方向け

HubSpot導入、AI活用、CRM整備、業務効率化までをまとめて支援しています。記事で気になったテーマを、そのまま相談ベースで整理できます。

サービス概要を見る無料で相談する

本記事は「Claude Code実践ガイド｜AI開発の生産性を高める運用設計」シリーズの一部です。

この記事でわかること

Claude Codeを使ったHTMLスライド生成からPDF変換までの具体的な手順と、実務で資料を量産するためのワークフローを解説します。

HTMLスライドの基本構造とCSSによるデザイン制御の方法 — CSSだけでフォント・配色・レイアウトを統一し、ブランドガイドラインに沿った資料を再現できます
Claude Codeへの指示の出し方と生成されるHTMLの構造 — 「提案書を作って」の一言から、セクション分割・グラフ埋め込みまで含むスライドが生成されます
Puppeteer/PlaywrightによるPDF変換の具体的なコマンドとオプション — ヘッドレスブラウザのpage.pdf() APIで、A4横向き・余白設定・ページ番号追加まで制御できます
営業資料・月次レポートの量産ワークフロー — テンプレートHTMLをベースに、顧客名・数値・グラフを差し替えるだけで個別資料を量産する仕組みを構築できます
PowerPoint/Google Slidesとの使い分け — すべてをHTMLに置き換える必要はありません。量産性が求められる定型資料でこそHTMLスライドが真価を発揮します

対象読者: 営業部長・マーケティング担当・PM

なぜHTMLスライドなのか

プレゼン資料の作成ツールといえば、PowerPointやGoogle Slidesが定番です。しかし、これらのツールには「量産」という観点で明確な限界があります。

PowerPointで顧客ごとにカスタマイズした提案書を作るとき、テンプレートを開いてロゴを差し替え、数値を書き換え、グラフを更新し、レイアウトを微調整する作業が毎回発生します。月に10社への提案があれば、それだけで数十時間が消えます。

HTMLスライドは、この問題をコードベースのアプローチで解決します。

HTMLスライドとPowerPointの比較

観点	PowerPoint / Google Slides	HTMLスライド + PDF変換
作成速度（初回）	1〜3時間（手動レイアウト）	5〜15分（Claude Codeで自動生成）
カスタマイズ	手動で都度書き換え	変数を差し替えるだけで自動反映
デザイン統一	テンプレート依存、崩れやすい	CSSで厳密に制御、崩れない
バージョン管理	ファイル名に「v2_最終_確定版」	Gitで変更履歴を完全管理
グラフ・図表	手動でExcelから貼り付け	Chart.js・SVGで動的に生成
量産性	低い（1部ずつ手作業）	高い（ループ処理で一括生成）
配布形式	.pptxまたは共有リンク	PDF（環境依存なし）

ポイント: HTMLスライドは「毎回ゼロから作るクリエイティブな資料」ではなく、「構造が決まっていて、数値や顧客名を差し替えて量産する定型資料」に最適です。営業提案書、月次報告書、プロジェクト進捗レポートなどがその代表例です。

Claude Codeでの基本的な生成フロー

Claude Codeにプレゼン資料の作成を指示すると、HTMLファイルとしてスライドが生成されます。実際の流れを見てみましょう。

Step 1: Claude Codeに指示する

Claude Codeのターミナルで以下のように指示します。

提案書を作成してください。
- 対象: 株式会社〇〇 マーケティング部
- テーマ: CRM導入による営業効率化
- ページ構成: 表紙、課題整理、提案概要、導入ステップ、期待効果、費用、会社概要
- デザイン: 青基調、A4横向き

Claude Codeはこの指示を解釈し、1枚のHTMLファイルとして複数ページのスライドを生成します。

Step 2: 生成されるHTMLの構造

Claude Codeが生成するHTMLスライドは、以下のような構造になります。

CRM導入による営業効率化のご提案

株式会社〇〇マーケティング部御中

現状の課題

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Noto Sans JP', sans-serif; }

    .slide {
      width: 1280px;
      height: 720px;
      padding: 60px;
      page-break-after: always;
      position: relative;
    }

    .slide-title {
      font-size: 36px;
      font-weight: 700;
      color: #2563EB;
      margin-bottom: 32px;
    }

    .slide-body {
      font-size: 20px;
      line-height: 1.8;
      color: #1a1a1a;
    }
  </style>
</head>
<body>


  <!-- 以降のスライド -->
</body>
</html>

各スライドは

で区切られ、page-break-after: alwaysでPDF変換時にページが分かれます。CSSでフォント・配色・レイアウトが制御されているため、デザインの統一性が自動的に担保されます。

Step 3: ブラウザで確認する

生成されたHTMLファイルをブラウザで開いて表示を確認します。

open -a "Google Chrome" ./proposal.html

ブラウザ上でスライドの見た目を確認し、必要に応じてClaude Codeに修正を指示します。「3ページ目のグラフの色を変えて」「フッターに日付を追加して」といった微調整も、自然言語で指示するだけで反映されます。

Step 4: PDF化する

確認が済んだら、PDF変換に進みます（次のセクションで詳しく解説します）。

Puppeteer/PlaywrightでPDF変換する

HTMLスライドをPDFに変換するには、ヘッドレスブラウザ（画面表示なしで動作するブラウザ）を使います。Puppeteer（Googleが開発）またはPlaywright（Microsoftが開発）のどちらでも実現できます。

Puppeteerでの変換スクリプト

const puppeteer = require('puppeteer');
const path = require('path');

async function htmlToPdf(inputHtml, outputPdf) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // HTMLファイルを読み込み
  const filePath = path.resolve(inputHtml);
  await page.goto(`file://${filePath}`, { waitUntil: 'networkidle0' });

  // PDF出力
  await page.pdf({
    path: outputPdf,
    width: '1280px',
    height: '720px',
    printBackground: true,
    margin: { top: 0, right: 0, bottom: 0, left: 0 }
  });

  await browser.close();
  console.log(`PDF生成完了: ${outputPdf}`);
}

htmlToPdf('./proposal.html', './proposal.pdf');

Playwrightでの変換スクリプト

const { chromium } = require('playwright');
const path = require('path');

async function htmlToPdf(inputHtml, outputPdf) {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  const filePath = path.resolve(inputHtml);
  await page.goto(`file://${filePath}`, { waitUntil: 'networkidle' });

  await page.pdf({
    path: outputPdf,
    width: '1280px',
    height: '720px',
    printBackground: true,
    margin: { top: 0, right: 0, bottom: 0, left: 0 }
  });

  await browser.close();
  console.log(`PDF生成完了: ${outputPdf}`);
}

htmlToPdf('./proposal.html', './proposal.pdf');

PDF変換オプションの詳細

page.pdf() APIで指定できる主要なオプションは以下のとおりです。

オプション	説明	設定例
path	出力ファイルパス	`'./output.pdf'`
width / height	ページサイズ	`'1280px'` / `'720px'`（16:9）
format	定型サイズ	`'A4'`（width/heightと排他）
landscape	横向き	`true`（A4横向きの場合）
printBackground	背景色・画像を印刷	`true`（必須。falseだと白背景になる）
margin	余白	`{ top: '0', right: '0', bottom: '0', left: '0' }`
displayHeaderFooter	ヘッダー・フッター	`true`
headerTemplate	ヘッダーHTML	`'ページ '`
footerTemplate	フッターHTML	`'Confidential '`

ポイント: printBackground: true は必ず指定してください。これを忘れると、CSSで設定した背景色やグラデーションがすべて消えた状態でPDFが出力されます。HTMLスライドでは背景色がデザインの重要な要素になるため、この設定は必須です。

実務での活用パターン

パターン1: 顧客ごとの営業提案書

営業提案書のテンプレートHTMLを1つ用意し、顧客ごとに情報を差し替えて生成するパターンです。

以下のテンプレートを使って、株式会社ABCマーケティング向けの提案書を作成してください。
- 業種: 不動産
- 課題: リード管理が属人化している
- 提案: HubSpot CRM導入
- 期待効果: リード対応速度50%改善

Claude Codeがテンプレートの構造を維持しながら、顧客固有の情報を埋め込んだHTMLを生成します。同じ指示の顧客名と課題を変えるだけで、次の提案書も数分で完成します。

パターン2: 月次レポートの自動生成

CRMやアナリティクスのデータをもとに、月次報告書を自動生成するパターンです。

先月のマーケティング実績をスライドにまとめてください。
- PV: 45,230（前月比+12%）
- リード獲得: 128件（前月比+8%）
- MQL転換率: 23%
- 商談創出: 29件
- Chart.jsで折れ線グラフを入れてください

Chart.jsを使ったグラフもHTMLに直接埋め込めるため、Excelでグラフを作ってスクリーンショットを貼り付けるといった作業が不要になります。

パターン3: プロジェクト進捗報告

社内向けのプロジェクト進捗報告書も、同じ仕組みで量産できます。タスクの進捗率、マイルストーンの達成状況、リスク一覧などを構造化したデータとして渡せば、Claude Codeが視覚的に整理されたスライドを生成します。

SVG・Chart.jsでグラフを埋め込む

HTMLスライドの強みの一つが、グラフや図表をコードで生成できることです。PowerPointのようにExcelからコピー&ペーストする必要がなく、データを変えればグラフも自動的に更新されます。

Chart.jsによるグラフ埋め込み

月次KPI推移

SVGによる図解

プロセスフローやアーキテクチャ図は、SVGで直接描画できます。SVGはHTMLに直接埋め込めるベクター画像形式で、拡大しても劣化しません。

導入ステップ

Claude Codeに「導入ステップを4段階のフロー図で入れて」と指示するだけで、このようなSVGが自動生成されます。

テンプレート化と量産の仕組み

一度作成したHTMLスライドをテンプレートとして再利用する仕組みを構築すれば、資料作成の効率は飛躍的に向上します。

テンプレートの設計思想

テンプレート化のポイントは、「変わる部分」と「変わらない部分」を明確に分離することです。

変わらない部分: CSS（デザイン）、レイアウト構造、会社ロゴ、フッター
変わる部分: 顧客名、課題、提案内容、数値、グラフデータ

テンプレート proposal_template.html をベースに、以下の情報で提案書を生成してください。
- 顧客名: 株式会社DEFコーポレーション
- 業種: 製造業
- 従業員数: 350名
- 課題: 営業とマーケの情報連携が断絶

Claude Codeはテンプレートの構造を維持しつつ、指定した情報を適切な箇所に埋め込みます。CSSによるデザインは一切変わらないため、毎回同じ品質の資料が出力されます。

量産スクリプトの構成

複数社向けの資料を一括生成する場合は、以下のような構成が有効です。

const companies = [
  { name: '株式会社ABC', industry: '不動産', issue: 'リード管理の属人化' },
  { name: '株式会社DEF', industry: '製造業', issue: '営業とマーケの情報断絶' },
  { name: '株式会社GHI', industry: 'SaaS', issue: '解約率の高止まり' },
];

for (const company of companies) {
  // Claude Codeでテンプレートベースの資料を生成
  // Puppeteerで各HTMLをPDF変換
  await htmlToPdf(
    `./output/${company.name}_proposal.html`,
    `./output/${company.name}_proposal.pdf`
  );
}

この仕組みにより、10社分の提案書でも数分で一括生成が完了します。

運用上の注意点と使い分け

HTMLスライドによる資料生成は強力な手法ですが、すべての場面でPowerPointやGoogle Slidesを置き換えるものではありません。

HTMLスライドが向いている場面

定型フォーマットの資料を量産する場面: 営業提案書、月次レポート、プロジェクト報告書など、構造が決まっていて数値や顧客名を差し替える資料
データドリブンな資料: グラフや図表が中心で、数値の更新頻度が高い資料
バージョン管理が必要な資料: 変更履歴を追跡したい、過去バージョンとの差分を確認したい場合
CI/CDパイプラインに組み込む場合: 定期実行やWebhookトリガーでの自動生成

PowerPoint/Google Slidesが向いている場面

自由度の高いクリエイティブな資料: 写真やイラストを多用するブランディング資料
共同編集が必要な場合: チームメンバーが同時に編集する資料
アニメーションが必要な場合: プレゼン時のアニメーション効果が重要な場面

ポイント: 「量産する定型資料はHTML+PDF、一点物のクリエイティブな資料はPowerPoint/Google Slides」という使い分けが、実務では最も効率的です。

フォントに関する注意

PDF変換時にフォントが正しく表示されるためには、実行環境にフォントがインストールされている必要があります。日本語フォントは、Google FontsのNoto Sans JPをCSSで読み込む方法が最も確実です。ローカル環境でのみ利用可能なフォントを指定すると、CI/CD環境やチームメンバーの環境で文字化けする可能性があります。

よくある質問（FAQ）

Q1. HTMLやCSSの知識がなくても使えますか？

Claude Codeが生成するHTMLは完全に動作するコードなので、自分でHTMLを書く必要はありません。「提案書を作って」と日本語で指示するだけでスライドが生成されます。微調整も「3ページ目の背景色を変えて」のように自然言語で指示できます。ただし、CSSの基本的な概念（フォントサイズ、色、余白など）を理解していると、より的確な指示が出せます。

Q2. 画像やロゴはHTMLスライドに入れられますか？

はい、通常のHTMLと同じ方法で画像を埋め込めます。ローカルファイルのパス指定（<img src="./logo.png">）、またはURLでの読み込みが可能です。PDF変換時にも画像は正しくレンダリングされます。ただし、外部URLの画像を使う場合は、PDF変換時にネットワークアクセスが必要になる点に注意してください。

Q3. PuppeteerとPlaywrightのどちらを使うべきですか？

機能面ではほぼ同等です。すでにプロジェクトでどちらかを使っている場合は、そちらに統一するのが合理的です。新規導入の場合は、Playwrightのほうがマルチブラウザ対応（Chromium, Firefox, WebKit）や自動待機機能が充実しています。PDF変換だけならPuppeteerのほうが軽量です。

Q4. 生成したPDFの品質はPowerPointと比べてどうですか？

ヘッドレスブラウザでレンダリングするため、画面表示とほぼ同一の品質でPDFが出力されます。printBackground: trueを指定すれば背景色やグラデーションも再現されます。テキストはPDF内でコピー可能なベクターテキストとして埋め込まれるため、PowerPointからPDFに変換した場合と遜色ありません。

Q5. Chart.jsのグラフはPDF変換後も表示されますか？

はい。waitUntil: 'networkidle0'（Puppeteer）またはwaitUntil: 'networkidle'（Playwright）を指定することで、Chart.jsの描画が完了してからPDF変換が実行されます。JavaScriptで動的に描画されるグラフも、PDF上では静止画として正確にレンダリングされます。

まとめ

Claude CodeによるHTMLスライド→PDF量産ワークフローの要点をまとめます。

定型資料の量産に最適: 「構造が決まった資料」——営業提案書・月次レポート・顧客向け分析資料——に対してHTMLテンプレートは圧倒的な効率を発揮する
テンプレート設計30分で、以後の作成は毎回5分以内: 顧客名・数値・グラフを差し替えるだけで個別資料を量産できる。PowerPointでの毎回のレイアウト調整から解放される
Puppeteer/PlaywrightのPDF変換が品質の決め手: page.pdf() APIでA4横向き・余白・ページ番号まで制御でき、印刷用資料と画面表示の両方で品質を担保できる
PowerPoint/Google Slidesとの使い分けが重要: すべてをHTMLに置き換える必要はない。量産性が求められる定型資料でこそHTMLスライドが真価を発揮する

まずは毎月繰り返し作っている資料を1つ選んでHTMLテンプレート化することから始めてください。少数精鋭のチームでも、AIの力を借りれば大量の資料を高品質で安定的に量産できます。

株式会社StartLinkは、事業推進に関わる「販売促進」「DXによる業務効率化（ERP/CRM/SFA/MAの導入）」などのご相談を受け付けております。サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、無料のお問い合わせページより、お気軽にご連絡くださいませ。