---
title: Claude CodeでHTMLスライドをPDF化して資料自動生成する方法
description: Claude CodeでHTMLスライドを生成し、Puppeteer/PlaywrightでPDF変換する方法を解説。CSSでデザインを固定し、顧客名や数値だけ差し替えるテンプレート化で、営業提案書や月次レポートを誰が作っても同じ品質にする仕組みを、CRM接続と向かないケースまで含めてまとめました。
image: https://start-link.jp/hubfs/blog/screenshots/generated/kv_claude-code-html-slides-pdf.jpg
---
[%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png?width=130&height=39&name=%E6%9C%80%E7%B5%82Start%20Link%20(500%20x%20150%20px)%20(%E8%83%8C%E6%99%AF%E3%81%82%E3%82%8A).png "StartLink")](https://start-link.jp)
- [会社情報About](https://start-link.jp/about)
- [サービスService](https://start-link.jp/service)
- [プロダクトProducts](https://start-link.jp/sync)
- [YoutubeYoutube](https://start-link.jp/about/sns)
- [ブログBlog](https://start-link.jp/hubspot-ai)
- [導入事例Case studies](https://start-link.jp/case)
- [採用情報Recruit](https://start-link.jp/recruit)
[資料DL](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)
[会社情報](https://start-link.jp/about) [サービス](https://start-link.jp/service) [プロダクト](https://start-link.jp/sync) [Youtube](https://start-link.jp/about/sns) [ブログ](https://start-link.jp/hubspot-ai) [導入事例](https://start-link.jp/case) [採用情報](https://start-link.jp/recruit)
[資料ダウンロード](https://start-link.jp/download/service) [無料相談 →](https://start-link.jp/contact)
- [トップ](https://start-link.jp)
- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [Youtube](https://start-link.jp/about/sns)
- [ブログ](https://start-link.jp/hubspot-ai)
- [Contact](https://start-link.jp/contact)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)
[ホーム](https://start-link.jp) › [ブログ](https://start-link.jp/hubspot-ai) ›[AI活用](https://start-link.jp/hubspot-ai/ai) ›[Claude Code実践](https://start-link.jp/hubspot-ai/ai/claude-code-practice) ›Claude CodeでHTMLスライドをPDF化して資料自動生成する方法
# Claude CodeでHTMLスライドをPDF化して資料自動生成する方法
- 2026年4月11日
- 最終更新: 2026年9月25日
[営業](https://start-link.jp/hubspot-ai/tag/営業)
この記事の結論
Claude CodeでHTMLスライドを生成し、Puppeteer/PlaywrightでPDFに変換すれば、定型資料の作成を仕組みに寄せられます。資料作成を「個人の腕前」から「テンプレートと手順」に置き換えるのが本質です。
ブログ目次
もっと見る ▼
## 記事の内容を、そのまま実務に落とし込みたい方向け
HubSpotゴールドパートナーのStartLinkが、HubSpot導入・AI活用・CRM整備・業務効率化までをまとめて支援しています。記事で気になったテーマを、そのまま相談ベースで整理できます。
[サービス概要を見る](https://start-link.jp/service/hubspot-ai) [無料で相談する](https://start-link.jp/contact)
**Claude CodeでHTMLスライドを生成し、Puppeteer/PlaywrightでPDFに変換すれば、定型資料の作成を仕組みに寄せられます。資料作成を「個人の腕前」から「テンプレートと手順」に置き換えるのが本質です。**
本記事は2026年8月時点の情報です。
「月次レポートの数字を更新したつもりが、3ページ目のグラフだけ先月のままだった」「提案書の担当者が変わるたびに、フォーマットやフォントが変わってしまう」「どれが最新の資料か分からず、ファイル名が『v2\_最終\_確定版』で埋まっていく」——資料作成の現場では、こうした声が繰り返し上がります。
Claude CodeによるHTMLスライド生成とは、プレゼン資料をHTML＋CSSのコードとして記述し、ヘッドレスブラウザ（画面表示なしで動作するブラウザ）でPDFに変換する資料作成の方法です。こうした悩みの多くは資料が作り手の手作業に依存していることが原因で、デザインをCSSに固定し、顧客名や数値だけを差し替える構造にすることで、誰が作っても同じ品質の資料が出る状態をつくれます。
本記事は「[Claude Code実践ガイド｜AI開発の生産性を高める運用設計](https://start-link.jp/hubspot-ai/ai/claude-code-practice)」シリーズの一部です。
## この記事でわかること
Claude Codeを使ったHTMLスライドの生成からPDF変換、テンプレートによる量産の仕組みづくりまでを、設計の考え方とあわせて解説します。資料作成を属人化させず、引き継げる形にしたい方に向けた内容です。
- **HTMLスライドの構造と生成フロー** — CSSでフォント・配色・レイアウトを固定するため、誰が作っても同じ見た目の資料が出ます。指示・生成・確認・変換の4ステップで進め方も扱います。
- **Puppeteer/PlaywrightでのPDF変換** — `page.pdf()` のオプションで、ページサイズ・余白・背景・ヘッダーフッターまで制御する方法を整理します。
- **テンプレート化と量産のワークフロー** — 「変わらない部分」と「変わる部分」を分離し、差し替えだけで個別資料を出す仕組みの設計思想と、引き継げる形に落とす手順をまとめます。
- **CRMのデータと接続する視点** — 提案書がパイプラインのどのステージで必要になるかを整理し、数値の出どころを一本化する考え方を扱います。
- **PowerPoint/Google Slidesとの使い分けと向かないケース** — すべてをHTMLに置き換える必要はありません。判断基準を表で示します。
**対象読者**: 提案書や月次レポートの作成に時間を取られている営業部長・マーケティング担当・PMの方に向けて書いています。最後まで読むと、自社の資料のうちどれをテンプレート化すべきかを見極め、最初の1本を自分で仕組みに落とすところまで進められるようになります。
## 資料作成が属人化する構造と、HTMLスライドという解法
資料作成の悩みは「時間がかかる」ことだけではありません。本当の問題は、資料の品質が作り手の個人技に依存していて、引き継げないことです。担当者が変われば体裁が変わり、レビューのたびに「フォントが違う」「ロゴの位置がずれている」という指摘が発生します。この節では、なぜHTMLというコードベースの手段が効くのかを、課題の構造から整理します。
### Excel・PowerPoint往復に消える時間
月次レポートの典型的な作り方は、CRMやアナリティクスから数値をExcelに落とし、Excelでグラフを作り、それをPowerPointに貼り付け、体裁を整えるという流れです。ここには同じ情報を3つの場所に持つという構造的な無駄があります。数値が1つ変わるたびに、Excelの修正・グラフの再作成・PowerPointへの貼り直しが連鎖します。
しかも、この往復は「直したつもりで直っていない箇所」を生みます。3ページ目のグラフだけ先月の数字のまま、という事故は、貼り付け作業が介在する限り繰り返し起きてしまいます。HTMLスライドは、データをコードの中の変数として1箇所に持ち、そこから表示とグラフを生成するため、この往復自体が発生しません。数字の出どころが1つなら、直し忘れも1箇所で済みます。
### 「v2\_最終\_確定版」問題と再現性の欠如
もう一つの悩みが、ファイル名にバージョンが積み上がっていく問題です。どれが最新かわからない、前回の提案との差分が追えない、という状態は、資料が増えるほど深刻になります。HTMLはテキストファイルなので、Gitで変更履歴をそのまま管理できます。「先月のレポートとどこが変わったか」を行単位で確認できる状態は、レビューの質も引き上げます。
そして再現性です。PowerPointのテンプレートは、手作業で編集する以上どうしても崩れます。フォントが微妙に違う、余白が数ピクセルずれる、色が微妙に違う——こうした揺らぎが、資料の品質を作り手の丁寧さに依存させます。CSSで定義したデザインは、コードを書き換えない限り崩れません。ここが「人が気をつける」から「仕組みで担保する」への切り替え点です。
### PowerPoint/Google SlidesとHTMLスライドの比較
両者は優劣ではなく適性の違いです。下の表は、実務で判断するときの観点を並べたものです。
| 観点 | PowerPoint / Google Slides | HTMLスライド + PDF変換 |
| --- | --- | --- |
| カスタマイズ | 手動で都度書き換え | 変数を差し替えれば自動反映 |
| デザイン統一 | テンプレート依存で崩れやすい | CSSで制御するため崩れにくい |
| バージョン管理 | ファイル名に「v2\_最終\_確定版」が並ぶ | Gitで変更履歴を管理できる |
| グラフ・図表 | Excelから手動で貼り付け | Chart.js・SVGでコードから生成 |
| 量産性 | 1部ずつ手作業 | ループ処理で一括生成 |
| 共同編集 | 同時編集がしやすい | 基本的に1人で編集、差分はGitで統合 |
| 配布形式 | .pptxまたは共有リンク | PDF（環境依存が少ない） |
> **ポイント**: HTMLスライドは「毎回ゼロから作るクリエイティブな資料」ではなく、「構造が決まっていて、数値や顧客名を差し替えて量産する定型資料」に向いた手段です。営業提案書、月次報告書、プロジェクト進捗レポートがその代表例です。
## Claude Codeでスライドを生成する基本フロー
ここからは実際の手順です。Claude Codeにプレゼン資料の作成を指示すると、HTMLファイルとしてスライドが生成されます。指示・生成・確認・変換の4ステップで捉えると、全体像がつかみやすくなります。最初の1本は手探りになりますが、この4ステップを1周すると、2本目以降は指示の出し方だけの話になります。
### Step 1: 構成を指定して指示を出す
Claude Codeのターミナルで、例えば次のように指示します。ポイントは、テーマだけでなくページ構成まで自分で決めて渡すことです。構成を丸投げすると、出てくるスライドが毎回変わり、テンプレート化できなくなります。
```
提案書を作成してください。
- 対象: 株式会社〇〇 マーケティング部
- テーマ: CRM導入による営業効率化
- ページ構成: 表紙、課題整理、提案概要、導入ステップ、期待効果、費用、会社概要
- デザイン: 青基調、A4横向き
```
ページ構成は、自社の提案プロセスに合わせて決めてください。企業様によって商談の進め方は異なりますので、構成もそれに合わせて最適な形は変わります。当社では、初回提案・詳細提案・見積もり提示といった商談フェーズごとに別の構成を用意する考え方をおすすめしています。逆に言えば、ここを決めずに毎回AIに任せてしまうと、資料のばらつきという最初の課題に戻ってしまいます。
### Step 2: 生成されるHTMLの構造を理解する
Claude Codeが生成するHTMLスライドは、以下のような構造になります。ここを理解しておくと、修正指示の精度が上がります。
```
CRM導入による営業効率化のご提案
株式会社〇〇 マーケティング部 御中
```
各スライドは `slide` クラスを持つ要素で区切られ、`page-break-after: always` によってPDF変換時にページが分かれます。フォント・配色・レイアウトはすべて `style` 要素の中で一元的に定義されているため、ここを1箇所直せば全ページに反映されます。デザインの統一が仕組みで担保される、というのがこの構造の要点です。
### Step 3: ブラウザで確認して指示で直す
生成されたHTMLファイルをブラウザで開いて表示を確認します。
```
open -a "Google Chrome" ./proposal.html
```
ブラウザ上でスライドの見た目を確認し、必要に応じてClaude Codeに修正を指示します。「3ページ目のグラフの色を変えて」「フッターに日付を追加して」といった微調整も、自然言語で指示すれば反映されます。ここで大事なのは、AIの出力をそのまま提出しないことです。文章のトーン、数値の正確さ、顧客名の表記は人間側で確認します。AIは叩き台を高速に作る担当で、最終的な内容の責任は人間側にある——この役割分担は、この資料作成に限らないAI活用の共通原則だと考えています。
### Step 4: PDFに変換する
表示の確認が済んだら、PDF変換に進みます。この工程は次の節で詳しく扱います。なお、ステップ1〜3を何度も繰り返してから変換するより、早い段階で一度PDFにして確認するほうが、ページ分割のズレに早く気づけます。ブラウザ上では収まって見えても、PDFにすると末尾が切れているというケースは珍しくありません。
## Puppeteer/PlaywrightでPDFに変換する
HTMLスライドをPDFにするには、ヘッドレスブラウザを使います。Puppeteer（Googleが開発）またはPlaywright（Microsoftが開発）のどちらでも実現できます。ブラウザでの表示をそのままPDFに焼き付ける仕組みなので、画面で確認した見た目がほぼそのまま出力されます。
### 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');
```
`waitUntil: 'networkidle0'` は、ネットワーク通信が落ち着くまで待ってから変換する指定です。Webフォントの読み込みやグラフの描画が終わる前に変換してしまうと、崩れた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()` で指定できる主要なオプションは以下のとおりです。資料の用途（画面共有用か印刷用か）によって設定が変わります。
| オプション | 説明 | 設定例 |
| --- | --- | --- |
| 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 | `pageNumber` クラスの要素でページ番号を出力するHTML片 |
| footerTemplate | フッターHTML | `Confidential` などの固定文言を出すHTML片 |
> **ポイント**: `printBackground: true` は指定を忘れないでください。これが抜けると、CSSで設定した背景色やグラデーションが消えた状態でPDFが出力されます。HTMLスライドでは背景色がデザインの構成要素になるため、この設定が抜けると見た目が大きく変わります。
画面共有用なら16:9（1280×720）、印刷して配布するならA4横向きと、出力先に応じて設定を分けておくと使い回しやすくなります。同じHTMLから2種類のPDFを出す運用も可能です。ただし、16:9向けに作ったレイアウトをA4に流し込むと余白のバランスが変わりますので、両方を運用するなら両方で一度は目視確認をしてください。
## SVG・Chart.jsで図表をコードから生成する
HTMLスライドの利点の一つが、グラフや図表をコードで生成できることです。Excelからコピー＆ペーストする工程がなくなり、データを書き換えればグラフも一緒に更新されます。ここは「Excel往復からの脱却」が最も分かりやすく効く部分です。
### Chart.jsでグラフを埋め込む
```
```
グラフの描画にはChart.jsを使います。Chart.js本体はCDNからscriptタグで読み込み、スライド内のcanvas要素に対して次の描画コードを実行させます。
```
new Chart(document.getElementById('kpiChart'), {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
label: 'リード獲得数',
data: [85, 92, 108, 115, 128, 142],
borderColor: '#2563EB',
tension: 0.3
}]
},
options: {
responsive: false,
plugins: { legend: { position: 'bottom' } }
}
});
```
データ部分（`labels` と `data`）だけを毎月差し替える構造にしておけば、グラフの見た目は一切触らずに更新できます。凡例の位置や線の色を毎回調整する作業が消えるため、月次レポートの更新が「数字の差し替え」だけで済むようになります。ここまで持っていけると、レポート作成は誰の担当でも同じ成果物になります。
### SVGでプロセスフローを描く
プロセスフローやアーキテクチャ図は、SVGで直接描画できます。SVGはHTMLに埋め込めるベクター画像形式で、拡大しても劣化しません。
```
導入ステップ
```
Claude Codeに「導入ステップを4段階のフロー図で入れて」と指示すれば、このようなSVGが生成されます。ただし、複雑な図解ほど座標の調整が必要になり、指示だけで一発で意図通りになるとは限りません。分岐の多いアーキテクチャ図や、要素が重なり合う概念図は、コードで詰めるより作図ツールで作った画像を貼るほうが早いケースもあります。無理にすべてをコードで描こうとしないのが実務的です。
### 図表をAIに任せる範囲と人間が判断する範囲
AIとの役割分担を最初に決めておくと、手戻りが減ります。下の整理が目安です。
| AIに任せる | 人間が判断する |
| --- | --- |
| グラフの描画コードの生成 | どの指標をグラフにするか |
| 配色をCSS変数に合わせる調整 | 数値そのものの正確性 |
| 定型的なフロー図のSVG生成 | 図が伝えるべきメッセージ |
| レイアウトの微調整 | 顧客に見せてよい情報かの判断 |
数値の正確性だけは、元データと突き合わせる工程を省かないでください。生成されたスライドの数字をそのまま信じるのではなく、CRMやレポートの画面と照合する工程を手順書に組み込むことをおすすめします。AIは「もっともらしい数字」を置いてしまうことがありますので、照合は省略できない工程だと考えています。
## テンプレート化して量産する仕組みをつくる
一度作った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`
);
}
```
ここで注意したいのは、一括生成した資料をそのまま送らないことです。生成はまとめて行い、送付前の確認は1件ずつ人間が行う——この線引きを外すと、顧客名の取り違えのような取り返しのつかないミスにつながります。AIに任せるのは「作る」ところまでで、「出す」判断は人間が持つ。これはメール配信の自動化でも同じ考え方です。
### 新人でも回る手順に落とす
仕組み化の目的は、作業時間の短縮だけではありません。担当者が変わっても同じ品質の資料が出せる状態をつくることです。そのために、テンプレートと一緒に次の3点をドキュメント化しておくことをおすすめします。
| 用意するもの | 内容 | 効果 |
| --- | --- | --- |
| テンプレートHTML | デザインと構成を固定したベースファイル | 見た目の品質が個人差に左右されない |
| 入力項目リスト | 差し替える項目と、どこから取得するかの対応表 | 新人でも何を用意すべきかが分かる |
| 確認チェック手順 | 数値照合・顧客名・PDF表示の確認順序 | 送付前ミスを仕組みで防ぐ |
入力項目リストに「顧客名はCRMの会社レコードから取得」「数値は月次ダッシュボードの該当レポートから取得」と取得元まで書いておくと、資料作成が調べ物から転記作業に変わります。個人の力量や経験年数ではなく、手順と仕組みで品質を担保する——これが引き継げる資料作成の形です。
### 向き不向きを見極めてから広げる
テンプレート化は、頻度の高い資料ほど投資が回収されます。月次レポートや定型的な提案書のように繰り返し作る資料から選ぶのが目安です。逆に、年に数回しか作らない資料や毎回内容が大きく変わる資料は、テンプレート化の手間が見合わないケースがあります。自社の資料一覧を眺めて、頻度と定型度の両方が高いものから着手していただければなと思います。
## 資料作成をCRMの流れに接続する
HTMLスライドの仕組みは、単体で完結させるより、営業プロセス全体の中に置いたほうが効きます。この節では、資料をCRMのデータと接続して考える視点を整理します。コンタクト獲得から取引、顧客化、請求までの一連の流れの中で、資料はどこに位置づくのかという話です。
### 提案書はパイプラインのどこで必要になるか
提案書や見積もり資料は、取引ステージが動くタイミングで必要になります。このうち資料と直接関係するのは「ステージの定義」と「必須入力項目」です。どのステージでどの資料が必要かを最初に定義しておくと、テンプレートの数と種類が自然に決まります。
| 取引ステージの例 | 必要になる資料 | テンプレートの粒度 |
| --- | --- | --- |
| アポ取得 | 会社紹介・サービス概要 | 全社共通の1種類 |
| 初回提案 | 課題整理＋提案概要 | 業種別に数種類 |
| 見積もり提示 | 提案詳細＋導入ステップ＋費用 | 業種別＋規模別 |
| 受注後 | キックオフ資料・進捗レポート | 共通テンプレート＋案件情報 |
この整理をすると、闇雲に全種類をテンプレート化する必要がないことが見えてきます。企業様によって商談プロセスもステージ定義も異なりますので、最適なテンプレートの構成は各社で変わります。まずは自社のパイプラインを眺めて、最も頻度の高いステージの資料から着手するのが現実的です。
あわせて、ステージごとに「この資料を出したら次のステージに進める」という定義を揃えておくと、パイプラインの運用自体も安定します。提案書の提出をステージ移行の条件に紐づけると、取引レコードを見るだけで商談の実態が分かるようになります。さらに受注時には受注理由、失注時には失注理由を必須項目として残す設計にしておけば、「どの資料が商談を前に進めたか」を後から振り返る材料にもなります。
### 数値の出どころを一本化する
月次レポートで最も事故が起きやすいのが、数値の出どころが人によって違うことです。ある人はダッシュボードから、別の人はエクスポートしたCSVから数字を拾い、微妙に値が合わない——こうした状態は、資料そのものへの信頼を損ないます。
HubSpotのように、リード獲得からコンタクト・取引・顧客までが一つのデータベースでつながっている環境では、レポートの定義を1度決めれば、それが全員の共通の出どころになります。資料テンプレートの入力項目に「このレポートのこの指標」と紐づけておけば、誰が作っても同じ数字が入ります。資料作成の効率化は、実はデータ側の整備とセットで考えたほうが効果が出やすい領域です。なお、リレーショナルな顧客データベースを持つCRMであれば、出どころを一本化する考え方自体は同じように使えます。
逆に言えば、CRM側のデータが入力漏れだらけの状態でテンプレートだけ整えても、埋める数字を手作業で探す工程は残ります。資料の仕組み化を検討するタイミングは、入力ルールを見直すきっかけにもなります。
### AIチャットで社内の情報にたどり着けるようにする
資料作成で意外と時間を食うのが、「前回どう説明したか」「この機能の正しい説明文は何か」を探す時間です。社内のナレッジや公開情報に会話で到達できる仕組みがあると、この探索時間が縮みます。次の画面は、当社の公開サイト上に設置しているチャットが、製品ページの内容にもとづいて機能説明と公開URLを案内している様子です。
上の画面のように、回答の根拠となる情報源が示される形にしておくと、資料に転記する際の確認がしやすくなります。ただし、AIが返した文面をそのまま顧客向け資料に貼るのは避けてください。あくまで一次情報への入口として使い、最終的な文面は人間が確認するという役割分担が前提です。
社内のナレッジをAIに読ませる側の準備も、資料作成の品質を左右します。次の画面は、HubSpotのAI機能であるBreezeのアシスタントで、回答のもとにする入力ソースを選択する設定画面です。
参照元をこのように明示しておくと、AIがどの情報をもとに答えているかを追跡しやすくなります。説明文や一次情報が古いまま放置されていると、AIは古い文面を拾って返してしまいますので、ナレッジ側の整備とセットで考えるのがポイントになってきます。
## 運用上の注意点と、向かないケース
ここまで利点を中心に述べてきましたが、HTMLスライドがすべての場面でPowerPointやGoogle Slidesを置き換えるわけではありません。正直に限界も共有します。
### HTMLスライドが向く場面・向かない場面
| 判断軸 | HTMLスライドが向く | PowerPoint/Google Slidesが向く |
| --- | --- | --- |
| 資料の性質 | 構造が決まった定型資料 | 一点物のクリエイティブ資料 |
| 更新頻度 | 数値を定期的に差し替える | 毎回ゼロから作る |
| 編集体制 | 基本的に1人が編集 | 複数人で同時編集する |
| 表現 | 図表・グラフ中心 | 写真・イラスト・アニメーション中心 |
| 変更履歴 | 差分を追跡したい | 追跡の必要がない |
| 作り手のスキル | コードに抵抗がない人がいる | 全員が非エンジニア |
とくに共同編集が必要な資料では、HTMLは扱いにくくなります。Gitに慣れていないメンバーが複数人で同じファイルを触ると、かえって混乱が増えます。「量産する定型資料はHTML＋PDF、一点物や共同編集が必要な資料は従来ツール」という切り分けが、実務では扱いやすい線引きです。
### フォントとレンダリング環境の注意
PDF変換時にフォントが正しく表示されるには、実行環境でフォントが読み込める必要があります。日本語フォントは、Google Fontsの `Noto Sans JP` をCSSで読み込む方法が扱いやすい選択肢です。ローカル環境にしかないフォントを指定すると、他のメンバーの環境や自動実行環境で文字化けする可能性があります。
また、ページの高さを超えるコンテンツを書くと、PDF変換時に途中で切れます。1スライドに詰め込みすぎない、テキスト量が可変な箇所はフォントサイズの下限を決めておく、といった運用ルールをテンプレート側に持たせておくと安定します。顧客名が長い企業のときだけ表紙が崩れる、といった事象はこの対策で防げます。
### 最初は1テンプレートから始める
導入でつまずきやすいのは、最初から全資料をHTML化しようとすることです。まずは毎月定期的に作っている資料を1つだけ選び、それをテンプレート化するところから始めてください。1本回してみると、自社の資料のどこが「変わる部分」なのかが実感として分かります。その理解ができてから2本目、3本目と広げるほうが、結果的に定着します。
当社でも、いきなり全社展開するのではなく、効果が出そうな業務を1つ選んで小さく試し、手応えを確認してから広げる進め方をおすすめしています。資料作成の仕組み化も同じで、範囲を絞って始めるのが遠回りに見えて近道です。
## よくある質問
### Q1. HTMLやCSSの知識がなくても使えますか
Claude Codeが生成するHTMLはそのまま動作するコードなので、自分でHTMLを書く必要はありません。「提案書を作って」と日本語で指示するだけでスライドが生成され、微調整も「3ページ目の背景色を変えて」のように自然言語で指示できます。ただし、フォントサイズ・色・余白といったCSSの基本概念を理解していると、指示の精度が上がり、やり取りの回数が減ります。チームで運用する場合は、コードに抵抗がないメンバーが1人いると安定します。
### Q2. 画像やロゴはHTMLスライドに入れられますか
通常のHTMLと同じ方法で画像を埋め込めます。ローカルファイルのパス指定、またはURLでの読み込みが可能で、PDF変換時にも画像はレンダリングされます。ただし外部URLの画像を使う場合は、変換時にネットワークアクセスが必要になる点と、画像の配信元が変わると表示できなくなる点に注意してください。ロゴのように長く使う画像は、ローカルに置いてGitで管理するほうが安定します。
### Q3. PuppeteerとPlaywrightのどちらを使うべきですか
PDF変換の用途では機能面はほぼ同等です。すでにプロジェクトでどちらかを使っている場合は、そちらに統一するのが合理的です。新規導入であれば、Playwrightはマルチブラウザ対応（Chromium、Firefox、WebKit）や自動待機機能が充実しており、PDF変換だけが目的であればPuppeteerのほうが構成は軽量です。どちらを選んでも本記事のスクリプトはほぼ同じ書き方で動きます。
### Q4. 生成したPDFの品質はどの程度ですか
ヘッドレスブラウザでレンダリングするため、ブラウザでの画面表示とほぼ同じ見た目でPDFが出力されます。`printBackground: true` を指定すれば背景色やグラデーションも再現され、テキストはPDF内でコピー可能な形で埋め込まれるため、検索や引用も可能です。Chart.jsのようなJavaScriptで動的に描画されるグラフも、`waitUntil: 'networkidle0'`（Puppeteer）や `waitUntil: 'networkidle'`（Playwright）を指定すれば、描画完了後に静止画としてレンダリングされます。ただしブラウザ表示で崩れているものはPDFでも崩れますので、変換前のブラウザ確認は省かないでください。
### Q5. 作った仕組みを他のメンバーに引き継げますか
引き継ぎを前提にするなら、テンプレートHTMLだけでなく、入力項目リストと確認手順をセットでドキュメント化してください。「どの項目を、どこから取得して、何を確認してから送るか」が明文化されていれば、コードの詳細を知らないメンバーでも運用できます。逆にテンプレートだけを渡すと、結局作った人しか使えない状態に戻ります。仕組み化とは、ファイルを作ることではなく手順を残すことだと捉えるのがおすすめです。
## まとめ
Claude CodeによるHTMLスライド生成とPDF変換の要点を整理します。
- **課題は時間ではなく属人化**: Excel・PowerPointの往復と「v2\_最終\_確定版」問題の本質は、資料品質が作り手の個人技に依存していることです。HTMLとCSSでデザインを固定すると、誰が作っても同じ体裁になります。
- **テンプレートは「変わる部分」と「変わらない部分」の分離が要**: 項目を最小限に絞り、顧客名・数値・グラフデータだけを差し替える構造にすると、量産と引き継ぎの両方が成立します。
- **PDF変換は `printBackground` と待機指定が品質の分かれ目**: 背景の再現と、フォント・グラフの描画完了待ちを押さえれば、画面表示とほぼ同じPDFが出ます。
- **CRMのデータと接続して初めて効く**: どの取引ステージでどの資料が必要かを定義し、数値の出どころを一本化すると、資料作成が営業プロセスの一部として回り始めます。
- **AIと人間の線引きを最初に決める**: 生成と下書きはAI、数値の照合と送付判断は人間。この線引きを外すと、効率化が事故に変わります。
- **すべてをHTMLにする必要はない**: 共同編集が必要な資料や一点物のクリエイティブ資料は、従来ツールのほうが適しています。
まずは、毎月定期的に作っている資料を1つだけ選んでください。そこから次の3ステップで進めるのが現実的です。
1. その資料を開き、「毎回変わる項目」を書き出して入力項目リストにする
2. Claude Codeにページ構成を指定してテンプレートHTMLを1本作り、ブラウザとPDFの両方で確認する
3. 入力項目の取得元（どのレポート・どのレコードから取るか）を追記し、確認手順とセットでチームに共有する
企業様によって資料の種類も商談プロセスも異なりますので、最適なテンプレートの構成は各社で変わります。1本回してみて手応えを確認してから、2本目、3本目と段階的に広げていただくのが定着しやすい進め方です。
CRMを活用した業務効率化やAIとの連携に関するご相談は、CRM特化型コンサルティングのHubSpotゴールドパートナーのStartLinkまでお気軽にお問い合わせください。
## あわせて読みたい
- [Claude Code実践ガイド｜AI開発の生産性を高める運用設計](https://start-link.jp/hubspot-ai/ai/claude-code-practice)
- [Claude Codeで営業レポートを自動生成する方法｜HubSpot CRMデータの分析から資料作成まで](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-sales-report-automation)
- [Claude Codeで経営会議資料を自動作成する方法｜データ収集から分析・スライド化まで一気通貫で実行する](https://start-link.jp/hubspot-ai/management/ai-management-decision/claude-code-board-meeting-materials)
## あわせて読みたいAI実践ガイド
### [Setup Claude Coworkの使い方と初期設定 導入直後にやるべき設定、CLAUDE.md、スキル設計、運用の型をまとめています。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-cowork-setup-guide)
### [Team Claude Codeでチーム開発を効率化する方法 レビュー、権限管理、共有ルールまで踏み込んだ実践的なチーム利用ガイドです。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-team-development)
### [MCP Claude Code × MCP連携ガイド 社内システムとつなぎ、実業務でAIエージェントを動かす方法を整理しています。](https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-mcp-integration)
### [Service HubSpot × 生成AIの支援サービス 導入設計から内製化、ワークフロー自動化までの支援内容を確認できます。](https://start-link.jp/service/hubspot-ai)
株式会社StartLinkは、事業推進に関わる「販売促進」「DXによる業務効率化（ERP/CRM/SFA/MAの導入）」などのご相談を受け付けております。 サービスのプランについてのご相談/お見積もり依頼や、ノウハウのお問い合わせについては、[無料のお問い合わせページ](https://www.start-link.jp/contact)より、お気軽にご連絡くださいませ。
###### 関連キーワード:
[営業](https://start-link.jp/hubspot-ai/tag/営業)
## サービス資料を無料DL
## 著者情報
### 今枝 拓海 / Takumi Imaeda
株式会社StartLink 代表取締役。累計150社以上のHubSpotプロジェクト支援実績を持ち、Claude CodeやHubSpotを軸にしたAI活用支援・経営基盤AXのコンサルティング事業を展開。
HubSpotのトップパートナー企業や大手人材グループにて、エンタープライズCRM戦略策定・AI戦略ディレクションを経験した後、StartLinkを創業。現在はCRM×AIエージェントによる経営管理支援を専門とする。
[StartLink](https://start-link.jp/)
### Service
- [会社情報](https://start-link.jp/about)
- [サービス](https://start-link.jp/service)
- [プロダクト](https://start-link.jp/sync)
- [採用情報](https://start-link.jp/recruit)
- [コンサルタントの方へ](https://start-link.jp/consultant-platform)
### Contact
- [問い合わせ](https://start-link.jp/contact)
- [資料ダウンロード](https://start-link.jp/download/service)
- [個人情報保護方針](https://start-link.jp/privacy-policy)
- [個人情報取り扱い規定](https://start-link.jp/personal-information-processing-agreement)
(c) 2026 All Rights Reserved.
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person"
},
"datePublished" : "2026-04-11T04:31:34.000Z",
"headline" : "Claude CodeでHTMLスライドをPDF化して資料自動生成する方法",
"image" : [ "https://start-link.jp/hubfs/blog/screenshots/generated/kv_claude-code-html-slides-pdf.jpg" ],
"mainEntityOfPage" : {
"@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-html-slides-pdf",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://start-link.jp/hubfs/Start%20Link%20(1500%20x%20600%20px)%20(5)-1.png"
},
"name" : "株式会社StartLink"
}
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "FAQPage",
"mainEntity" : [ {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "Claude Codeが生成するHTMLはそのまま動作するコードなので、自分でHTMLを書く必要はありません。「提案書を作って」と日本語で指示するだけでスライドが生成され、微調整も「3ページ目の背景色を変えて」のように自然言語で指示できます。ただし、フォントサイズ・色・余白といったCSSの基本概念を理解していると、指示の精度が上がり、やり取りの回数が減ります。チームで運用する場合は、コードに抵抗がないメンバーが1人いると安定します。"
},
"name" : "HTMLやCSSの知識がなくても使えますか"
}, {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "通常のHTMLと同じ方法で画像を埋め込めます。ローカルファイルのパス指定、またはURLでの読み込みが可能で、PDF変換時にも画像はレンダリングされます。ただし外部URLの画像を使う場合は、変換時にネットワークアクセスが必要になる点と、画像の配信元が変わると表示できなくなる点に注意してください。ロゴのように長く使う画像は、ローカルに置いてGitで管理するほうが安定します。"
},
"name" : "画像やロゴはHTMLスライドに入れられますか"
}, {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "PDF変換の用途では機能面はほぼ同等です。すでにプロジェクトでどちらかを使っている場合は、そちらに統一するのが合理的です。新規導入であれば、Playwrightはマルチブラウザ対応（Chromium、Firefox、WebKit）や自動待機機能が充実しており、PDF変換だけが目的であればPuppeteerのほうが構成は軽量です。どちらを選んでも本記事のスクリプトはほぼ同じ書き方で動きます。"
},
"name" : "PuppeteerとPlaywrightのどちらを使うべきですか"
}, {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "ヘッドレスブラウザでレンダリングするため、ブラウザでの画面表示とほぼ同じ見た目でPDFが出力されます。printBackground: true を指定すれば背景色やグラデーションも再現され、テキストはPDF内でコピー可能な形で埋め込まれるため、検索や引用も可能です。Chart.jsのようなJavaScriptで動的に描画されるグラフも、waitUntil: 'networkidle0'（Puppeteer）や waitUntil: 'networkidle'（Playwright）を指定すれば、描画完了後に静止画としてレンダリングされます。ただしブラウザ表示で崩れているものはPDFでも崩れますので、変換前のブラウザ確認は省かないでください。"
},
"name" : "生成したPDFの品質はどの程度ですか"
}, {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "引き継ぎを前提にするなら、テンプレートHTMLだけでなく、入力項目リストと確認手順をセットでドキュメント化してください。「どの項目を、どこから取得して、何を確認してから送るか」が明文化されていれば、コードの詳細を知らないメンバーでも運用できます。逆にテンプレートだけを渡すと、結局作った人しか使えない状態に戻ります。仕組み化とは、ファイルを作ることではなく手順を残すことだと捉えるのがおすすめです。"
},
"name" : "作った仕組みを他のメンバーに引き継げますか"
} ]
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-html-slides-pdf#article",
"@type" : "BlogPosting",
"author" : {
"@id" : "https://start-link.jp/#founder"
},
"dateModified" : "2026-09-25T02:48:26+09:00",
"datePublished" : "2026-04-11T04:31:34+09:00",
"headline" : "Claude CodeでHTMLスライドをPDF化して資料自動生成する方法",
"image" : "https://start-link.jp/hubfs/blog/screenshots/generated/kv_claude-code-html-slides-pdf.jpg",
"isPartOf" : {
"@id" : "https://start-link.jp/#website"
},
"mainEntityOfPage" : {
"@id" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice/claude-code-html-slides-pdf",
"@type" : "WebPage"
},
"publisher" : {
"@id" : "https://start-link.jp/#organization"
},
"speakable" : {
"@type" : "SpeakableSpecification",
"cssSelector" : [ ".blog-section h2", ".blog-section p:first-of-type", ".blog-section blockquote" ]
}
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "BreadcrumbList",
"itemListElement" : [ {
"@type" : "ListItem",
"item" : "https://start-link.jp",
"name" : "ホーム",
"position" : 1
}, {
"@type" : "ListItem",
"item" : "https://start-link.jp/hubspot-ai",
"name" : "ブログ",
"position" : 2
}, {
"@type" : "ListItem",
"item" : "https://start-link.jp/hubspot-ai/ai",
"name" : "AI活用",
"position" : 3
}, {
"@type" : "ListItem",
"item" : "https://start-link.jp/hubspot-ai/ai/claude-code-practice",
"name" : "Claude Code実践",
"position" : 4
}, {
"@type" : "ListItem",
"name" : "Claude CodeでHTMLスライドをPDF化して資料自動生成する方法",
"position" : 5
} ]
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#organization",
"@type" : "Organization",
"address" : {
"@type" : "PostalAddress",
"addressCountry" : "JP",
"addressLocality" : "中央区",
"addressRegion" : "東京都",
"postalCode" : "104-0061",
"streetAddress" : "銀座1丁目12番4号 N&E BLD.6F"
},
"alternateName" : "StartLink Inc.",
"award" : [ "HubSpot Gold Solutions Partner（HubSpotゴールドパートナー、2026年4月認定）" ],
"contactPoint" : [ {
"@type" : "ContactPoint",
"availableLanguage" : [ "ja" ],
"contactType" : "customer support",
"url" : "https://start-link.jp/contact"
}, {
"@type" : "ContactPoint",
"availableLanguage" : [ "ja", "en" ],
"contactType" : "sales",
"url" : "https://start-link.jp/contact"
} ],
"description" : "「生成AI × HubSpot」をコンセプトに掲げるHubSpotゴールドパートナー（Gold Solutions Partner、2026年4月認定）。HubSpotマーケットプレイスに自社アプリ（Sync for freee / Notion / Money Forward / Chatwork）を公開するアプリ開発企業であり、HubSpot/Salesforce知見と生成AI活用を組み合わせたCRM構築・移行・最適化・AIエージェント/PoC支援まで一貫して提供する。",
"founder" : {
"@id" : "https://start-link.jp/#founder",
"@type" : "Person",
"jobTitle" : "代表取締役",
"name" : "今枝 拓海",
"sameAs" : [ "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.facebook.com/takumiIma" ]
},
"foundingDate" : "2024-09-04",
"hasCredential" : {
"@type" : "EducationalOccupationalCredential",
"credentialCategory" : "certification",
"name" : "HubSpot Gold Solutions Partner",
"recognizedBy" : {
"@type" : "Organization",
"name" : "HubSpot, Inc.",
"url" : "https://www.hubspot.com/"
}
},
"image" : [ "https://start-link.jp/hubfs/startlink-ai-agent.jpg", "https://start-link.jp/hubfs/startlink-aiorg.jpg" ],
"knowsAbout" : [ "HubSpot CRM", "HubSpot Implementation", "HubSpot導入支援", "CRM構築", "AI活用", "HubSpot連携アプリ開発", "Salesforce to HubSpot Migration", "Generative AI Integration", "AI Agent Development", "Revenue Operations", "Marketing Automation", "freee Integration", "Notion Integration", "Money Forward Integration" ],
"legalName" : "株式会社StartLink",
"logo" : "https://start-link.jp/hubfs/startlink-logo.png",
"mainEntityOfPage" : "https://start-link.jp/",
"memberOf" : {
"@type" : "ProgramMembership",
"hostingOrganization" : {
"@type" : "Organization",
"name" : "HubSpot, Inc.",
"url" : "https://www.hubspot.com/"
},
"membershipNumber" : "Gold Tier",
"programName" : "HubSpot Solutions Partner Program"
},
"name" : "株式会社StartLink",
"sameAs" : [ "https://www.youtube.com/@startlink-hubspot", "https://x.com/ImaedaTakumii", "https://www.linkedin.com/in/takumi-imaeda/", "https://www.linkedin.com/company/108100307/", "https://www.facebook.com/takumiIma", "https://www.facebook.com/profile.php?id=61566874764985", "https://prtimes.jp/main/html/searchrlp/company_id/149669", "https://app.hubspot.com/ecosystem/46046172/marketplace/solutions/startlink" ],
"taxID" : "8010001248134",
"url" : "https://start-link.jp/"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#website",
"@type" : "WebSite",
"inLanguage" : "ja",
"name" : "株式会社StartLink",
"publisher" : {
"@id" : "https://start-link.jp/#organization"
},
"url" : "https://start-link.jp/"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#service-hubspot",
"@type" : "Service",
"areaServed" : "JP",
"category" : [ "CRM導入", "HubSpot" ],
"description" : "150社以上の実績を持つHubSpotゴールドパートナーが、業務フローに合わせた設計から構築・本番稼働まで一貫支援。",
"name" : "HubSpot導入・構築支援",
"provider" : {
"@id" : "https://start-link.jp/#organization"
},
"serviceType" : "HubSpot導入・構築支援",
"url" : "https://start-link.jp/service/hubspot"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#service-hubspot-ai",
"@type" : "Service",
"areaServed" : "JP",
"category" : [ "CRM最適化", "AI活用" ],
"description" : "HubSpotを軸に業務要件に沿った設計改善と生成AI連携活用を包括支援。",
"name" : "HubSpot 生成AIコンサルティング",
"provider" : {
"@id" : "https://start-link.jp/#organization"
},
"serviceType" : "HubSpot 生成AIコンサルティング",
"url" : "https://start-link.jp/service/hubspot-ai"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#service-hubspot-training",
"@type" : "Service",
"areaServed" : "JP",
"category" : [ "研修", "HubSpot" ],
"description" : "HubSpotの概念・基本操作からAI活用ノウハウまで、社内浸透のための研修を提供。",
"name" : "HubSpot研修・レクチャー支援",
"provider" : {
"@id" : "https://start-link.jp/#organization"
},
"serviceType" : "HubSpot研修・内製化支援",
"url" : "https://start-link.jp/service/hubspot-ai/training"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#service-sf2hs-replace",
"@type" : "Service",
"areaServed" : "JP",
"category" : [ "CRM移行", "データ移行" ],
"description" : "Salesforce/HubSpot双方の思想とデータモデルを理解した移行設計とHubSpot側CRM開発を実行。",
"name" : "SalesforceからHubSpotへのリプレイス支援",
"provider" : {
"@id" : "https://start-link.jp/#organization"
},
"serviceType" : "SalesforceからHubSpotへのリプレイス支援",
"url" : "https://start-link.jp/service/salesforce-hubspot-replace"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#service-claude-code-bi",
"@type" : "Service",
"areaServed" : "JP",
"category" : [ "AI活用", "経営管理" ],
"description" : "複数システムのデータを統合し、毎朝のAIブリーフィングなど経営の意思決定を加速する仕組みを構築。",
"name" : "Claude Codeによる経営データ活用支援",
"provider" : {
"@id" : "https://start-link.jp/#organization"
},
"serviceType" : "AI経営管理支援",
"url" : "https://start-link.jp/service/claude-code/business-intelligence"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#service-claude-code-content",
"@type" : "Service",
"areaServed" : "JP",
"category" : [ "コンテンツマーケティング", "AI活用" ],
"description" : "キーワード戦略からSEO記事制作、CMS公開まで、AIを活用したコンテンツマーケティングを自動化。",
"name" : "Claude Codeによるコンテンツマーケティング支援",
"provider" : {
"@id" : "https://start-link.jp/#organization"
},
"serviceType" : "AIコンテンツ制作支援",
"url" : "https://start-link.jp/service/claude-code/content-marketing"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#product-sync-freee",
"@type" : "SoftwareApplication",
"applicationCategory" : "BusinessApplication",
"author" : {
"@id" : "https://start-link.jp/#organization"
},
"description" : "HubSpotとfreee会計・freee請求書をシームレスに連携。取引先の同期から請求書作成まで、バックオフィスの業務を自動化するHubSpotマーケットプレイスアプリ。",
"featureList" : [ "freee取引先をHubSpotに自動同期", "HubSpotからfreee見積書・請求書を作成", "取引データをfreee会計に自動登録", "月次請求・更新処理に対応", "商品項目・品目・部門・タグ情報の連携" ],
"installUrl" : "https://ecosystem.hubspot.com/marketplace/apps/sync-for-freee-bystartlink",
"name" : "Sync for freee",
"offers" : [ {
"@type" : "Offer",
"description" : "請求月5件・見積月20件まで",
"name" : "Free",
"price" : "0",
"priceCurrency" : "JPY"
}, {
"@type" : "Offer",
"billingIncrement" : "P1M",
"description" : "請求月50件・見積月100件まで",
"name" : "Professional",
"price" : "4000",
"priceCurrency" : "JPY"
}, {
"@type" : "Offer",
"billingIncrement" : "P1M",
"description" : "無制限",
"name" : "Enterprise",
"price" : "10000",
"priceCurrency" : "JPY"
} ],
"operatingSystem" : "Web",
"softwareHelp" : {
"@type" : "WebPage",
"url" : "https://start-link.jp/sync/freee/manual"
},
"url" : "https://start-link.jp/sync/freee"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#product-sync-notion",
"@type" : "SoftwareApplication",
"applicationCategory" : "BusinessApplication",
"author" : {
"@id" : "https://start-link.jp/#organization"
},
"description" : "HubSpotのCRMレコードとNotionのページ・データベースを接続。HubSpotの画面から離れずにNotionのすべてにアクセスできるHubSpotマーケットプレイスアプリ。",
"featureList" : [ "CRMカードからNotionページの作成・閲覧・編集", "NotionデータベースをCRMタブにテーブル表示", "4つのワークフローアクションで自動化", "コンタクト・会社・取引・チケット・サービス・プロジェクト対応" ],
"installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-notion-bystartlink",
"name" : "Sync for Notion",
"offers" : [ {
"@type" : "Offer",
"description" : "ページ・DB合計50件まで",
"name" : "Free",
"price" : "0",
"priceCurrency" : "JPY"
}, {
"@type" : "Offer",
"billingIncrement" : "P1M",
"description" : "無制限",
"name" : "Professional",
"price" : "6000",
"priceCurrency" : "JPY"
} ],
"operatingSystem" : "Web",
"url" : "https://start-link.jp/sync/notion"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#product-sync-moneyforward",
"@type" : "SoftwareApplication",
"applicationCategory" : "BusinessApplication",
"author" : {
"@id" : "https://start-link.jp/#organization"
},
"description" : "HubSpotとマネーフォワード クラウドを連携。取引情報から見積書・請求書を自動作成し、取引先・品目の同期や継続請求に対応するHubSpot連携アプリ。",
"featureList" : [ "取引（Deal）から見積書・請求書を自動作成", "会社情報とマネーフォワード取引先の同期", "商品項目・品目マスタの連携", "月次・固定回数の継続請求に対応（Professionalプラン以上）", "合算請求（Enterpriseプラン限定）", "前受請求（一括請求・月次計上）（Enterpriseプラン限定）", "原価登録（MF会計への仕訳登録）で案件別の原価・粗利を可視化（Enterpriseプラン限定）", "取引レコードにCRMカードで連携ステータスを表示" ],
"installUrl" : "https://ecosystem.hubspot.com/ja/marketplace/listing/sync-for-moneyforward-bystartlink",
"name" : "Sync for Money Forward",
"offers" : [ {
"@type" : "Offer",
"description" : "請求月5件・見積月20件まで",
"name" : "Free",
"price" : "0",
"priceCurrency" : "JPY"
}, {
"@type" : "Offer",
"billingIncrement" : "P1M",
"description" : "請求月50件・見積月100件まで",
"name" : "Professional",
"price" : "4000",
"priceCurrency" : "JPY"
}, {
"@type" : "Offer",
"billingIncrement" : "P1M",
"description" : "無制限",
"name" : "Enterprise",
"price" : "10000",
"priceCurrency" : "JPY"
} ],
"operatingSystem" : "Web",
"url" : "https://start-link.jp/sync/moneyforward"
}
```
```json
{
"@context" : "https://schema.org",
"@id" : "https://start-link.jp/#product-sync-chatwork",
"@type" : "SoftwareApplication",
"applicationCategory" : "BusinessApplication",
"author" : {
"@id" : "https://start-link.jp/#organization"
},
"description" : "HubSpotとChatworkを連携。ワークフローからChatworkのルームへ通知を送り、CRMカード上で最新のやり取りの確認と返信ができ、紐付けたルームの新着メッセージをHubSpotのノートとして自動で記録するHubSpot連携アプリ。",
"featureList" : [ "ワークフローアクション「Chatworkに通知」（取引・会社・コンタクト・チケット対応）", "送信先ルームIDとメッセージ本文にHubSpotのプロパティを差し込み", "取引・会社・コンタクトとChatworkルームの紐付け（全プラン無制限）", "CRMカードにルームの最新100件のメッセージを表示（Professionalプラン以上）", "CRMカードからChatworkへメッセージを送信（Professionalプラン以上）", "紐付けたルームの新着メッセージをHubSpotのノートへ自動記録（Enterpriseプラン限定）", "引用や装飾を、HubSpotのノートでも読みやすい見た目のまま記録", "OAuth接続とAPIトークン接続（SAML/SSO環境向け）に対応" ],
"installUrl" : "https://ecosystem.hubspot.com/marketplace/listing/sync-for-chatwork-bystartlink",
"name" : "Sync for Chatwork",
"offers" : [ {
"@type" : "Offer",
"description" : "通知 月10件まで・ルーム紐付け無制限",
"name" : "Free",
"price" : "0",
"priceCurrency" : "JPY"
}, {
"@type" : "Offer",
"billingIncrement" : "P1M",
"description" : "通知無制限・CRMカードで最新100件の表示とメッセージ送信",
"name" : "Professional",
"price" : "3000",
"priceCurrency" : "JPY"
}, {
"@type" : "Offer",
"billingIncrement" : "P1M",
"description" : "Professionalの全機能＋メッセージ同期（30分ごと）",
"name" : "Enterprise",
"price" : "10000",
"priceCurrency" : "JPY"
} ],
"operatingSystem" : "Web",
"url" : "https://start-link.jp/sync/chatwork"
}
```