Claudeでスライドを作成する方法｜HTMLで10ページ組んでPDFにした面談資料と、PDFでだけ崩れる罠【2026年】

Claudeでスライドを作成するとき、僕の会社が落ち着いたのは、HTMLで1ページずつ組んでChromeでPDFにする作り方でした。最初に1280×960という紙の大きさと過去の資料の型を渡しておけば、毎回の見た目がそろいます。直すときもHTMLを直してPDFを作り直すだけです。

2026年8月20日には、ある面談審査で画面共有する会社紹介資料を、この流れで全10ページ作りました。面談の冒頭にある自己紹介1分と事業紹介2分、合わせて3分で話す前提の構成です。

この記事では、その10ページの割り振り、スライドに載せる事実の決め方、HTMLの土台、PDFにしたときだけ崩れる罠と確かめ方を順に書きます。「AIにスライドを作らせると、毎回見た目がばらばらになる」と感じているあなたに向けた記事です。

Claudeでスライドを作成する3つの方法と、僕がHTMLを選んだ理由

Claudeでスライドを作る道は、大きく3つあります。チャットのスライド用テンプレート、PowerPointのファイル作成、HTMLで組んでPDFにする方法です。僕の会社は3つ目を使っています。

公式ヘルプによると、アーティファクトにはスライド用のテンプレートがあり、全プランで使えます。できたスライドは、PowerPointとPDFに書き出せます。

ただしアーティファクトを使うには、設定でコードの実行とファイル作成の機能を有効にしておく必要があります。使えないときは、まず設定を確かめます。

もう1つの「ファイル作成」は、ExcelやPowerPoint、Word、PDFのファイルをClaudeに直接作らせる機能です。公式ヘルプでは、FreeからEnterpriseまでの全員が使えるとされています。

上限は1ファイル30MBまでです。通常のチャットより、プランの使用量を多く使う点も公式ヘルプに書かれています。

Claude以外では、Geminiアプリも2026年10月29日付の公式ブログで、チャットで作った資料をその場でプレビューして直せるようになりました。中身はGeminiでファイルを編集・プレビューする新機能にまとめています。

3つの違いを、何が手元に残るかで比べます。

僕なら、社外に何度も出す資料はHTMLを選びます。理由は、型を1つのファイルとして持てることと、直すときにPDFを作り直すだけで済むことの2つです。上の2つの方法の使い勝手は、この記事では比較していません。

僕の会社では、提案書をHTMLで組み、ChromeでPDFにしています。HTMLを正本とし、PDFを直接いじらないのが社内の決まりです。

アーティファクトの使い方そのものは、Claudeアーティファクトで社内ツールを作る方法に分けて書きました。

2026年8月20日、面談審査の会社紹介資料を10ページ・3分で組んだ

2026年8月20日に作ったのは、ある面談審査で使う会社紹介資料です。面談はオンラインで、冒頭に自己紹介1分、続けて事業紹介2分を話す形式でした。資料は任意で、画面共有ができました。

そこで、画面共有用のPDFと、編集の元になるHTMLの2つを作りました。PDFは全10ページです。僕の会社では提案書づくりをClaude Codeに任せていて、この資料も同じHTMLの型の上に組んでいます。

ページの割り振りは、話す時間から逆算しました。記録に残っている構成を、話す時間と並べます。

自己紹介の1分は2ページ、事業紹介の2分は5ページに割り振りました。話の区切りとページの区切りがそろうので、画面を送るだけで時間を守れる形です。締めの9ページ目は、審査の場で何をしたいかを3点に絞りました。

デザインは一から作らせていません。過去の提案書の型を流用しました。1280×960の大きさに、黄色の章扉、赤いバー、黄色のマーカーという、社内で決めている見た目です。

型を流用した分、作らせる中身は文章と構成に集中できます。表紙や章扉の組み方を毎回説明しなくても、前の資料のHTMLを読ませれば同じ見た目で組まれるからです。

スライドに載せる事実は、基準を文章にして記録に残した

審査で見せる資料なので、載せる事実の基準を決め、対外リスクを検査しました。記録には「対外リスク検査済み」として、次の基準が残っています。

• 実績は、自社サイトで公開済みの8社と、公開済みの数値だけ。「実績の一部」「2026年8月時点」の注記2本を必ず付ける
• 設立は「2023年」と年だけ書く。月は登記簿で確かめていないため
• 売上・資本金・組織の人数は載せない
• 取引先の金額と、掲載の許可をもらっていない社名は載せない
• 経歴は社名と役職まで。前職の社内の数字はぼかす
• 所在地は「拠点を埼玉へ移行中」と書き、登記の完了を言い切らない

基準を文章にして渡しておくと、できあがった後の確認が「基準に合っているか」の照合になります。見た目の好みで直す作業と、事実の線引きを確かめる作業を分けられる、と僕は考えています。

なかでも効くのは、注記と「年だけ」の線引きでした。登記簿で確かめていない月を書かない、移行中の住所を完了と書かない。どちらも、資料の見た目では気づきにくい種類の誤りです。

HTMLでスライドを作成する土台：1280×960の型と数行のCSS

HTMLでスライドを作るとき、土台は数行のCSSで足ります。1ページの大きさを決め、1枚ずつ改ページさせ、背景色を印刷でも残す指定です。僕の会社の型では、次の書き方をしています。

@page { size: 1280px 960px; margin: 0; }
.page { width: 1280px; height: 960px; page-break-after: always; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

ここでいう @page とは、印刷やPDFにするときの1ページの大きさや余白を決めるCSSの書き方です。MDNによると、size には幅と高さを長さで2つ書けます。2024年からは主要なブラウザの最新版で使える、とされています。

page-break-after: always は、その要素の後で改ページする指定です。MDNでは、新しい break-after: page の旧名で、ブラウザは同じものとして扱うと説明されています。

この指定を付けた .page を並べると、1枚が1ページになります。8月20日の資料のHTMLにも、.page が10枚並んでいます。

print-color-adjust は、印刷のときにブラウザが色を変えてよいかを決める指定です。MDNによると、既定では印刷に合わせて背景画像が省かれたり、文字色が調整されたりすることがあります。

exact は、作ったとおりの色を残すよう求める値です。ただし印刷画面の設定が優先され、必ず効くとは限らない、ともMDNに書かれています。

大きさを1280×960（4:3）にしているのは、社内の提案書の型に合わせるためです。2026年9月20日には、広告の配色を流用した16:9のスライドで提案書を作り、差し戻しになりました。

案件ごとに形が変わると、別の会社の資料に見えてしまうからです。今は、作る前に型のHTMLを読ませています。経緯はClaude Codeでできることに書きました。

PDFにするときは、Chromeを画面なしで動かすヘッドレスモードを使います。Chrome公式の記事には、--print-to-pdf を付けるとページのPDFを作れる、という例があります。

chrome --headless --disable-gpu --print-to-pdf https://example.com/

ただ、この1行で足りない場面もあります。公開中のホームページを全ページPDFにしたときは、埋め込んだ地図が、印刷のときに描画されませんでした。対処はホームページをPDF化する方法に書いています。

PDFにするとスライドが崩れる罠は、画面では見つからない

HTMLのスライドは、ブラウザで正常に見えても、PDFでだけ崩れることがあります。僕の会社の記録に残る黒つぶれは2つです。どちらも、気づかずに出すと文字が読めない資料になります。

1つ目は、マーカーが黒い帯になる罠です。2026年8月6日、マーカーのグラデーションの色をCSS変数で書いた資料が、PDFで真っ黒な帯になりました。ブラウザの表示も印刷プレビューも正常でした。

原因の切り分けと直し方は、ChromeのPDFでグラデーションが黒くなる原因にまとめています。この記事では、罠の一覧に載せるだけにします。

2つ目は、番号の丸を作るCSSが本文の太字まで巻き込む罠です。.num b と書くと、.num の中にある <b> がすべて52pxの黒い丸になり、本文の太字が黒い塊に潰れます。

/* 巻き込む書き方：.num の中の <b> がすべて黒い丸になる */
.num b { width: 52px; height: 52px; border-radius: 50%; background: #000; color: #fff; }

/* 直した書き方：直下の子だけに効かせる */
.num > b { width: 52px; height: 52px; border-radius: 50%; background: #000; color: #fff; }
.num .tx b { font-weight: 800; }

こちらはPDFの問題ではなく、セレクタの書き方の問題です。番号のバッジのような飾りは、> を使って直下の要素だけに効かせる、と社内のメモに残しています。

罠ごとに、起きることと僕の会社の対処を並べます。3つ目は事故ではなく、予防として型に入れている指定です。

8月20日の面談資料は、この2つの罠を知った後に作ったものです。罠を知っていても、型のCSSに書き込んでおかないと次の資料で同じことが起きます。だから僕は、対処を記憶ではなく型のファイルに残すようにしています。

Claude Codeでスライド作成を任せる手順と、納品前の検品

Claude Codeでスライドを作るときの手順は、この記事では6つに分けます。型を読ませてから組ませ、PDFにした後を画像で確かめ、直すときはHTMLに戻る流れです。

1. 型のHTMLを読ませる。 過去の資料のHTMLを開かせ、CSSと組み方を読ませてから作らせる
2. ページの割り振りと話す時間を渡す。 何ページ目で何を話すかを表にして渡す
3. 載せる事実の基準を渡す。 公開済みの数字だけ・注記を付ける・載せない項目を文章で書く
4. HTMLで組ませ、ヘッドレスのChromeでPDFにする。
5. 装飾のあるページを2〜3枚、画像にして目で見る。 マーカー・グラデーション・影のあるページは最低1枚
6. 直すときはHTMLを直し、PDFを作り直す。 PDFを直接編集しない

5番目の確かめ方は、PDFの中の1ページを切り出してから画像にします。使うのは、PDFを加工する qpdf と、macOSの画像変換コマンド sips です。

qpdf out.pdf --pages . 4-4 -- /tmp/p4.pdf
sips -s format png -Z 1400 /tmp/p4.pdf --out /tmp/p4.png

先に切り出すのは、社内の記録では sips が複数ページのPDFの1ページ目しか画像にしないためです。こうして作った画像は、macOSのプレビューと同じ描画の仕組みで描かれます。

社内のメモには、Chromeの画面でも、PDFを画像にする一般的な方法でも黒い帯は再現しなかった、とあります。だから確かめる方法まで手順に書いています。

渡す中身を1つの指示文にすると

上の1〜3で渡している中身を、この記事のために1つの指示文の形にまとめました。社内で実際に送った文面ではなく、渡している項目を並べ直した例です。

過去の提案書のHTML（参照用）を読んで、CSSと組み方を同じにしてください。
大きさは1280×960、1ページ1枚、全10ページです。
ページ割り：1表紙／2-3経歴（自己紹介1分）／4-5事業／6特徴／7実績／8会社概要／9実現したいこと（締め）／10裏表紙
載せる事実：公開済みの実績と数字だけ。「実績の一部」「2026年8月時点」の注記を付ける。
載せないもの：売上・資本金・人数・取引先の金額・許可のない社名。
グラデーションの色に var() を使わない。番号の飾りは直下セレクタで書く。

ポイントは、見た目の注文より、型のファイルと線引きを先に渡すことです。デザインを言葉で説明するより、前の資料のHTMLを1本読ませたほうが、見た目をそろえやすいと僕は考えています。

納品前に見る項目

できあがったPDFは、渡す前に次の項目で確かめています。社内の記録とメモにある項目を中心にまとめました。

最後の行は地味ですが、後から直すときに効きます。PDFだけが残っていると、次に直すときに一から組み直すことになるからです。

型のHTMLを毎回読ませる手間は、型をスキルにしておくと減らせます。作り方はClaudeのスキルの作り方で紹介しています。

スライドを任せても、何を載せるか、どこまで言い切るかは人が決めています。8月20日の資料でも、載せない項目の線引きは人が決め、記録に残しました。AIに任せるのは、決めた中身を型どおりに組むところまでです。

まとめ

• Claudeでスライドを作る道は、スライド用テンプレート・PowerPointのファイル作成・HTMLからPDFの3つ。僕の会社はHTMLを正本にしてPDFを作り直す方法を使っている
• 2026年8月20日の面談資料は全10ページ。自己紹介1分に2ページ、事業紹介2分に5ページを割り振った
• 載せる事実は、公開済みの数字だけ・注記2本・確かめていない月は書かない、と基準を文章にした
• HTMLの土台は @page の大きさ・改ページ・print-color-adjust の数行。PDFでだけ崩れる罠は、ページを画像にしないと見つからない
• 僕なら最初に、過去にうまくいった資料のHTMLを1本選び、それを型として読ませるところから始めます