{ "id": "section-divider-number-bleed", "schemaVersion": 2, "title": { "ja": "中扉 — 章番号を地に敷く", "en": "Section Divider — The Chapter Number as Ground" }, "summary": { "ja": "話題が変わったことだけを伝える 1 枚。章番号は版面の外へ逃がして図版にする", "en": "A page that says only that the subject changed, its chapter number bled off as artwork" }, "capturedAt": "2026-09-15", "categories": [ "presentation" ], "tags": [ "bold", "typography" ], "useCases": [ "section-divider" ], "format": "slide-16x9", "density": "low", "layout": { "kind": "full-bleed", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 108, "right": 132, "bottom": 108, "left": 132 } }, "type": { "deck": { "size": 16, "weight": 500, "tracking": "0.22em", "transform": "upper" }, "chapter": { "size": 22, "weight": 500, "tracking": "0.16em" }, "heading": { "size": 92, "weight": 700, "tracking": "0.01em", "leading": 1.26 }, "lede": { "size": 23, "weight": 400, "leading": 1.85 }, "doc": { "size": 15, "weight": 400 }, "page": { "size": 15, "weight": 500, "numeric": "tabular" } }, "colors": { "ground": "#141A22", "surface": "#1D242E", "ink": "#F3F5F8", "muted": "#8A95A5", "accent": "#E0623C", "rule": "#2A3341", "series": [] }, "rules": [ { "ja": "中扉に中身を載せない。載せた時点で本編の 1 枚目になる", "en": "A divider carries no content — the moment it does, it is the section itself" }, { "ja": "章番号は版面の外へはみ出させる。切れていることが「背景」の合図になる", "en": "Bleed the number off the canvas — being cut is what marks it as ground" }, { "ja": "地の番号は ink を 9% 混ぜて作る。リテラルを書かないので配色を替えても沈み方が保たれる", "en": "Mix the ghost number from ink at 9% so a palette swap keeps it sunk" } ], "cover": "https://design-vault.pages.dev/_astro/cover.DsXwEWFi.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "title-slide-rule-under-subject", "statement-one-sentence", "quote-testimonial-bleed" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "low", "layout": { "kind": "full-bleed", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 108, "right": 132, "bottom": 108, "left": 132 } }, "type": { "deck": { "size": 16, "weight": 500, "tracking": "0.22em", "transform": "upper" }, "chapter": { "size": 22, "weight": 500, "tracking": "0.16em" }, "heading": { "size": 92, "weight": 700, "tracking": "0.01em", "leading": 1.26 }, "lede": { "size": 23, "weight": 400, "leading": 1.85 }, "doc": { "size": 15, "weight": 400 }, "page": { "size": 15, "weight": 500, "numeric": "tabular" } }, "colors": { "ground": "#141A22", "surface": "#1D242E", "ink": "#F3F5F8", "muted": "#8A95A5", "accent": "#E0623C", "rule": "#2A3341" }, "rules": [ "A divider carries no content — the moment it does, it is the section itself", "Bleed the number off the canvas — being cut is what marks it as ground", "Mix the ghost number from ink at 9% so a palette swap keeps it sunk" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 108 右 132 下 108 左 132\n\n## 文字（版面 1920px に対する px）\ndeck 16px / 500 / 字間 0.22em / 大文字\nchapter 22px / 500 / 字間 0.16em\nheading 92px / 700 / 字間 0.01em / 行送り 1.26\nlede 23px / 400 / 行送り 1.85\ndoc 15px / 400\npage 15px / 500 / 等幅数字\n\n## 配色\n地 #141A22 / 面 #1D242E / 文字 #F3F5F8 / 補助 #8A95A5 / 強調 #E0623C / 罫 #2A3341\n\n## 外すと崩れる点\n- 中扉に中身を載せない。載せた時点で本編の 1 枚目になる\n- 章番号は版面の外へはみ出させる。切れていることが「背景」の合図になる\n- 地の番号は ink を 9% 混ぜて作る。リテラルを書かないので配色を替えても沈み方が保たれる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/section-divider-number-bleed/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 108 right 132 bottom 108 left 132\n\n## Type (px against a 1920px canvas)\ndeck 16px / 500 / tracking 0.22em / uppercase\nchapter 22px / 500 / tracking 0.16em\nheading 92px / 700 / tracking 0.01em / leading 1.26\nlede 23px / 400 / leading 1.85\ndoc 15px / 400\npage 15px / 500 / tabular numerals\n\n## Colour\nGround #141A22 / Surface #1D242E / Ink #F3F5F8 / Muted #8A95A5 / Accent #E0623C / Rule #2A3341\n\n## Constraints — dropping these breaks it\n- A divider carries no content — the moment it does, it is the section itself\n- Bleed the number off the canvas — being cut is what marks it as ground\n- Mix the ghost number from ink at 9% so a palette swap keeps it sunk\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/section-divider-number-bleed/pattern.html." }, "code": { "html": "\n\n中扉 — 章番号だけを全面に敷く\n\n\n\n\n
\n

03

\n
\n

SECTION

\n\n
\n

第 3 章

\n

移行方式の比較

\n

ここから先は、3 つの案を同じ物差しに載せる話です。
結論は先に申し上げます —— 段階移行を推しています。

\n
\n\n
\n

基幹システム刷新のご提案

\n

18 / 42

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/section-divider-number-bleed/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/section-divider-number-bleed/font.css", "https://design-vault.pages.dev/designs/section-divider-number-bleed/font-0.woff2", "https://design-vault.pages.dev/designs/section-divider-number-bleed/font-1.woff2", "https://design-vault.pages.dev/designs/section-divider-number-bleed/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/section-divider-number-bleed", "en": "https://design-vault.pages.dev/en/designs/section-divider-number-bleed" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 「結論は先に申し上げます」の 1 行を lede に置き、中扉を要約の場にしない\n- 下端にノンブルと資料名を置く。長い資料では中扉が唯一の現在地表示になる\n- 章題は 92px。本編のどの見出しよりも大きくして、階層を大きさで示す\n\n### Apply to\n\n- 20 ページを超える提案書の章区切り\n- 複数の論点を順に扱う会議資料" }