html-deck

HTML スライドデッキから PDF を作成するワークフロー

ヘッドレス Chrome を使って、洗練されたプレゼンテーション用 HTML スライドデッキを作成し、鮮明な PDF に変換します。

使用する場面

• プログラムのドキュメント、メモ、アウトラインをもとに新しいスライドデッキを作成する。
• 粗削りなコンテンツを、プロフェッショナルなプレゼンテーションに仕上げる。
• ページの寸法を正確に指定して、HTML デッキの PDF 版を生成する。
• アプリのスクリーンショットや製品ビジュアルを含むデッキを作成する。

進捗チェックリスト

Deck Build Progress:
- [ ] Phase 1: Slide skeleton (HTML + CSS foundation)
- [ ] Phase 2: Content population (slides from source material)
- [ ] Phase 3: Visual polish (spacing, typography, layout fixes)
- [ ] Phase 4: Print-safe CSS
- [ ] Phase 5: PDF conversion (use bundled script; do not reimplement)
- [ ] Phase 6: Verification (screenshot comparison)

フェーズ 1 — スライドの骨組み

Domo テーマを使用する — 最初に必ず実施

1. references/domo-theme.md を読みます。Domo テンプレートと完全に一致するスライドを生成する、コピーしてそのまま使える完全な HTML 骨組みが含まれています。
2. references/assets/logo-data-uri.txt を読みます。実際の Domo ロゴを Base64 PNG データ URI 形式で収録しています。骨組みにある LOGO_DATA_URI のプレースホルダーをすべてこの値に置き換えます。
3. ロゴの PNG は references/assets/domologo.png にもあります。

この手順を省略しないでください。 テーマファイルから完全な骨組みをコピーし、その中にスライドを作成します。すべてのコンテンツスライドには、必ず次の要素が必要です。

• ヘッダー：<div class="slide-header"> に <h1>、.subtitle、および .header-line（薄いグレーの区切り線。必須）を含めます。
• コンテンツ：<div class="slide-content has-bg"> を使います。グレーの #DDE5ED 背景には、必ず has-bg を使用してください（これが Domo のスタイルです。コンテンツは自動的に垂直方向中央に配置されます）。
• フッター：<div class="slide-footer"> に .confidential（左）、.footer-line（中央）、および <img src="LOGO_DATA_URI"> を含む .domo-badge（右下。必須）を配置します。

寸法

標準の 16:9 ワイドスクリーン：--slide-w: 1024px; --slide-h: 576px;

コンテンツ領域の配置

has-bg クラスが、垂直方向の中央配置（display:flex; justify-content:center）を含む配置（position:absolute; top:90px; bottom:52px）を自動的に処理します。これらをインラインスタイルで上書きしないでください。

フェーズ 2 — コンテンツの追加

スライドの種類ごとのパターン

テーブルスライド — 見出し付きの列を備えたスタイル設定済みの <table> を使います。情報量の多いスライドでは、セルのパディングを小さくします（6px 10px）。

フロー／パイプラインスライド — ボックスを横一列に並べたフレックス行を作り、矢印の区切り（▶）を使用します。左または上の境界線に色を付けて、各フェーズを区別します。

カードグリッド — 幅が等しいカードをフレックス行に並べます。各カードに flex:1 を指定し、統一したパディングと控えめな背景色（#F6F8FA）を使います。

アーキテクチャ図 — フレックスコンテナーを入れ子にします。色付きのカードグループを使い、各レイヤーにラベル（例：「INTELLIGENCE LAYER」、「STORAGE」、「COMPUTE」）を付けます。

スクリーンショットの紹介 — メイン画像を中央に 1 枚配置するか、max-width:48% で 2 枚を横並びにします。仕上がりを整えるために border-radius:8px を適用します。box-shadow は使わないでください（印刷用 CSS で削除されます）。

情報ボックス — メインコンテンツの下に 2 つのボックスを並べます。display:flex; gap:32px を使い、各ボックスに flex:1 を指定します。

タイポグラフィのサイズ

要素	サイズ	ウェイト
スライドタイトル（h1）	28px	800
サブタイトル	11px	700
セクションラベル	10px	700、大文字、letter-spacing 2px
本文	13–14px	400
テーブルのテキスト	11–13px	400
注記／キャプション	9–10px	400

色のルール

一貫性を保つために CSS 変数を使います。ブランドカラー、アクセントカラー、テキストの色合いを :root で定義します。

フェーズ 3 — ビジュアルの仕上げ

間隔のルール

1. コンテンツがフッターに触れないようにしてください。 .slide-content の bottom:52px により、52pxの除外領域が確保されます。それでもコンテンツが重なる場合は、該当する要素の margin-top、padding、gap、font-size、または line-height を小さくしてください。

2. ヘッダーとコンテンツの間隔。 .slide-content の top の値で、ヘッダーの下の余白を調整します。一般的な値は 88–100px です。サブタイトルのテキストがコンテンツと重なる場合は、値を大きくしてください。

3. 情報量の多いスライド。 テーブルと情報ボックスの両方があるスライドでは、コンパクトな値を使用してください。

   • テーブルセルのパディング：4px 10px
   • 情報ボックスのパディング：5px 12px
   • カード間の間隔：3–5px
   • フォントサイズ：デフォルトより1px小さくする

4. justify-content:center を使う際の注意。 垂直方向の中央揃えにより、コンテンツが bottom を超えることがあります。コンテンツの多いスライドではこれを削除し、コンテンツが上から流れるようにしてください。

画像の扱い

• src のパスにあるスペースはURLエンコードしてください：Sample%20Assets/file.png。
• ファイル名に特殊なUnicode文字を使用しないでください。必要に応じて、シンプルなファイル名にコピーしてください。
• コンテンツ領域内に自動的にサイズを調整するには、max-width:100%; max-height:100% と object-fit:contain を使用してください。

フェーズ4 — 印刷対応CSS

Chromiumの印刷パイプラインによるPDFのレンダリングでは、box-shadow の扱いが画面表示と異なります。PDF出力では影が濃いブロックのように表示されます。

必須ルール（上記のスケルトンにすでに含まれています）：

@media print {
  *, *::before, *::after {
    box-shadow: none !important;
  }
}

これにより、印刷時のみすべての影が取り除かれます。HTMLブラウザー表示では影が維持されます。

印刷に関するその他の考慮事項：

• .slide の page-break-after: always — 1ページにつき1スライド。
• page-break-inside: avoid — スライドの途中で分割されないようにします。
• body の background: white — グレーのビューアー背景を表示しません。

フェーズ5 — PDFコンバーター

コンバーターを一から書き直さないでください。 このスキルには、メンテナンスされているスクリプト references/convert-to-pdf.js が付属しています。ユーザーのプロジェクトにコピーするか、インストール後にスキルのディレクトリからパスを指定して実行してください。

npm install puppeteer-core
node convert-to-pdf.js path/to/deck.html path/to/deck.pdf
# optional second arg omitted => writes next to the HTML with .pdf extension

このスクリプトでは、以下の方法に合わせて、同梱のChromiumではなくシステムのChromeバイナリと puppeteer-core を使用します。

主な設定（スクリプトに実装済みです。明確な理由がある場合のみ変更してください）：

• deviceScaleFactor: 2 — Retinaディスプレイでも鮮明なテキストを表示します。
• printBackground: true — 背景色を保持します。
• margin: { top: 0, ... } — スライドの周囲に余分な空白を設けません。
• width/height は --slide-w/--slide-h と正確に一致させる必要があります。
• キャプチャ前に document.fonts.ready を待機します — Google Fontsの読み込みが完了している必要があります。

package.json の設定

{
  "scripts": { "pdf": "node convert-to-pdf.js" },
  "dependencies": { "puppeteer-core": "latest" }
}

puppeteer ではなく puppeteer-core を使用してください。完全版の puppeteer パッケージは、インストール時に独自のChromiumをダウンロード（数百MB程度）して、そのブラウザーを使用します。一方、puppeteer-core は自動化ライブラリのみで、既存のChrome/Chromiumを executablePath で指定する必要があります（このスクリプトはシステムのChromeを検索します）。インストール容量を抑え、更新するブラウザーを1つにし、CIやキャッシュに関する問題を減らせます。

フェーズ6 — 検証

HTMLの各スライドとPDFの各ページのスクリーンショットを撮り、見た目を比較してください。

簡易検証スクリプト

// Screenshot slide N from the HTML
const box = await page.evaluate((idx) => {
  const el = document.querySelectorAll(".slide")[idx];
  const r = el.getBoundingClientRect();
  return { x: r.x, y: r.y, width: r.width, height: r.height };
}, slideIndex);

await page.screenshot({ path: `html_slide_${n}.png`, clip: box });

確認項目

• ページ数がスライド数と一致している。
• どのスライドもフッターによってコンテンツが切れていない。
• フォントが読み込まれている（フォールバックのセリフ体／サンセリフ体ではない）。
• すべての画像が表示されている（画像の破損アイコンや代替テキストが表示されていない）。
• カードや画像の周囲に濃い色や影のブロックがない。
• 背景色とグラデーションが保持されている。
• ページの端がくっきりしている（余分な余白がない）。

よくある落とし穴

症状	原因	対処方法
コンテンツがフッターに重なる	bottom が設定されていない、またはコンテンツが多い場合に justify-content:center が指定されている	.slide-content に bottom:52px を設定します。コンテンツが多いスライドでは垂直方向の中央揃えを削除します
PDF で要素の周囲に暗いブロックが表示される	印刷時に box-shadow が異なる方法で描画される	@media print { * { box-shadow: none !important; } } を追加します
画像が読み込まれない	ファイルパスにスペースまたは Unicode 文字が含まれている	スペースを URL エンコード（%20）します。ファイル名を簡潔なものにしてファイルをコピーします
フォントがセリフ体にフォールバックする	networkidle0 を待機していない、またはフォントがブロックされている	document.fonts.ready を待機します。Google Fonts の URL が正しいことを確認します
Chrome が見つからない	Puppeteer がブラウザーを見つけられない	puppeteer-core と、システムの Chrome を指定する executablePath を使用します
ページの周囲に余白が余分にある	PDF の余白がゼロに設定されていない	margin: { top: 0, right: 0, bottom: 0, left: 0 } を設定します
PDF のテキストがぼやける	デバイススケールファクターが低い	ビューポートで deviceScaleFactor: 2 を設定します

チェックリスト

• スライドの寸法が CSS 変数 --slide-w および --slide-h と一致している
• フッターとの重なりを避けるため、すべての .slide-content に bottom:52px が設定されている
• @media print ブロックで、すべての box-shadow の値が削除されている
• 印刷用に .slide に page-break-after: always が設定されている
• コンバーターが、システムの Chrome のパスを指定して puppeteer-core を使用している
• PDF オプションで printBackground: true と余白ゼロが設定されている
• Retina 品質のため、deviceScaleFactor: 2 が設定されている
• PDF のキャプチャ前にフォントの読み込みが完了するまで待機している
• 画像パスが URL エンコードされている（生のスペースが含まれていない）
• 表紙、コンテンツが多いスライド、スクリーンショットを含むスライドで表示を確認している