# Layout Recipes — pick by content volume & shape

Grid = 12 columns (`.c3`–`.c12`), explicit row tracks. ALWAYS set
`.grid { flex:1; min-height:0; grid-template-rows: minmax(0,Xfr) ... }` — one track
per band — so nothing can overflow the 1600px canvas.

Choosing: match the content's dominant shape, then vary from the last piece you made.
steps→flow band / 対比→duo / 割合→donut / 項目一覧→tiles / 手順+理由+注意→hero-poster /
用語・FAQ→rowtile stacks / スコア・基準→score chips + threshold callouts.

---

## Composition grammars (見た目の文法 — rotate these, never settle on one)

The recipes further below are BOXED-CARD variants. These grammars change the entire
visual sentence structure while keeping the taste:

1. **numbered-card mosaic** — rounded bordered cards + number badges
   (dense-mosaic / rich-medium / hero-poster). Best for reference-style 完全図解.
2. **boxless zones** — NO card borders: pale color-wash areas (radius ~38px) with
   `data-zone` names, section titles as rotated TAB RIBBONS (`h2.tab`), dashed
   dotted separators inside. See `templates/zoned-poster.html`.
   ⚠ boxless washes merge into one giant flat region for the density audit —
   give every zone a soft dashed outline (`.zone.outlined`) and fill interiors
   with bubbles/watermark numerals/props.
3. **journey/timeline** — a dashed path SVG connecting big circular stations with
   flag numbers; works vertical (zoned-poster §journey) or as a winding S-path.
   For 手順・成長・ロードマップ content.
4. **dialog** — shiba asks, cat answers: alternating speech bubbles (`.bubble.left`
   /`.bubble.right`) with character faces beside each turn; Q pill + A text.
   For FAQ・初心者向け解説. 4-6 turns + a conclusion strip.
5. **hub (中心放射)** — one central rounded badge/circle with the core concept,
   4-6 satellite mini-panels around it, connected by short dashed spokes.
   For 概念の分解・要素マップ.
6. **magazine/big-number** — editorial: left-aligned title bar, oversized keyword
   or number (120-200px) per section with small supporting notes, few boxes.
   For 主張が少数で強い内容.

Header styles to rotate with them: centered title + corner characters /
left-aligned title with vertical color bar (`.head2`+`.tbar`) / title inside a
giant ribbon. Labeling: number badges / tab ribbons / icon flags on circles.
Conclusion: banner card / boxless footer strip / wide ribbon only.

---

## dense-mosaic (high: 10–14 sections) — template: templates/dense-mosaic.html

```
[header 134px]
[ c3 ][ c3 ][ c3 ][ c3 ]   rows: repeat(3, minmax(0,1fr))
[ c3 ][ c3 ][ c3 ][ c3 ]   card h2 27–28px, body 15–17px
[ c3 ][ c3 ][ c3 ][banner c3]
```
- 12 compact cards; every card = badge + h2 + lead? + ONE rich component + callout.
- Component variety across the sheet: ≥1 table, ≥1 flow, ≥1 duo, ≥1 donut,
  ≥2 tile/rowtile sets, 1 score/threshold block, 1 message banner.
- This matches the reference's density class. For ~10 sections merge two into a duo.

## rich-medium (5–9 sections) — template: templates/rich-medium.html

```
[header 140px]
[   c5    ][   c4   ][ c3 ]   rows: 1.24fr / 1.14fr / 1.1fr / 0.52fr
[    c6 flow  ][   c6 duo  ]
[ c4 tiles][ c4 bubble][ c4 donut]
[        c12 wide banner       ]
```
- Mixed spans prove the composition isn't a template. One wide flow band + one wide
  banner are the anchors. Type one notch larger than dense.

## hero-poster (low: ≤4 source ideas, expanded to 5–7 modules) — template: templates/hero-poster.html

```
[header 150px, title 100px]
[      c7 HERO steps     ][ c5 なぜ効く ]   rows: 1.44fr / 1.2fr / 0.46fr
[ c4 NG ][ c4 判定 ][ c4 コツ ]
[            c12 banner              ]
```
- HERO = full-width tinted band tiles: 104px icon circle + 30px step title + sub-line
  + tip pill + prop + watermark numeral. NEVER small rows floating in space.
- Support cards use two-line rowtiles (reason under each item).
- Expand content first (content-expansion.md); typography +15%.

## comparison-poster (A/B・before/after dominant)

```
[header]
[ c6 A panel ][ c6 B panel ]   rows: 1.5fr / 0.9fr / 0.5fr
[ c4 共通の前提 ][ c4 選び方 ][ c4 例 ]
[        c12 verdict banner        ]
```
- A/B as two tall duo-style panels with per-row tiles; verdict ribbon states a
  clear recommendation.

## flow-poster (process dominant)

```
[header]
[ c12 main flow: 4–6 big steps with arrows ]   rows: 1.1fr / 1.1fr / 0.5fr
[ c4 準備 ][ c4 つまずき ][ c4 チェック ]
[            c12 banner            ]
```
- Main flow steps get 84–112px icon circles, stage pills, sub-lines, and a dashed
  connector line behind them.

## checklist/faq-poster (items dominant)

```
[header]
[ c6 チェック列(5–7 rowtiles) ][ c6 チェック列 ]   rows: 2fr / 0.55fr
[              c12 banner               ]
```
- Two columns of two-line rowtiles with ✓ circles; count badge in each column head.

---

## Band-height budgeting (do this before writing HTML)

available = 1600 − padding(~62) − header(134–150) − headerMargin(12–16) − gaps(16–20 each)
Per band ≈ available × its fr share. A card fits if:
head(~46) + lead(~28) + components + footer(~44) + gaps ≤ band − cardPadding(~30).
Two-line rowtile ≈ 62–74px; tile grid row ≈ 85px; table row ≈ 40px; flow ≈ 150–170px;
donut block ≈ 190px; hero band tile ≈ 140–150px.

## Header recipe (all layouts)

`grid-template-columns: 250–280px 1fr 250–280px`. Left+right character clusters,
centered h1 + dashed subtitle pill, then 6–10 decorations filling the gaps beside the
title (sparkles ×4–6, heart ×1–2, sprout/tulip ×1–2, squiggle ×2). Corners of the strip
must not be bare.

## Banner recipe (conclusion)

Horizontal flex: badge+h2 | (character 110–150px) | big message (grow, centered,
colored quotes) | ribbon+pill stack (fixed 400–520px) | tall character
(bottom-anchored). Add 3–4 sparkles/hearts in the upper strip and 1–2 squiggles below.
Banner track 0.46–0.55fr.
