{
"id": "dividend-payout-dual-axis",
"schemaVersion": 2,
"title": {
"ja": "配当の推移 — 1 株配当の棒と配当性向の線を、色で軸に結ぶ二軸",
"en": "Dividend History — Dividend Bars and Payout Line on Two Axes, Each Tied by Colour"
},
"summary": {
"ja": "1 株配当を紺の棒（左の軸）、配当性向を橙の線（右の軸）で 6 期ぶん描く。軸の数字をそれぞれの系列の色にして、どちらで読むかを結ぶ",
"en": "Six years of dividend per share as navy bars on the left axis and payout ratio as an orange line on the right, with each axis's numbers in its series' colour"
},
"capturedAt": "2026-10-19",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"minimal"
],
"useCases": [
"financials"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 56,
"left": 140
}
},
"type": {
"kicker": {
"size": 22,
"weight": 700,
"tracking": "0.16em",
"numeric": "tabular"
},
"title": {
"size": 52,
"weight": 700,
"leading": 1.35,
"numeric": "tabular"
},
"note": {
"size": 20,
"weight": 400,
"numeric": "tabular"
},
"folio": {
"size": 16,
"weight": 400,
"numeric": "tabular"
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F2F4F8",
"ink": "#0E1A2B",
"muted": "#5B6879",
"accent": "#1D3F72",
"rule": "#D6DCE5",
"series": [
"#C0662B"
]
},
"rules": [
{
"ja": "二軸は、軸の数字と見出しを系列の色にして結ぶ。同じ色だと、線を左の目盛りで読まれる",
"en": "Colour each axis's numbers and title like its series — in one colour, the line gets read against the left scale"
},
{
"ja": "左右の目盛りは同じ段数にして、格子線を共有する",
"en": "Give both axes the same number of steps so they share gridlines"
},
{
"ja": "予想の期は淡い棒にし、軸の下に「（予）」と書く",
"en": "Draw forecast years as pale bars and mark them (F) under the axis"
},
{
"ja": "棒の値は棒の中、線の値は点の上。同じ高さに並べない",
"en": "Bar values inside the bars, line values above the points — never on the same level"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.DUPP-xhI.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"step-chart-inventory-level-events",
"action-title-chart-takeaway",
"stacked-area-share-shift"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 56,
"left": 140
}
},
"type": {
"kicker": {
"size": 22,
"weight": 700,
"tracking": "0.16em",
"numeric": "tabular"
},
"title": {
"size": 52,
"weight": 700,
"leading": 1.35,
"numeric": "tabular"
},
"note": {
"size": 20,
"weight": 400,
"numeric": "tabular"
},
"folio": {
"size": 16,
"weight": 400,
"numeric": "tabular"
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F2F4F8",
"ink": "#0E1A2B",
"muted": "#5B6879",
"accent": "#1D3F72",
"rule": "#D6DCE5",
"series": [
"#C0662B"
]
},
"rules": [
"Colour each axis's numbers and title like its series — in one colour, the line gets read against the left scale",
"Give both axes the same number of steps so they share gridlines",
"Draw forecast years as pale bars and mark them (F) under the axis",
"Bar values inside the bars, line values above the points — never on the same level"
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 700 / 字間 0.16em / 等幅数字\ntitle 52px / 700 / 行送り 1.35 / 等幅数字\nnote 20px / 400 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5 / #C0662B\n\n## 外すと崩れる点\n- 二軸は、軸の数字と見出しを系列の色にして結ぶ。同じ色だと、線を左の目盛りで読まれる\n- 左右の目盛りは同じ段数にして、格子線を共有する\n- 予想の期は淡い棒にし、軸の下に「（予）」と書く\n- 棒の値は棒の中、線の値は点の上。同じ高さに並べない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/dividend-payout-dual-axis/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 56 left 140\n\n## Type (px against a 1920px canvas)\nkicker 22px / 700 / tracking 0.16em / tabular numerals\ntitle 52px / 700 / leading 1.35 / tabular numerals\nnote 20px / 400 / tabular numerals\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5 / #C0662B\n\n## Constraints — dropping these breaks it\n- Colour each axis's numbers and title like its series — in one colour, the line gets read against the left scale\n- Give both axes the same number of steps so they share gridlines\n- Draw forecast years as pale bars and mark them (F) under the axis\n- Bar values inside the bars, line values above the points — never on the same level\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/dividend-payout-dual-axis/pattern.html."
},
"code": {
"html": "\n\n配当の推移 — 1 株配当の棒と配当性向の線を、色で軸に結ぶ二軸\n\n\n\n\n
\n
\n
\n
株主還元
\n
5 期連続の増配。配当性向は 35% へ
\n
\n \n
27.3 期は予想。淡い棒が予想値を示す
\n
\n
アオバ精工株式会社 2027 年 3 月期 第 2 四半期 決算説明資料
\n
05
\n
\n
\n
\n",
"url": "https://design-vault.pages.dev/designs/dividend-payout-dual-axis/pattern.html",
"fonts": [
"https://design-vault.pages.dev/designs/dividend-payout-dual-axis/font.css",
"https://design-vault.pages.dev/designs/dividend-payout-dual-axis/font-0.woff2",
"https://design-vault.pages.dev/designs/dividend-payout-dual-axis/font-1.woff2",
"https://design-vault.pages.dev/designs/dividend-payout-dual-axis/font-2.woff2"
]
}
},
"urls": {
"ja": "https://design-vault.pages.dev/designs/dividend-payout-dual-axis",
"en": "https://design-vault.pages.dev/en/designs/dividend-payout-dual-axis"
},
"notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「決算・経営報告」の\n1 枚で、架空の会社「アオバ精工」の第 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 eight results-briefing slides, drawn\nas a fictional company's half-year results deck; every company, person and figure on it is invented.\n\n### Techniques\n\n- 棒は紺、線は橙の 4px と白抜きの点\n- 左は 0〜60 円、右は 0〜40% をともに 4 段\n- 予想の棒は紺を地に 40% 混ぜた色\n\n### Apply to\n\n- 決算説明の株主還元\n- 単価と比率のように単位の違う 2 つの推移"
}