Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English
索引に戻る

図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える

注釈つき図
版
図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える
140 88

1920 × 1080 作品として見る

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

figure-with-caption-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

1.1 KB 
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 88 右 140 下 56 左 140

## 文字（版面 1920px に対する px）
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
captionNo  30px / 700 / 等幅数字
caption  24px / 400 / 行送り 1.75 / 等幅数字
captionNote  20px / 400 / 行送り 1.7 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 説明文は図番号から始め、何を測った図か → 何が読めるかの順に書く
- 系列名は凡例にせず、線の端に直接書く
- 注記は 2 か所まで。図の中で言うのは、説明文が指す点だけ
- 測り方と人数は説明文の下に小さく

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/figure-with-caption/pattern.html

仕様

1.4 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:
  - 説明文は図番号から始め、何を測った図か → 何が読めるかの順に書く
  - 系列名は凡例にせず、線の端に直接書く
  - 注記は 2 か所まで。図の中で言うのは、説明文が指す点だけ
  - 測り方と人数は説明文の下に小さく

ファイル

pattern.html

5.8 KB

/designs/figure-with-caption/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!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 — 全部入りには入れていない

中身を見る 
/* 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;
}

ノート

この構成について / 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