Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Dividend History — Dividend Bars and Payout Line on Two Axes, Each Tied by Colour

Axis
Design
Dividend History — Dividend Bars and Payout Line on Two Axes, Each Tied by Colour
140 96

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

dividend-payout-dual-axis-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.0 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 96 right 140 bottom 56 left 140

## Type (px against a 1920px canvas)
kicker  22px / 700 / tracking 0.16em / tabular numerals
title  52px / 700 / leading 1.35 / tabular numerals
note  20px / 400 / tabular numerals
folio  16px / 400 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5 / #C0662B

## Constraints — dropping these breaks it
- 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

Replace the content with [your content]. Keep the measurements and colours as given.
For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/dividend-payout-dual-axis/pattern.html.

Spec

1.2 KB

/ai/designs/dividend-payout-dual-axis.json 

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

Files

pattern.html

5.9 KB

/designs/dividend-payout-dual-axis/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>配当の推移 — 1 株配当の棒と配当性向の線を、色で軸に結ぶ二軸</title>
<meta name="dv-font" content="IBM Plex Sans JP:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     会社・人物・数値はすべて説明用の架空のもの。 */
  :root {
    --ground: #FFFFFF;
    --surface: #F2F4F8;
    --ink: #0E1A2B;
    --muted: #5B6879;
    --accent: #1D3F72;
    --rule: #D6DCE5;
    --series-1: #C0662B;
    --forecast: color-mix(in srgb, var(--accent) 40%, var(--ground));
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "IBM Plex Sans JP", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 96px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 40px; }

  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
  .title { font-size: 52px; font-weight: 700; line-height: 1.35; margin-top: 12px; }
  /* 頁の足：社名・資料名・頁番号。どの頁でも同じ位置に置く */
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  svg text { font-family: "IBM Plex Sans JP", "IPAGothic", sans-serif; }
  /* 左の軸は棒の色、右の軸は線の色。どちらの目盛りで読むかを色で結ぶ */
  .axl { font-size: 20px; fill: var(--accent); font-weight: 500; }
  .axr { font-size: 20px; fill: var(--series-1); font-weight: 500; }
  .axh { font-size: 20px; font-weight: 700; }
  .xl { font-size: 22px; fill: var(--muted); }
  .bv { font-size: 26px; font-weight: 700; fill: var(--ground); }
  .pv { font-size: 22px; font-weight: 700; fill: var(--series-1); }
  .note { font-size: 20px; color: var(--muted); }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">株主還元</p>
      <h1 class="title" data-type="title">5 期連続の増配。配当性向は 35% へ</h1>
    </div>
    <svg width="1640" height="600" viewBox="0 0 1640 600" aria-label="1 株配当と配当性向の推移">
      <text class="axh" x="100" y="40" text-anchor="end" fill="var(--accent)">1 株配当（円）</text>
      <text class="axh" x="1500" y="40" fill="var(--series-1)">配当性向</text>
      <g stroke="var(--rule)" stroke-width="1"><line x1="120" y1="410" x2="1480" y2="410"/><line x1="120" y1="300" x2="1480" y2="300"/><line x1="120" y1="190" x2="1480" y2="190"/><line x1="120" y1="80" x2="1480" y2="80"/></g>
      <line x1="120" y1="520" x2="1480" y2="520" stroke="var(--ink)" stroke-width="2"/>
      <g><text class="axl" x="100" y="527" text-anchor="end">0</text><text class="axl" x="100" y="417" text-anchor="end">15</text><text class="axl" x="100" y="307" text-anchor="end">30</text><text class="axl" x="100" y="197" text-anchor="end">45</text><text class="axl" x="100" y="87" text-anchor="end">60</text></g><g><text class="axr" x="1500" y="527">0%</text><text class="axr" x="1500" y="417">10%</text><text class="axr" x="1500" y="307">20%</text><text class="axr" x="1500" y="197">30%</text><text class="axr" x="1500" y="87">40%</text></g>
      <g><rect x="178" y="344" width="110" height="176" fill="var(--accent)"/><rect x="405" y="315" width="110" height="205" fill="var(--accent)"/><rect x="632" y="285" width="110" height="235" fill="var(--accent)"/><rect x="858" y="241" width="110" height="279" fill="var(--accent)"/><rect x="1085" y="197" width="110" height="323" fill="var(--accent)"/><rect x="1312" y="153" width="110" height="367" fill="var(--forecast)"/></g>
      <g><text class="bv" x="233" y="384" text-anchor="middle">24</text><text class="bv" x="460" y="355" text-anchor="middle">28</text><text class="bv" x="687" y="325" text-anchor="middle">32</text><text class="bv" x="913" y="281" text-anchor="middle">38</text><text class="bv" x="1140" y="237" text-anchor="middle">44</text><text class="bv" x="1367" y="193" text-anchor="middle">50</text></g>
      <polyline points="233 212.0 460 195.5 687 187.8 913 170.2 1140 157.0 1367 135.0" fill="none" stroke="var(--series-1)" stroke-width="4"/>
      <g fill="var(--ground)" stroke="var(--series-1)" stroke-width="4"><circle cx="233" cy="212.0" r="9"/><circle cx="460" cy="195.5" r="9"/><circle cx="687" cy="187.8" r="9"/><circle cx="913" cy="170.2" r="9"/><circle cx="1140" cy="157.0" r="9"/><circle cx="1367" cy="135.0" r="9"/></g>
      <g><text class="pv" x="233" y="190.0" text-anchor="middle">28.0%</text><text class="pv" x="460" y="173.5" text-anchor="middle">29.5%</text><text class="pv" x="687" y="165.8" text-anchor="middle">30.2%</text><text class="pv" x="913" y="148.2" text-anchor="middle">31.8%</text><text class="pv" x="1140" y="135.0" text-anchor="middle">33.0%</text><text class="pv" x="1367" y="113.0" text-anchor="middle">35.0%</text></g>
      <g><text class="xl" x="233" y="556" text-anchor="middle">22.3 期</text><text class="xl" x="460" y="556" text-anchor="middle">23.3 期</text><text class="xl" x="687" y="556" text-anchor="middle">24.3 期</text><text class="xl" x="913" y="556" text-anchor="middle">25.3 期</text><text class="xl" x="1140" y="556" text-anchor="middle">26.3 期</text><text class="xl" x="1367" y="556" text-anchor="middle">27.3 期（予）</text></g>
    </svg>
    <p class="note" data-type="note">27.3 期は予想。淡い棒が予想値を示す</p>
    <div class="folio">
      <p data-type="folio">アオバ精工株式会社　2027 年 3 月期 第 2 四半期 決算説明資料</p>
      <p>05</p>
    </div>
  </div>
</div>

font.css

2.5 KB

/designs/dividend-payout-dual-axis/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    IBM Plex Sans JP 400;500;700
 * chars   75 (3574775912f31155)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+20, U+25, U+2e, U+30-39, U+2014, U+3000-3002, U+3044, U+304b-304c, U+3059-305a, U+3066-3069, U+306b, U+306e-3070, U+3075-3076, U+3078-3079, U+3092, U+3099, U+30a2, U+30aa, U+30cf-30d0, U+4e3b, U+4e88, U+4e8c, U+4f1a, U+5024, U+5143, U+5186, U+534a, U+5411, U+56db, U+5897, U+5de5, U+5e74, U+5f0f, U+5f53, U+6027, U+60f3, U+63a8, U+6599, U+660e, U+6708, U+671f, U+682a, U+68d2, U+6c7a, U+6de1, U+793a, U+793e, U+79fb, U+7b2c, U+7b97, U+7cbe, U+7d50, U+7d9a, U+7dda, U+8272, U+8aac, U+8cc7, U+8ef8, U+9023, U+9084, U+914d, U+ff08-ff09;
}
@font-face {
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+20, U+25, U+2e, U+30-39, U+2014, U+3000-3002, U+3044, U+304b-304c, U+3059-305a, U+3066-3069, U+306b, U+306e-3070, U+3075-3076, U+3078-3079, U+3092, U+3099, U+30a2, U+30aa, U+30cf-30d0, U+4e3b, U+4e88, U+4e8c, U+4f1a, U+5024, U+5143, U+5186, U+534a, U+5411, U+56db, U+5897, U+5de5, U+5e74, U+5f0f, U+5f53, U+6027, U+60f3, U+63a8, U+6599, U+660e, U+6708, U+671f, U+682a, U+68d2, U+6c7a, U+6de1, U+793a, U+793e, U+79fb, U+7b2c, U+7b97, U+7cbe, U+7d50, U+7d9a, U+7dda, U+8272, U+8aac, U+8cc7, U+8ef8, U+9023, U+9084, U+914d, U+ff08-ff09;
}
@font-face {
  font-family: 'IBM Plex Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+20, U+25, U+2e, U+30-39, U+2014, U+3000-3002, U+3044, U+304b-304c, U+3059-305a, U+3066-3069, U+306b, U+306e-3070, U+3075-3076, U+3078-3079, U+3092, U+3099, U+30a2, U+30aa, U+30cf-30d0, U+4e3b, U+4e88, U+4e8c, U+4f1a, U+5024, U+5143, U+5186, U+534a, U+5411, U+56db, U+5897, U+5de5, U+5e74, U+5f0f, U+5f53, U+6027, U+60f3, U+63a8, U+6599, U+660e, U+6708, U+671f, U+682a, U+68d2, U+6c7a, U+6de1, U+793a, U+793e, U+79fb, U+7b2c, U+7b97, U+7cbe, U+7d50, U+7d9a, U+7dda, U+8272, U+8aac, U+8cc7, U+8ef8, U+9023, U+9084, U+914d, U+ff08-ff09;
}

Notes

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「決算・経営報告」の 1 枚で、架空の会社「アオバ精工」の第 2 四半期決算説明として描いてある。会社・人物・数値はすべて架空。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it. One of the eight results-briefing slides, drawn as a fictional company’s half-year results deck; every company, person and figure on it is invented.

Techniques

Apply to