{
"id": "design:action-title-chart-takeaway",
"schemaVersion": 2,
"title": {
"ja": "結論見出しとグラフ — 見出しで言い切り、右の欄で示唆を足す",
"en": "Action Title with Chart — The Headline States It, the Side Column Adds What Follows"
},
"summary": {
"ja": "グラフが何を言っているかを見出しの 1 文で言い切り、右の欄に示唆を 3 点置く。グラフの題は小さく図の上に回す",
"en": "The headline states what the chart shows; three takeaways sit in a side column, and the chart's own title shrinks above the plot"
},
"capturedAt": "2026-10-19",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"typography"
],
"useCases": [
"kpi"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "2-column",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
},
"columns": {
"count": 2,
"gap": 80
}
},
"type": {
"kicker": {
"size": 20,
"weight": 500,
"tracking": "0.16em"
},
"title": {
"size": 46,
"weight": 700,
"leading": 1.4
},
"chartTitle": {
"size": 24,
"weight": 700
},
"unit": {
"size": 20,
"weight": 400
},
"source": {
"size": 16,
"weight": 400
},
"sideLabel": {
"size": 20,
"weight": 700,
"tracking": "0.12em"
},
"n": {
"size": 26,
"weight": 700,
"numeric": "tabular"
},
"pt": {
"size": 26,
"weight": 700,
"leading": 1.5
},
"pd": {
"size": 21,
"weight": 400,
"leading": 1.7
},
"folio": {
"size": 16,
"weight": 400,
"numeric": "tabular"
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": []
},
"rules": [
{
"ja": "見出しは「何のグラフか」ではなく「何が言えるか」を書く。グラフの題は図の上に小さく置く",
"en": "The headline says what the chart means, not what it is; the chart's title goes small above the plot"
},
{
"ja": "見出しが指す棒だけを強調色にする。残りは地と区別できる最小の濃さに落とす",
"en": "Only the bars the headline points at take the accent; the rest drop to the faintest tone that still reads"
},
{
"ja": "示唆は 3 点まで、1 点 2 行まで。グラフより長くなったら、それは別の 1 枚",
"en": "Three takeaways, two lines each — longer than the chart and it is another slide"
},
{
"ja": "単位と出典を必ず添える。架空の数字なら、そう書く",
"en": "Always give the unit and the source — and say so when the numbers are illustrative"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.DPtuCcaS.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"kpi-hero-single-figure",
"waterfall-variance-bridge",
"case-study-2col-single-figure"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "2-column",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
},
"columns": {
"count": 2,
"gap": 80
}
},
"type": {
"kicker": {
"size": 20,
"weight": 500,
"tracking": "0.16em"
},
"title": {
"size": 46,
"weight": 700,
"leading": 1.4
},
"chartTitle": {
"size": 24,
"weight": 700
},
"unit": {
"size": 20,
"weight": 400
},
"source": {
"size": 16,
"weight": 400
},
"sideLabel": {
"size": 20,
"weight": 700,
"tracking": "0.12em"
},
"n": {
"size": 26,
"weight": 700,
"numeric": "tabular"
},
"pt": {
"size": 26,
"weight": 700,
"leading": 1.5
},
"pd": {
"size": 21,
"weight": 400,
"leading": 1.7
},
"folio": {
"size": 16,
"weight": 400,
"numeric": "tabular"
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"The headline says what the chart means, not what it is; the chart's title goes small above the plot",
"Only the bars the headline points at take the accent; the rest drop to the faintest tone that still reads",
"Three takeaways, two lines each — longer than the chart and it is another slide",
"Always give the unit and the source — and say so when the numbers are illustrative"
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n- 2 カラム（等分）、間隔 80\n\n## 文字（版面 1920px に対する px）\nkicker 20px / 500 / 字間 0.16em\ntitle 46px / 700 / 行送り 1.4\nchartTitle 24px / 700\nunit 20px / 400\nsource 16px / 400\nsideLabel 20px / 700 / 字間 0.12em\nn 26px / 700 / 等幅数字\npt 26px / 700 / 行送り 1.5\npd 21px / 400 / 行送り 1.7\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 見出しは「何のグラフか」ではなく「何が言えるか」を書く。グラフの題は図の上に小さく置く\n- 見出しが指す棒だけを強調色にする。残りは地と区別できる最小の濃さに落とす\n- 示唆は 3 点まで、1 点 2 行まで。グラフより長くなったら、それは別の 1 枚\n- 単位と出典を必ず添える。架空の数字なら、そう書く\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/action-title-chart-takeaway/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- 2 equal columns, gap 80\n\n## Type (px against a 1920px canvas)\nkicker 20px / 500 / tracking 0.16em\ntitle 46px / 700 / leading 1.4\nchartTitle 24px / 700\nunit 20px / 400\nsource 16px / 400\nsideLabel 20px / 700 / tracking 0.12em\nn 26px / 700 / tabular numerals\npt 26px / 700 / leading 1.5\npd 21px / 400 / leading 1.7\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- The headline says what the chart means, not what it is; the chart's title goes small above the plot\n- Only the bars the headline points at take the accent; the rest drop to the faintest tone that still reads\n- Three takeaways, two lines each — longer than the chart and it is another slide\n- Always give the unit and the source — and say so when the numbers are illustrative\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/action-title-chart-takeaway/pattern.html."
},
"code": {
"html": "\n\n結論見出しとグラフ — 見出しで言い切り、右の欄で示唆を足す\n\n\n\n\n
\n",
"url": "https://design-vault.pages.dev/designs/action-title-chart-takeaway/pattern.html",
"fonts": [
"https://design-vault.pages.dev/designs/action-title-chart-takeaway/font.css",
"https://design-vault.pages.dev/designs/action-title-chart-takeaway/font-0.woff2",
"https://design-vault.pages.dev/designs/action-title-chart-takeaway/font-1.woff2",
"https://design-vault.pages.dev/designs/action-title-chart-takeaway/font-2.woff2"
]
}
},
"urls": {
"ja": "https://design-vault.pages.dev/designs/action-title-chart-takeaway",
"en": "https://design-vault.pages.dev/en/designs/action-title-chart-takeaway",
"json": "https://design-vault.pages.dev/ai/assets/action-title-chart-takeaway.json",
"designJson": "https://design-vault.pages.dev/ai/designs/action-title-chart-takeaway.json"
},
"notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「基本の 10 枚」の 1 枚で、\n配色は system-project 一式の淡地・濃地と同じ 2 組に揃えてある。\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 ten basic slides, drawn in the\nsame two palettes as the system-project deck so the two can be mixed.\n\n### Techniques\n\n- グラフ 1fr と示唆 560px の 2 列。示唆の欄は左罫で区切り、面は敷かない\n- 値は棒の上に直接書き、縦軸の目盛りを省く\n- 見出しの中の数字を強調色にし、強調した棒と色で結ぶ\n\n### Apply to\n\n- 報告資料の本文で、数字から結論を出す 1 枚\n- 月次・四半期の振り返り（強調する棒を今期に当てる）",
"slug": "action-title-chart-takeaway",
"kind": "artboard",
"catalogVersion": 1,
"designSchemaVersion": 2,
"capabilities": [
"view-artboard",
"read-spec",
"copy-prompt",
"get-code"
],
"reusePolicy": "construction-reuse"
}