{ "id": "forecast-progress-rate", "schemaVersion": 2, "title": { "ja": "通期予想への進捗 — 100% の帯に当期を塗り、前年同期を目盛りで重ねる", "en": "Progress to Forecast — Fill This Year Into a 100% Bar, Mark Last Year on Top" }, "summary": { "ja": "売上高から純利益までの 4 段を、通期予想を 100% とする帯で示す。当期の進捗を塗り、前年同期の進捗を縦の目盛りで重ね、50% に目安の線を引く", "en": "Four lines from revenue to net income as bars where 100% is the full-year forecast: this year filled, last year's progress as a tick, a guide line at 50%" }, "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" }, "tick": { "size": 20, "weight": 400, "numeric": "tabular" }, "item": { "size": 32, "weight": 700, "numeric": "tabular" }, "plan": { "size": 20, "weight": 400, "numeric": "tabular" }, "rate": { "size": 56, "weight": 700, "leading": 1, "numeric": "tabular" }, "legend": { "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": "帯の端は通期予想（100%）。棒の長さを金額にすると、段ごとの進み具合が比べられない", "en": "The bar ends at the full-year forecast — scale to amounts and the lines cannot be compared" }, { "ja": "前年同期の進捗を縦の目盛りで重ねる。進捗率は単独では高いか低いか判断できない", "en": "Mark last year's progress as a tick — a progress rate alone cannot be judged high or low" }, { "ja": "上期なら 50% に細い線を引き、季節の偏りがあるならそれも書く", "en": "For a half year, draw a thin line at 50%; note any seasonality" }, { "ja": "進捗率の数字は右端に大きく、通期予想と実額は段の名前の下に小さく", "en": "The rate goes large at the right; forecast and actual sit small under each line's name" } ], "cover": "https://design-vault.pages.dev/_astro/cover.D_FhUrDl.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "kpi-grid-four-deltas", "maturity-staircase-now-target", "waffle-one-in-hundred" ] }, "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" }, "tick": { "size": 20, "weight": 400, "numeric": "tabular" }, "item": { "size": 32, "weight": 700, "numeric": "tabular" }, "plan": { "size": 20, "weight": 400, "numeric": "tabular" }, "rate": { "size": 56, "weight": 700, "leading": 1, "numeric": "tabular" }, "legend": { "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 bar ends at the full-year forecast — scale to amounts and the lines cannot be compared", "Mark last year's progress as a tick — a progress rate alone cannot be judged high or low", "For a half year, draw a thin line at 50%; note any seasonality", "The rate goes large at the right; forecast and actual sit small under each line's name" ] }, "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 / 等幅数字\ntick 20px / 400 / 等幅数字\nitem 32px / 700 / 等幅数字\nplan 20px / 400 / 等幅数字\nrate 56px / 700 / 行送り 1 / 等幅数字\nlegend 20px / 400 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 帯の端は通期予想（100%）。棒の長さを金額にすると、段ごとの進み具合が比べられない\n- 前年同期の進捗を縦の目盛りで重ねる。進捗率は単独では高いか低いか判断できない\n- 上期なら 50% に細い線を引き、季節の偏りがあるならそれも書く\n- 進捗率の数字は右端に大きく、通期予想と実額は段の名前の下に小さく\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/forecast-progress-rate/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\ntick 20px / 400 / tabular numerals\nitem 32px / 700 / tabular numerals\nplan 20px / 400 / tabular numerals\nrate 56px / 700 / leading 1 / tabular numerals\nlegend 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 bar ends at the full-year forecast — scale to amounts and the lines cannot be compared\n- Mark last year's progress as a tick — a progress rate alone cannot be judged high or low\n- For a half year, draw a thin line at 50%; note any seasonality\n- The rate goes large at the right; forecast and actual sit small under each line's name\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/forecast-progress-rate/pattern.html." }, "code": { "html": "\n\n通期予想への進捗 — 100% の帯に当期を塗り、前年同期を目盛りで重ねる\n\n\n\n\n
\n
\n
\n

通期予想に対する進捗

\n

上期で通期予想の 5 割弱。どの段も前年より進んでいる

\n
\n
\n
0%50%100%
\n
\n
\n

売上高

通期予想 1,000.0 ／ 上期 482.6

\n
\n

48.3%

\n
\n
\n

営業利益

通期予想 88.0 ／ 上期 41.2

\n
\n

46.8%

\n
\n
\n

経常利益

通期予想 91.0 ／ 上期 43.0

\n
\n

47.3%

\n
\n
\n

純利益

通期予想 62.0 ／ 上期 29.4

\n
\n

47.4%

\n
\n
\n

当期の進捗

前年同期の進捗

上期で半分の目安

\n
\n
\n

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

\n

04

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/forecast-progress-rate/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/forecast-progress-rate/font.css", "https://design-vault.pages.dev/designs/forecast-progress-rate/font-0.woff2", "https://design-vault.pages.dev/designs/forecast-progress-rate/font-1.woff2", "https://design-vault.pages.dev/designs/forecast-progress-rate/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/forecast-progress-rate", "en": "https://design-vault.pages.dev/en/designs/forecast-progress-rate" }, "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- 420px・1fr・200px の 3 列\n- 帯の 50% の線は背景の線形グラデーションで 1 本だけ描く\n- 凡例は下端の罫の下に 3 つ\n\n### Apply to\n\n- 決算説明の進捗の 1 枚\n- 予算の消化率、案件の進捗率の報告" }