{
"id": "callout-numbered-screen",
"schemaVersion": 2,
"title": {
"ja": "申請画面の指摘 — 4 か所を直せば差し戻しが減る",
"en": "Four Marks on One Screen — What to Fix Before the Rework Piles Up"
},
"summary": {
"ja": "画面に番号を打ち、引き出し線で指摘を結ぶ。画面は画像ではなく div で描くので、公開されても図が欠けない",
"en": "Numbered pins on a screen, each tied to its finding by a leader line. The screen is drawn in markup rather than pasted as an image, so nothing goes missing when it is published"
},
"capturedAt": "2026-09-16",
"categories": [
"presentation",
"ui-component"
],
"tags": [
"minimal",
"typography"
],
"useCases": [
"requirements"
],
"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",
"series": []
},
"rules": [
{
"ja": "画面を画像で貼らない。公開されるのは版と font.css と woff2 だけなので、隣に置いた画像は手元でだけ出て、公開版では静かに欠ける",
"en": "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"
},
{
"ja": "画面は線画にする。実物の文字を写すと、読み手は指摘ではなく文面を読み始める",
"en": "Draw the screen as a wireframe. Reproduce its real text and the reader starts reading the copy instead of the findings"
},
{
"ja": "番号の順序は直す順序にする。画面上の位置で番号を振ると、順序に意味があるように見えて、優先順として読まれてしまう",
"en": "Number by the order of repair. Numbering by position on screen looks like a priority order and will be read as one"
},
{
"ja": "引き出し線は番号より先に描く。あとから置いた丸が線の端を隠し、線がどこを指しているかが明確になる",
"en": "Draw the leader lines before the pins. The pin then covers the line's end, so what the line points at is unambiguous"
},
{
"ja": "指摘は 5 つまで。6 つ目からは線が交差し、どの番号がどこを指しているかを目で追えなくなる",
"en": "Five findings at most. From the sixth the leader lines cross and the eye can no longer follow which pin belongs to which note"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.HB8NFtKp.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"maturity-staircase-now-target"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"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"
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n\n## 文字（版面 1920px に対する px）\ntitle 44px / 700 / 字間 0.01em / 行送り 1.3\nwindow 20px / 500 / 行送り 1.5\npinNum 24px / 700 / 行送り 1\nnoteIndex 24px / 700 / 行送り 1.3\nnoteName 24px / 700 / 行送り 1.3\nnoteDetail 20px / 400 / 行送り 1.6\nnote 16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 画面を画像で貼らない。公開されるのは版と font.css と woff2 だけなので、隣に置いた画像は手元でだけ出て、公開版では静かに欠ける\n- 画面は線画にする。実物の文字を写すと、読み手は指摘ではなく文面を読み始める\n- 番号の順序は直す順序にする。画面上の位置で番号を振ると、順序に意味があるように見えて、優先順として読まれてしまう\n- 引き出し線は番号より先に描く。あとから置いた丸が線の端を隠し、線がどこを指しているかが明確になる\n- 指摘は 5 つまで。6 つ目からは線が交差し、どの番号がどこを指しているかを目で追えなくなる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/callout-numbered-screen/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 96 left 140\n\n## Type (px against a 1920px canvas)\ntitle 44px / 700 / tracking 0.01em / leading 1.3\nwindow 20px / 500 / leading 1.5\npinNum 24px / 700 / leading 1\nnoteIndex 24px / 700 / leading 1.3\nnoteName 24px / 700 / leading 1.3\nnoteDetail 20px / 400 / leading 1.6\nnote 16px / 400 / leading 1.6\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- 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\n- Draw the screen as a wireframe. Reproduce its real text and the reader starts reading the copy instead of the findings\n- Number by the order of repair. Numbering by position on screen looks like a priority order and will be read as one\n- Draw the leader lines before the pins. The pin then covers the line's end, so what the line points at is unambiguous\n- Five findings at most. From the sixth the leader lines cross and the eye can no longer follow which pin belongs to which note\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/callout-numbered-screen/pattern.html."
},
"code": {
"html": "\n\n申請画面の指摘 — 4 か所を直せば差し戻しが減る\n\n\n\n\n