bokuwalily Procedure
- スライドHTMLを書く（1ファイル完結）。各スライド＝1ページ：
@media print { @page { size: 1280px 720px; margin: 0; } /* 96dpiで16:9。px指定が効く */ html, body { background: #fff; } .slide { margin: 0; page-break-after: always; } .slide:last-child { page-break-after: auto; } } .slide { width: 1280px; height: 720px; padding: 70px 88px; overflow: hidden; display: flex; flex-direction: column; } @media screen { .slide { margin: 24px auto; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); } } - ローカルサーバで配信（
file://はPlaywright/Chrome headlessでブロックされる）：cd <dir> && (python3 -m http.server 8777 >/dev/null 2>&1 &) ; sleep 1 curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1:8777/deck.html # 200を確認 - headless ChromeでPDF化：
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" "$CHROME" --headless=new --disable-gpu --no-pdf-header-footer \ --print-to-pdf="出力.pdf" "http://127.0.0.1:8777/deck.html" - 必ず自己検証：
ReadツールでPDFをpages:"1-8"指定して全ページ目視。はみ出し・見切れ・フッター被りを確認。 - 終わったら
pkill -f "http.server 8777"でサーバ停止。
Pitfalls
box-shadowは使うな（2026-07-03実害）：スライド内要素の影はPDF化するとPreview.appで濁ったグレー矩形として描画される（特にダーク画像直下の濃い影）。ユーザーに「グレーの背景が醜い」と指摘された。装飾はborder-radius・罫線・余白で。- 実物スクショに
object-fit: coverを使うな（同日実害）：固定高さ+coverは左右を無断トリミングし文字が見切れる。実物証拠系の画像はwidth:100%; height:autoの原寸比率で全体表示。行の高さ揃えは.card { display:grid; grid-template-rows: <画像行の固定高> auto }で行い、画像中心を揃えたい時はalign-self:center。 - スクショの黒余白はPILのautocropで落とす：
im.convert("L").point(v>30).getbbox()+pad≈34px。角丸はCSSborder-radius+overflow:hiddenで足りる（画像加工不要）。 file://の可否は経路次第：Playwright MCPはAccess to "file:" protocol is blocked。Chrome headless直呼びは--virtual-time-budget=8000を付ければfile://でもWebフォント込みで安定した（2026-07-03実績）。不安定ならhttp配信にフォールバック。- 縦オーバーフローが最大の敵：
.slideはoverflow:hiddenなので超過分は無音で見切れる。グリッドが縦に伸びる系（カード2段・統計4枚）は要注意。実レンダリングで毎回確認。統計は横1列、説明文は短く。 --no-pdf-header-footer必須：付けないと日付・URLが各ページに焼き込まれる。- フォント：Google Fonts（明朝＝Shippori Mincho＋ゴシック＝Zen Kaku Gothic New 等）はネット接続時のみ。オフライン提示があるならローカル埋め込みを検討。
- スクショ検証時のreveal罠：IntersectionObserverの
opacity:0初期値はhtml.jsでゲートし、JS無効/印刷時は表示させる（でないとPDF/フルページスクショで内容が消える）。
Verification
pdftoppm -png -r 100 deck.pdf preview/pでPNG化→Readで全ページ目視が軽くて確実。(1)見切れゼロ (2)フッターと本文が被らない (3)数字・固有名詞が実データ通り (4)影・グレー矩形なし、を確認してから完了宣言する。- デザインは全ページ同一トーンを維持（1ページだけ背景色を変えるとユーザーNG実績あり）。変えるのは表紙・裏表紙だけ。