{ "id": "deck:results-briefing", "slug": "results-briefing", "title": { "ja": "決算・経営報告の 8 枚 — 表紙からトピックスまで、四半期の決算説明 1 回ぶん", "en": "The Results Eight — From the Cover to the Topics, One Quarterly Results Briefing" }, "summary": { "ja": "表紙・損益の要約・事業別・通期予想への進捗・配当・中期計画・指標の成績表・トピックスの 8 枚を、架空の会社の第 2 四半期決算説明として通す", "en": "Cover, P&L summary, segments, progress to forecast, dividends, mid-term plan, KPI scorecard and topics — eight slides run through one fictional half-year results briefing" }, "count": 8, "slides": [ { "position": 1, "slug": "results-cover-period", "kind": "artboard", "title": { "ja": "決算説明の表紙 — 社名より、期と開示日を主役にする", "en": "Results Cover — The Period and Disclosure Date Lead, Not the Company" }, "useCase": "cover", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/results-cover-period", "en": "https://design-vault.pages.dev/en/designs/results-cover-period", "json": "https://design-vault.pages.dev/ai/assets/results-cover-period.json", "designJson": "https://design-vault.pages.dev/ai/designs/results-cover-period.json" }, "reproduction": { "spec": { "format": "slide-16x9", "density": "low", "layout": { "kind": "stack", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 56, "left": 140 } }, "type": { "company": { "size": 28, "weight": 500, "tracking": "0.08em", "numeric": "tabular" }, "fy": { "size": 44, "weight": 500, "numeric": "tabular" }, "quarter": { "size": 152, "weight": 700, "tracking": "-0.01em", "leading": 1.1, "numeric": "tabular" }, "doc": { "size": 56, "weight": 500, "numeric": "tabular" }, "date": { "size": 30, "weight": 500, "numeric": "tabular" }, "who": { "size": 24, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#10243F", "surface": "#1A3253", "ink": "#FFFFFF", "muted": "#A7B4C7", "accent": "#8DB4E2", "rule": "#2C4566" }, "rules": [ "The period leads — the same company issues one every quarter, so a big company name says nothing about which one", "Split fiscal year, quarter and document name into three lines; only the quarter is largest", "Always give the disclosure date — whoever revisits it checks from the cover when the numbers are from", "One thick vertical bar left of the period block is the only ornament" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\ncompany 28px / 500 / 字間 0.08em / 等幅数字\nfy 44px / 500 / 等幅数字\nquarter 152px / 700 / 字間 -0.01em / 行送り 1.1 / 等幅数字\ndoc 56px / 500 / 等幅数字\ndate 30px / 500 / 等幅数字\nwho 24px / 400 / 等幅数字\n\n## 配色\n地 #10243F / 面 #1A3253 / 文字 #FFFFFF / 補助 #A7B4C7 / 強調 #8DB4E2 / 罫 #2C4566\n\n## 外すと崩れる点\n- 主役は期。決算資料は毎期同じ会社が出すので、社名を大きくしても何の資料か分からない\n- 会計年度・四半期・資料名を 3 段に分け、四半期だけを最大にする\n- 開示日は必ず入れる。後から見返す人が、どの時点の数字かを表紙で確かめる\n- 期の塊の左に太い縦線を 1 本。表紙の飾りはこれだけにする\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/results-cover-period/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)\ncompany 28px / 500 / tracking 0.08em / tabular numerals\nfy 44px / 500 / tabular numerals\nquarter 152px / 700 / tracking -0.01em / leading 1.1 / tabular numerals\ndoc 56px / 500 / tabular numerals\ndate 30px / 500 / tabular numerals\nwho 24px / 400 / tabular numerals\n\n## Colour\nGround #10243F / Surface #1A3253 / Ink #FFFFFF / Muted #A7B4C7 / Accent #8DB4E2 / Rule #2C4566\n\n## Constraints — dropping these breaks it\n- The period leads — the same company issues one every quarter, so a big company name says nothing about which one\n- Split fiscal year, quarter and document name into three lines; only the quarter is largest\n- Always give the disclosure date — whoever revisits it checks from the cover when the numbers are from\n- One thick vertical bar left of the period block is the only ornament\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/results-cover-period/pattern.html." }, "code": { "url": "https://design-vault.pages.dev/designs/results-cover-period/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/results-cover-period/font.css", "https://design-vault.pages.dev/designs/results-cover-period/font-0.woff2", "https://design-vault.pages.dev/designs/results-cover-period/font-1.woff2", "https://design-vault.pages.dev/designs/results-cover-period/font-2.woff2" ] } } }, { "position": 2, "slug": "pl-summary-yoy-table", "kind": "artboard", "title": { "ja": "損益の要約 — 当期の列だけ面を敷き、桁と単位を揃える", "en": "P&L Summary — Shade Only the Current Column, Align the Digits and Units" }, "useCase": "financials", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/pl-summary-yoy-table", "en": "https://design-vault.pages.dev/en/designs/pl-summary-yoy-table", "json": "https://design-vault.pages.dev/ai/assets/pl-summary-yoy-table.json", "designJson": "https://design-vault.pages.dev/ai/designs/pl-summary-yoy-table.json" }, "reproduction": { "spec": { "format": "slide-16x9", "density": "high", "layout": { "kind": "table", "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" }, "unit": { "size": 20, "weight": 400, "numeric": "tabular" }, "colHead": { "size": 22, "weight": 500, "leading": 1.4, "numeric": "tabular" }, "item": { "size": 30, "weight": 500, "numeric": "tabular" }, "prior": { "size": 32, "weight": 400, "numeric": "tabular" }, "current": { "size": 36, "weight": 700, "numeric": "tabular" }, "delta": { "size": 32, "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": [ "Shade only the current column and set its figures larger and bold; the comparisons stay on the ground", "State the unit once at the top right — repeated after every figure, the digits stop lining up", "Every figure right-aligned, tabular, one decimal place", "Indent and grey the ratio row (operating margin) so it reads apart from the amounts" ] }, "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 / 等幅数字\nunit 20px / 400 / 等幅数字\ncolHead 22px / 500 / 行送り 1.4 / 等幅数字\nitem 30px / 500 / 等幅数字\nprior 32px / 400 / 等幅数字\ncurrent 36px / 700 / 等幅数字\ndelta 32px / 400 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 当期の列だけに面を敷き、数字を太く大きくする。比べる相手（前年・計画）は地のまま\n- 単位は表の右上に 1 回だけ書く。数字の後ろに毎回付けると桁が揃わない\n- 数字はすべて右揃え・等幅数字・小数 1 桁で揃える\n- 率の行（営業利益率）は字下げして灰色に落とし、金額の行と区別する\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/pl-summary-yoy-table/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\nunit 20px / 400 / tabular numerals\ncolHead 22px / 500 / leading 1.4 / tabular numerals\nitem 30px / 500 / tabular numerals\nprior 32px / 400 / tabular numerals\ncurrent 36px / 700 / tabular numerals\ndelta 32px / 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- Shade only the current column and set its figures larger and bold; the comparisons stay on the ground\n- State the unit once at the top right — repeated after every figure, the digits stop lining up\n- Every figure right-aligned, tabular, one decimal place\n- Indent and grey the ratio row (operating margin) so it reads apart from the amounts\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/pl-summary-yoy-table/pattern.html." }, "code": { "url": "https://design-vault.pages.dev/designs/pl-summary-yoy-table/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font.css", "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font-0.woff2", "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font-1.woff2", "https://design-vault.pages.dev/designs/pl-summary-yoy-table/font-2.woff2" ] } } }, { "position": 3, "slug": "segment-butterfly-bars", "kind": "artboard", "title": { "ja": "事業別の売上と利益 — 中央の事業名を挟んで、左に売上、右に利益", "en": "Segments — Revenue to the Left, Profit to the Right, Names in the Middle" }, "useCase": "financials", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/segment-butterfly-bars", "en": "https://design-vault.pages.dev/en/designs/segment-butterfly-bars", "json": "https://design-vault.pages.dev/ai/assets/segment-butterfly-bars.json", "designJson": "https://design-vault.pages.dev/ai/designs/segment-butterfly-bars.json" }, "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": { "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" ] } } }, { "position": 4, "slug": "forecast-progress-rate", "kind": "artboard", "title": { "ja": "通期予想への進捗 — 100% の帯に当期を塗り、前年同期を目盛りで重ねる", "en": "Progress to Forecast — Fill This Year Into a 100% Bar, Mark Last Year on Top" }, "useCase": "financials", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/forecast-progress-rate", "en": "https://design-vault.pages.dev/en/designs/forecast-progress-rate", "json": "https://design-vault.pages.dev/ai/assets/forecast-progress-rate.json", "designJson": "https://design-vault.pages.dev/ai/designs/forecast-progress-rate.json" }, "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": { "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" ] } } }, { "position": 5, "slug": "dividend-payout-dual-axis", "kind": "artboard", "title": { "ja": "配当の推移 — 1 株配当の棒と配当性向の線を、色で軸に結ぶ二軸", "en": "Dividend History — Dividend Bars and Payout Line on Two Axes, Each Tied by Colour" }, "useCase": "financials", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/dividend-payout-dual-axis", "en": "https://design-vault.pages.dev/en/designs/dividend-payout-dual-axis", "json": "https://design-vault.pages.dev/ai/assets/dividend-payout-dual-axis.json", "designJson": "https://design-vault.pages.dev/ai/designs/dividend-payout-dual-axis.json" }, "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": { "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" ] } } }, { "position": 6, "slug": "midterm-plan-pillars", "kind": "artboard", "title": { "ja": "中期経営計画 — 目標の梁、3 本の柱、その下の土台", "en": "Mid-Term Plan — The Goal as a Beam, Three Pillars, and a Foundation" }, "useCase": "roadmap", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/midterm-plan-pillars", "en": "https://design-vault.pages.dev/en/designs/midterm-plan-pillars", "json": "https://design-vault.pages.dev/ai/assets/midterm-plan-pillars.json", "designJson": "https://design-vault.pages.dev/ai/designs/midterm-plan-pillars.json" }, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 56, "left": 140 }, "columns": { "count": 3, "gap": 16 } }, "type": { "kicker": { "size": 22, "weight": 700, "tracking": "0.16em", "numeric": "tabular" }, "title": { "size": 52, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "beamLabel": { "size": 24, "weight": 500, "numeric": "tabular" }, "beamGoal": { "size": 40, "weight": 700, "numeric": "tabular" }, "pillarNo": { "size": 22, "weight": 700, "numeric": "tabular" }, "pillar": { "size": 36, "weight": 700, "numeric": "tabular" }, "kpiLabel": { "size": 22, "weight": 400, "numeric": "tabular" }, "target": { "size": 88, "weight": 700, "leading": 1.05, "numeric": "tabular" }, "how": { "size": 22, "weight": 400, "leading": 1.6, "numeric": "tabular" }, "baseLabel": { "size": 24, "weight": 700, "numeric": "tabular" }, "baseText": { "size": 26, "weight": 500, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F8", "ink": "#0E1A2B", "muted": "#5B6879", "accent": "#1D3F72", "rule": "#D6DCE5" }, "rules": [ "Each pillar carries one numeric target — without one, a pillar is a slogan", "Pair each target with this year's estimate so the distance shows", "Draw beam, pillars and foundation as distinct layers — side by side, nothing reads as holding anything up", "Three pillars; four or more are not remembered" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n- 3 カラム（等分）、間隔 16\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 700 / 字間 0.16em / 等幅数字\ntitle 52px / 700 / 行送り 1.35 / 等幅数字\nbeamLabel 24px / 500 / 等幅数字\nbeamGoal 40px / 700 / 等幅数字\npillarNo 22px / 700 / 等幅数字\npillar 36px / 700 / 等幅数字\nkpiLabel 22px / 400 / 等幅数字\ntarget 88px / 700 / 行送り 1.05 / 等幅数字\nhow 22px / 400 / 行送り 1.6 / 等幅数字\nbaseLabel 24px / 700 / 等幅数字\nbaseText 26px / 500 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 柱ごとに数値目標を 1 つ持たせる。数字の無い柱は、方針の言い換えになる\n- 柱の目標には今期の見込みを添え、距離が見えるようにする\n- 梁・柱・土台の 3 層を面と線で描き分ける。並べただけでは、支える関係が伝わらない\n- 柱は 3 本。4 本以上は記憶に残らない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/midterm-plan-pillars/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- 3 equal columns, gap 16\n\n## Type (px against a 1920px canvas)\nkicker 22px / 700 / tracking 0.16em / tabular numerals\ntitle 52px / 700 / leading 1.35 / tabular numerals\nbeamLabel 24px / 500 / tabular numerals\nbeamGoal 40px / 700 / tabular numerals\npillarNo 22px / 700 / tabular numerals\npillar 36px / 700 / tabular numerals\nkpiLabel 22px / 400 / tabular numerals\ntarget 88px / 700 / leading 1.05 / tabular numerals\nhow 22px / 400 / leading 1.6 / tabular numerals\nbaseLabel 24px / 700 / tabular numerals\nbaseText 26px / 500 / 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- Each pillar carries one numeric target — without one, a pillar is a slogan\n- Pair each target with this year's estimate so the distance shows\n- Draw beam, pillars and foundation as distinct layers — side by side, nothing reads as holding anything up\n- Three pillars; four or more are not remembered\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/midterm-plan-pillars/pattern.html." }, "code": { "url": "https://design-vault.pages.dev/designs/midterm-plan-pillars/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/midterm-plan-pillars/font.css", "https://design-vault.pages.dev/designs/midterm-plan-pillars/font-0.woff2", "https://design-vault.pages.dev/designs/midterm-plan-pillars/font-1.woff2", "https://design-vault.pages.dev/designs/midterm-plan-pillars/font-2.woff2" ] } } }, { "position": 7, "slug": "kpi-scorecard-sparklines", "kind": "artboard", "title": { "ja": "指標の成績表 — 目標・実績・差・8 四半期の推移・判定を 1 行に", "en": "KPI Scorecard — Target, Actual, Gap, Eight-Quarter Trend and Verdict on One Row" }, "useCase": "kpi", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines", "en": "https://design-vault.pages.dev/en/designs/kpi-scorecard-sparklines", "json": "https://design-vault.pages.dev/ai/assets/kpi-scorecard-sparklines.json", "designJson": "https://design-vault.pages.dev/ai/designs/kpi-scorecard-sparklines.json" }, "reproduction": { "spec": { "format": "slide-16x9", "density": "high", "layout": { "kind": "table", "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" }, "colHead": { "size": 22, "weight": 500, "numeric": "tabular" }, "item": { "size": 30, "weight": 500, "numeric": "tabular" }, "target": { "size": 30, "weight": 400, "numeric": "tabular" }, "actual": { "size": 36, "weight": 700, "numeric": "tabular" }, "gap": { "size": 30, "weight": 400, "numeric": "tabular" }, "judge": { "size": 24, "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": [ "Use colour only for the verdict — colour the trend lines too and nothing stands out", "Each trend line has its own scale; note that only the shape is meant to be read", "Express gaps in points, always with a sign", "Two verdicts, met or not — a three-colour signal means explaining amber every time" ] }, "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 / 等幅数字\ncolHead 22px / 500 / 等幅数字\nitem 30px / 500 / 等幅数字\ntarget 30px / 400 / 等幅数字\nactual 36px / 700 / 等幅数字\ngap 30px / 400 / 等幅数字\njudge 24px / 700 / 等幅数字\nnote 20px / 400 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 色は判定にだけ使う。推移の線まで色分けすると、どこを見ればよいか分からない\n- 推移の線は指標ごとに目盛りが違う。形だけを読む図だと注記する\n- 差は pt で揃え、符号を必ず付ける\n- 判定は 2 値（達成・未達）にする。3 色の信号にすると、黄色の意味を毎回説明することになる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/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\ncolHead 22px / 500 / tabular numerals\nitem 30px / 500 / tabular numerals\ntarget 30px / 400 / tabular numerals\nactual 36px / 700 / tabular numerals\ngap 30px / 400 / tabular numerals\njudge 24px / 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- Use colour only for the verdict — colour the trend lines too and nothing stands out\n- Each trend line has its own scale; note that only the shape is meant to be read\n- Express gaps in points, always with a sign\n- Two verdicts, met or not — a three-colour signal means explaining amber every time\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/kpi-scorecard-sparklines/pattern.html." }, "code": { "url": "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font.css", "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font-0.woff2", "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font-1.woff2", "https://design-vault.pages.dev/designs/kpi-scorecard-sparklines/font-2.woff2" ] } } }, { "position": 8, "slug": "topics-dated-cards", "kind": "artboard", "title": { "ja": "今期の出来事 — 日付・分類・見出しを揃えた 3 枚のカード", "en": "Topics — Three Cards Lined Up by Date, Category and Headline" }, "useCase": "summary", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/topics-dated-cards", "en": "https://design-vault.pages.dev/en/designs/topics-dated-cards", "json": "https://design-vault.pages.dev/ai/assets/topics-dated-cards.json", "designJson": "https://design-vault.pages.dev/ai/designs/topics-dated-cards.json" }, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 56, "left": 140 }, "columns": { "count": 3, "gap": 40 } }, "type": { "kicker": { "size": 22, "weight": 700, "tracking": "0.16em", "numeric": "tabular" }, "title": { "size": 52, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "date": { "size": 24, "weight": 700, "numeric": "tabular" }, "category": { "size": 20, "weight": 500, "numeric": "tabular" }, "headline": { "size": 32, "weight": 700, "leading": 1.45, "numeric": "tabular" }, "body": { "size": 22, "weight": 400, "leading": 1.7, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F8", "ink": "#0E1A2B", "muted": "#5B6879", "accent": "#1D3F72", "rule": "#D6DCE5" }, "rules": [ "Three events in date order — rank them by importance and the sequence gets misread", "Put one number in each card (units, countries, investment)", "Images are 16:9 stand-ins; until photos exist, pale navy shapes only mark the slot", "Keep each headline to one line; whatever spills goes into the detail line" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n- 3 カラム（等分）、間隔 40\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 700 / 字間 0.16em / 等幅数字\ntitle 52px / 700 / 行送り 1.35 / 等幅数字\ndate 24px / 700 / 等幅数字\ncategory 20px / 500 / 等幅数字\nheadline 32px / 700 / 行送り 1.45 / 等幅数字\nbody 22px / 400 / 行送り 1.7 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 出来事は 3 件、日付順。重要な順にすると、時系列を読み違える\n- 各カードに数字を 1 つ入れる（台数・国の数・投資額）\n- 図版は 16:9 の差し替え枠。写真が無いうちは、淡い紺の図形で置き場所だけを示す\n- 見出しは 1 行に収める。2 行になる見出しは、説明の行に回す\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/topics-dated-cards/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- 3 equal columns, gap 40\n\n## Type (px against a 1920px canvas)\nkicker 22px / 700 / tracking 0.16em / tabular numerals\ntitle 52px / 700 / leading 1.35 / tabular numerals\ndate 24px / 700 / tabular numerals\ncategory 20px / 500 / tabular numerals\nheadline 32px / 700 / leading 1.45 / tabular numerals\nbody 22px / 400 / leading 1.7 / 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- Three events in date order — rank them by importance and the sequence gets misread\n- Put one number in each card (units, countries, investment)\n- Images are 16:9 stand-ins; until photos exist, pale navy shapes only mark the slot\n- Keep each headline to one line; whatever spills goes into the detail line\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/topics-dated-cards/pattern.html." }, "code": { "url": "https://design-vault.pages.dev/designs/topics-dated-cards/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/topics-dated-cards/font.css", "https://design-vault.pages.dev/designs/topics-dated-cards/font-0.woff2", "https://design-vault.pages.dev/designs/topics-dated-cards/font-1.woff2", "https://design-vault.pages.dev/designs/topics-dated-cards/font-2.woff2" ] } } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/results-briefing", "en": "https://design-vault.pages.dev/en/decks/results-briefing", "json": "https://design-vault.pages.dev/ai/decks/results-briefing.json" }, "catalogVersion": 1, "designSchemaVersion": 2, "notesMarkdown": "## この一式について / About this deck\n\n四半期の決算説明で毎回出てくる 8 枚を、架空の会社「アオバ精工」の第 2 四半期決算として通したもの。\n会社・人物・数値はすべて架空だが、表どうしの数字は合うように作ってある（事業別の合計が損益の要約に、\n進捗率が通期計画に一致する）。\n\n配色は紺と白の 1 組で、紺地は表紙だけ。どの頁も、数字は右揃え・等幅数字・小数 1 桁、単位は表や図に\n1 回だけ書くという取り決めで組んである。頁の足には社名・資料名・頁番号を同じ位置に置く。\n\nEight slides every quarterly results briefing repeats, run through a fictional company's half-year\nresults. Every figure is invented, but the pages agree with each other: segments add up to the P&L\nsummary and progress rates match the plan. Navy and white throughout, navy ground on the cover only;\nfigures are right-aligned, tabular and to one decimal, and each unit is stated once per table or chart." }