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

Figure With Caption — One Large Figure, a Numbered Caption Beside It

Annotated
Design
Figure With Caption — One Large Figure, a Numbered Caption Beside It
140 88

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

figure-with-caption-everything.md

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

Prompt

1.0 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 88 right 140 bottom 56 left 140

## Type (px against a 1920px canvas)
kicker  22px / 500 / tracking 0.12em / tabular numerals
title  50px / 700 / leading 1.4 / tabular numerals
captionNo  30px / 700 / tabular numerals
caption  24px / 400 / leading 1.75 / tabular numerals
captionNote  20px / 400 / leading 1.7 / tabular numerals
folio  16px / 400 / tabular numerals

## Colour
Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC

## Constraints — dropping these breaks it
- Start the caption with the figure number, then what was measured, then what it shows
- Label series at the line ends, not in a legend
- Two annotations at most — only the points the caption refers to
- Method and sample size go small under the caption

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/figure-with-caption/pattern.html.

Spec

1.3 KB

/ai/designs/figure-with-caption.json 

format: slide-16x9
density: medium
layout:
  kind: annotated
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
type:
  kicker:
    size: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  captionNo:
    size: 30
    weight: 700
    numeric: tabular
  caption:
    size: 24
    weight: 400
    leading: 1.75
    numeric: tabular
  captionNote:
    size: 20
    weight: 400
    leading: 1.7
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - Start the caption with the figure number, then what was measured, then what it shows
  - Label series at the line ends, not in a legend
  - Two annotations at most — only the points the caption refers to
  - Method and sample size go small under the caption

Files

pattern.html

5.8 KB

/designs/figure-with-caption/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 Old Mincho:700">
<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: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 88px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; margin-top: 10px; }
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  .fig { display: grid; grid-template-columns: 1120px 1fr; column-gap: 64px; align-items: start; }
  svg text { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
  .ax { font-size: 20px; fill: var(--muted); }
  .axt { font-size: 20px; fill: var(--muted); font-weight: 500; }
  .lineLabel { font-size: 22px; font-weight: 700; }
  .ann { font-size: 20px; font-weight: 500; fill: var(--accent); }
  /* 説明文は図番号から始め、何を測った図か → 何が読めるか の順に書く */
  .cap { border-top: 3px solid var(--ink); padding-top: 24px; }
  .capNo { font-size: 30px; font-weight: 700; }
  .capText { font-size: 24px; line-height: 1.75; margin-top: 16px; }
  .capNote { font-size: 20px; line-height: 1.7; color: var(--muted); margin-top: 20px; }

</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>
    <div class="fig">
      <svg width="1120" height="540" viewBox="0 0 1120 540" aria-label="30 分ごとの作業の中断の回数">
        <text class="axt" x="80" y="20">回</text>
        <g stroke="var(--rule)" stroke-width="1"><line x1="80" y1="333.3" x2="990" y2="333.3"/><line x1="80" y1="186.7" x2="990" y2="186.7"/><line x1="80" y1="40.0" x2="990" y2="40.0"/></g>
        <line x1="80" y1="480" x2="990" y2="480" stroke="var(--ink)" stroke-width="2"/>
        <g><text class="ax" x="64" y="487.0" text-anchor="end">0</text><text class="ax" x="64" y="340.3" text-anchor="end">0.5</text><text class="ax" x="64" y="193.7" text-anchor="end">1.0</text><text class="ax" x="64" y="47.0" text-anchor="end">1.5</text></g><g><text class="ax" x="90" y="516" text-anchor="middle">9:00</text><text class="ax" x="194" y="516" text-anchor="middle">10:00</text><text class="ax" x="298" y="516" text-anchor="middle">11:00</text><text class="ax" x="402" y="516" text-anchor="middle">12:00</text><text class="ax" x="506" y="516" text-anchor="middle">13:00</text><text class="ax" x="610" y="516" text-anchor="middle">14:00</text><text class="ax" x="714" y="516" text-anchor="middle">15:00</text><text class="ax" x="818" y="516" text-anchor="middle">16:00</text><text class="ax" x="922" y="516" text-anchor="middle">17:00</text></g>
        <polyline points="90 128.0 142 98.7 194 113.3 246 142.7 298 157.3 350 186.7 402 245.3 454 216.0 506 142.7 558 113.3 610 128.0 662 98.7 714 142.7 766 157.3 818 128.0 870 172.0 922 201.3 974 230.7" fill="none" stroke="var(--muted)" stroke-width="3"/>
        <polyline points="90 201.3 142 392.0 194 186.7 246 406.7 298 216.0 350 392.0 402 274.7 454 406.7 506 201.3 558 377.3 610 186.7 662 392.0 714 216.0 766 406.7 818 201.3 870 392.0 922 245.3 974 406.7" fill="none" stroke="var(--accent)" stroke-width="4" stroke-linejoin="round"/>
        <text class="lineLabel" x="990" y="238.7" fill="var(--muted)">即時配信</text>
        <text class="lineLabel" x="990" y="414.7" fill="var(--accent)">束ね配信</text>
        <line x1="610" y1="176.7" x2="610" y2="96" stroke="var(--accent)" stroke-width="1.5"/>
        <text class="ann" x="610" y="84" text-anchor="middle">毎正時の直後に集まる</text>
        <line x1="454" y1="416.7" x2="454" y2="430" stroke="var(--accent)" stroke-width="1.5"/>
        <text class="ann" x="466" y="458">あいだは即時の 4 分の 1</text>
      </svg>
      <div class="cap">
        <p class="capNo mincho" data-type="captionNo">図 2</p>
        <p class="capText" data-type="caption">30 分ごとの作業の中断の回数（1 人あたり、平日 10 日間の平均）。束ね配信では、通知が届く毎正時の直後に中断が集まり、そのあいだの 30 分は即時配信の 4 分の 1 ほどに減る。</p>
        <p class="capNote" data-type="captionNote">中断は、作業中の画面から通知の画面への切り替えとして数えた。束ね配信 71 名、即時配信 69 名。</p>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">山野ほか　通知の束ね配信と作業の中断</p>
      <p>05</p>
    </div>
  </div>
</div>

font.css

3.6 KB

/designs/figure-with-caption/font.css — Not in Everything

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

@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+30-37, U+39-3a, U+2014, U+3000-3002, U+3042, U+3044, U+3048, U+304b-3050, U+3053-3054, U+3057-3058, U+305b-3060, U+3064-306b, U+306d-3070, U+3078-3079, U+307b-307c, U+307e, U+3089-308c, U+3092, U+3099, U+4e2d, U+4eba, U+4f5c, U+4fe1, U+5206-5207, U+5373, U+53f3, U+53f7, U+540d, U+56de, U+56f3, U+5747, U+5927, U+5bc4, U+5c4a, U+5c71, U+5e03, U+5e73, U+5f8c, U+6570, U+6587, U+65ad, U+65e5, U+660e, U+6642, U+66ff, U+675f, U+679a, U+679c, U+696d, U+6b63, U+6bce, U+6d88, U+6dfb, U+6e1b, U+753b, U+756a, U+76f4, U+77e5, U+7d50, U+8aac, U+901a, U+914d, U+91ce, U+9593, U+96c6, U+9762, U+ff08-ff09;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+30-37, U+39-3a, U+2014, U+3000-3002, U+3042, U+3044, U+3048, U+304b-3050, U+3053-3054, U+3057-3058, U+305b-3060, U+3064-306b, U+306d-3070, U+3078-3079, U+307b-307c, U+307e, U+3089-308c, U+3092, U+3099, U+4e2d, U+4eba, U+4f5c, U+4fe1, U+5206-5207, U+5373, U+53f3, U+53f7, U+540d, U+56de, U+56f3, U+5747, U+5927, U+5bc4, U+5c4a, U+5c71, U+5e03, U+5e73, U+5f8c, U+6570, U+6587, U+65ad, U+65e5, U+660e, U+6642, U+66ff, U+675f, U+679a, U+679c, U+696d, U+6b63, U+6bce, U+6d88, U+6dfb, U+6e1b, U+753b, U+756a, U+76f4, U+77e5, U+7d50, U+8aac, U+901a, U+914d, U+91ce, U+9593, U+96c6, U+9762, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+30-37, U+39-3a, U+2014, U+3000-3002, U+3042, U+3044, U+3048, U+304b-3050, U+3053-3054, U+3057-3058, U+305b-3060, U+3064-306b, U+306d-3070, U+3078-3079, U+307b-307c, U+307e, U+3089-308c, U+3092, U+3099, U+4e2d, U+4eba, U+4f5c, U+4fe1, U+5206-5207, U+5373, U+53f3, U+53f7, U+540d, U+56de, U+56f3, U+5747, U+5927, U+5bc4, U+5c4a, U+5c71, U+5e03, U+5e73, U+5f8c, U+6570, U+6587, U+65ad, U+65e5, U+660e, U+6642, U+66ff, U+675f, U+679a, U+679c, U+696d, U+6b63, U+6bce, U+6d88, U+6dfb, U+6e1b, U+753b, U+756a, U+76f4, U+77e5, U+7d50, U+8aac, U+901a, U+914d, U+91ce, U+9593, U+96c6, U+9762, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-3.woff2) format('woff2');
  unicode-range: U+20, U+2e, U+30-37, U+39-3a, U+2014, U+3000-3002, U+3042, U+3044, U+3048, U+304b-3050, U+3053-3054, U+3057-3058, U+305b-3060, U+3064-306b, U+306d-3070, U+3078-3079, U+307b-307c, U+307e, U+3089-308c, U+3092, U+3099, U+4e2d, U+4eba, U+4f5c, U+4fe1, U+5206-5207, U+5373, U+53f3, U+53f7, U+540d, U+56de, U+56f3, U+5747, U+5927, U+5bc4, U+5c4a, U+5c71, U+5e03, U+5e73, U+5f8c, U+6570, U+6587, U+65ad, U+65e5, U+660e, U+6642, U+66ff, U+675f, U+679a, U+679c, U+696d, U+6b63, U+6bce, U+6d88, U+6dfb, U+6e1b, U+753b, U+756a, U+76f4, U+77e5, U+7d50, U+8aac, U+901a, U+914d, U+91ce, U+9593, U+96c6, U+9762, U+ff08-ff09;
}

Notes

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

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「研究・技術発表」の 1 枚で、架空の研究「通知の束ね配信と作業の中断」の発表として描いてある。研究・著者・所属・数値・文献はすべて架空。

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 nine research-talk pieces, drawn as the talk for a fictional study; the study, authors, affiliations, figures and references are all invented.

Techniques

Apply to