{
  "id": "appendix-index-grid",
  "schemaVersion": 2,
  "title": {
    "ja": "付録の扉 — 収録物を番号つきの格子で見せる",
    "en": "Appendix Door — What Is Inside, as a Numbered Grid"
  },
  "summary": {
    "ja": "濃地の格子に付録を 6 編。番号・表題・中身・頁数を揃え、その場で参照する 2 編だけ罫を立てる",
    "en": "Six appendices tiled on a dark ground — id, title, contents, pages, with a rule raised on the two you will open"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "appendix",
    "section-divider"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "grid",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 108,
      "right": 140,
      "bottom": 108,
      "left": 140
    },
    "columns": {
      "count": 3,
      "gap": 24
    }
  },
  "type": {
    "kicker": {
      "size": 15,
      "weight": 500,
      "tracking": "0.3em",
      "transform": "upper"
    },
    "title": {
      "size": 54,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "count": {
      "size": 17,
      "weight": 400,
      "numeric": "tabular"
    },
    "id": {
      "size": 16,
      "weight": 700,
      "tracking": "0.14em",
      "numeric": "tabular"
    },
    "name": {
      "size": 25,
      "weight": 700,
      "leading": 1.4
    },
    "about": {
      "size": 16,
      "weight": 400,
      "leading": 1.7
    },
    "pages": {
      "size": 14,
      "weight": 400,
      "numeric": "tabular"
    },
    "foot": {
      "size": 16,
      "weight": 400,
      "leading": 1.8
    }
  },
  "colors": {
    "ground": "#111722",
    "surface": "#1A2231",
    "ink": "#E9EDF4",
    "muted": "#8894A6",
    "accent": "#5AA2E8",
    "rule": "#2B3445",
    "series": []
  },
  "rules": [
    {
      "ja": "格子にする。縦の一覧にすると付録が「読み物の続き」に見え、通し読みの姿勢のまま入られる",
      "en": "Tile it. A vertical list makes the appendix look like more reading, and people enter it the way they left the main deck"
    },
    {
      "ja": "各編に中身の 1 行説明と頁数を書く。表題だけの目録は、結局その付録を開かせる",
      "en": "One line of contents and a page count per item — a list of titles alone makes people open every one"
    },
    {
      "ja": "その場で参照する編だけ罫を立てる。全部立てると索引として使えない",
      "en": "Raise the rule only on the items you will actually open; raised everywhere it stops being an index"
    },
    {
      "ja": "番号は本編の章とは別系統（A/B/C）にする。同じ番号にすると、質疑で指した先が毎回ずれる",
      "en": "Number the appendices on their own series, apart from the chapters — shared numbers send every question to the wrong page"
    },
    {
      "ja": "「本編には含みません」と明記する。付録の扉は、ここから先は読み上げないという合図でもある",
      "en": "Say plainly that this is outside the main deck — the appendix door is also the signal that nothing after it gets read aloud"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.D1ILesL1.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "agenda-numbered-sections",
      "closing-decision-request",
      "phase-divider-step-rail"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "grid",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 108,
          "right": 140,
          "bottom": 108,
          "left": 140
        },
        "columns": {
          "count": 3,
          "gap": 24
        }
      },
      "type": {
        "kicker": {
          "size": 15,
          "weight": 500,
          "tracking": "0.3em",
          "transform": "upper"
        },
        "title": {
          "size": 54,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "count": {
          "size": 17,
          "weight": 400,
          "numeric": "tabular"
        },
        "id": {
          "size": 16,
          "weight": 700,
          "tracking": "0.14em",
          "numeric": "tabular"
        },
        "name": {
          "size": 25,
          "weight": 700,
          "leading": 1.4
        },
        "about": {
          "size": 16,
          "weight": 400,
          "leading": 1.7
        },
        "pages": {
          "size": 14,
          "weight": 400,
          "numeric": "tabular"
        },
        "foot": {
          "size": 16,
          "weight": 400,
          "leading": 1.8
        }
      },
      "colors": {
        "ground": "#111722",
        "surface": "#1A2231",
        "ink": "#E9EDF4",
        "muted": "#8894A6",
        "accent": "#5AA2E8",
        "rule": "#2B3445"
      },
      "rules": [
        "Tile it. A vertical list makes the appendix look like more reading, and people enter it the way they left the main deck",
        "One line of contents and a page count per item — a list of titles alone makes people open every one",
        "Raise the rule only on the items you will actually open; raised everywhere it stops being an index",
        "Number the appendices on their own series, apart from the chapters — shared numbers send every question to the wrong page",
        "Say plainly that this is outside the main deck — the appendix door is also the signal that nothing after it gets read aloud"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 108 右 140 下 108 左 140\n- 3 カラム（等分）、間隔 24\n\n## 文字（版面 1920px に対する px）\nkicker  15px / 500 / 字間 0.3em / 大文字\ntitle  54px / 700 / 字間 0.01em / 行送り 1.3\ncount  17px / 400 / 等幅数字\nid  16px / 700 / 字間 0.14em / 等幅数字\nname  25px / 700 / 行送り 1.4\nabout  16px / 400 / 行送り 1.7\npages  14px / 400 / 等幅数字\nfoot  16px / 400 / 行送り 1.8\n\n## 配色\n地 #111722 / 面 #1A2231 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445\n\n## 外すと崩れる点\n- 格子にする。縦の一覧にすると付録が「読み物の続き」に見え、通し読みの姿勢のまま入られる\n- 各編に中身の 1 行説明と頁数を書く。表題だけの目録は、結局その付録を開かせる\n- その場で参照する編だけ罫を立てる。全部立てると索引として使えない\n- 番号は本編の章とは別系統（A/B/C）にする。同じ番号にすると、質疑で指した先が毎回ずれる\n- 「本編には含みません」と明記する。付録の扉は、ここから先は読み上げないという合図でもある\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/appendix-index-grid/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 108 right 140 bottom 108 left 140\n- 3 equal columns, gap 24\n\n## Type (px against a 1920px canvas)\nkicker  15px / 500 / tracking 0.3em / uppercase\ntitle  54px / 700 / tracking 0.01em / leading 1.3\ncount  17px / 400 / tabular numerals\nid  16px / 700 / tracking 0.14em / tabular numerals\nname  25px / 700 / leading 1.4\nabout  16px / 400 / leading 1.7\npages  14px / 400 / tabular numerals\nfoot  16px / 400 / leading 1.8\n\n## Colour\nGround #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445\n\n## Constraints — dropping these breaks it\n- Tile it. A vertical list makes the appendix look like more reading, and people enter it the way they left the main deck\n- One line of contents and a page count per item — a list of titles alone makes people open every one\n- Raise the rule only on the items you will actually open; raised everywhere it stops being an index\n- Number the appendices on their own series, apart from the chapters — shared numbers send every question to the wrong page\n- Say plainly that this is outside the main deck — the appendix door is also the signal that nothing after it gets read aloud\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/appendix-index-grid/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>付録の扉 — 収録物を番号つきの格子で見せる</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */\n  :root {\n    --ground: #111722;\n    --surface: #1A2231;\n    --ink: #E9EDF4;\n    --muted: #8894A6;\n    --accent: #5AA2E8;\n    --rule: #2B3445;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 108px 140px;                 /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }\n  .left { display: flex; align-items: baseline; gap: 30px; }\n  .kicker { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }\n  .title { font-size: 54px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }\n  .count { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n  /* 格子にすると、付録が「読み物の続き」ではなく「引くもの」として見える。\n     本編の流れを切った先なので、通し読みの姿勢のまま入らせない。 */\n  .grid { align-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }\n  .card { background: var(--surface); border-top: 2px solid var(--rule); padding: 32px 34px 34px; }\n  /* この場で参照する付録だけを立てる。全部立てると索引として使えない。 */\n  .card[data-here] { border-top-color: var(--accent); }\n  .id { font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }\n  .card[data-here] .id { color: var(--accent); }\n  .name { font-size: 25px; font-weight: 700; line-height: 1.4; margin-top: 14px; }\n  .about { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 14px; }\n  .pages { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 18px; font-variant-numeric: tabular-nums; }\n\n  .foot { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 26px; }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"head\">\n      <div class=\"left\">\n        <p class=\"kicker\" data-type=\"kicker\">APPENDIX</p>\n        <h1 class=\"title\" data-type=\"title\">付録</h1>\n      </div>\n      <p class=\"count\" data-type=\"count\">6 編 ／ 全 34 頁 ／ 本編には含みません</p>\n    </div>\n\n    <div class=\"grid\">\n      <section class=\"card\" data-col=\"1\" data-here>\n        <p class=\"id\" data-type=\"id\">A-1</p>\n        <p class=\"name\" data-type=\"name\">要求一覧への回答（全 48 件）</p>\n        <p class=\"about\" data-type=\"about\">本編 3 章で抜粋した 6 件を含む全件。判定と実現方式を要求番号順に記載。</p>\n        <p class=\"pages\" data-type=\"pages\">12 頁</p>\n      </section>\n      <section class=\"card\" data-col=\"2\">\n        <p class=\"id\">A-2</p>\n        <p class=\"name\">現行業務フローと課題の対応</p>\n        <p class=\"about\">1 章の課題が、現行フローのどの手順から出ているかの対応表。</p>\n        <p class=\"pages\">4 頁</p>\n      </section>\n      <section class=\"card\" data-col=\"3\">\n        <p class=\"id\">B-1</p>\n        <p class=\"name\">要員一覧と稼働率</p>\n        <p class=\"about\">体制図に載せなかった氏名・経歴・月別の稼働率。</p>\n        <p class=\"pages\">3 頁</p>\n      </section>\n      <section class=\"card\">\n        <p class=\"id\">B-2</p>\n        <p class=\"name\">見積の内訳</p>\n        <p class=\"about\">工程別の人月と単価、前提条件および変動要因。</p>\n        <p class=\"pages\">5 頁</p>\n      </section>\n      <section class=\"card\" data-here>\n        <p class=\"id\">C-1</p>\n        <p class=\"name\">移行方式の比較検討</p>\n        <p class=\"about\">一括・段階・並行の 3 案を比較し、一括を選んだ理由。</p>\n        <p class=\"pages\">6 頁</p>\n      </section>\n      <section class=\"card\">\n        <p class=\"id\">C-2</p>\n        <p class=\"name\">用語集</p>\n        <p class=\"about\">本編と付録で使う業務用語・システム用語の定義。</p>\n        <p class=\"pages\">4 頁</p>\n      </section>\n    </div>\n\n    <p class=\"foot\" data-type=\"foot\">罫を立てた 2 編は、本日のご説明中に参照します。それ以外はお持ち帰りいただく資料で、この場では読み上げません。</p>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/appendix-index-grid/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/appendix-index-grid/font.css",
        "https://design-vault.pages.dev/designs/appendix-index-grid/font-0.woff2",
        "https://design-vault.pages.dev/designs/appendix-index-grid/font-1.woff2",
        "https://design-vault.pages.dev/designs/appendix-index-grid/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/appendix-index-grid",
    "en": "https://design-vault.pages.dev/en/designs/appendix-index-grid"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n本編から外した資料の置き場を扉で示す版。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe door to what was taken out of the main deck. `pattern.html` is the artboard itself; both\n`cover.png` and the measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 3 列 × 2 段の 6 編に収める。7 編目からは、格子が一覧ではなく壁に見える\n- 頁数を各編に置くと、渡された側が「どれだけ読む話か」をその場で見積もれる\n- 見出しの隣に総頁数を置く。付録が本編より厚いことは、先に言っておいたほうがよい\n\n### Apply to\n\n- 提案書・要件定義書の付録扉、別紙一覧\n- 参考資料の配布（罫を立てる編を「本日お渡しするもの」に読み替える）"
}