{
"id": "stacked-area-share-shift",
"schemaVersion": 2,
"title": {
"ja": "契約の構成比の推移 — 2 年で主力が入れ替わった",
"en": "Mix Over Time — The Mainstay Changed Hands in Two Years"
},
"summary": {
"ja": "帯の厚みが構成比、横が時間。合計を 100% に正規化し、入れ替わりと「動いていないもの」を同時に見せる",
"en": "Band thickness is share, the horizontal is time. Normalised to 100%, so the handover and the band that never moved are read together"
},
"capturedAt": "2026-09-16",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"minimal"
],
"useCases": [
"status"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "timeline",
"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
},
"bandName": {
"size": 22,
"weight": 700,
"leading": 1.3
},
"bandValue": {
"size": 24,
"weight": 700,
"leading": 1.2,
"numeric": "tabular"
},
"axisLabel": {
"size": 20,
"weight": 500,
"leading": 1.4,
"numeric": "tabular"
},
"forecastLabel": {
"size": 20,
"weight": 500,
"leading": 1.4
},
"conclusion": {
"size": 26,
"weight": 500,
"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": [
"#1C8C79",
"#2F6FB5",
"#9A6B12"
]
},
"rules": [
{
"ja": "構成比であることを明記する。帯が細っても金額が減ったとは限らず、総額が伸びていれば増えていることさえある",
"en": "Say that these are shares. A band can thin while its amount grows, if the total grew faster"
},
{
"ja": "帯は 3〜4 本まで。5 本を超えると細い帯の厚みの変化が読めず、真ん中の帯ほど始点も終点も追えなくなる",
"en": "Three or four bands at most. Past five, thin bands stop showing their change, and the middle ones lose both their start and their end"
},
{
"ja": "帯の濃さを揃える。1 本だけ濃くすると、推移の図ではなく「この帯の話」という主張になる",
"en": "Keep the bands equal in strength. Darken one and the figure stops being a history and becomes an argument about that band"
},
{
"ja": "動いていない帯にも名前と数を置く。入れ替わりだけを読ませると、「変わらなかった」という事実が落ちる",
"en": "Name and number the band that did not move. Read only for the handover, the figure loses the fact that something stayed put"
},
{
"ja": "見込みの期間をその旨で示す。実績と見込みが同じ線で続くと、最後の 1 期だけが約束として読まれる",
"en": "Mark a forecast period as a forecast. Drawn continuous with actuals, the final period reads as a commitment"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.CWYE95NZ.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"donut-share-center-total",
"treemap-budget-allocation"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "timeline",
"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
},
"bandName": {
"size": 22,
"weight": 700,
"leading": 1.3
},
"bandValue": {
"size": 24,
"weight": 700,
"leading": 1.2,
"numeric": "tabular"
},
"axisLabel": {
"size": 20,
"weight": 500,
"leading": 1.4,
"numeric": "tabular"
},
"forecastLabel": {
"size": 20,
"weight": 500,
"leading": 1.4
},
"conclusion": {
"size": 26,
"weight": 500,
"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": [
"#1C8C79",
"#2F6FB5",
"#9A6B12"
]
},
"rules": [
"Say that these are shares. A band can thin while its amount grows, if the total grew faster",
"Three or four bands at most. Past five, thin bands stop showing their change, and the middle ones lose both their start and their end",
"Keep the bands equal in strength. Darken one and the figure stops being a history and becomes an argument about that band",
"Name and number the band that did not move. Read only for the handover, the figure loses the fact that something stayed put",
"Mark a forecast period as a forecast. Drawn continuous with actuals, the final period reads as a commitment"
]
},
"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\nbandName 22px / 700 / 行送り 1.3\nbandValue 24px / 700 / 行送り 1.2 / 等幅数字\naxisLabel 20px / 500 / 行送り 1.4 / 等幅数字\nforecastLabel 20px / 500 / 行送り 1.4\nconclusion 26px / 500 / 行送り 1.6\nnote 16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #2F6FB5 / #9A6B12\n\n## 外すと崩れる点\n- 構成比であることを明記する。帯が細っても金額が減ったとは限らず、総額が伸びていれば増えていることさえある\n- 帯は 3〜4 本まで。5 本を超えると細い帯の厚みの変化が読めず、真ん中の帯ほど始点も終点も追えなくなる\n- 帯の濃さを揃える。1 本だけ濃くすると、推移の図ではなく「この帯の話」という主張になる\n- 動いていない帯にも名前と数を置く。入れ替わりだけを読ませると、「変わらなかった」という事実が落ちる\n- 見込みの期間をその旨で示す。実績と見込みが同じ線で続くと、最後の 1 期だけが約束として読まれる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/stacked-area-share-shift/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\nbandName 22px / 700 / leading 1.3\nbandValue 24px / 700 / leading 1.2 / tabular numerals\naxisLabel 20px / 500 / leading 1.4 / tabular numerals\nforecastLabel 20px / 500 / leading 1.4\nconclusion 26px / 500 / leading 1.6\nnote 16px / 400 / leading 1.6\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1C8C79 / #2F6FB5 / #9A6B12\n\n## Constraints — dropping these breaks it\n- Say that these are shares. A band can thin while its amount grows, if the total grew faster\n- Three or four bands at most. Past five, thin bands stop showing their change, and the middle ones lose both their start and their end\n- Keep the bands equal in strength. Darken one and the figure stops being a history and becomes an argument about that band\n- Name and number the band that did not move. Read only for the handover, the figure loses the fact that something stayed put\n- Mark a forecast period as a forecast. Drawn continuous with actuals, the final period reads as a commitment\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/stacked-area-share-shift/pattern.html."
},
"code": {
"html": "\n\n契約の構成比の推移 — 2 年で主力が入れ替わった\n\n\n\n\n