{
"id": "design:traction-curve-milestones",
"schemaVersion": 2,
"title": {
"ja": "伸び — 売上の曲線に、節目を 3 つだけ書き込む",
"en": "Traction — A Revenue Curve With Only Three Milestones Written On It"
},
"summary": {
"ja": "月次売上の推移を面つきの折れ線で描き、伸びが変わった節目を 3 つだけ縦線と注記で示す。右上に今の値を大きく置く",
"en": "Monthly revenue as a filled line, with just three milestones marked where the growth changed; today's value sits large at the top right"
},
"capturedAt": "2026-10-19",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"bold"
],
"useCases": [
"kpi"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 112,
"right": 160,
"bottom": 96,
"left": 160
}
},
"type": {
"kicker": {
"size": 22,
"weight": 700,
"tracking": "0.2em"
},
"title": {
"size": 56,
"weight": 900,
"leading": 1.3
},
"nowValue": {
"size": 88,
"weight": 900,
"leading": 1,
"numeric": "tabular"
},
"nowLabel": {
"size": 22,
"weight": 400
},
"source": {
"size": 16,
"weight": 400
}
},
"colors": {
"ground": "#101318",
"surface": "#1A1F27",
"ink": "#F2F4F7",
"muted": "#8B93A1",
"accent": "#F5B83D",
"rule": "#2A303A",
"series": []
},
"rules": [
{
"ja": "節目は 3 つ。伸びの傾きが変わった所だけを選ぶ",
"en": "Three milestones, placed only where the slope changed"
},
{
"ja": "見出しで倍率を言い切り、右上に今の値を置く。グラフを読む前に結論が届く",
"en": "The headline states the multiple and today's value sits top right — the conclusion lands before the chart is read"
},
{
"ja": "注記は縦線の左に寄せ、曲線を隠さない",
"en": "Notes hang to the left of their stems so they never cover the curve"
},
{
"ja": "縦軸は 0 から始める。途中から始めると、伸びが誇張される",
"en": "Start the axis at zero — a cropped axis exaggerates the growth"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.BvETNYUr.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"step-chart-inventory-level-events",
"stacked-area-share-shift",
"kpi-hero-single-figure"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 112,
"right": 160,
"bottom": 96,
"left": 160
}
},
"type": {
"kicker": {
"size": 22,
"weight": 700,
"tracking": "0.2em"
},
"title": {
"size": 56,
"weight": 900,
"leading": 1.3
},
"nowValue": {
"size": 88,
"weight": 900,
"leading": 1,
"numeric": "tabular"
},
"nowLabel": {
"size": 22,
"weight": 400
},
"source": {
"size": 16,
"weight": 400
}
},
"colors": {
"ground": "#101318",
"surface": "#1A1F27",
"ink": "#F2F4F7",
"muted": "#8B93A1",
"accent": "#F5B83D",
"rule": "#2A303A"
},
"rules": [
"Three milestones, placed only where the slope changed",
"The headline states the multiple and today's value sits top right — the conclusion lands before the chart is read",
"Notes hang to the left of their stems so they never cover the curve",
"Start the axis at zero — a cropped axis exaggerates the growth"
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 112 右 160 下 96 左 160\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 700 / 字間 0.2em\ntitle 56px / 900 / 行送り 1.3\nnowValue 88px / 900 / 行送り 1 / 等幅数字\nnowLabel 22px / 400\nsource 16px / 400\n\n## 配色\n地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A\n\n## 外すと崩れる点\n- 節目は 3 つ。伸びの傾きが変わった所だけを選ぶ\n- 見出しで倍率を言い切り、右上に今の値を置く。グラフを読む前に結論が届く\n- 注記は縦線の左に寄せ、曲線を隠さない\n- 縦軸は 0 から始める。途中から始めると、伸びが誇張される\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/traction-curve-milestones/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 112 right 160 bottom 96 left 160\n\n## Type (px against a 1920px canvas)\nkicker 22px / 700 / tracking 0.2em\ntitle 56px / 900 / leading 1.3\nnowValue 88px / 900 / leading 1 / tabular numerals\nnowLabel 22px / 400\nsource 16px / 400\n\n## Colour\nGround #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A\n\n## Constraints — dropping these breaks it\n- Three milestones, placed only where the slope changed\n- The headline states the multiple and today's value sits top right — the conclusion lands before the chart is read\n- Notes hang to the left of their stems so they never cover the curve\n- Start the axis at zero — a cropped axis exaggerates the growth\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/traction-curve-milestones/pattern.html."
},
"code": {
"html": "\n\n伸び — 売上の曲線に、節目を 3 つだけ書き込む\n\n\n\n\n
\n
\n
\n
\n
実績
\n
月次の売上は 18 か月で 14 倍
\n
\n
\n
2,380万円
\n
2026 年 10 月の月次売上
\n
\n
\n\n \n\n
月次売上（税抜）。数値は説明用の架空のもの
\n
\n
\n",
"url": "https://design-vault.pages.dev/designs/traction-curve-milestones/pattern.html",
"fonts": [
"https://design-vault.pages.dev/designs/traction-curve-milestones/font.css",
"https://design-vault.pages.dev/designs/traction-curve-milestones/font-0.woff2",
"https://design-vault.pages.dev/designs/traction-curve-milestones/font-1.woff2",
"https://design-vault.pages.dev/designs/traction-curve-milestones/font-2.woff2"
]
}
},
"urls": {
"ja": "https://design-vault.pages.dev/designs/traction-curve-milestones",
"en": "https://design-vault.pages.dev/en/designs/traction-curve-milestones",
"json": "https://design-vault.pages.dev/ai/assets/traction-curve-milestones.json",
"designJson": "https://design-vault.pages.dev/ai/designs/traction-curve-milestones.json"
},
"notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「事業計画・資金調達」の\n1 枚で、架空の会社「ミナト経理」のシリーズ A のピッチとして描いてある。会社・人物・数値はすべて架空。\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 pitch slides, drawn as the\nSeries A deck of a fictional company; every company, person and figure on it is invented.\n\n### Techniques\n\n- 曲線は 5px の強調色、面は強調色を地に 16% 混ぜた色\n- 節目は墨の点と縦線、最新の点だけ強調色の大きな点\n- 横軸は年.月の短い書式で 4 か月おき\n\n### Apply to\n\n- ピッチの実績（トラクション）\n- 事業報告で、施策と成果の関係を示す 1 枚",
"slug": "traction-curve-milestones",
"kind": "artboard",
"catalogVersion": 1,
"designSchemaVersion": 2,
"capabilities": [
"view-artboard",
"read-spec",
"copy-prompt",
"get-code"
],
"reusePolicy": "construction-reuse"
}