# A4 Booklet

> 挿絵入りの A4 冊子（ルールの要約、入門ガイド、ファンガイド、手引き書）を、1つの HTML を正本にして Chrome のヘッドレス印刷で PDF にする手順と雛形。ユーザーが「〇〇のルールブックを作って」「はじめてガイドを作って」「ルール要約を挿絵入り PDF にして」「冊子を PDF で作りたい」「同じ要領で別の版も」と言ったとき、または既に作った冊子の別版、続編、修正を作るときに使う。ページ画像での検証、挿絵の用意、ページ番号の付け替え、原作の文章を写さない決まりを含む。1枚ものの背景付き PDF は bg-pdf を使う。

- Skill: `shikigami-ai-works/a4-booklet` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add shikigami-ai-works/a4-booklet`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shikigami-ai-works/a4-booklet/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shikigami-ai-works (https://skillmd.com/u/shikigami-ai-works)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/shikigami-ai-works/a4-booklet

---


# 挿絵入り A4 冊子（HTML から PDF）

## 原則

- 正本は作業フォルダの `<slug>/<slug>.html` の1ファイル。PDF、ページ画像、ZIP は全部そこから作る物で、直すのは必ず HTML 側。
- 原作がある冊子（ゲームのルール要約、作品のファンガイドなど）では、公式の文章と表を写さない。ルールの数値と仕組みは事実として自分の文で書く。細部が不確かなら断定せず、「正式には公式のルールブックを参照」へ逃がす。表紙と最終ページに非公式、二次創作である旨の断り書きを入れる（文面は `template.html` の中にある）。原作の権利者が二次創作の指針を出していれば、先に読んで従う。
- 1章を1ページ（A4）にする。入りきらないときは `.tight` を付けるか章を分ける。ページからのはみ出しは不合格。

## 要る物

- Python 3.10 以上と Pillow（`pip install pillow`）。PDF にするだけなら Pillow は要らない
- Chrome か Chromium 系のブラウザ（Windows では Edge でもよい）。`render.py` が既定の場所と PATH を探す。別の場所なら `--chrome <path>` か環境変数 `CHROME_PATH` で渡す

## 手順

1. 企画: 対象と版、章立て（表紙、序と目次、本文の章 × N、早見表）を決める。複数の作業日に渡る規模なら、進み具合を記録するファイルも作る。
2. 骨格: この Skill の `template.html` を `<slug>/<slug>.html` へ複製し、書名、版の表記、断り書きを差し替える。紙の質感のタイルは `python render.py <slug>.html --make-noise` で `img/noise.png` に作る。
3. 執筆: 章ごとに `.page` を書く。各ページに h2（`<span class="num">章番号</span>`）とフッター（書名とページ番号）を必ず入れる。図解はインライン SVG で描く。色は既定の5色（緑＝補足、紫＝例、赤＝警告、真鍮＝飾り、濃紺＝見出し）から選び、色数を増やさない。語りとキャプションは短い文にし、冊子の中で口調をそろえる。
4. 検証: `python render.py <slug>.html --screenshot --page-count <N>` で縦長の PNG を撮ってページごとに分け、全ページを開いて見てから次へ進む。はみ出し（本文がフッターに食い込む）は、そのページだけ `.tight` を付けて撮り直す。
5. PDF にする: `python render.py <slug>.html --pdf` で出す。script が出すページ数と大きさを確かめてから渡す。
6. 挿絵（頼まれたとき）: 先に `image-prompts.md` に全枚の指示文を書く。全枚に同じ画風の文を付けて絵柄をそろえる。指示文の書き方は使う画像生成の道具に合わせる（自然文が効く物と、単語を並べる形が効く物がある）。原本の PNG はフォルダ直下、PDF に埋め込む JPEG（幅の上限 1200px、品質 82）は `img/` に置き、両者の連番を崩さない。口絵は `.plate` のページとして章の間に入れ、キャプションは一言にする。
7. ページ番号の3点: ページを増やしたり減らしたりしたら、必ず ① 目次のページ番号 ② それ以降の全ページのフッターの番号 ③ 本文中の `→P.x` の相互参照 の3か所を直す。
8. 仕上げ: `python render.py <slug>.html --screenshot --page-count <N> --scale 2` で高解像度のページ画像を作り、`--zip` で PNG 版と JPEG 版の ZIP を作って、PDF と一緒に渡す。

## 落とし穴（すべて実際に起きた）

- 紙の質感に SVG の `feTurbulence` を data URI で使うと、Chrome で印刷したとき全ページが画像にされ、PDF が 5.1MB から 34.5MB へ膨らんだ。96px の PNG タイルを `background-repeat` で敷く。
- 古い `--headless` は `--print-to-pdf` で exit 1 のまま何も言わずに失敗する。`--headless=new` を使う（`render.py` はそうしている）。
- Web フォントの読み込みより先に撮影や印刷が走ることがある。`--virtual-time-budget=25000` を付ける（`render.py` は付けている）。
- 普段使いの Chrome が起動していると、ヘッドレスの Chrome が何も書かずに終わることがある。`render.py` は一時の `--user-data-dir` を使い、PDF の更新時刻が変わらなければ止まる。
- ページ画像の境目には隣のページの帯が 1px 混ざる。上下 2px を削って消す（`render.py` がやる）。
- 分割の1ページの高さは 296mm＝1118.74px（`render.py` の既定値。`--page-h` で変えられる）。この値がずれると後半のページほど上端が欠けて写る。分けた後は最終ページの下端（断り書きとフッター）まで確かめる。
- ダウンロードした挿絵をフォルダから拾うときは、「直前に記録した時刻より新しいファイル」だけに絞る。「一番新しい1件」を掴むと、ダウンロードが遅れたときに無関係なファイルを拾う。

## 参照ファイル

- `template.html`: 検証済みの CSS 一式（A4 固定の `.page`、表紙、口絵 `.plate`、`.tight`、目次、フッター、断り書きの雛形）
- `render.py`: 質感のタイル作り、撮影と分割、PDF 化、ZIP 作りを1本にした実行 script。使い方はファイル冒頭のコメントにある