{
  "id": "agenda-numbered-two-column",
  "schemaVersion": 2,
  "title": {
    "ja": "目次 — 番号を振って 2 列に折る",
    "en": "Agenda — Numbered, Folded Into Two Columns"
  },
  "summary": {
    "ja": "6 項目の目次。1 列で並べると開きすぎる行間を、2 列に折って詰める",
    "en": "A six-item agenda folded into two columns so the leading never opens up"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "agenda"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "2-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 112,
      "right": 140,
      "bottom": 112,
      "left": 140
    },
    "columns": {
      "count": 2,
      "gap": 120
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.02em"
    },
    "span": {
      "size": 18,
      "weight": 400,
      "numeric": "tabular"
    },
    "num": {
      "size": 34,
      "weight": 700,
      "tracking": "0.02em",
      "leading": 1.25,
      "numeric": "tabular"
    },
    "label": {
      "size": 30,
      "weight": 500,
      "leading": 1.35
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.75
    }
  },
  "colors": {
    "ground": "#FBFBFA",
    "surface": "#FFFFFF",
    "ink": "#1A1A18",
    "muted": "#7A7A74",
    "accent": "#B4451F",
    "rule": "#DEDDD8",
    "series": []
  },
  "rules": [
    {
      "ja": "番号は等幅数字。桁が揃っていないと、並びではなく散らばりに見える",
      "en": "Tabular numerals — misaligned digits read as scatter, not sequence"
    },
    {
      "ja": "読み順は左を上から下、次に右。列をまたいで番号が続く",
      "en": "Read down the left column, then the right — numbering runs across the fold"
    },
    {
      "ja": "3 行を版面の高さで等分する。行数を内容に決めさせると下端が空く",
      "en": "Divide the height by three rows — letting content decide leaves the foot empty"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DmGY1TEt.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "title-slide-rule-under-subject",
      "section-divider-number-bleed",
      "next-action-owner-date"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "2-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 112,
          "right": 140,
          "bottom": 112,
          "left": 140
        },
        "columns": {
          "count": 2,
          "gap": 120
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.02em"
        },
        "span": {
          "size": 18,
          "weight": 400,
          "numeric": "tabular"
        },
        "num": {
          "size": 34,
          "weight": 700,
          "tracking": "0.02em",
          "leading": 1.25,
          "numeric": "tabular"
        },
        "label": {
          "size": 30,
          "weight": 500,
          "leading": 1.35
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.75
        }
      },
      "colors": {
        "ground": "#FBFBFA",
        "surface": "#FFFFFF",
        "ink": "#1A1A18",
        "muted": "#7A7A74",
        "accent": "#B4451F",
        "rule": "#DEDDD8"
      },
      "rules": [
        "Tabular numerals — misaligned digits read as scatter, not sequence",
        "Read down the left column, then the right — numbering runs across the fold",
        "Divide the height by three rows — letting content decide leaves the foot empty"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 112 右 140 下 112 左 140\n- 2 カラム（等分）、間隔 120\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.02em\nspan  18px / 400 / 等幅数字\nnum  34px / 700 / 字間 0.02em / 行送り 1.25 / 等幅数字\nlabel  30px / 500 / 行送り 1.35\nnote  17px / 400 / 行送り 1.75\n\n## 配色\n地 #FBFBFA / 面 #FFFFFF / 文字 #1A1A18 / 補助 #7A7A74 / 強調 #B4451F / 罫 #DEDDD8\n\n## 外すと崩れる点\n- 番号は等幅数字。桁が揃っていないと、並びではなく散らばりに見える\n- 読み順は左を上から下、次に右。列をまたいで番号が続く\n- 3 行を版面の高さで等分する。行数を内容に決めさせると下端が空く\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/agenda-numbered-two-column/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 112 right 140 bottom 112 left 140\n- 2 equal columns, gap 120\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.02em\nspan  18px / 400 / tabular numerals\nnum  34px / 700 / tracking 0.02em / leading 1.25 / tabular numerals\nlabel  30px / 500 / leading 1.35\nnote  17px / 400 / leading 1.75\n\n## Colour\nGround #FBFBFA / Surface #FFFFFF / Ink #1A1A18 / Muted #7A7A74 / Accent #B4451F / Rule #DEDDD8\n\n## Constraints — dropping these breaks it\n- Tabular numerals — misaligned digits read as scatter, not sequence\n- Read down the left column, then the right — numbering runs across the fold\n- Divide the height by three rows — letting content decide leaves the foot empty\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/agenda-numbered-two-column/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>目次 — 番号を振って 2 列に折る</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  :root {\n    --ground: #FBFBFA;\n    --surface: #FFFFFF;\n    --ink: #1A1A18;\n    --muted: #7A7A74;\n    --accent: #B4451F;\n    --rule: #DEDDD8;\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: 112px 140px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 72px; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 48px;\n          border-bottom: 1px solid var(--rule); padding-bottom: 28px; }\n  .title { font-size: 46px; font-weight: 700; letter-spacing: .02em; }\n  .span { font-size: 18px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n  /* 2 列に折るのは、6 行を 1 列で並べると行間が開きすぎて順序が読めなくなるため。\n     読み順は「左を上から下、次に右」。列をまたいで番号が続く。 */\n  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 120px; }\n  /* 3 行を版面の高さで等分する。行数ぶんの高さを内容に決めさせると下端が空き、\n     索引のカードでは「中身の足りない版」に見える。 */\n  .col { display: grid; grid-template-rows: repeat(3, 1fr); }\n\n  .item { display: grid; grid-template-columns: 112px 1fr; align-items: start; align-content: center;\n          padding: 34px 0; border-top: 1px solid var(--rule); }\n  .col:first-child .item:first-child, .col:last-child .item:first-child { border-top: none; }\n  /* 番号は等幅数字。桁が揃っていないと「並び」ではなく「散らばり」に見える。 */\n  .num { font-size: 34px; font-weight: 700; letter-spacing: .02em; color: var(--accent);\n         font-variant-numeric: tabular-nums; line-height: 1.25; }\n  .body { display: grid; gap: 12px; }\n  .label { font-size: 30px; font-weight: 500; line-height: 1.35; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.75; color: var(--muted); }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"head\">\n      <h1 class=\"title\" data-type=\"title\">本日お話しすること</h1>\n      <p class=\"span\" data-type=\"span\">全 6 節 / 約 45 分</p>\n    </div>\n\n    <div class=\"cols\">\n      <div class=\"col\" data-col=\"1\">\n        <div class=\"item\">\n          <p class=\"num\" data-type=\"num\">01</p>\n          <div class=\"body\">\n            <p class=\"label\" data-type=\"label\">現状の棚卸し</p>\n            <p class=\"note\" data-type=\"note\">どこに何があるか。台帳と実機の食い違いから始める。</p>\n          </div>\n        </div>\n        <div class=\"item\">\n          <p class=\"num\">02</p>\n          <div class=\"body\">\n            <p class=\"label\">止められない業務の特定</p>\n            <p class=\"note\">月次の締めと出荷指示。この 2 つが移行の制約になる。</p>\n          </div>\n        </div>\n        <div class=\"item\">\n          <p class=\"num\">03</p>\n          <div class=\"body\">\n            <p class=\"label\">移行方式の比較</p>\n            <p class=\"note\">一括・並行・段階の 3 案を同じ物差しで並べる。</p>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"col\" data-col=\"2\">\n        <div class=\"item\">\n          <p class=\"num\">04</p>\n          <div class=\"body\">\n            <p class=\"label\">3 年間の工程</p>\n            <p class=\"note\">期ごとの到達点と、後戻りできなくなる地点。</p>\n          </div>\n        </div>\n        <div class=\"item\">\n          <p class=\"num\">05</p>\n          <div class=\"body\">\n            <p class=\"label\">費用と内訳</p>\n            <p class=\"note\">初期・運用・人件の 3 本に分けて提示する。</p>\n          </div>\n        </div>\n        <div class=\"item\">\n          <p class=\"num\">06</p>\n          <div class=\"body\">\n            <p class=\"label\">本日ご判断いただきたいこと</p>\n            <p class=\"note\">方式の選択のみ。日程と体制は次回に回す。</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/agenda-numbered-two-column/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/agenda-numbered-two-column/font.css",
        "https://design-vault.pages.dev/designs/agenda-numbered-two-column/font-0.woff2",
        "https://design-vault.pages.dev/designs/agenda-numbered-two-column/font-1.woff2",
        "https://design-vault.pages.dev/designs/agenda-numbered-two-column/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/agenda-numbered-two-column",
    "en": "https://design-vault.pages.dev/en/designs/agenda-numbered-two-column"
  },
  "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- 番号だけに accent を使い、項目名は ink のまま置く\n- 各項目に 1 行の補足を付ける。目次が「話す順序」ではなく「話す内容」になる\n- 所要時間を見出しの右に出し、聞き手に長さを預ける\n\n### Apply to\n\n- 提案・報告の冒頭に置く目次\n- 長い会議の議題一覧"
}