{ "id": "segment-butterfly-bars", "schemaVersion": 2, "title": { "ja": "事業別の売上と利益 — 中央の事業名を挟んで、左に売上、右に利益", "en": "Segments — Revenue to the Left, Profit to the Right, Names in the Middle" }, "summary": { "ja": "事業名を中央の列に置き、左へ売上高、右へ営業利益の棒を伸ばす。見出しが指す事業だけを濃い紺にする", "en": "Segment names sit in a centre column; revenue bars grow left and operating-profit bars grow right, with only the segment the headline names in dark navy" }, "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" }, "axisHead": { "size": 24, "weight": 700, "numeric": "tabular" }, "value": { "size": 34, "weight": 700, "leading": 1.1, "numeric": "tabular" }, "yoy": { "size": 20, "weight": 400, "numeric": "tabular" }, "segment": { "size": 30, "weight": 700, "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": [] }, "rules": [ { "ja": "左右の目盛りは違ってよいが、違うことを図の下に書く。書かないと棒の長さを左右で比べられてしまう", "en": "The two sides may use different scales, but say so under the chart — otherwise people compare lengths across" }, { "ja": "棒の端に値と前年比を置き、目盛りの軸は描かない", "en": "Put the value and year-on-year change at each bar's end; draw no axis" }, { "ja": "見出しが指す事業の両側の棒だけを濃くする", "en": "Darken both bars of the segment the headline names, and only those" }, { "ja": "事業は 4 つまで。それ以上は表にする", "en": "Four segments at most — beyond that, use a table" } ], "cover": "https://design-vault.pages.dev/_astro/cover.HwKcGD-Q.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "population-pyramid-age-structure", "slopegraph-service-retention-shift", "comparison-before-after" ] }, "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" }, "axisHead": { "size": 24, "weight": 700, "numeric": "tabular" }, "value": { "size": 34, "weight": 700, "leading": 1.1, "numeric": "tabular" }, "yoy": { "size": 20, "weight": 400, "numeric": "tabular" }, "segment": { "size": 30, "weight": 700, "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" }, "rules": [ "The two sides may use different scales, but say so under the chart — otherwise people compare lengths across", "Put the value and year-on-year change at each bar's end; draw no axis", "Darken both bars of the segment the headline names, and only those", "Four segments at most — beyond that, use a table" ] }, "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 / 等幅数字\naxisHead 24px / 700 / 等幅数字\nvalue 34px / 700 / 行送り 1.1 / 等幅数字\nyoy 20px / 400 / 等幅数字\nsegment 30px / 700 / 等幅数字\nnote 20px / 400 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 左右の目盛りは違ってよいが、違うことを図の下に書く。書かないと棒の長さを左右で比べられてしまう\n- 棒の端に値と前年比を置き、目盛りの軸は描かない\n- 見出しが指す事業の両側の棒だけを濃くする\n- 事業は 4 つまで。それ以上は表にする\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/segment-butterfly-bars/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\naxisHead 24px / 700 / tabular numerals\nvalue 34px / 700 / leading 1.1 / tabular numerals\nyoy 20px / 400 / tabular numerals\nsegment 30px / 700 / 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\n\n## Constraints — dropping these breaks it\n- The two sides may use different scales, but say so under the chart — otherwise people compare lengths across\n- Put the value and year-on-year change at each bar's end; draw no axis\n- Darken both bars of the segment the headline names, and only those\n- Four segments at most — beyond that, use a table\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/segment-butterfly-bars/pattern.html." }, "code": { "html": "\n\n事業別の売上と利益 — 中央の事業名を挟んで、左に売上、右に利益\n\n\n\n\n
\n
\n
\n

事業別

\n

増益の 6 割を医療機器が稼いだ

\n
\n
\n

売上高億円

営業利益億円

\n
\n
\n

214.0

前年比 +4.1%

\n

産業機器

\n

22.6

前年比 +11.3%

\n
\n
\n

138.5

前年比 +14.6%

\n

医療機器

\n

14.1

前年比 +31.8%

\n
\n
\n

130.1

前年比 +4.2%

\n

計測サービス

\n

4.5

前年比 −6.3%

\n
\n
\n

左右で目盛りが違う。棒の端は売上高 300 億円、営業利益 32 億円

\n
\n
\n

アオバ精工株式会社　2027 年 3 月期 第 2 四半期 決算説明資料

\n

03

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/segment-butterfly-bars/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/segment-butterfly-bars/font.css", "https://design-vault.pages.dev/designs/segment-butterfly-bars/font-0.woff2", "https://design-vault.pages.dev/designs/segment-butterfly-bars/font-1.woff2", "https://design-vault.pages.dev/designs/segment-butterfly-bars/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/segment-butterfly-bars", "en": "https://design-vault.pages.dev/en/designs/segment-butterfly-bars" }, "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- 1fr・280px・1fr の 3 列。左の棒は右寄せ、右の棒は左寄せ\n- 値の塊は折り返さない（nowrap）。棒の最長を版の 7 割に抑えて場所を残す\n- 淡い棒は紺を地に 30% 混ぜた色\n\n### Apply to\n\n- 決算説明の事業別の業績\n- 部門別の売上と利益の比較" }