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

Glossary — Term, Reading, Meaning and First Use, One Row Each

Table
Design
Glossary — Term, Reading, Meaning and First Use, One Row Each
140 96

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

glossary-term-definition-everything.md

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

Prompt

1.1 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 96 right 140 bottom 96 left 140

## Type (px against a 1920px canvas)
kicker  20px / 500 / tracking 0.16em
title  52px / 700 / leading 1.35
th  20px / 500
term  27px / 700
reading  20px / 400 / tracking 0.04em
def  22px / 400 / leading 1.7
where  20px / 500 / tabular numerals
folio  16px / 400 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Define the word as this document uses it — a dictionary definition drifts from the usage
- Give the reading under each term — in-house words are exactly the ones read differently
- Put the first page at the right, so the glossary leads back into the deck
- Sort by the syllabary — in order of appearance, nothing can be looked up

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/glossary-term-definition/pattern.html.

Spec

1.4 KB

/ai/designs/glossary-term-definition.json 

format: slide-16x9
density: high
layout:
  kind: table
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 96
    right: 140
    bottom: 96
    left: 140
type:
  kicker:
    size: 20
    weight: 500
    tracking: 0.16em
  title:
    size: 52
    weight: 700
    leading: 1.35
  th:
    size: 20
    weight: 500
  term:
    size: 27
    weight: 700
  reading:
    size: 20
    weight: 400
    tracking: 0.04em
  def:
    size: 22
    weight: 400
    leading: 1.7
  where:
    size: 20
    weight: 500
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Define the word as this document uses it — a dictionary definition drifts from the usage
  - Give the reading under each term — in-house words are exactly the ones read differently
  - Put the first page at the right, so the glossary leads back into the deck
  - Sort by the syllabary — in order of appearance, nothing can be looked up

Files

pattern.html

4.3 KB

/designs/glossary-term-definition/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>用語集 — 用語・読み・定義・初出を 1 行ずつ、五十音順に</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
  :root {
    --ground: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { 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: 96px 140px;                  /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 20px; font-weight: 500; letter-spacing: .16em; color: var(--accent); }
  .title { font-size: 52px; font-weight: 700; line-height: 1.35; margin-top: 16px; }

  table { width: 100%; border-collapse: collapse; align-self: center; }
  th { font-size: 20px; font-weight: 500; color: var(--muted); text-align: left; padding: 0 0 14px; border-bottom: 2px solid var(--ink); }
  td { padding: 20px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
  col.term { width: 400px; }
  col.where { width: 160px; }
  .term { font-size: 27px; font-weight: 700; }
  .reading { font-size: 20px; font-weight: 400; color: var(--muted); margin-top: 4px; letter-spacing: .04em; }
  .def { font-size: 22px; font-weight: 400; line-height: 1.7; padding-right: 48px; }
  .where { font-size: 20px; font-weight: 500; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
  th.right { text-align: right; }

  .folio { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 20px;
           font-size: 16px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">付録</p>
      <h1 class="title" data-type="title">この資料で使っている言葉</h1>
    </div>

    <table>
      <colgroup><col class="term"><col><col class="where"></colgroup>
      <thead>
        <tr><th data-type="th">用語</th><th>この資料での意味</th><th class="right">初出</th></tr>
      </thead>
      <tbody>
        <tr>
          <td><p class="term" data-type="term">一次回答</p><p class="reading" data-type="reading">いちじかいとう</p></td>
          <td class="def" data-type="def">問い合わせを受けてから、最初に中身のある答えを返すまで。受付の連絡だけでは数えない</td>
          <td class="where" data-type="where">p. 1</td>
        </tr>
        <tr>
          <td><p class="term">受付当番</p><p class="reading">うけつけとうばん</p></td>
          <td class="def">専門の担当者が週 1 日、新しい窓口の受付に入る役割。専門の業務は別に続ける</td>
          <td class="where">p. 8</td>
        </tr>
        <tr>
          <td><p class="term">折り返し</p><p class="reading">おりかえし</p></td>
          <td class="def">その場で答えられないとき、担当者から改めて連絡すること。期限は受付から 1 時間</td>
          <td class="where">p. 7</td>
        </tr>
        <tr>
          <td><p class="term">回答台帳</p><p class="reading">かいとうだいちょう</p></td>
          <td class="def">過去の問い合わせと回答の記録。一本化に合わせて 4 冊を 1 冊にまとめる</td>
          <td class="where">p. 4</td>
        </tr>
        <tr>
          <td><p class="term">回し直し</p><p class="reading">まわしなおし</p></td>
          <td class="def">受けた窓口で扱えず、別の窓口にかけ直してもらう、または転送すること</td>
          <td class="where">p. 2</td>
        </tr>
      </tbody>
    </table>

    <div class="folio" data-type="folio"><span>問い合わせ窓口の一本化 ／ 社内説明会</span><span>09 / 10</span></div>
  </div>
</div>

font.css

3.5 KB

/designs/glossary-term-definition/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   135 (ec33afc299a1ffe3)
 *
 * 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+20, U+2e-32, U+34, U+37-39, U+70, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304a-304e, U+3051-3054, U+3057-306b, U+306e-3070, U+307e-307f, U+3081-3082, U+3087, U+3089-308c, U+308f, U+3092-3094, U+3099, U+30fb, U+4e00, U+4e2d, U+4e94, U+4ed8, U+4f1a, U+4f7f, U+5165, U+5185, U+518a, U+51fa, U+521d, U+5225, U+5272, U+52d9, U+5316, U+5341, U+53bb, U+53d7, U+53e3, U+53f0, U+5408, U+5473, U+554f, U+56de, U+5834, U+5b9a, U+5c02, U+5e33, U+5f53, U+5f79, U+610f, U+6271, U+6298, U+62c5, U+6539, U+6570, U+6599, U+65b0, U+65e5, U+660e, U+6642, U+6700, U+671f, U+672c, U+696d, U+6b21, U+7528, U+756a, U+76f4, U+793e, U+7a93, U+7b54, U+7d61, U+7d9a, U+7fa9, U+8005, U+8449, U+884c, U+8a00, U+8a18, U+8a9e, U+8aac-8aad, U+8cc7, U+8eab, U+8ee2, U+8fd4, U+9001, U+9023, U+9031, U+904e, U+9332, U+9580, U+9593, U+9650, U+96c6, U+97f3, U+9806, U+ff0f;
}
@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+20, U+2e-32, U+34, U+37-39, U+70, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304a-304e, U+3051-3054, U+3057-306b, U+306e-3070, U+307e-307f, U+3081-3082, U+3087, U+3089-308c, U+308f, U+3092-3094, U+3099, U+30fb, U+4e00, U+4e2d, U+4e94, U+4ed8, U+4f1a, U+4f7f, U+5165, U+5185, U+518a, U+51fa, U+521d, U+5225, U+5272, U+52d9, U+5316, U+5341, U+53bb, U+53d7, U+53e3, U+53f0, U+5408, U+5473, U+554f, U+56de, U+5834, U+5b9a, U+5c02, U+5e33, U+5f53, U+5f79, U+610f, U+6271, U+6298, U+62c5, U+6539, U+6570, U+6599, U+65b0, U+65e5, U+660e, U+6642, U+6700, U+671f, U+672c, U+696d, U+6b21, U+7528, U+756a, U+76f4, U+793e, U+7a93, U+7b54, U+7d61, U+7d9a, U+7fa9, U+8005, U+8449, U+884c, U+8a00, U+8a18, U+8a9e, U+8aac-8aad, U+8cc7, U+8eab, U+8ee2, U+8fd4, U+9001, U+9023, U+9031, U+904e, U+9332, U+9580, U+9593, U+9650, U+96c6, U+97f3, U+9806, U+ff0f;
}
@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+20, U+2e-32, U+34, U+37-39, U+70, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304a-304e, U+3051-3054, U+3057-306b, U+306e-3070, U+307e-307f, U+3081-3082, U+3087, U+3089-308c, U+308f, U+3092-3094, U+3099, U+30fb, U+4e00, U+4e2d, U+4e94, U+4ed8, U+4f1a, U+4f7f, U+5165, U+5185, U+518a, U+51fa, U+521d, U+5225, U+5272, U+52d9, U+5316, U+5341, U+53bb, U+53d7, U+53e3, U+53f0, U+5408, U+5473, U+554f, U+56de, U+5834, U+5b9a, U+5c02, U+5e33, U+5f53, U+5f79, U+610f, U+6271, U+6298, U+62c5, U+6539, U+6570, U+6599, U+65b0, U+65e5, U+660e, U+6642, U+6700, U+671f, U+672c, U+696d, U+6b21, U+7528, U+756a, U+76f4, U+793e, U+7a93, U+7b54, U+7d61, U+7d9a, U+7fa9, U+8005, U+8449, U+884c, U+8a00, U+8a18, U+8a9e, U+8aac-8aad, U+8cc7, U+8eab, U+8ee2, U+8fd4, U+9001, U+9023, U+9031, U+904e, U+9332, U+9580, U+9593, U+9650, U+96c6, U+97f3, U+9806, U+ff0f;
}

Notes

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

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「基本の 10 枚」の 1 枚で、 配色は system-project 一式の淡地・濃地と同じ 2 組に揃えてある。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it. One of the ten basic slides, drawn in the same two palettes as the system-project deck so the two can be mixed.

Techniques

Apply to