{ "id": "design:figure-with-caption", "schemaVersion": 2, "title": { "ja": "図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える", "en": "Figure With Caption — One Large Figure, a Numbered Caption Beside It" }, "summary": { "ja": "折れ線の図を左に大きく置き、右の欄に図番号・何を測った図か・何が読めるかの順で説明文を書く。系列名は線の端に直接書く", "en": "A large line chart on the left; on the right, the figure number, what was measured and what it shows, in that order. Series are labelled at the line ends" }, "capturedAt": "2026-10-19", "categories": [ "presentation" ], "tags": [ "data-viz", "typography" ], "useCases": [ "article" ], "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", "series": [] }, "rules": [ { "ja": "説明文は図番号から始め、何を測った図か → 何が読めるかの順に書く", "en": "Start the caption with the figure number, then what was measured, then what it shows" }, { "ja": "系列名は凡例にせず、線の端に直接書く", "en": "Label series at the line ends, not in a legend" }, { "ja": "注記は 2 か所まで。図の中で言うのは、説明文が指す点だけ", "en": "Two annotations at most — only the points the caption refers to" }, { "ja": "測り方と人数は説明文の下に小さく", "en": "Method and sample size go small under the caption" } ], "cover": "https://design-vault.pages.dev/_astro/cover.C8kH_hS4.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "action-title-chart-takeaway", "zoom-inset-whole-detail", "callout-numbered-screen" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "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" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 88 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 500 / 字間 0.12em / 等幅数字\ntitle 50px / 700 / 行送り 1.4 / 等幅数字\ncaptionNo 30px / 700 / 等幅数字\ncaption 24px / 400 / 行送り 1.75 / 等幅数字\ncaptionNote 20px / 400 / 行送り 1.7 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC\n\n## 外すと崩れる点\n- 説明文は図番号から始め、何を測った図か → 何が読めるかの順に書く\n- 系列名は凡例にせず、線の端に直接書く\n- 注記は 2 か所まで。図の中で言うのは、説明文が指す点だけ\n- 測り方と人数は説明文の下に小さく\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/figure-with-caption/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 88 right 140 bottom 56 left 140\n\n## Type (px against a 1920px canvas)\nkicker 22px / 500 / tracking 0.12em / tabular numerals\ntitle 50px / 700 / leading 1.4 / tabular numerals\ncaptionNo 30px / 700 / tabular numerals\ncaption 24px / 400 / leading 1.75 / tabular numerals\ncaptionNote 20px / 400 / leading 1.7 / tabular numerals\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC\n\n## Constraints — dropping these breaks it\n- Start the caption with the figure number, then what was measured, then what it shows\n- Label series at the line ends, not in a legend\n- Two annotations at most — only the points the caption refers to\n- Method and sample size go small under the caption\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/figure-with-caption/pattern.html." }, "code": { "html": "\n\n図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える\n\n\n\n\n\n
\n
\n
\n

結果　中断の時間の分布

\n

中断は消えたのではなく、毎正時に寄せられた

\n
\n
\n \n 回\n \n \n 00.51.01.59:0010:0011:0012:0013:0014:0015:0016:0017:00\n \n \n 即時配信\n 束ね配信\n \n 毎正時の直後に集まる\n \n あいだは即時の 4 分の 1\n \n
\n

図 2

\n

30 分ごとの作業の中断の回数（1 人あたり、平日 10 日間の平均）。束ね配信では、通知が届く毎正時の直後に中断が集まり、そのあいだの 30 分は即時配信の 4 分の 1 ほどに減る。

\n

中断は、作業中の画面から通知の画面への切り替えとして数えた。束ね配信 71 名、即時配信 69 名。

\n
\n
\n
\n

山野ほか　通知の束ね配信と作業の中断

\n

05

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/figure-with-caption/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/figure-with-caption/font.css", "https://design-vault.pages.dev/designs/figure-with-caption/font-0.woff2", "https://design-vault.pages.dev/designs/figure-with-caption/font-1.woff2", "https://design-vault.pages.dev/designs/figure-with-caption/font-2.woff2", "https://design-vault.pages.dev/designs/figure-with-caption/font-3.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/figure-with-caption", "en": "https://design-vault.pages.dev/en/designs/figure-with-caption", "json": "https://design-vault.pages.dev/ai/assets/figure-with-caption.json", "designJson": "https://design-vault.pages.dev/ai/designs/figure-with-caption.json" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「研究・技術発表」の\n1 枚で、架空の研究「通知の束ね配信と作業の中断」の発表として描いてある。研究・著者・所属・数値・文献はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the nine research-talk pieces, drawn as the\ntalk for a fictional study; the study, authors, affiliations, figures and references are all invented.\n\n### Techniques\n\n- 図 1120px と説明 1fr の 2 列\n- 説明文の上に墨の 3px の罫、図番号は明朝\n- 主役の系列は強調色の 4px、比べる系列は灰色の 3px\n\n### Apply to\n\n- 研究発表の結果の図\n- 報告書の図版の頁", "slug": "figure-with-caption", "kind": "artboard", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "view-artboard", "read-spec", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse" }