Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Agenda — Numbered, Folded Into Two Columns

Two Column
Agenda — Numbered, Folded Into Two Columns
column 1
column 2
140 112

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

agenda-numbered-two-column-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

991 B 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 112 right 140 bottom 112 left 140
- 2 equal columns, gap 120

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 0.02em
span  18px / 400 / tabular numerals
num  34px / 700 / tracking 0.02em / leading 1.25 / tabular numerals
label  30px / 500 / leading 1.35
note  17px / 400 / leading 1.75

## Colour
Ground #FBFBFA / Surface #FFFFFF / Ink #1A1A18 / Muted #7A7A74 / Accent #B4451F / Rule #DEDDD8

## Constraints — dropping these breaks it
- 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

Replace the content with [your content]. Keep the measurements and colours as given.
For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/agenda-numbered-two-column/pattern.html.

Spec

1.2 KB

/ai/designs/agenda-numbered-two-column.json 

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

Files

pattern.html

4.4 KB

/designs/agenda-numbered-two-column/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>目次 — 番号を振って 2 列に折る</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  :root {
    --ground: #FBFBFA;
    --surface: #FFFFFF;
    --ink: #1A1A18;
    --muted: #7A7A74;
    --accent: #B4451F;
    --rule: #DEDDD8;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 112px 140px;
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 72px; }

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 48px;
          border-bottom: 1px solid var(--rule); padding-bottom: 28px; }
  .title { font-size: 46px; font-weight: 700; letter-spacing: .02em; }
  .span { font-size: 18px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* 2 列に折るのは、6 行を 1 列で並べると行間が開きすぎて順序が読めなくなるため。
     読み順は「左を上から下、次に右」。列をまたいで番号が続く。 */
  .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 120px; }
  /* 3 行を版面の高さで等分する。行数ぶんの高さを内容に決めさせると下端が空き、
     索引のカードでは「中身の足りない版」に見える。 */
  .col { display: grid; grid-template-rows: repeat(3, 1fr); }

  .item { display: grid; grid-template-columns: 112px 1fr; align-items: start; align-content: center;
          padding: 34px 0; border-top: 1px solid var(--rule); }
  .col:first-child .item:first-child, .col:last-child .item:first-child { border-top: none; }
  /* 番号は等幅数字。桁が揃っていないと「並び」ではなく「散らばり」に見える。 */
  .num { font-size: 34px; font-weight: 700; letter-spacing: .02em; color: var(--accent);
         font-variant-numeric: tabular-nums; line-height: 1.25; }
  .body { display: grid; gap: 12px; }
  .label { font-size: 30px; font-weight: 500; line-height: 1.35; }
  .note { font-size: 17px; font-weight: 400; line-height: 1.75; color: var(--muted); }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">本日お話しすること</h1>
      <p class="span" data-type="span">全 6 節 / 約 45 分</p>
    </div>

    <div class="cols">
      <div class="col" data-col="1">
        <div class="item">
          <p class="num" data-type="num">01</p>
          <div class="body">
            <p class="label" data-type="label">現状の棚卸し</p>
            <p class="note" data-type="note">どこに何があるか。台帳と実機の食い違いから始める。</p>
          </div>
        </div>
        <div class="item">
          <p class="num">02</p>
          <div class="body">
            <p class="label">止められない業務の特定</p>
            <p class="note">月次の締めと出荷指示。この 2 つが移行の制約になる。</p>
          </div>
        </div>
        <div class="item">
          <p class="num">03</p>
          <div class="body">
            <p class="label">移行方式の比較</p>
            <p class="note">一括・並行・段階の 3 案を同じ物差しで並べる。</p>
          </div>
        </div>
      </div>

      <div class="col" data-col="2">
        <div class="item">
          <p class="num">04</p>
          <div class="body">
            <p class="label">3 年間の工程</p>
            <p class="note">期ごとの到達点と、後戻りできなくなる地点。</p>
          </div>
        </div>
        <div class="item">
          <p class="num">05</p>
          <div class="body">
            <p class="label">費用と内訳</p>
            <p class="note">初期・運用・人件の 3 本に分けて提示する。</p>
          </div>
        </div>
        <div class="item">
          <p class="num">06</p>
          <div class="body">
            <p class="label">本日ご判断いただきたいこと</p>
            <p class="note">方式の選択のみ。日程と体制は次回に回す。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

font.css

3.3 KB

/designs/agenda-numbered-two-column/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   124 (9775a31fda53fd20)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+2f-36, U+2014, U+3001-3002, U+3042, U+3044, U+304a-3054, U+3057-305a, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307f, U+3081, U+3089-308c, U+3092, U+3099, U+30fb, U+4e00, U+4e26, U+4eba, U+4ef6, U+4f53, U+4f55, U+5168, U+5185, U+51fa, U+5206, U+5217, U+521d, U+5224, U+5230, U+5236, U+52d9, U+5378, U+53f0, U+53f7, U+540c, U+56de, U+5730, U+59cb, U+5b9a, U+5b9f, U+5de5, U+5dee, U+5e33, U+5e74, U+5f0f, U+5f8c, U+623b, U+6298, U+629e, U+62ec, U+6307, U+632f, U+63d0, U+65ad, U+65b9, U+65e5, U+6708, U+671f, U+672c, U+6848, U+68da, U+696d, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+70b9, U+7269, U+7279, U+72b6, U+73fe, U+7528, U+756a, U+76ee, U+793a, U+79fb, U+7a0b, U+7bc0, U+7d04, U+7de0, U+8377, U+884c, U+8a33, U+8a71, U+8cbb, U+8f03, U+904b, U+9054-9055, U+9078, U+9593, U+968e, U+98df;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+2f-36, U+2014, U+3001-3002, U+3042, U+3044, U+304a-3054, U+3057-305a, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307f, U+3081, U+3089-308c, U+3092, U+3099, U+30fb, U+4e00, U+4e26, U+4eba, U+4ef6, U+4f53, U+4f55, U+5168, U+5185, U+51fa, U+5206, U+5217, U+521d, U+5224, U+5230, U+5236, U+52d9, U+5378, U+53f0, U+53f7, U+540c, U+56de, U+5730, U+59cb, U+5b9a, U+5b9f, U+5de5, U+5dee, U+5e33, U+5e74, U+5f0f, U+5f8c, U+623b, U+6298, U+629e, U+62ec, U+6307, U+632f, U+63d0, U+65ad, U+65b9, U+65e5, U+6708, U+671f, U+672c, U+6848, U+68da, U+696d, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+70b9, U+7269, U+7279, U+72b6, U+73fe, U+7528, U+756a, U+76ee, U+793a, U+79fb, U+7a0b, U+7bc0, U+7d04, U+7de0, U+8377, U+884c, U+8a33, U+8a71, U+8cbb, U+8f03, U+904b, U+9054-9055, U+9078, U+9593, U+968e, U+98df;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+2f-36, U+2014, U+3001-3002, U+3042, U+3044, U+304a-3054, U+3057-305a, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307f, U+3081, U+3089-308c, U+3092, U+3099, U+30fb, U+4e00, U+4e26, U+4eba, U+4ef6, U+4f53, U+4f55, U+5168, U+5185, U+51fa, U+5206, U+5217, U+521d, U+5224, U+5230, U+5236, U+52d9, U+5378, U+53f0, U+53f7, U+540c, U+56de, U+5730, U+59cb, U+5b9a, U+5b9f, U+5de5, U+5dee, U+5e33, U+5e74, U+5f0f, U+5f8c, U+623b, U+6298, U+629e, U+62ec, U+6307, U+632f, U+63d0, U+65ad, U+65b9, U+65e5, U+6708, U+671f, U+672c, U+6848, U+68da, U+696d, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+70b9, U+7269, U+7279, U+72b6, U+73fe, U+7528, U+756a, U+76ee, U+793a, U+79fb, U+7a0b, U+7bc0, U+7d04, U+7de0, U+8377, U+884c, U+8a33, U+8a71, U+8cbb, U+8f03, U+904b, U+9054-9055, U+9078, U+9593, U+968e, U+98df;
}

Notes

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。編集するのは pattern.html だけで、寸法を手で書き直すことはない。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it, so the three cannot drift apart. Edit the artboard, never the numbers.

Techniques

Apply to