As measured
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
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) title 44px / 700 / tracking 0.01em / leading 1.3 window 20px / 500 / leading 1.5 pinNum 24px / 700 / leading 1 noteIndex 24px / 700 / leading 1.3 noteName 24px / 700 / leading 1.3 noteDetail 20px / 400 / leading 1.6 note 16px / 400 / leading 1.6 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Never paste the screen as an image. Only the artboard, its font.css and its woff2 files are published, so an image beside them renders locally and silently 404s in public - Draw the screen as a wireframe. Reproduce its real text and the reader starts reading the copy instead of the findings - Number by the order of repair. Numbering by position on screen looks like a priority order and will be read as one - Draw the leader lines before the pins. The pin then covers the line's end, so what the line points at is unambiguous - Five findings at most. From the sixth the leader lines cross and the eye can no longer follow which pin belongs to which note 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/callout-numbered-screen/pattern.html.
/ai/designs/callout-numbered-screen.json
format: slide-16x9
density: medium
layout:
kind: annotated
canvas:
w: 1920
h: 1080
margin:
top: 96
right: 140
bottom: 96
left: 140
type:
title:
size: 44
weight: 700
tracking: 0.01em
leading: 1.3
window:
size: 20
weight: 500
leading: 1.5
pinNum:
size: 24
weight: 700
leading: 1
noteIndex:
size: 24
weight: 700
leading: 1.3
noteName:
size: 24
weight: 700
leading: 1.3
noteDetail:
size: 20
weight: 400
leading: 1.6
note:
size: 16
weight: 400
leading: 1.6
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Never paste the screen as an image. Only the artboard, its font.css and its woff2 files are published, so an image beside them renders locally and silently 404s in public
- Draw the screen as a wireframe. Reproduce its real text and the reader starts reading the copy instead of the findings
- Number by the order of repair. Numbering by position on screen looks like a priority order and will be read as one
- Draw the leader lines before the pins. The pin then covers the line's end, so what the line points at is unambiguous
- Five findings at most. From the sixth the leader lines cross and the eye can no longer follow which pin belongs to which note{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "annotated",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"window": {
"size": 20,
"weight": 500,
"leading": 1.5
},
"pinNum": {
"size": 24,
"weight": 700,
"leading": 1
},
"noteIndex": {
"size": 24,
"weight": 700,
"leading": 1.3
},
"noteName": {
"size": 24,
"weight": 700,
"leading": 1.3
},
"noteDetail": {
"size": 20,
"weight": 400,
"leading": 1.6
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Never paste the screen as an image. Only the artboard, its font.css and its woff2 files are published, so an image beside them renders locally and silently 404s in public",
"Draw the screen as a wireframe. Reproduce its real text and the reader starts reading the copy instead of the findings",
"Number by the order of repair. Numbering by position on screen looks like a priority order and will be read as one",
"Draw the leader lines before the pins. The pin then covers the line's end, so what the line points at is unambiguous",
"Five findings at most. From the sixth the leader lines cross and the eye can no longer follow which pin belongs to which note"
]
} /designs/callout-numbered-screen/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>申請画面の指摘 — 4 か所を直せば差し戻しが減る</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
区分色は持たない —— 番号が指す場所が意味であって、色は何も言っていない。 */
: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;
}
.content {
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.head { border-bottom: 2px solid var(--rule); padding-bottom: 28px; }
.title { font-size: 44px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; }
.window { margin-top: 14px; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.body { display: grid; align-content: center; }
/* 画面は画像ではなく div で描く。公開されるのは版と font.css と woff2 だけなので、
版の隣に画像を置くと、手元では出て公開版だけが静かに 404 になる。 */
.stage { position: relative; width: 1640px; height: 620px; }
.screen { position: absolute; left: 0; top: 0; width: 980px; height: 620px; border: 2px solid var(--rule); border-radius: 14px; background: var(--ground); overflow: hidden; }
.titlebar { position: absolute; left: 0; top: 0; width: 980px; height: 56px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.dot { position: absolute; top: 21px; width: 14px; height: 14px; border-radius: 50%; background: var(--rule); }
.sidebar { position: absolute; left: 0; top: 57px; width: 220px; height: 563px; background: var(--surface); border-right: 1px solid var(--rule); }
.sidebar-item { position: absolute; left: 28px; width: 150px; height: 14px; border-radius: 7px; background: var(--rule); }
.label-bar { position: absolute; width: 170px; height: 14px; border-radius: 7px; background: var(--rule); }
.field { position: absolute; width: 560px; height: 52px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.submit { position: absolute; left: 700px; top: 510px; width: 200px; height: 56px; border-radius: 8px; background: var(--accent); }
/* 引き出し線は SVG で、番号より先に描く。あとから置いた番号の丸が線の端を隠す。 */
.leaders { position: absolute; left: 0; top: 0; }
.leader { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.pin { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid var(--accent); background: var(--ground); display: grid; place-content: center; }
/* 地の色を強調の上に抜かない。抜くと `emphasis.via: ["fill"]` の宣言が要る。 */
.pin-num { font-size: 24px; font-weight: 700; line-height: 1; color: var(--accent); }
.notes { position: absolute; right: 0; top: 10px; width: 560px; }
.note-row { height: 140px; }
.note-head { display: flex; align-items: baseline; gap: 14px; }
.note-index { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--accent); }
.note-name { font-size: 24px; font-weight: 700; line-height: 1.3; }
.note-detail { margin-top: 10px; font-size: 20px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<div class="head">
<h1 class="title" data-type="title">申請画面の指摘 — 4 か所を直せば差し戻しが減る</h1>
<p class="window" data-type="window">対象は経費申請の入力画面 / 指摘は 9 月の受入検査 / 番号は修正の優先順</p>
</div>
<div class="body">
<div class="stage">
<div class="screen">
<div class="titlebar"></div>
<span class="dot" style="left: 24px"></span>
<span class="dot" style="left: 48px"></span>
<span class="dot" style="left: 72px"></span>
<div class="sidebar"></div>
<span class="sidebar-item" style="top: 100px"></span>
<span class="sidebar-item" style="top: 152px"></span>
<span class="sidebar-item" style="top: 204px"></span>
<span class="sidebar-item" style="top: 256px"></span>
<span class="label-bar" style="left: 260px; top: 110px"></span>
<span class="field" style="left: 260px; top: 136px"></span>
<span class="label-bar" style="left: 260px; top: 210px"></span>
<span class="field" style="left: 260px; top: 236px"></span>
<span class="label-bar" style="left: 260px; top: 310px"></span>
<span class="field" style="left: 260px; top: 336px"></span>
<span class="label-bar" style="left: 260px; top: 410px"></span>
<span class="field" style="left: 260px; top: 436px"></span>
<span class="submit"></span>
</div>
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、拡大率が
入らず、線が指す座標は版面の px とそのまま同じになる。 -->
<svg class="leaders" width="1640" height="620" viewBox="0 0 1640 620">
<path class="leader" d="M300 162 L1060 80"/>
<path class="leader" d="M700 262 L1060 220"/>
<path class="leader" d="M300 462 L1060 360"/>
<path class="leader" d="M800 538 L1060 500"/>
</svg>
<span class="pin" style="left: 300px; top: 162px"><span class="pin-num" data-type="pinNum">1</span></span>
<span class="pin" style="left: 700px; top: 262px"><span class="pin-num">2</span></span>
<span class="pin" style="left: 300px; top: 462px"><span class="pin-num">3</span></span>
<span class="pin" style="left: 800px; top: 538px"><span class="pin-num">4</span></span>
<div class="notes">
<div class="note-row">
<div class="note-head">
<span class="note-index" data-type="noteIndex">1</span>
<span class="note-name" data-type="noteName">勘定科目が先頭にある</span>
</div>
<div class="note-detail" data-type="noteDetail">使う人は金額から入力する。順序を入れ替える</div>
</div>
<div class="note-row">
<div class="note-head">
<span class="note-index">2</span>
<span class="note-name">添付が任意に見える</span>
</div>
<div class="note-detail">必須の項目に必須と書く。星印だけでは伝わらない</div>
</div>
<div class="note-row">
<div class="note-head">
<span class="note-index">3</span>
<span class="note-name">下書きが消える</span>
</div>
<div class="note-detail">離れたときに保存し、戻ってきた人に続きを残す</div>
</div>
<div class="note-row">
<div class="note-head">
<span class="note-index">4</span>
<span class="note-name">送信後の行き先が無い</span>
</div>
<div class="note-detail">差し戻しが届く場所を、送信した直後に示す</div>
</div>
</div>
</div>
</div>
<div class="foot" data-type="note">番号は修正の優先順で、画面上の位置とは関係しない。今回は優先順が上から順に並んだだけで、入れ替われば線は交差する。</div>
</div>
</div>
/designs/callout-numbered-screen/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 114 (66e20c603473de9a)
*
* 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, U+31-34, U+39, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3052, U+3057-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3070, U+3089, U+308b-308c, U+308f, U+3092-3094, U+3099, U+4e0a-4e0b, U+4e26, U+4ea4, U+4eba, U+4eca, U+4ed8, U+4efb, U+4f1d, U+4f4d, U+4f7f, U+4fc2, U+4fdd, U+4fe1, U+4fee, U+512a, U+5148, U+5165, U+529b, U+52d8, U+5370, U+53d7, U+53f7, U+56de, U+5834, U+5b58, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5e8f, U+5f8c, U+5fc5, U+610f, U+623b, U+6240, U+6307, U+6458, U+661f, U+66f8, U+66ff, U+6708, U+67fb, U+691c, U+6b63, U+6b8b, U+6d88, U+6dfb, U+6e1b, U+7121, U+7533, U+753b, U+756a, U+76ee, U+76f4, U+793a, U+79d1, U+7d4c, U+7d9a, U+7dda, U+7f6e, U+884c, U+898b, U+8acb, U+8c61, U+8cbb, U+9001, U+91d1, U+95a2, U+96e2, U+9762, U+9805-9806, U+9808, U+982d, U+984d;
}
@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, U+31-34, U+39, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3052, U+3057-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3070, U+3089, U+308b-308c, U+308f, U+3092-3094, U+3099, U+4e0a-4e0b, U+4e26, U+4ea4, U+4eba, U+4eca, U+4ed8, U+4efb, U+4f1d, U+4f4d, U+4f7f, U+4fc2, U+4fdd, U+4fe1, U+4fee, U+512a, U+5148, U+5165, U+529b, U+52d8, U+5370, U+53d7, U+53f7, U+56de, U+5834, U+5b58, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5e8f, U+5f8c, U+5fc5, U+610f, U+623b, U+6240, U+6307, U+6458, U+661f, U+66f8, U+66ff, U+6708, U+67fb, U+691c, U+6b63, U+6b8b, U+6d88, U+6dfb, U+6e1b, U+7121, U+7533, U+753b, U+756a, U+76ee, U+76f4, U+793a, U+79d1, U+7d4c, U+7d9a, U+7dda, U+7f6e, U+884c, U+898b, U+8acb, U+8c61, U+8cbb, U+9001, U+91d1, U+95a2, U+96e2, U+9762, U+9805-9806, U+9808, U+982d, U+984d;
}
@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, U+31-34, U+39, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3052, U+3057-305c, U+305f-3060, U+3063, U+3066-306b, U+306e-3070, U+3089, U+308b-308c, U+308f, U+3092-3094, U+3099, U+4e0a-4e0b, U+4e26, U+4ea4, U+4eba, U+4eca, U+4ed8, U+4efb, U+4f1d, U+4f4d, U+4f7f, U+4fc2, U+4fdd, U+4fe1, U+4fee, U+512a, U+5148, U+5165, U+529b, U+52d8, U+5370, U+53d7, U+53f7, U+56de, U+5834, U+5b58, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5e8f, U+5f8c, U+5fc5, U+610f, U+623b, U+6240, U+6307, U+6458, U+661f, U+66f8, U+66ff, U+6708, U+67fb, U+691c, U+6b63, U+6b8b, U+6d88, U+6dfb, U+6e1b, U+7121, U+7533, U+753b, U+756a, U+76ee, U+76f4, U+793a, U+79d1, U+7d4c, U+7d9a, U+7dda, U+7f6e, U+884c, U+898b, U+8acb, U+8c61, U+8cbb, U+9001, U+91d1, U+95a2, U+96e2, U+9762, U+9805-9806, U+9808, U+982d, U+984d;
}
受入検査の指摘は、文章にすると読まれない。「勘定科目が先頭にある」と書いても、 読み手はその画面を思い出せないからである。番号を画面に打つと、指摘は場所を 持つようになり、直す人は探さずに済む。
画面を線画にしているのは権利の話ではなく、読まれ方の話である。実物の文字を 写した瞬間、聞き手は指摘ではなく文面を読み始め、会議は文言の推敲に移る。