Deck

The Results Eight — From the Cover to the Topics, One Quarterly Results Briefing

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

8 slides · Slide 16:9

Take it with you JSON However many slides, one action. They are joined in order, so the sequence survives the paste.

Reading order

01 Cover / Title Results Cover — The Period and Disclosure Date Lead, Not the Company
02 Financials P&L Summary — Shade Only the Current Column, Align the Digits and Units
03 Financials Segments — Revenue to the Left, Profit to the Right, Names in the Middle
04 Financials Progress to Forecast — Fill This Year Into a 100% Bar, Mark Last Year on Top
05 Financials Dividend History — Dividend Bars and Payout Line on Two Axes, Each Tied by Colour
06 Roadmap Mid-Term Plan — The Goal as a Beam, Three Pillars, and a Foundation
07 KPI Report KPI Scorecard — Target, Actual, Gap, Eight-Quarter Trend and Verdict on One Row
08 Summary Topics — Three Cards Lined Up by Date, Category and Headline

About this deck

この一式について / About this deck

四半期の決算説明で毎回出てくる 8 枚を、架空の会社「アオバ精工」の第 2 四半期決算として通したもの。会社・人物・数値はすべて架空だが、表どうしの数字は合うように作ってある（事業別の合計が損益の要約に、進捗率が通期計画に一致する）。

配色は紺と白の 1 組で、紺地は表紙だけ。どの頁も、数字は右揃え・等幅数字・小数 1 桁、単位は表や図に 1 回だけ書くという取り決めで組んである。頁の足には社名・資料名・頁番号を同じ位置に置く。

Eight slides every quarterly results briefing repeats, run through a fictional company’s half-year results. Every figure is invented, but the pages agree with each other: segments add up to the P&L summary and progress rates match the plan. Navy and white throughout, navy ground on the cover only; figures are right-aligned, tabular and to one decimal, and each unit is stated once per table or chart.

# Results Cover — The Period and Disclosure Date Lead, Not the Company 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) company 28px / 500 / tracking 0.08em / tabular numerals fy 44px / 500 / tabular numerals quarter 152px / 700 / tracking -0.01em / leading 1.1 / tabular numerals doc 56px / 500 / tabular numerals date 30px / 500 / tabular numerals who 24px / 400 / tabular numerals ## Colour Ground #10243F / Surface #1A3253 / Ink #FFFFFF / Muted #A7B4C7 / Accent #8DB4E2 / Rule #2C4566 ## Constraints — dropping these breaks it - 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 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/results-cover-period/pattern.html. --- # P&L Summary — Shade Only the Current Column, Align the Digits and Units 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 unit 20px / 400 / tabular numerals colHead 22px / 500 / leading 1.4 / tabular numerals item 30px / 500 / tabular numerals prior 32px / 400 / tabular numerals current 36px / 700 / tabular numerals delta 32px / 400 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5 ## Constraints — dropping these breaks it - 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 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/pl-summary-yoy-table/pattern.html. --- # Segments — Revenue to the Left, Profit to the Right, Names in the Middle 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 axisHead 24px / 700 / tabular numerals value 34px / 700 / leading 1.1 / tabular numerals yoy 20px / 400 / tabular numerals segment 30px / 700 / 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 ## Constraints — dropping these breaks it - 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 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/segment-butterfly-bars/pattern.html. --- # Progress to Forecast — Fill This Year Into a 100% Bar, Mark Last Year on Top 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 tick 20px / 400 / tabular numerals item 32px / 700 / tabular numerals plan 20px / 400 / tabular numerals rate 56px / 700 / leading 1 / tabular numerals legend 20px / 400 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5 ## Constraints — dropping these breaks it - 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 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/forecast-progress-rate/pattern.html. --- # Dividend History — Dividend Bars and Payout Line on Two Axes, Each Tied by Colour 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. --- # Mid-Term Plan — The Goal as a Beam, Three Pillars, and a Foundation Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 96 right 140 bottom 56 left 140 - 3 equal columns, gap 16 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 52px / 700 / leading 1.35 / tabular numerals beamLabel 24px / 500 / tabular numerals beamGoal 40px / 700 / tabular numerals pillarNo 22px / 700 / tabular numerals pillar 36px / 700 / tabular numerals kpiLabel 22px / 400 / tabular numerals target 88px / 700 / leading 1.05 / tabular numerals how 22px / 400 / leading 1.6 / tabular numerals baseLabel 24px / 700 / tabular numerals baseText 26px / 500 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5 ## Constraints — dropping these breaks it - 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 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/midterm-plan-pillars/pattern.html. --- # KPI Scorecard — Target, Actual, Gap, Eight-Quarter Trend and Verdict on One Row 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 colHead 22px / 500 / tabular numerals item 30px / 500 / tabular numerals target 30px / 400 / tabular numerals actual 36px / 700 / tabular numerals gap 30px / 400 / tabular numerals judge 24px / 700 / 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 ## Constraints — dropping these breaks it - 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 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/kpi-scorecard-sparklines/pattern.html. --- # Topics — Three Cards Lined Up by Date, Category and Headline Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 96 right 140 bottom 56 left 140 - 3 equal columns, gap 40 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.16em / tabular numerals title 52px / 700 / leading 1.35 / tabular numerals date 24px / 700 / tabular numerals category 20px / 500 / tabular numerals headline 32px / 700 / leading 1.45 / tabular numerals body 22px / 400 / leading 1.7 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5 ## Constraints — dropping these breaks it - 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 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/topics-dated-cards/pattern.html.

# Results Cover — The Period and Disclosure Date Lead, Not the Company 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 --- # P&L Summary — Shade Only the Current Column, Align the Digits and Units 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 --- # Segments — Revenue to the Left, Profit to the Right, Names in the Middle 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 --- # Progress to Forecast — Fill This Year Into a 100% Bar, Mark Last Year on Top 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 --- # Dividend History — Dividend Bars and Payout Line on Two Axes, Each Tied by Colour 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 --- # Mid-Term Plan — The Goal as a Beam, Three Pillars, and a Foundation 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 --- # KPI Scorecard — Target, Actual, Gap, Eight-Quarter Trend and Verdict on One Row 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 --- # Topics — Three Cards Lined Up by Date, Category and Headline 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

<!doctype html> <meta charset="utf-8"> <title>決算説明の表紙 — 社名より、期と開示日を主役にする</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: #10243F; --surface: #1A3253; --ink: #FFFFFF; --muted: #A7B4C7; --accent: #8DB4E2; --rule: #2C4566; } * { 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; 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; } .company { font-size: 28px; font-weight: 500; letter-spacing: .08em; } .period { align-self: center; border-left: 12px solid var(--accent); padding-left: 56px; } .fy { font-size: 44px; font-weight: 500; color: var(--muted); } .quarter { font-size: 152px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-top: 8px; } .doc { font-size: 56px; font-weight: 500; margin-top: 12px; } .foot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 28px; } .date { font-size: 30px; font-weight: 500; } .who { font-size: 24px; color: var(--muted); } </style> <div class="artboard" data-artboard> <div class="content" data-content> <p class="company" data-type="company">アオバ精工株式会社</p> <div class="period"> <p class="fy" data-type="fy">2027 年 3 月期</p> <p class="quarter" data-type="quarter">第 2 四半期</p> <p class="doc" data-type="doc">決算説明資料</p> </div> <div class="foot"> <p class="date" data-type="date">2026 年 11 月 10 日</p> <p class="who" data-type="who">代表取締役社長　青葉恒一</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>損益の要約 — 当期の列だけ面を敷き、桁と単位を揃える</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; } * { 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; 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; } .wrap { align-self: center; } .unit { font-size: 20px; color: var(--muted); text-align: right; margin-bottom: 12px; } table { width: 100%; border-collapse: collapse; } thead th { font-size: 22px; font-weight: 500; color: var(--muted); text-align: right; padding: 0 28px 18px; border-bottom: 3px solid var(--ink); line-height: 1.4; vertical-align: bottom; } thead th:first-child { text-align: left; padding-left: 0; } /* 当期の列だけ面を敷く。比べる相手（前年・計画）は地のまま */ thead th.cur { color: var(--ink); font-weight: 700; background: var(--surface); } tbody th { font-size: 30px; font-weight: 500; text-align: left; padding: 26px 0; } tbody td { font-size: 32px; font-weight: 400; text-align: right; padding: 26px 28px; } tbody td.cur { font-size: 36px; font-weight: 700; background: var(--surface); } tbody tr { border-bottom: 1px solid var(--rule); } tbody tr.sub th { font-size: 24px; color: var(--muted); padding-left: 32px; } tbody tr.sub td { font-size: 26px; color: var(--muted); } tbody tr.sub td.cur { font-size: 28px; color: var(--ink); } </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">増収増益。営業利益は前年から 15.1% 伸びた</h1> </div> <div class="wrap"> <p class="unit" data-type="unit">単位：億円</p> <table> <thead><tr> <th data-type="colHead">項目</th><th>前年<br>2Q 累計</th><th class="cur">当期<br>2Q 累計</th><th>増減額</th><th>増減率</th><th>通期<br>計画</th><th>進捗率</th> </tr></thead> <tbody> <tr class=""> <th data-type="item">売上高</th><td data-type="prior">451.3</td><td class="cur" data-type="current">482.6</td><td data-type="delta">+31.3</td><td>+6.9%</td><td>1,000.0</td><td>48.3%</td> </tr> <tr class=""> <th>営業利益</th><td>35.8</td><td class="cur">41.2</td><td>+5.4</td><td>+15.1%</td><td>88.0</td><td>46.8%</td> </tr> <tr class="sub"> <th>営業利益率</th><td>7.9%</td><td class="cur">8.5%</td><td>+0.6pt</td><td>—</td><td>8.8%</td><td>—</td> </tr> <tr class=""> <th>経常利益</th><td>38.1</td><td class="cur">43.0</td><td>+4.9</td><td>+12.9%</td><td>91.0</td><td>47.3%</td> </tr> <tr class=""> <th>純利益</th><td>26.0</td><td class="cur">29.4</td><td>+3.4</td><td>+13.1%</td><td>62.0</td><td>47.4%</td> </tr> </tbody> </table> </div> <div class="folio"> <p data-type="folio">アオバ精工株式会社　2027 年 3 月期第 2 四半期決算説明資料</p> <p>02</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>事業別の売上と利益 — 中央の事業名を挟んで、左に売上、右に利益</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; --bar: color-mix(in srgb, var(--accent) 30%, 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; 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; } .chart { display: grid; grid-template-rows: auto 1fr auto; row-gap: 24px; } .heads { display: grid; grid-template-columns: 1fr 280px 1fr; } .heads p { font-size: 24px; font-weight: 700; } .heads p:first-child { text-align: right; } .heads p:last-child { text-align: left; } .heads small { font-size: 20px; font-weight: 400; color: var(--muted); margin-left: 8px; } .rows { display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .row { display: grid; grid-template-columns: 1fr 280px 1fr; align-items: center; } .side { display: flex; align-items: center; gap: 20px; } .side.left { justify-content: flex-end; } .bar { display: block; flex: none; height: 72px; background: var(--bar); } .val { flex: none; white-space: nowrap; } /* 見出しが指す事業だけを濃い紺にする。残りは同じ淡い紺 */ .row.hi .bar { background: var(--accent); } .seg { font-size: 30px; font-weight: 700; text-align: center; } .left .val { text-align: right; } .num { font-size: 34px; font-weight: 700; line-height: 1.1; } .yoy { font-size: 20px; color: var(--muted); margin-top: 4px; } .note { font-size: 20px; color: var(--muted); text-align: center; } </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">増益の 6 割を医療機器が稼いだ</h1> </div> <div class="chart"> <div class="heads"><p data-type="axisHead">売上高<small>億円</small></p><span></span><p>営業利益<small>億円</small></p></div> <div class="rows"> <div class="row"> <div class="side left"><div class="val"><p class="num" data-type="value">214.0</p><p class="yoy" data-type="yoy">前年比 +4.1%</p></div><span class="bar" style="width: 71.3%"></span></div> <p class="seg" data-type="segment">産業機器</p> <div class="side right"><span class="bar" style="width: 70.6%"></span><div class="val"><p class="num">22.6</p><p class="yoy">前年比 +11.3%</p></div></div> </div> <div class="row hi"> <div class="side left"><div class="val"><p class="num">138.5</p><p class="yoy">前年比 +14.6%</p></div><span class="bar" style="width: 46.2%"></span></div> <p class="seg">医療機器</p> <div class="side right"><span class="bar" style="width: 44.1%"></span><div class="val"><p class="num">14.1</p><p class="yoy">前年比 +31.8%</p></div></div> </div> <div class="row"> <div class="side left"><div class="val"><p class="num">130.1</p><p class="yoy">前年比 +4.2%</p></div><span class="bar" style="width: 43.4%"></span></div> <p class="seg">計測サービス</p> <div class="side right"><span class="bar" style="width: 14.1%"></span><div class="val"><p class="num">4.5</p><p class="yoy">前年比 −6.3%</p></div></div> </div> </div> <p class="note" data-type="note">左右で目盛りが違う。棒の端は売上高 300 億円、営業利益 32 億円</p> </div> <div class="folio"> <p data-type="folio">アオバ精工株式会社　2027 年 3 月期第 2 四半期決算説明資料</p> <p>03</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>通期予想への進捗 — 100% の帯に当期を塗り、前年同期を目盛りで重ねる</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; } * { 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; 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; } .chart { display: grid; grid-template-rows: auto 1fr auto; row-gap: 20px; } .scale { display: grid; grid-template-columns: 420px 1fr 200px; column-gap: 48px; } .ticks { position: relative; height: 28px; } .ticks span { position: absolute; transform: translateX(-50%); font-size: 20px; color: var(--muted); } .rows { display: grid; grid-template-rows: repeat(4, 1fr); align-items: center; } .row { display: grid; grid-template-columns: 420px 1fr 200px; column-gap: 48px; align-items: center; } .name { font-size: 32px; font-weight: 700; } .plan { font-size: 20px; color: var(--muted); margin-top: 6px; } /* 帯は 100%（通期予想）まで。50% の細い線が「上期で半分」の目安 */ .track { position: relative; height: 56px; background: var(--surface); background-image: linear-gradient(var(--muted), var(--muted)); background-size: 2px 100%; background-position: 50% 0; background-repeat: no-repeat; } .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); } .prev { position: absolute; top: -10px; bottom: -10px; width: 4px; margin-left: -2px; background: var(--ink); } .rate { font-size: 56px; font-weight: 700; text-align: right; line-height: 1; } .rate small { font-size: 28px; margin-left: 4px; } .legend { display: flex; gap: 40px; font-size: 20px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 18px; } .legend i { display: inline-block; vertical-align: -4px; margin-right: 12px; } .k1 { width: 32px; height: 20px; background: var(--accent); } .k2 { width: 4px; height: 28px; background: var(--ink); } .k3 { width: 2px; height: 28px; background: 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 割弱。どの段も前年より進んでいる</h1> </div> <div class="chart"> <div class="scale"><span></span><div class="ticks"><span style="left: 0" data-type="tick">0%</span><span style="left: 50%">50%</span><span style="left: 100%">100%</span></div><span></span></div> <div class="rows"> <div class="row"> <div><p class="name" data-type="item">売上高</p><p class="plan" data-type="plan">通期予想 1,000.0 ／上期 482.6</p></div> <div class="track"><span class="fill" style="width: 48.3%"></span><span class="prev" style="left: 46.1%"></span></div> <p class="rate" data-type="rate">48.3<small>%</small></p> </div> <div class="row"> <div><p class="name">営業利益</p><p class="plan">通期予想 88.0 ／上期 41.2</p></div> <div class="track"><span class="fill" style="width: 46.8%"></span><span class="prev" style="left: 44.0%"></span></div> <p class="rate">46.8<small>%</small></p> </div> <div class="row"> <div><p class="name">経常利益</p><p class="plan">通期予想 91.0 ／上期 43.0</p></div> <div class="track"><span class="fill" style="width: 47.3%"></span><span class="prev" style="left: 44.8%"></span></div> <p class="rate">47.3<small>%</small></p> </div> <div class="row"> <div><p class="name">純利益</p><p class="plan">通期予想 62.0 ／上期 29.4</p></div> <div class="track"><span class="fill" style="width: 47.4%"></span><span class="prev" style="left: 45.2%"></span></div> <p class="rate">47.4<small>%</small></p> </div> </div> <div class="legend"><p data-type="legend"><i class="k1"></i>当期の進捗</p><p><i class="k2"></i>前年同期の進捗</p><p><i class="k3"></i>上期で半分の目安</p></div> </div> <div class="folio"> <p data-type="folio">アオバ精工株式会社　2027 年 3 月期第 2 四半期決算説明資料</p> <p>04</p> </div> </div> </div>

<!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>

<!doctype html> <meta charset="utf-8"> <title>中期経営計画 — 目標の梁、3 本の柱、その下の土台</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; } * { 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; 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; } .temple { display: grid; grid-template-rows: auto 1fr auto; row-gap: 16px; } /* 梁・柱・土台の 3 層。柱の数値目標が梁の目標を支えることを形で示す */ .beam { background: var(--accent); color: var(--ground); padding: 28px 48px; display: flex; justify-content: space-between; align-items: baseline; } .beamLabel { font-size: 24px; font-weight: 500; } .beamGoal { font-size: 40px; font-weight: 700; } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px; } .pillar { background: var(--surface); padding: 36px 44px; border-top: 6px solid var(--accent); } .no { font-size: 22px; font-weight: 700; color: var(--accent); } .pName { font-size: 36px; font-weight: 700; margin-top: 8px; } .kpi { font-size: 22px; color: var(--muted); margin-top: 28px; } .target { font-size: 88px; font-weight: 700; line-height: 1.05; color: var(--accent); } .target small { font-size: 36px; margin-left: 6px; } .how { font-size: 22px; line-height: 1.6; color: var(--muted); margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 16px; } .base { border: 3px solid var(--accent); padding: 22px 48px; display: flex; gap: 48px; align-items: baseline; } .baseLabel { font-size: 24px; font-weight: 700; color: var(--accent); } .baseText { font-size: 26px; font-weight: 500; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">中期経営計画　AOBA 2029</p> <h1 class="title" data-type="title">3 本の柱で、売上高 1,300 億円と利益率 12% に届く</h1> </div> <div class="temple"> <div class="beam"><p class="beamLabel" data-type="beamLabel">2029 年 3 月期の目標</p><p class="beamGoal" data-type="beamGoal">売上高 1,300 億円／営業利益率 12%</p></div> <div class="pillars"> <div class="pillar" data-col="1"> <p class="no" data-type="pillarNo">01</p> <p class="pName" data-type="pillar">医療機器を伸ばす</p> <p class="kpi" data-type="kpiLabel">医療機器の売上高</p> <p class="target" data-type="target">400<small>億円</small></p> <p class="how" data-type="how">今期見込み 290 億円。診療所向けの小型機で裾野を広げる</p> </div> <div class="pillar" data-col="2"> <p class="no">02</p> <p class="pName">計測を継続収入に</p> <p class="kpi">継続収入の比率</p> <p class="target">40<small>%</small></p> <p class="how">今期見込み 32%。点検と校正を年間契約に切り替える</p> </div> <div class="pillar" data-col="3"> <p class="no">03</p> <p class="pName">つくり方を変える</p> <p class="kpi">営業利益率</p> <p class="target">12<small>%</small></p> <p class="how">今期見込み 8.8%。主力 3 工場の組立を自動化する</p> </div> </div> <div class="base"><p class="baseLabel" data-type="baseLabel">土台</p><p class="baseText" data-type="baseText">人材・品質・資本効率（ROE 10% 以上を保つ）</p></div> </div> <div class="folio"> <p data-type="folio">アオバ精工株式会社　2027 年 3 月期第 2 四半期決算説明資料</p> <p>06</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>指標の成績表 — 目標・実績・差・8 四半期の推移・判定を 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; } * { 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; 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; } .wrap { align-self: center; } table { width: 100%; border-collapse: collapse; } thead th { font-size: 22px; font-weight: 500; color: var(--muted); text-align: right; padding: 0 24px 18px; border-bottom: 3px solid var(--ink); } thead th:first-child { text-align: left; padding-left: 0; } thead th.l { text-align: left; } tbody tr { border-bottom: 1px solid var(--rule); } tbody th { font-size: 30px; font-weight: 500; text-align: left; padding: 24px 0; } tbody td { font-size: 30px; text-align: right; padding: 24px 24px; } td.act { font-size: 36px; font-weight: 700; } td.spark { text-align: left; padding-top: 12px; padding-bottom: 12px; } td.spark svg { display: block; } /* 判定だけに色を使う。推移の線は灰色のまま、達成した行の判定を紺で塗る */ td.judge { text-align: center; font-size: 24px; font-weight: 700; color: var(--muted); } td.judge.ok { color: var(--ground); background: var(--accent); } .note { font-size: 20px; color: var(--muted); margin-top: 16px; } </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 指標のうち 2 つが目標を上回った</h1> </div> <div class="wrap"> <table> <thead><tr><th data-type="colHead">指標</th><th>通期目標</th><th>上期実績</th><th>目標との差</th><th class="l">直近 8 四半期</th><th style="text-align: center">判定</th></tr></thead> <tbody> <tr> <th data-type="item">受注高の前年比</th><td data-type="target">+5.0%</td><td class="act" data-type="actual">+7.3%</td><td data-type="gap">+2.3pt</td> <td class="spark"><svg width="240" height="56" viewBox="0 0 240 56" aria-hidden="true"><polyline points="8 42.3 40 48.0 72 34.9 104 38.2 136 25.1 168 28.4 200 17.8 232 8.0" fill="none" stroke="var(--muted)" stroke-width="2.5"/><circle cx="232" cy="8.0" r="5" fill="var(--ink)"/></svg></td> <td class="judge ok" data-type="judge">達成</td> </tr> <tr> <th>継続収入の比率</th><td>32.0%</td><td class="act">31.4%</td><td>−0.6pt</td> <td class="spark"><svg width="240" height="56" viewBox="0 0 240 56" aria-hidden="true"><polyline points="8 48.0 40 40.7 72 34.4 104 28.9 136 21.6 168 17.1 200 12.5 232 8.0" fill="none" stroke="var(--muted)" stroke-width="2.5"/><circle cx="232" cy="8.0" r="5" fill="var(--ink)"/></svg></td> <td class="judge">未達</td> </tr> <tr> <th>営業利益率</th><td>8.8%</td><td class="act">8.5%</td><td>−0.3pt</td> <td class="spark"><svg width="240" height="56" viewBox="0 0 240 56" aria-hidden="true"><polyline points="8 48.0 40 35.7 72 41.8 104 26.5 136 20.3 168 29.5 200 14.2 232 8.0" fill="none" stroke="var(--muted)" stroke-width="2.5"/><circle cx="232" cy="8.0" r="5" fill="var(--ink)"/></svg></td> <td class="judge">未達</td> </tr> <tr> <th>海外売上の比率</th><td>38.0%</td><td class="act">39.2%</td><td>+1.2pt</td> <td class="spark"><svg width="240" height="56" viewBox="0 0 240 56" aria-hidden="true"><polyline points="8 48.0 40 43.1 72 37.5 104 31.9 136 27.6 168 19.9 200 14.3 232 8.0" fill="none" stroke="var(--muted)" stroke-width="2.5"/><circle cx="232" cy="8.0" r="5" fill="var(--ink)"/></svg></td> <td class="judge ok">達成</td> </tr> <tr> <th>ROE（年換算）</th><td>9.0%</td><td class="act">8.6%</td><td>−0.4pt</td> <td class="spark"><svg width="240" height="56" viewBox="0 0 240 56" aria-hidden="true"><polyline points="8 48.0 40 31.3 72 28.0 104 21.3 136 24.7 168 14.7 200 11.3 232 8.0" fill="none" stroke="var(--muted)" stroke-width="2.5"/><circle cx="232" cy="8.0" r="5" fill="var(--ink)"/></svg></td> <td class="judge">未達</td> </tr> </tbody> </table> <p class="note" data-type="note">推移の線は指標ごとに縦の目盛りが違う。形だけを見る</p> </div> <div class="folio"> <p data-type="folio">アオバ精工株式会社　2027 年 3 月期第 2 四半期決算説明資料</p> <p>07</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>今期の出来事 — 日付・分類・見出しを揃えた 3 枚のカード</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; --fig-1: color-mix(in srgb, var(--accent) 8%, var(--ground)); --fig-2: color-mix(in srgb, var(--accent) 22%, var(--ground)); --fig-3: color-mix(in srgb, var(--accent) 45%, 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; 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; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; align-content: center; } .card { border-top: 4px solid var(--accent); } /* 写真の差し替え枠。16:9 で、図形は中身を示さず置き場所だけを示す */ .fig { aspect-ratio: 16 / 9; background: var(--fig-1); } .fig svg { display: block; width: 100%; height: 100%; } .txt { padding-top: 28px; } .meta { display: flex; gap: 20px; align-items: baseline; } .date { font-size: 24px; font-weight: 700; } .cat { font-size: 20px; font-weight: 500; color: var(--accent); border: 1.5px solid var(--accent); padding: 2px 12px; } .head { font-size: 32px; font-weight: 700; line-height: 1.45; margin-top: 16px; } .body { font-size: 22px; line-height: 1.7; color: var(--muted); margin-top: 12px; } </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">製品・提携・設備で、計画の 3 本の柱が動き出した</h1> </div> <div class="cards"> <div class="card" data-col="1"> <div class="fig"><svg viewBox="0 0 400 225" aria-hidden="true"><rect x="120" y="70" width="160" height="110" rx="10" fill="var(--fig-2)"/><circle cx="200" cy="125" r="30" fill="var(--fig-3)"/></svg></div> <div class="txt"> <p class="meta"><span class="date" data-type="date">2026.06.02</span><span class="cat" data-type="category">製品</span></p> <p class="head" data-type="headline">診療所向けの小型分析装置を発売</p> <p class="body" data-type="body">卓上に置ける大きさ。初年度 1,200 台を見込む</p> </div> </div> <div class="card" data-col="2"> <div class="fig"><svg viewBox="0 0 400 225" aria-hidden="true"><circle cx="160" cy="125" r="60" fill="var(--fig-2)"/><circle cx="240" cy="125" r="60" fill="var(--fig-3)" fill-opacity=".85"/></svg></div> <div class="txt"> <p class="meta"><span class="date">2026.07.15</span><span class="cat">提携</span></p> <p class="head">北欧の検査機器会社と販売で提携</p> <p class="body">欧州 6 か国で、当社の計測サービスを提供する</p> </div> </div> <div class="card" data-col="3"> <div class="fig"><svg viewBox="0 0 400 225" aria-hidden="true"><rect x="80" y="150" width="240" height="30" fill="var(--fig-3)"/><rect x="110" y="90" width="50" height="60" fill="var(--fig-2)"/><rect x="175" y="90" width="50" height="60" fill="var(--fig-2)"/><rect x="240" y="90" width="50" height="60" fill="var(--fig-2)"/></svg></div> <div class="txt"> <p class="meta"><span class="date">2026.09.01</span><span class="cat">設備</span></p> <p class="head">仙台工場に自動組立ラインを新設</p> <p class="body">組立の工数を 3 割減らす。投資額は 18 億円</p> </div> </div> </div> <div class="folio"> <p data-type="folio">アオバ精工株式会社　2027 年 3 月期第 2 四半期決算説明資料</p> <p>08</p> </div> </div> </div>

The Results Eight — From the Cover to the Topics, One Quarterly Results Briefing

Reading order

About this deck

この一式について / About this deck

Take it with you

Everything

Prompt

Spec

Files

01 results-cover-period/pattern.html

02 pl-summary-yoy-table/pattern.html

03 segment-butterfly-bars/pattern.html

04 forecast-progress-rate/pattern.html

05 dividend-payout-dual-axis/pattern.html

06 midterm-plan-pillars/pattern.html

07 kpi-scorecard-sparklines/pattern.html

08 topics-dated-cards/pattern.html