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

Closing with Contacts — Thanks, Then a Way In for Later Questions

Centered
Design
Closing with Contacts — Thanks, Then a Way In for Later Questions
200 120

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

closing-thanks-contact-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 120 right 200 bottom 96 left 200

## Type (px against a 1920px canvas)
thanks  72px / 700 / tracking 0.04em / leading 1.3
sub  26px / 400 / leading 1.7
cLabel  20px / 500 / tracking 0.12em
cValue  30px / 700 / tabular numerals
cNote  20px / 400 / leading 1.6
folio  16px / 400 / tabular numerals

## Colour
Ground #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445

## Constraints — dropping these breaks it
- Three contacts at most, ordered urgent, then reference, then a person
- Say when and how fast each one answers — a bare address does not tell anyone which to use
- Draw only the three finder squares for the code frame — never a pattern that would actually scan
- No request or decision here — that is the previous slide's job

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/closing-thanks-contact/pattern.html.

Spec

1.3 KB

/ai/designs/closing-thanks-contact.json 

format: slide-16x9
density: low
layout:
  kind: centered
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 120
    right: 200
    bottom: 96
    left: 200
type:
  thanks:
    size: 72
    weight: 700
    tracking: 0.04em
    leading: 1.3
  sub:
    size: 26
    weight: 400
    leading: 1.7
  cLabel:
    size: 20
    weight: 500
    tracking: 0.12em
  cValue:
    size: 30
    weight: 700
    numeric: tabular
  cNote:
    size: 20
    weight: 400
    leading: 1.6
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#111722"
  surface: "#1A2231"
  ink: "#E9EDF4"
  muted: "#8894A6"
  accent: "#5AA2E8"
  rule: "#2B3445"
rules:
  - Three contacts at most, ordered urgent, then reference, then a person
  - Say when and how fast each one answers — a bare address does not tell anyone which to use
  - Draw only the three finder squares for the code frame — never a pattern that would actually scan
  - No request or decision here — that is the previous slide's job

Files

pattern.html

3.9 KB

/designs/closing-thanks-contact/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>締めと連絡先 — 謝辞のあとに、聞きたくなったときの入口を渡す</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: #111722;
    --surface: #1A2231;
    --ink: #E9EDF4;
    --muted: #8894A6;
    --accent: #5AA2E8;
    --rule: #2B3445;
  }
  * { 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: 120px 200px 96px;            /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; row-gap: 56px; }

  .head { align-self: center; text-align: center; }
  .thanks { font-size: 72px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
  .sub { font-size: 26px; font-weight: 400; color: var(--muted); margin-top: 28px; line-height: 1.7; }

  /* 連絡先は 3 つまで。並びは「急ぎ → 調べもの → 人」の順 */
  .contacts { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr) 200px; column-gap: 2px; background: var(--rule); }
  .card { background: var(--surface); padding: 36px 40px; }
  .cLabel { font-size: 20px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .cValue { font-size: 30px; font-weight: 700; margin-top: 14px; font-variant-numeric: tabular-nums; }
  .cNote { font-size: 20px; font-weight: 400; color: var(--muted); margin-top: 10px; line-height: 1.6; }
  /* 二次元コードの差し替え枠。読み取れる模様は描かず、四隅の位置合わせだけを示す */
  .code { background: var(--surface); display: grid; place-items: center; }

  .folio { width: 100%; 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 class="head">
      <h1 class="thanks" data-type="thanks">ご清聴ありがとうございました</h1>
      <p class="sub" data-type="sub">説明会のあとに出てきた疑問は、下のどれかに寄せてください。</p>
    </div>

    <div class="contacts">
      <div class="card">
        <p class="cLabel" data-type="cLabel">急ぎの相談</p>
        <p class="cValue" data-type="cValue">内線 4120</p>
        <p class="cNote" data-type="cNote">平日 9:00〜18:00　佐伯まで</p>
      </div>
      <div class="card">
        <p class="cLabel">質問・意見</p>
        <p class="cValue">#窓口一本化</p>
        <p class="cNote">社内チャット。回答は 1 営業日以内</p>
      </div>
      <div class="card">
        <p class="cLabel">今日の資料</p>
        <p class="cValue">社内ポータル ＞ CS</p>
        <p class="cNote">録画と FAQ も同じ場所に置きます</p>
      </div>
      <div class="code">
        <svg width="132" height="132" viewBox="0 0 132 132" aria-hidden="true">
          <rect x="1" y="1" width="130" height="130" fill="none" stroke="var(--rule)" stroke-width="2"/>
          <g fill="none" stroke="var(--ink)" stroke-width="6">
            <rect x="14" y="14" width="30" height="30"/><rect x="88" y="14" width="30" height="30"/><rect x="14" y="88" width="30" height="30"/>
          </g>
        </svg>
      </div>
    </div>

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

font.css

3.2 KB

/designs/closing-thanks-contact/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   116 (00127ff656785c06)
 *
 * 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+23, U+2f-32, U+34, U+38-3a, U+41, U+43, U+46, U+51, U+53, U+2014, U+3000-3002, U+301c, U+3042, U+3044, U+3046, U+304b-3050, U+3053-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3071, U+307e, U+3081-3082, U+308a, U+308c, U+308f, U+3092, U+3094, U+3099-309a, U+30bf-30c3, U+30c8-30c9, U+30db-30dd, U+30e3, U+30eb, U+30fb-30fc, U+4e00, U+4e0b, U+4eca, U+4ee5, U+4f1a, U+4f2f, U+4f50, U+5148, U+5165, U+5185, U+51fa, U+5316, U+53e3, U+5408, U+540c, U+554f, U+55b6, U+56de, U+5834, U+5bc4, U+5e73, U+6025, U+610f, U+6240, U+6599, U+65e5, U+660e, U+672c, U+696d, U+6e05, U+6e21, U+753b, U+7591, U+76f8, U+793e, U+7a93, U+7b54, U+7d61, U+7dda, U+7de0, U+7f6e, U+805e, U+8074, U+898b, U+8aac, U+8ac7, U+8b1d, U+8cc7, U+8cea, U+8f9e, U+9023, U+9332, U+ff0f, U+ff1e;
}
@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+23, U+2f-32, U+34, U+38-3a, U+41, U+43, U+46, U+51, U+53, U+2014, U+3000-3002, U+301c, U+3042, U+3044, U+3046, U+304b-3050, U+3053-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3071, U+307e, U+3081-3082, U+308a, U+308c, U+308f, U+3092, U+3094, U+3099-309a, U+30bf-30c3, U+30c8-30c9, U+30db-30dd, U+30e3, U+30eb, U+30fb-30fc, U+4e00, U+4e0b, U+4eca, U+4ee5, U+4f1a, U+4f2f, U+4f50, U+5148, U+5165, U+5185, U+51fa, U+5316, U+53e3, U+5408, U+540c, U+554f, U+55b6, U+56de, U+5834, U+5bc4, U+5e73, U+6025, U+610f, U+6240, U+6599, U+65e5, U+660e, U+672c, U+696d, U+6e05, U+6e21, U+753b, U+7591, U+76f8, U+793e, U+7a93, U+7b54, U+7d61, U+7dda, U+7de0, U+7f6e, U+805e, U+8074, U+898b, U+8aac, U+8ac7, U+8b1d, U+8cc7, U+8cea, U+8f9e, U+9023, U+9332, U+ff0f, U+ff1e;
}
@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+23, U+2f-32, U+34, U+38-3a, U+41, U+43, U+46, U+51, U+53, U+2014, U+3000-3002, U+301c, U+3042, U+3044, U+3046, U+304b-3050, U+3053-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3071, U+307e, U+3081-3082, U+308a, U+308c, U+308f, U+3092, U+3094, U+3099-309a, U+30bf-30c3, U+30c8-30c9, U+30db-30dd, U+30e3, U+30eb, U+30fb-30fc, U+4e00, U+4e0b, U+4eca, U+4ee5, U+4f1a, U+4f2f, U+4f50, U+5148, U+5165, U+5185, U+51fa, U+5316, U+53e3, U+5408, U+540c, U+554f, U+55b6, U+56de, U+5834, U+5bc4, U+5e73, U+6025, U+610f, U+6240, U+6599, U+65e5, U+660e, U+672c, U+696d, U+6e05, U+6e21, U+753b, U+7591, U+76f8, U+793e, U+7a93, U+7b54, U+7d61, U+7dda, U+7de0, U+7f6e, U+805e, U+8074, U+898b, U+8aac, U+8ac7, U+8b1d, U+8cc7, U+8cea, U+8f9e, U+9023, U+9332, U+ff0f, U+ff1e;
}

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