# A4 チラシ デザインガイドライン

プロのデザイナーが作ったレベルの A4 チラシを、AI が安定して作るための指針。HTML/CSS で組み、PNG で納品する。

| 環境 | 使い方 |
|------|--------|
| **Claude Code / Codex**（リポジトリを開ける） | このリポジトリで「flyer/guideline.md に従ってチラシを作って」と頼む。書き出しは `flyer/tools/render.sh`、機械検証は `flyer/tools/check_flyer.py`（§3・§11） |
| **claude.ai / ChatGPT** | このファイルを添付するか、公開 URL を読ませて同じように頼む。ツールが使えない環境では §11 の検証を同等のスクリプトか、§9 のチェックリストの目視で行う |
| **人の手で微調整** | チラシ編集スタジオ（公開サイト、または `flyer/editor/index.html` をブラウザで直接開く）に納品 HTML を読み込み、ドラッグで配置・文字・配色を直して PNG/PDF/HTML に書き出す。「検査」ボタンで §11 と同じ観点（重なり・マージン外・8pt 未満・あふれ・§7.1 の AI っぽい型）を確かめられる |

以下の手順は環境によらず同じ。「質問ツール」「サブエージェント」など環境に無い道具は、同じ目的を普通の返信で果たせばよい。

---

## 0. 絶対原則(この4つは省略・変更不可)

1. **合意してから作る。** §1 で足りない情報を聞き、デザイン方針に合意してから組版に入る。依頼文や添付から分かることは聞かずに要約して確認に回す。
2. **安っぽいデザインは納品しない。** §7の「安っぽさ禁止リスト」と§7.1の「AI感の禁止リスト」に1つでも該当したら作り直す。目標は「プロのデザイナーに外注した」と思われる水準。
3. **納品は必ず2形式。** ①HTML(修正可能な元データ)②PNG(確認・印刷・SNS用、300dpi)。2つ揃っていない納品は未完成とみなす。
4. **修正依頼は「パッチ」ではなく「再レイアウト」として扱う。** 既存チラシへの要素追加・文言変更・サイズ変更は、新規制作と同じ品質水準が求められる。§10の修正ワークフローと§11 の機械検証を必ず通し、目視だけに頼らない。修正のたびに品質が落ちるのは、この工程を省略した証拠。

---

## 1. ヒアリング(制作前に必ず質問する)

制作前に、以下のうち分からない項目だけを依頼者に聞く。質問は**1 回にまとめ、最大 4 問**。各問に選択肢とおすすめ(理由つき)を添えて即答できるようにする(選択式の質問ツールがある環境では、それを使う)。細かい点は解釈を宣言して進み、納品時に報告する。

### 必須確認項目
| # | 質問 | 例 |
|---|---|---|
| 1 | チラシの目的は? | イベント集客 / 新店舗告知 / 求人 / セール |
| 2 | ターゲットは誰? | 30〜40代の子育て世帯、近隣のシニア層 |
| 3 | 一番伝えたいこと(1つだけ)は? | 「3/15 グランドオープン」 |
| 4 | 必ず載せる情報は? | 日時・場所・料金・連絡先・QR・地図・ロゴ |
| 5 | 希望のトーン・雰囲気は?(3語まで) | 上品・あたたかい・信頼感 |

### 状況に応じて確認する項目
- 希望の配色やコーポレートカラーの有無(HEXやロゴがあれば共有してもらう)
- 参考にしたい雰囲気(「Canvaのナチュラル系」「高級ホテルのDMのような」等、言葉でOK)
- 写真素材の有無(ある→アップロードしてもらう / ない→図形・タイポ主体で構成)
- 避けたい色・書体・表現
- 縦型か横型か、片面か両面か
- 掲載文言は確定か、コピーの提案も必要か

**回答を得たら、着手前に「デザイン方針」を1段落で提示して合意を取る**(スタイル・配色・フォント・レイアウト構成)。方針合意→制作、の順を守る。

---

## 2. 制作ワークフロー

1. **ヒアリング**(§1)→ 回答を待つ
2. **デザイン方針の宣言と合意**: スタイル・配色(HEX明示)・フォント・レイアウト構成を提示。「どの案件にも出せる無難な案」になっていないか自己批評し、この案件固有の要素(業種・土地・商品の世界観)から発想し直す
3. **HTML/CSSで組版**: A4固定サイズのHTML(§3)。あとから文言・色を直しやすいよう、CSS変数と意味の分かるclass名で構造化する
4. **PNG化**: `flyer/tools/render.sh` でヘッドレス Chrome → PDF → 300dpi の PNG にする(PDF はレンダリング精度を保つための中間ファイルであり、納品しない)
5. **セルフレビュー**: 必ずPNGを生成して**画像として目視**し、次を確認する
   - **文字化けがないか**: 「□」(豆腐)、「?」、意図しない字形になっていないか。日本語フォントの読み込み失敗が典型原因。1文字でも化けていたらフォント埋め込みを修正して再レンダリング
   - **文字が十分大きいか**: 50%縮小表示でもメインキャッチと日時・場所が読めるか。「少し大きすぎるか」と感じる程度が適正(§5.2)
   - **折り返しが美しいか**: 1〜3文字だけのはみ出し行がないか、見出し・キャッチが意味の句切れで改行されているか、日付や電話番号が行途中で分断されていないか(§5.3)
   - **不自然な余白・バランス崩れがないか**: 片側だけ空いた穴、下部の間延び、要素間隔のばらつき(§4.3の手順で修正)
   - §9チェックリストを全通過するまで「レンダリング→目視→修正」を繰り返す(最低1周、問題があれば何周でも)
   - 目視に加えて**§11 の機械検証(`flyer/tools/check_flyer.py`)を実施**し、数値で合格を確認する。サブエージェントを使える環境では PNG を渡して別の目でも見させる
6. **2形式で納品**(§8)+ 修正方法の説明を添える

> はみ出し・重なり・余白の乱れ・階層の曖昧さは、目視確認をサボったときに起きる。コードの正しさ≠紙面の美しさ。

---

## 3. 技術仕様(A4・印刷対応)

```css
/* A4 = 210mm × 297mm。塗り足しが必要なら 216mm × 303mm(各辺+3mm) */
@page { size: A4; margin: 0; }
.page {
  width: 210mm;
  height: 297mm;
  overflow: hidden;          /* 最終確認時は一時的に visible にしてはみ出し検知 */
  position: relative;
  box-sizing: border-box;
}
```

- 単位は **mm** を基本(pxは画面用。印刷物はmm指定が正確)
- **安全マージン: 四辺 12〜15mm**。文字・ロゴはこの内側
- 背景色・写真を紙端まで敷く場合は塗り足し3mmまで伸ばす
- 画像は300dpi相当(A4全面なら約2480×3508px)
- フォントは`@font-face`でローカル読み込み(Google Fonts等をダウンロードして埋め込み)。納品HTMLでもフォントが再現されるよう、入手先とフォント名をHTML冒頭コメントに明記する
- フォントのサブセット化(使う文字だけに絞って軽くする。文言を変えたら作り直す):
  ```bash
  # fontTools 同梱の pyftsubset。本文の全文字を text.txt に書き出して渡す
  pyftsubset NotoSansJP-Bold.ttf --text-file=text.txt --flavor=woff2 --output-file=fonts/NotoSansJP-Bold.sub.woff2
  ```
- PNG 書き出し(ヘッドレス Chrome で PDF にしてから 300dpi の PNG にする。PDF は中間ファイルで自動で消える):
  ```bash
  flyer/tools/render.sh カフェ陽だまり_オープン告知チラシ.html   # → 同じフォルダに .png
  ```
  2 ページ以上になったら警告が出る(はみ出しで 2 ページ目ができている)。

### 修正しやすいHTMLの書き方(納品物の品質要件)
- 色・余白・角丸などはすべて`:root`のCSS変数に集約し、日本語コメントを付ける
- 文言はHTML側に、装飾はCSS側に分離。「日付を変えたい」「電話番号を直したい」がテキスト置換だけで済む構造にする
- ファイル冒頭に「よくある修正箇所と直し方」をコメントで記載する(例: 「メインカラー変更→ --main の値を書き換え」)

---

## 4. レイアウト — プロ品質の核心

### 4.1 グリッドを敷く
- **12カラムグリッド**+ **8ptベースライン**(余白・行送りを4mm/8mmの倍数に統一)
- すべての要素をグリッドに吸着。「なんとなく置く」を禁止
- 揃え方は1枚の中で統一(左揃え基調 or 中央揃え基調)

### 4.2 視線の流れを設計する
- **Z型**(情報型): 左上ロゴ → 右上日付 → 中央ビジュアル → 右下CTA
- **中央一点型**(イベント型): 中央に巨大タイトル、周辺に小さな情報
- 読み順は「①キャッチ → ②ビジュアル → ③詳細 → ④行動(CTA/QR)」の4ステップ

### 4.3 余白は「素材」— ただし不自然な空白は欠陥
- 紙面の**30〜40%は余白**。詰め込みたくなったら情報を削るか、依頼者に優先順位を質問する
- 余白に階層をつける: 強い関連=近く(4〜8mm)、セクション間=広く(12〜20mm)
- **良い余白と悪い空白を区別する**:
  - 良い余白 = 意図して設計された、要素を引き立てる均等・規則的な空間
  - 悪い空白 = 要素が入り切らず余った穴、片側だけ空いた不均衡、下部だけ間延びした空間
- **バランス自己修正の手順**(レンダリング後に必ず実施):
  1. PNGを俯瞰し、紙面を上下左右に4分割して要素の重さ(密度)が極端に偏っていないか見る
  2. 不自然に空いた領域があれば、①隣接要素を拡大する ②余白を全体に均等に再配分する ③レイアウト構成自体を組み直す、のいずれかで解消する(小物を足して埋めるのは禁止)
  3. 同種の要素間の間隔がすべて同じ値になっているか確認する(カード間・行間・セクション間のばらつきは即修正)

### 4.4 面積のメリハリ
- 最大要素:最小要素 = **10:1** 程度の差をつける。全部同じ大きさ=全部埋もれる
- 構成比の出発点: ヘッダー8% / ヒーロー45% / 詳細27% / CTA14% / フッター6%(内容に応じて崩してよいが、メリハリは死守)

### 4.5 記号・連結要素(×・&・+・vs 等)の組み方 — 素人感が最も出やすい箇所
「20社 × 80名」「A & B」のように、左右の要素を記号でつなぐレイアウトは頻出だが、雑に組むと即座に安っぽくなる。以下を必ず守る。

**位置(センタリング)**
- **flexの中央寄せ(justify-content:center)に記号の位置を任せることを禁止。** 左右の要素幅が違うと(例:「徳島の経営者」と「参加学生」)、記号が中心軸から数mmずれる。これは目視で気づきにくく、仕上がりの違和感の主因になる
- 正しい組み方: **grid で `1fr 固定幅 1fr` の3カラム**を作り、記号は中央カラムに固定。左カラムは `justify-self:end`、右カラムは `justify-self:start`
  ```css
  .pair { display: grid; grid-template-columns: 1fr 20mm 1fr; align-items: center; }
  .pair .left  { justify-self: end;   width: 56mm; text-align: center; }
  .pair .right { justify-self: start; width: 56mm; text-align: center; }
  .pair .mark  { justify-self: center; }
  ```
- **左右の要素は同幅に揃える**(width指定+text-align:center)。これで左右対称になり、記号が真の中心に乗る
- 記号を含む行が**上下に複数並ぶ場合(例: 数字の行とバッジの行)、すべての行で中央カラム幅と左右幅を同一にし、中心軸を共有させる**。数字の中心とバッジの中心が縦に揃うと紙面にリズムが生まれる

**サイズ**
- 記号の実描画(インク)高さは、**隣接する主要素のインク高さの55〜70%**。デフォルトの本文サイズのまま置くと小さすぎて貧相になる(例: 34ptの数字に対し20ptの×は小さすぎる。30〜36ptが適正)
- 同一紙面に複数の連結記号(×と&など)があるときは、**記号どうしの実描画サイズを揃える**(±0.5mm以内)

**縦位置(光学中心)**
- 記号はCSSボックスの中心ではなく**光学(インク)中心**で隣の要素に合わせる。フォントのベースライン設計により、box中心合わせでは0.5〜1mmずれることがある
- 手順: レンダリング後にインクのバウンディングボックスを実測(§11)→ 差が0.5mmを超えたら `margin-top` の負値などで光学補正 → 再実測で0.5mm以内を確認

---

## 5. タイポグラフィ

### 5.1 フォント選定(日本語)
| 役割 | 推奨 | トーン |
|---|---|---|
| 見出し(ゴシック) | Noto Sans JP Black / Zen Kaku Gothic New / M PLUS 1p | モダン・力強い |
| 見出し(明朝) | Noto Serif JP / Shippori Mincho / Zen Old Mincho | 上品・和風・高級 |
| 本文 | Noto Sans JP Regular / BIZ UDPGothic | 可読性重視 |
| 数字・英字 | Montserrat / Oswald / Playfair Display | 日付や価格を引き締める |

- **1枚につき最大2書体**(日本語1+欧文1)。変化はウェイト差で作る
- 欧文フォントは**日付・価格・時刻・URLなど実用情報にのみ**使う(例: `3.15 SAT 10:00`)
- **装飾目的の英語併記は禁止。**「お問い合わせ CONTACT」「アクセス ACCESS」のように日本語の後ろに意味なく英語を添えるのはAI生成物の典型的な癖であり、素人感の原因。英語を使うのは、依頼者の指示がある場合か、店名・ブランド名が元々英語表記の場合のみ

### 5.2 サイズ階層(A4基準)— 迷ったら大きく
| 要素 | サイズ | 備考 |
|---|---|---|
| メインキャッチ | 60〜100pt | 3m離れて読める。紙面の主役として堂々と大きく |
| サブキャッチ | 24〜36pt | |
| 見出し | 16〜22pt | |
| 本文 | 11〜13pt | 行送り1.6〜1.8。10.5pt未満は使わない |
| 注釈 | 8〜9pt | 8pt未満は禁止(印刷で潰れ、高齢者に読めない) |

- **「少し大きすぎるかな」がチラシでは適正サイズ。** 画面では十分に見えてもA4印刷では小さく感じるため、迷ったら1段階大きくする
- 文字を大きくして入り切らない場合は、**文字を小さくするのではなく情報を削る**(または依頼者に優先順位を質問する)
- 隣接階層は**1.5倍以上**のサイズ差
- 見出しは字間をやや詰め(0〜0.02em)、短い和文キャッチは空ける(0.1〜0.3em)
- 本文は1行15〜35文字。超えたら段組み

### 5.3 折り返し・改行のルール(見栄えを大きく左右する)
- **1〜3文字だけ次行にはみ出す折り返しを禁止**(例: 「グランドオープ/ン」「ください/。」)。発見したら、①ボックス幅の調整 ②文字サイズ・字間の微調整 ③文言の言い換え(依頼者の原文を変える場合は確認)のいずれかで必ず解消する
- **キャッチコピー・見出しは意味の句切れで手動改行する**。自動折り返しに任せず、`<br>`で文節の切れ目に改行を入れる
  - 悪い例: `地域とつながる、あたたかいカフェがつ<br>いにオープン`
  - 良い例: `地域とつながる、<br>あたたかいカフェが ついにオープン`
- 改行位置の原則: 助詞(が・を・に・の 等)や読点の**直後**で切る。単語・複合語の途中で切らない
- 本文にはCSSで折り返し制御を入れる:
  ```css
  p { text-wrap: pretty; }          /* ぶら下がり1文字を自動回避 */
  h1, h2 { text-wrap: balance; }    /* 複数行見出しの行長を均等化 */
  .no-break { white-space: nowrap; } /* 日付・固有名詞・電話番号は途中で切らない */
  ```
- 日付・時刻・電話番号・店名・「¥1,000」等の数値は**行途中で分断させない**(nowrapで保護)
- 行頭に「。、」」が来る、行末に「(「」が残る等の禁則違反がないか、PNG目視で確認する
- 3行以上になるキャッチは長すぎる。2行以内に収まるよう文言を練り直す

---

## 6. 配色・ビジュアル

### 6.1 60-30-10ルール
- **ベース60%**: 白 / オフホワイト / ごく淡い色
- **メイン30%**: ブランドカラー(見出し・図解・写真のトーン)。1つのセクションだけを濃色の地にして使い切らない(§7.1)
- **アクセント10%**: CTA・価格・強調のみ

### 6.2 運用ルール
- **3色+無彩色まで。** 迷ったら減らす
- 全色をCSS変数で定義:
  ```css
  :root {
    --base: #FAF7F2; --main: #1D3A5F; --accent: #E8613C;
    --ink: #222222;  --sub: #6B6B6B;
  }
  ```
- 文字と背景のコントラスト比4.5:1以上
- 奥行き演出(淡いグラデーション、透明度5〜10%のテクスチャ・幾何学パターン)は**1箇所だけ**

### 6.3 トーン別パレット例(出発点。案件固有に必ず調整)
| トーン | ベース | メイン | アクセント |
|---|---|---|---|
| ナチュラル・カフェ | #F7F3EC | #4A5D3A | #C97B4A |
| 信頼・ビジネス | #FFFFFF | #1D3A5F | #2E9BB5 |
| 和風・上質 | #F5F1E8 | #2B2B2B | #9E2B25 |
| ポップ・イベント | #FFF9E8 | #FF6B35 | #2E86AB |
| 高級・ミニマル | #111111 | #D9CBA8 | #FFFFFF |

### 6.4 ビジュアル要素
- **写真**: 大きな1枚をヒーローに。小さい写真を散らさない。文字を載せるなら黒20〜40%のオーバーレイで可読性確保
- **写真なし**: 日付や数字そのもの、題材の名前を大きな文字で組んで主役にする。意味のない円・斜め帯・波形・抽象パターンで空きを埋めない(§7.1)
- **アイコン**: 原則使わない。「電話」「会場」「日時」のように文字のラベルで示す。どうしても使うなら地図ピン・電話など**情報を補助する実用アイコン1セットだけ**(線の太さ・サイズを揃える)。見出しの頭に飾りで付けない
- **AI感のあるアイコン・あしらいを禁止**: 絵文字風のカラフルなアイコン、キラキラ・星の散らし、意味のないロボット/電球/歯車モチーフ、紫〜青のグラデーション球体などは即アウト。アイコンで飾るのではなく、余白・整列・タイポグラフィで品を出す
- **角丸は1種類**(例: 4mm)、**影は使うなら弱く1種類**(`0 2mm 8mm rgba(0,0,0,.08)`)
- **QRコード**: **最小20mm角・推奨24〜28mm角**(小さいQRはスキャン失敗と貧相さの両方を招く)。周囲4mm以上の余白、白背景、「参加申込はこちら」等の行動を示すラベル必須。申込・予約が主目的のチラシでは、QRを隅に押し込まず開催概要と並ぶ準主役として枠付きカードで扱う

---

## 7. 安っぽさ禁止リスト(1つでも該当したら作り直し)

- [禁] 4色以上のカラフルな配色、原色の多用
- [禁] 角丸・影・グラデーションのスタイルが要素ごとにバラバラ
- [禁] ワードアート的な装飾文字(虹色・強い縁取り・ドロップシャドウの濃い文字)
- [禁] 余白のない詰め込みレイアウト、端ギリギリの配置
- [禁] 3書体以上の混在、階層のないほぼ同サイズの文字の羅列
- [禁] 意味のない飾り(用途不明の星・キラキラ・吹き出しの乱発)
- [禁] 低品質・低解像度・スタイル不統一な素材の寄せ集め
- [禁] 中央揃えと左揃えの無計画な混在
- [禁] 「どの業種にも使い回せる無難なデザイン」— 案件固有の題材から発想していない証拠
- [禁] **AI感のある表現全般**: 絵文字風・装飾目的のアイコン、紫〜青系のAIっぽいグラデーション、キラキラ✨的あしらい、均一で無機質な「それっぽい」カード羅列
- [禁] **意味のない英語の併記・多用**: 「メニュー MENU」のような日本語+英語の重ね、雰囲気づけだけの英語見出し。日本語で組み切るのがプロの仕事

### 7.1 AI感の禁止リスト(1つでも該当したら作り直し)

一目で「AIが作った」と分かる型は、内容の信頼まで下げる。判断の軸は「この案件だからこの形」と説明できるかどうかで、説明できない飾り・色・配置は削る。足して直さず、削って直す。

- [禁] **AIっぽいアイコン**: 丸や角丸の枠に入った線画アイコン、絵文字、電球・歯車・ロケット・盾・人型などの定番モチーフ、箇条書きの頭の ✓・★・→
- [禁] **横線に点を置くロードマップ**: 1本の線の上に等間隔の丸を置き、ラベルを上下交互に並べる日程表。矢羽根を横に連ねた工程図も同じ。日程は表(時刻｜内容)か番号付きの縦リストで組む
- [禁] **1つのセクションだけ黒・濃色の地**: 特典や申込の帯だけを黒くして目立たせる構成。地の色は紙面全体で1色にし、主役は大きさ・位置・アクセント色の文字で作る
- [禁] **並んだカードの1枚だけ色違い**: 3枚のカードのうち「おすすめ」だけ塗りや枠の色を変える。推奨は見出しと中の文字(太字・アクセント色の1語)で示す
- [禁] **引用符・点での強調**: メッセージの左上に置く大きな「“」「――」、点を格子状に並べた飾り、角の小さな点や三角
- [禁] **不自然な余白・バランスの悪い配置**: 要素が上に固まって下が空く、片側だけが空く、同種の要素の間隔がまちまち、カードの中で文字が上に寄って下が空く。§4.3 の自己修正の手順で直す(小物を足して埋めない)
- [禁] **均一なカードの羅列**: 「アイコン+見出し+説明」の同じ大きさのカードを3〜4枚並べるだけの構成。情報の重さに合わせて面積に差を付ける(§4.4)
- [禁] **紫〜青のグラデーション、グロー、ガラス風の半透明の面、キラキラ・星の散らし**
- [禁] **意味のない英語の併記**(「メニュー MENU」「ACCESS」)と、中身の無い見出し(「〜とは？」「3つのポイント」)

**AI感チェック**: 完成品を縮小して眺め、上のリストに当たる要素、「どこかで見た型」になっている部分が無いかを納品前に必ず自問する。判断に迷う要素は削除する。`check_flyer.py` は上のうち機械で拾えるもの(濃色のセクション・一列の点・1つだけ色違い・大きな引用符・絵文字・英語だけの見出し・下の大きな空き)を WARN で出す(§11.1)。

**プロ品質の判定基準**: 「揃っている・引き算されている・1つだけ主役がいる・細部(字間/余白/整列)が1mm単位で管理されている」。50%縮小で見ても美しく、原寸で見ると細部の丁寧さに気づく状態を目指す。

---

## 8. 納品仕様(2形式必須)

### ファイル名のルール
- **内容が一目でわかる名前を付ける。** `output.png` `design.html` のような汎用名は禁止
- 命名形式: `〈内容がわかる名前〉_チラシ.拡張子`(2形式とも同じベース名で揃える)
  - 例: `カフェ陽だまり_オープン告知チラシ.html` / `春の陶芸教室_生徒募集チラシ.png`
- 日本語ファイル名が使えない・避けたい環境では英数字で内容を表す(例: `cafe-hidamari_open_flyer.png`)
- 修正版を出す場合は `_v2` `_v3` を末尾に付け、どれが最新か明確にする

### 納品ファイル
| # | 形式 | 用途 |
|---|---|---|
| 1 | **HTML** | 修正可能な元データ。文言・色・写真を後から差し替えられる |
| 2 | **PNG** | プレビュー・印刷・SNS・Web掲載用(300dpi、A4原寸相当) |

- 2ファイルを必ず同時に出力フォルダへ提出する(中間生成したPDFは提出しない)
- 納品時に添えること:
  - デザイン意図の説明(2〜3行)
  - **修正方法の案内**(例: 「文言修正→HTMLをこのチャットに再アップして指示 / 色変更→--main を変更」)。依頼者が自分で直せなくても、HTML を再アップすれば AI がすぐ修正できること、チラシ編集スタジオで自分でも直せることを伝える
- 修正依頼を受けたら、HTMLを直して再びPNGを再生成し、常に2形式を最新に揃える

---

## 9. 納品前チェックリスト(全項目必須)

**レイアウト**
- [ ] はみ出し・重なりゼロ / グリッドに1mm単位で整列
- [ ] 安全マージン(12mm)内に文字・ロゴが収まっている
- [ ] 余白30%以上、詰め込み感なし

**タイポグラフィ**
- [ ] 最重要メッセージが最大サイズで、3秒で伝わる
- [ ] 文字が十分大きい(本文11pt以上・注釈8pt以上。50%縮小でも要点が読める)
- [ ] **文字化けゼロ**(□・?・意図しない字形がPNG上に1つもない)
- [ ] 2書体以内、階層明確(隣接階層1.5倍以上)
- [ ] 行送り1.6以上
- [ ] **1〜3文字だけのはみ出し折り返しがゼロ**
- [ ] 見出し・キャッチが意味の句切れで改行されている(助詞・読点の直後で切れている)
- [ ] 日付・電話番号・店名・金額が行途中で分断されていない
- [ ] 誤字脱字・日付・電話番号・URLの再確認

**レイアウト・余白バランス**
- [ ] 不自然な空白(穴・片寄り・間延び)がない。4分割で見て密度の偏りがない
- [ ] 同種要素の間隔がすべて統一されている(カード間・セクション間)

**色・ビジュアル**
- [ ] 3色+無彩色以内、60-30-10
- [ ] コントラスト十分 / 角丸・影・アイコン統一

**品質・納品**
- [ ] §7の禁止リストに1つも該当しない
- [ ] AI感のあるアイコン・あしらいが残っていない(迷ったら削除済み)
- [ ] §7.1 のAI感の禁止リストに1つも該当しない(線と点の日程表・1セクションだけ濃色・1枚だけ色違い・大きな引用符が無い)
- [ ] 意味のない英語併記がない(欧文は日付・価格など実用情報のみ)
- [ ] PNGを原寸目視+50%縮小でも成立している
- [ ] 「1箇所削れないか?」の引き算パスを実施した
- [ ] HTML・PNGの2形式が揃い、修正方法の案内を添えた
- [ ] ファイル名が内容を表している(汎用名でない・2形式で統一されている)

**記号・連結要素(該当する場合)**
- [ ] ×・&等が grid の固定中央カラムに乗っている(flex中央寄せ任せでない)
- [ ] 記号のサイズが隣接要素のインク高さの55〜70%で、複数記号間でサイズが揃っている
- [ ] 光学中心の実測で水平・垂直とも0.5mm以内(§11.2)
- [ ] 左右の対要素が同幅で、上下の行と中心軸を共有している

**機械検証(§11・全案件必須)**
- [ ] `check_flyer.py` の ERROR 0 件(重なり・はみ出し・切れ・8pt 未満・欠落グリフ)
- [ ] WARN(マージン外・ぶら下がり・間隔 5mm 未満など)がすべて意図どおり

**修正案件のみ追加**
- [ ] ロック領域(「触らないで」指定箇所)を一切変更していない
- [ ] レイアウト予算表を書き直し、追加要素の前後に5mm以上の余白を数値で確保した(§10.2)
- [ ] 文言変更に伴いフォントサブセットを再生成した
- [ ] 「バランスが悪い」指摘箇所は微調整でなくセクションごと組み直した

---

## 10. 修正・要素追加ワークフロー(既存チラシの改修)

修正依頼で品質が落ちる典型パターンは「既存レイアウトの隙間に新要素を押し込む」こと。罫線がバッジを貫通する、追記した注釈が下の帯に隠れる、といった事故はすべてこれが原因。以下の手順を必ず踏む。

### 10.1 着手前: 変更範囲の確定
- 依頼文から**「触ってはいけない領域(ロック領域)」を特定**する。「ここはそのままで」「一番下の帯は触らないで」等の指示があれば、その領域のHTML・CSSを以後一切変更しない(位置・サイズ・文言すべて)
- 逆に「全体の配置を変えてもいい」と言われたら、遠慮せず**ページ全体を再設計**する。中途半端な温存が一番質を下げる
- 指示が曖昧で大改変が必要そうなら、着手前に一言確認する(例: 「QRを大きくするため下段全体を組み直しますが良いですか?」)

### 10.2 レイアウト予算表を作り直す(要素追加時は必須)
- 要素を1つでも追加・拡大する場合、**紙面全体の縦方向の配置表(各セクションの top / 高さ / 直後の余白)を数値で書き直す**。頭の中や「見た目でなんとなく」で置くことを禁止
  ```
  例: キャッチ 33-91 / イベント名 97-118 / リード 121-135 /
      3カード 141-190 / 20×80+特典 194-235 / 概要+QR 238-275 / 下帯 280-297
  ```
- 新要素の高さ+**前後それぞれ5mm以上の余白**が確保できるまで、既存要素の位置・サイズを調整する。入らない場合は文字サイズを削るのではなく、①セクションの統合(例: 特典バッジを「20×80」と同じ罫線バンド内に2段で収める)②情報の削減 ③依頼者への優先順位確認、のいずれかで解決する
- 追加要素と既存の罫線・帯・図形の**交差ゼロ**を予算表の数値で先に保証してから実装する

### 10.3 実装時の注意
- 文言を追加・変更したら、**埋め込みフォントのサブセットを必ず再生成**する(既存サブセットに無い字は豆腐になる)。追加分だけでなく紙面の全使用文字で作り直す
- 「バランスが悪い」「不自然」という指摘を受けた箇所は、**数値の微調整で済ませず、そのセクションを§4の原則(グリッド・対称軸・4.5の記号ルール)に沿ってゼロから組み直す**。微調整の繰り返しは歪みを蓄積させる
- 修正版でも §9 チェックリスト全項目+§11 機械検証を新規制作と同様に実施する。「前回通ったから今回は目視だけ」を禁止

---

## 11. 機械検証(目視と併用必須)

目視は「雰囲気の良し悪し」には強いが、1mm 未満のずれ・要素の重なり・隠れた文字の検出には弱い。レンダリング目視に加え、機械検証で**数値の合格を確認してから納品**する。

### 11.1 自動チェック(`check_flyer.py`)

```bash
python3 flyer/tools/check_flyer.py カフェ陽だまり_オープン告知チラシ.html            # 既定: 紙面 .page / 安全マージン 12mm / セクション間 5mm
python3 flyer/tools/check_flyer.py チラシ.html --page .flyer --margin 15             # 紙面のクラス名やマージンが違うとき
```

ヘッドレス Chrome で実際にレイアウトさせ、mm 単位で次を実測する。ERROR が 1 件でもあれば終了コード 1。

| 検出するもの | 水準 |
|---|---|
| 紙面の外にはみ出した文字、overflow で切れている要素 | ERROR |
| 文字同士の重なり(行ごとの実際の文字範囲で判定)、`.page` 直下のセクション同士の重なり | ERROR |
| 8pt 未満の文字 | ERROR |
| `@font-face` の読み込み失敗、埋め込みフォントに無い文字(豆腐・代替表示の原因) | ERROR |
| 安全マージン外の文字(意図した裁ち落としなら無視してよい) | WARN |
| 1〜3 文字だけ次の行に落ちた折り返し(§5.3) | WARN |
| 10.5pt 未満の本文、5mm 未満のセクション間隔、埋め込まれていないフォント | WARN |
| AI っぽい型(§7.1): 1 つのセクションだけ濃色の地、一列に並んだ点、同じ大きさの並びの 1 つだけ色違い、28pt 以上の引用符、絵文字・記号の箇条書き、英語だけの見出し、最後のセクションの下の 25mm 超の空き | WARN |

グリフ照合には fontTools が必要(woff2 は brotli も)。`pip install fonttools brotli`。

### 11.2 手で測るもの

自動チェックが見ないものは、PNG か DevTools で実測する。

- **光学中心・対称性(§4.5)**: ×・& 等の記号は、インクのバウンディングボックスから光学中心を出し、①ページ/セクション中心軸との水平差、②隣接要素のインク中心との垂直差が、いずれも **0.5mm 以内**。左右対の要素は中心軸からの距離が等しく、上下の行で中心軸を共有していること
- **同種要素の間隔の統一**: カード間・行間が同じ値か(`getBoundingClientRect()` を `96/25.4` で割ると mm になる)
- **紙面の重さの偏り(§4.3)**: PNG を上下左右に 4 分割して、密度が極端に偏っていないか

### 11.3 合格基準

- ERROR 0 件 / WARN はすべて「意図どおり」と説明できる / 記号の光学中心ずれ 0.5mm 以内
- 1 つでも不合格なら修正して**実測からやり直す**(修正後の再実測を省略しない)

---

## 12. 品質の合言葉

1. **聞いてから作る** — ヒアリングなしの着手は事故のもと
2. **1枚1メッセージ** — 主役以外は脇役に徹する
3. **揃える・減らす・空ける** — 迷ったらこの3動詞
4. **デフォルトに逃げない** — 案件固有の題材から色と形を導く
5. **必ず目で確認、必ず2形式** — レンダリング目視と HTML+PNG 納品まで含めて完成
6. **修正こそ再設計** — 隙間に押し込まず予算表から引き直し、数値検証で締める。修正のたびに良くなるのがプロ、悪くなるのはパッチ