Deck

The Pitch Ten — From the Cover to the Ask, One Series A Pitch

Cover, problem, why now, market, product, business model, traction, unit economics, team and the ask — ten slides run through one fictional Series A pitch

10 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 Pitch Cover — The One-Line Value Proposition, Not the Company Name, Leads
02 Problem / Solution Problem — One Big Figure and One Voice From Someone Who Lives It
03 Market Why Now — Three Shifts on a Line of Years, Converging on Today
04 Market Market Size — Three Nested Circles Compared by Area, With Where Each Number Comes From
05 Offering Product — Screens in Laptop and Phone Frames, With Only Three Spots Called Out
06 Pricing Revenue Flow — Who Pays Whom, Money and Value in Two Kinds of Line
07 KPI Report Traction — A Revenue Curve With Only Three Milestones Written On It
08 KPI Report Unit Economics — LTV, CAC and Payback Side by Side, Each With Its Formula
09 People Team — Four Equal Portrait Frames, Each With One Line on Why They Can Do This
10 Next action Funding Ask — The Amount, a Bar of Uses, Then Where It Gets You

About this deck

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

資金調達の場で投資家が順に確かめる 10 項目を、1 項目 1 枚で通したもの。題材は架空の会社「ミナト経理」（中小企業の月次締めを 3 日から半日にする道具）のシリーズ A で、会社・人物・数値はすべて架空。

配色は濃地と淡地の 2 組。濃地は表紙・課題・市場・実績・チーム・調達額の 6 枚で、大きな数字や人で言い切る枚を受け持ち、淡地の 4 枚は仕組みと計算を受け持つ。表紙の価値提案の 1 文と、最後の調達額の 1 枚は同じ強調色で結んである。

Ten slides for the ten things an investor checks in order, one per slide, run through a fictional Series A pitch for a month-end close tool. Every company, person and figure is invented. The six dark slides make claims with a big figure or with people; the four light ones carry mechanisms and arithmetic.

# Pitch Cover — The One-Line Value Proposition, Not the Company Name, Leads Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 ## Type (px against a 1920px canvas) company 26px / 700 / tracking 0.08em line 108px / 900 / tracking -0.01em / leading 1.22 what 30px / 400 / leading 1.6 round 24px / 700 / tracking 0.06em date 22px / 400 / tabular numerals ## Colour Ground #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A ## Constraints — dropping these breaks it - The value line leads — an unknown company's name tells the room nothing - Only the size of the change (three days to half a day) takes the accent - One supporting line on who it is for — the feature list starts on the next page - Round and date sit small below a rule at the foot; the amount is not on the cover 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/pitch-cover-value-line/pattern.html. --- # Problem — One Big Figure and One Voice From Someone Who Lives It Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 - 2 equal columns, gap 120 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 figure 220px / 900 / tracking -0.03em / leading 1 / tabular numerals figLabel 30px / 700 / leading 1.5 figBasis 22px / 400 / leading 1.7 quote 40px / 700 / leading 1.6 who 24px / 400 source 16px / 400 ## Colour Ground #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A ## Constraints — dropping these breaks it - One figure — show several and people start comparing instead of feeling the weight - Say per what under the figure — a big number without a unit is not believed - Keep the voice in the speaker's own words with who and when — and say so in the source line when it is invented - A vertical accent rule separates the two, showing they are different kinds of evidence 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/problem-figure-and-voice/pattern.html. --- # Why Now — Three Shifts on a Line of Years, Converging on Today Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 - 4 equal columns, gap 40 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 year 26px / 700 / tabular numerals sTitle 36px / 900 / leading 1.4 sBody 24px / 400 / leading 1.75 nowLabel 26px / 700 nowText 40px / 900 / leading 1.45 ## Colour Ground #F6F5F1 / Surface #FFFFFF / Ink #15171C / Muted #686C75 / Accent #9A6512 / Rule #DDDAD2 ## Constraints — dropping these breaks it - Three shifts, all external (rules, technology, people) — no company milestones mixed in - Only the last point is filled with the accent and given a larger title — that is the conclusion - Give each shift one figure — without it, a shift looks like a trend - Space the years evenly; the gaps carry no meaning 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/why-now-three-shifts/pattern.html. --- # Market Size — Three Nested Circles Compared by Area, With Where Each Number Comes From Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 - 2 equal columns, gap 96 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 name 28px / 700 basis 21px / 400 / leading 1.6 value 56px / 900 / tabular numerals note 16px / 400 ## Colour Ground #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A ## Constraints — dropping these breaks it - Make the areas proportional to the amounts — scale the radius and the big circle is wildly exaggerated - Give each tier its basis in one line — a market size without one is the first thing questioned - The headline names the amount you will go after (the innermost); do not lead with the big outer number - Only the innermost circle takes the accent 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/market-size-tam-sam-som/pattern.html. --- # Product — Screens in Laptop and Phone Frames, With Only Three Spots Called Out Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 num 24px / 900 / tabular numerals cTitle 28px / 900 / leading 1.4 cBody 22px / 400 / leading 1.7 ## Colour Ground #F6F5F1 / Surface #FFFFFF / Ink #15171C / Muted #686C75 / Accent #9A6512 / Rule #DDDAD2 ## Constraints — dropping these breaks it - Three callouts at most — point at every feature and none of them matters - Sketch the screens in grey and colour only what is pointed at — a real screenshot pulls the eye into detail - Leader lines bend at right angles and never cross over a screen - Each note is one line of effect — what happens to the user, not the feature'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/product-device-frames/pattern.html. --- # Revenue Flow — Who Pays Whom, Money and Value in Two Kinds of Line Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 nRole 20px / 700 / tracking 0.12em nName 34px / 900 / leading 1.35 nNote 21px / 400 / leading 1.6 flow 24px / 700 / leading 1.4 flowNote 20px / 400 / leading 1.4 key 20px / 400 ## Colour Ground #F6F5F1 / Surface #FFFFFF / Ink #15171C / Muted #686C75 / Accent #9A6512 / Rule #DDDAD2 ## Constraints — dropping these breaks it - Money and value take different lines — with one kind, nobody can tell who pays whom - Only the company's box gets a heavy border, and it sits in the middle - Label every line with an amount or an effect — arrows alone give the mechanism but not the scale - Three actors at most; a fourth means another slide 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/revenue-flow-actors/pattern.html. --- # Traction — A Revenue Curve With Only Three Milestones Written On It Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 nowValue 88px / 900 / leading 1 / tabular numerals nowLabel 22px / 400 source 16px / 400 ## Colour Ground #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A ## Constraints — dropping these breaks it - Three milestones, placed only where the slope changed - The headline states the multiple and today's value sits top right — the conclusion lands before the chart is read - Notes hang to the left of their stems so they never cover the curve - Start the axis at zero — a cropped axis exaggerates the growth 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/traction-curve-milestones/pattern.html. --- # Unit Economics — LTV, CAC and Payback Side by Side, Each With Its Formula Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 - 3 equal columns, gap 32 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 cLabel 22px / 700 cName 20px / 400 / tracking 0.06em cValue 96px / 900 / tracking -0.02em / leading 1 / tabular numerals cHow 22px / 400 / leading 1.7 rLabel 24px / 700 rValue 56px / 900 / tabular numerals rNote 22px / 400 source 16px / 400 ## Colour Ground #F6F5F1 / Surface #FFFFFF / Ink #15171C / Muted #686C75 / Accent #9A6512 / Rule #DDDAD2 ## Constraints — dropping these breaks it - Write the formula under each figure — an LTV without one is the first thing doubted - Put the ratio in a band below, not a fourth card — as a card it reads as another metric - Lead with the plain term and set the abbreviation small beneath - Only the conclusion card (payback) takes the accent 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/unit-economics-ltv-cac/pattern.html. --- # Team — Four Equal Portrait Frames, Each With One Line on Why They Can Do This Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 - 4 equal columns, gap 40 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em title 56px / 900 / leading 1.3 role 20px / 700 / tracking 0.12em name 34px / 900 / tracking 0.04em why 22px / 400 / leading 1.7 footLabel 20px / 700 footText 22px / 400 ## Colour Ground #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A ## Constraints — dropping these breaks it - All four the same size — enlarge the founder and it reads as a one-person company - One line of background, only what matters for this business — no list of schools or employers - Bold one phrase in each line — a number or a specific domain - Until photos exist, flat shapes mark only head and shoulders — never draw a person 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/team-founders-portrait-row/pattern.html. --- # Funding Ask — The Amount, a Bar of Uses, Then Where It Gets You Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 112 right 160 bottom 96 left 160 ## Type (px against a 1920px canvas) kicker 22px / 700 / tracking 0.2em amount 144px / 900 / tracking -0.03em / leading 1 / tabular numerals terms 26px / 400 / leading 1.6 useHead 22px / 700 / tracking 0.12em uName 28px / 900 uValue 24px / 700 / tabular numerals uWhat 21px / 400 / leading 1.6 gLabel 22px / 700 gValue 40px / 900 / tabular numerals gWhat 21px / 400 ## Colour Ground #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A / #F5B83D / #C98A2B / #7C6A4C ## Constraints — dropping these breaks it - Show uses as one bar — a pie gives shares but not the size of the money - Under each segment, align its name, amount and what it buys - After the uses, say what they get you — do not end on money - The bar uses three shades from the accent, not separate hues 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/funding-ask-use-of-funds/pattern.html.

# Pitch Cover — The One-Line Value Proposition, Not the Company Name, Leads format: slide-16x9 density: low layout: kind: centered canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 type: company: size: 26 weight: 700 tracking: 0.08em line: size: 108 weight: 900 tracking: -0.01em leading: 1.22 what: size: 30 weight: 400 leading: 1.6 round: size: 24 weight: 700 tracking: 0.06em date: size: 22 weight: 400 numeric: tabular colors: ground: "#101318" surface: "#1A1F27" ink: "#F2F4F7" muted: "#8B93A1" accent: "#F5B83D" rule: "#2A303A" rules: - The value line leads — an unknown company's name tells the room nothing - Only the size of the change (three days to half a day) takes the accent - One supporting line on who it is for — the feature list starts on the next page - Round and date sit small below a rule at the foot; the amount is not on the cover --- # Problem — One Big Figure and One Voice From Someone Who Lives It format: slide-16x9 density: low layout: kind: 2-column canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 columns: count: 2 gap: 120 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 figure: size: 220 weight: 900 tracking: -0.03em leading: 1 numeric: tabular figLabel: size: 30 weight: 700 leading: 1.5 figBasis: size: 22 weight: 400 leading: 1.7 quote: size: 40 weight: 700 leading: 1.6 who: size: 24 weight: 400 source: size: 16 weight: 400 colors: ground: "#101318" surface: "#1A1F27" ink: "#F2F4F7" muted: "#8B93A1" accent: "#F5B83D" rule: "#2A303A" rules: - One figure — show several and people start comparing instead of feeling the weight - Say per what under the figure — a big number without a unit is not believed - Keep the voice in the speaker's own words with who and when — and say so in the source line when it is invented - A vertical accent rule separates the two, showing they are different kinds of evidence --- # Why Now — Three Shifts on a Line of Years, Converging on Today format: slide-16x9 density: medium layout: kind: timeline canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 columns: count: 4 gap: 40 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 year: size: 26 weight: 700 numeric: tabular sTitle: size: 36 weight: 900 leading: 1.4 sBody: size: 24 weight: 400 leading: 1.75 nowLabel: size: 26 weight: 700 nowText: size: 40 weight: 900 leading: 1.45 colors: ground: "#F6F5F1" surface: "#FFFFFF" ink: "#15171C" muted: "#686C75" accent: "#9A6512" rule: "#DDDAD2" rules: - Three shifts, all external (rules, technology, people) — no company milestones mixed in - Only the last point is filled with the accent and given a larger title — that is the conclusion - Give each shift one figure — without it, a shift looks like a trend - Space the years evenly; the gaps carry no meaning --- # Market Size — Three Nested Circles Compared by Area, With Where Each Number Comes From format: slide-16x9 density: medium layout: kind: nested canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 columns: count: 2 gap: 96 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 name: size: 28 weight: 700 basis: size: 21 weight: 400 leading: 1.6 value: size: 56 weight: 900 numeric: tabular note: size: 16 weight: 400 colors: ground: "#101318" surface: "#1A1F27" ink: "#F2F4F7" muted: "#8B93A1" accent: "#F5B83D" rule: "#2A303A" rules: - Make the areas proportional to the amounts — scale the radius and the big circle is wildly exaggerated - Give each tier its basis in one line — a market size without one is the first thing questioned - The headline names the amount you will go after (the innermost); do not lead with the big outer number - Only the innermost circle takes the accent --- # Product — Screens in Laptop and Phone Frames, With Only Three Spots Called Out format: slide-16x9 density: medium layout: kind: annotated canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 num: size: 24 weight: 900 numeric: tabular cTitle: size: 28 weight: 900 leading: 1.4 cBody: size: 22 weight: 400 leading: 1.7 colors: ground: "#F6F5F1" surface: "#FFFFFF" ink: "#15171C" muted: "#686C75" accent: "#9A6512" rule: "#DDDAD2" rules: - Three callouts at most — point at every feature and none of them matters - Sketch the screens in grey and colour only what is pointed at — a real screenshot pulls the eye into detail - Leader lines bend at right angles and never cross over a screen - Each note is one line of effect — what happens to the user, not the feature's name --- # Revenue Flow — Who Pays Whom, Money and Value in Two Kinds of Line format: slide-16x9 density: medium layout: kind: network canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 nRole: size: 20 weight: 700 tracking: 0.12em nName: size: 34 weight: 900 leading: 1.35 nNote: size: 21 weight: 400 leading: 1.6 flow: size: 24 weight: 700 leading: 1.4 flowNote: size: 20 weight: 400 leading: 1.4 key: size: 20 weight: 400 colors: ground: "#F6F5F1" surface: "#FFFFFF" ink: "#15171C" muted: "#686C75" accent: "#9A6512" rule: "#DDDAD2" rules: - Money and value take different lines — with one kind, nobody can tell who pays whom - Only the company's box gets a heavy border, and it sits in the middle - Label every line with an amount or an effect — arrows alone give the mechanism but not the scale - Three actors at most; a fourth means another slide --- # Traction — A Revenue Curve With Only Three Milestones Written On It format: slide-16x9 density: medium layout: kind: axis canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 nowValue: size: 88 weight: 900 leading: 1 numeric: tabular nowLabel: size: 22 weight: 400 source: size: 16 weight: 400 colors: ground: "#101318" surface: "#1A1F27" ink: "#F2F4F7" muted: "#8B93A1" accent: "#F5B83D" rule: "#2A303A" rules: - Three milestones, placed only where the slope changed - The headline states the multiple and today's value sits top right — the conclusion lands before the chart is read - Notes hang to the left of their stems so they never cover the curve - Start the axis at zero — a cropped axis exaggerates the growth --- # Unit Economics — LTV, CAC and Payback Side by Side, Each With Its Formula format: slide-16x9 density: medium layout: kind: 3-column canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 columns: count: 3 gap: 32 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 cLabel: size: 22 weight: 700 cName: size: 20 weight: 400 tracking: 0.06em cValue: size: 96 weight: 900 tracking: -0.02em leading: 1 numeric: tabular cHow: size: 22 weight: 400 leading: 1.7 rLabel: size: 24 weight: 700 rValue: size: 56 weight: 900 numeric: tabular rNote: size: 22 weight: 400 source: size: 16 weight: 400 colors: ground: "#F6F5F1" surface: "#FFFFFF" ink: "#15171C" muted: "#686C75" accent: "#9A6512" rule: "#DDDAD2" rules: - Write the formula under each figure — an LTV without one is the first thing doubted - Put the ratio in a band below, not a fourth card — as a card it reads as another metric - Lead with the plain term and set the abbreviation small beneath - Only the conclusion card (payback) takes the accent --- # Team — Four Equal Portrait Frames, Each With One Line on Why They Can Do This format: slide-16x9 density: medium layout: kind: grid canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 columns: count: 4 gap: 40 type: kicker: size: 22 weight: 700 tracking: 0.2em title: size: 56 weight: 900 leading: 1.3 role: size: 20 weight: 700 tracking: 0.12em name: size: 34 weight: 900 tracking: 0.04em why: size: 22 weight: 400 leading: 1.7 footLabel: size: 20 weight: 700 footText: size: 22 weight: 400 colors: ground: "#101318" surface: "#1A1F27" ink: "#F2F4F7" muted: "#8B93A1" accent: "#F5B83D" rule: "#2A303A" rules: - All four the same size — enlarge the founder and it reads as a one-person company - One line of background, only what matters for this business — no list of schools or employers - Bold one phrase in each line — a number or a specific domain - Until photos exist, flat shapes mark only head and shoulders — never draw a person --- # Funding Ask — The Amount, a Bar of Uses, Then Where It Gets You format: slide-16x9 density: medium layout: kind: stack canvas: w: 1920 h: 1080 margin: top: 112 right: 160 bottom: 96 left: 160 type: kicker: size: 22 weight: 700 tracking: 0.2em amount: size: 144 weight: 900 tracking: -0.03em leading: 1 numeric: tabular terms: size: 26 weight: 400 leading: 1.6 useHead: size: 22 weight: 700 tracking: 0.12em uName: size: 28 weight: 900 uValue: size: 24 weight: 700 numeric: tabular uWhat: size: 21 weight: 400 leading: 1.6 gLabel: size: 22 weight: 700 gValue: size: 40 weight: 900 numeric: tabular gWhat: size: 21 weight: 400 colors: ground: "#101318" surface: "#1A1F27" ink: "#F2F4F7" muted: "#8B93A1" accent: "#F5B83D" rule: "#2A303A" series: - "#F5B83D" - "#C98A2B" - "#7C6A4C" rules: - Show uses as one bar — a pie gives shares but not the size of the money - Under each segment, align its name, amount and what it buys - After the uses, say what they get you — do not end on money - The bar uses three shades from the accent, not separate hues

<!doctype html> <meta charset="utf-8"> <title>ピッチの表紙 — 社名より、一文の価値提案を主役にする</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #101318; --surface: #1A1F27; --ink: #F2F4F7; --muted: #8B93A1; --accent: #F5B83D; --rule: #2A303A; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; } .brand { display: flex; align-items: center; gap: 18px; } .mark { width: 40px; height: 40px; background: var(--accent); } .company { font-size: 26px; font-weight: 700; letter-spacing: .08em; } /* 価値提案は 1 文、2 行まで。読点で切り、2 行目に数字を置く */ .value { align-self: center; } .line { font-size: 108px; font-weight: 900; line-height: 1.22; letter-spacing: -.01em; } .line em { font-style: normal; color: var(--accent); } .what { font-size: 30px; font-weight: 400; color: var(--muted); margin-top: 44px; line-height: 1.6; } .foot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 28px; } .round { font-size: 24px; font-weight: 700; letter-spacing: .06em; } .date { font-size: 22px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div class="brand"> <span class="mark"></span> <p class="company" data-type="company">ミナト経理</p> </div> <div class="value"> <h1 class="line" data-type="line">中小企業の月次締めを、<br><em>3 日から半日</em>に。</h1> <p class="what" data-type="what">請求書と通帳の突き合わせを自動で済ませる、経理担当 1 人の会社のための締め作業の道具</p> </div> <div class="foot"> <p class="round" data-type="round">シリーズ A 資金調達のご説明</p> <p class="date" data-type="date">2026 年 11 月</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>課題 — 大きな数字 1 つと、当事者の声 1 つ</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #101318; --surface: #1A1F27; --ink: #F2F4F7; --muted: #8B93A1; --accent: #F5B83D; --rule: #2A303A; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 48px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } .body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 120px; align-items: center; } /* 数字は 1 つだけ。2 つ並べると、どちらが課題か読み手が選ぶことになる */ .figure { font-size: 220px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; } .figure small { font-size: 72px; font-weight: 900; margin-left: 12px; letter-spacing: 0; } .figLabel { font-size: 30px; font-weight: 700; line-height: 1.5; margin-top: 28px; } .figBasis { font-size: 22px; font-weight: 400; color: var(--muted); line-height: 1.7; margin-top: 12px; } .voice { border-left: 6px solid var(--accent); padding: 8px 0 8px 56px; } .quote { font-size: 40px; font-weight: 700; line-height: 1.6; } .who { font-size: 24px; font-weight: 400; color: var(--muted); margin-top: 36px; } .source { font-size: 16px; font-weight: 400; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 20px; } </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">月次締めが、経理担当 1 人の月末を食い潰している</h1> </div> <div class="body"> <div data-col="1"> <p class="figure" data-type="figure">42<small>時間</small></p> <p class="figLabel" data-type="figLabel">従業員 50 人以下の会社の、月次締め 1 回あたり</p> <p class="figBasis" data-type="figBasis">うち 7 割が、請求書と通帳の明細を 1 行ずつ突き合わせる作業</p> </div> <div class="voice" data-col="2"> <p class="quote" data-type="quote">「月末の 3 日間は、突き合わせしかしていません。そのあいだ、ほかの仕事は全部止まります」</p> <p class="who" data-type="who">製造業・従業員 32 名・経理担当（聞き取り 2026 年 8 月）</p> </div> </div> <p class="source" data-type="source">出典：当社による聞き取り 48 社の平均。数値と発言は説明用の架空のもの</p> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>なぜ今か — 3 つの変化を年代順に置き、今に着地させる</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #F6F5F1; --surface: #FFFFFF; --ink: #15171C; --muted: #686C75; --accent: #9A6512; --rule: #DDDAD2; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr; row-gap: 56px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } /* 軸は 1 本。3 つの変化は同じ高さに置き、右端の「今」だけを塗る */ .track { align-self: center; position: relative; display: grid; grid-template-columns: repeat(3, 1fr) 340px; column-gap: 40px; } .axis { position: absolute; left: 0; right: 170px; top: 18px; height: 4px; background: var(--rule); } .shift { position: relative; padding-top: 72px; } .dot { position: absolute; top: 6px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ground); border: 4px solid var(--ink); } .year { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); } .sTitle { font-size: 36px; font-weight: 900; line-height: 1.4; margin-top: 12px; } .sBody { font-size: 24px; font-weight: 400; line-height: 1.75; color: var(--muted); margin-top: 16px; } .now { position: relative; padding-top: 72px; } .nowDot { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); } .nowLabel { font-size: 26px; font-weight: 700; color: var(--accent); } .nowText { font-size: 40px; font-weight: 900; line-height: 1.45; 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="track"> <div class="axis"></div> <div class="shift" data-col="1"> <span class="dot"></span> <p class="year" data-type="year">2023</p> <p class="sTitle" data-type="sTitle">請求書が電子になった</p> <p class="sBody" data-type="sBody">インボイス制度で、<br>届く請求書の 6 割が電子に</p> </div> <div class="shift" data-col="2"> <span class="dot"></span> <p class="year">2024</p> <p class="sTitle">明細が取り出せる</p> <p class="sBody">地方銀行の 7 割が、法人口座の<br>明細を外部に開いた</p> </div> <div class="shift" data-col="3"> <span class="dot"></span> <p class="year">2025</p> <p class="sTitle">担当者が足りない</p> <p class="sBody">経理の求人倍率は 2.1 倍。<br>辞めた穴を採用で埋められない</p> </div> <div class="now" data-col="4"> <span class="nowDot"></span> <p class="nowLabel" data-type="nowLabel">2026 — 今</p> <p class="nowText" data-type="nowText">データは揃い、<br>人は足りない</p> </div> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>市場規模 — 面積で比べる 3 重の円と、数字の出どころ</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #101318; --surface: #1A1F27; --ink: #F2F4F7; --muted: #8B93A1; --accent: #F5B83D; --rule: #2A303A; /* 外側ほど淡く。いちばん内側の、取りに行く市場だけを強調色で塗る */ --ring-outer: color-mix(in srgb, var(--ink) 9%, var(--ground)); --ring-mid: color-mix(in srgb, var(--ink) 20%, var(--ground)); } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → 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: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } .body { display: grid; grid-template-columns: 720px 1fr; column-gap: 96px; align-items: center; } .rows { display: grid; row-gap: 0; border-top: 1px solid var(--rule); } .row { display: grid; grid-template-columns: 36px 1fr auto; column-gap: 24px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--rule); } .swatch { width: 24px; height: 24px; border-radius: 50%; transform: translateY(2px); } .name { font-size: 28px; font-weight: 700; } .basis { font-size: 21px; font-weight: 400; color: var(--muted); margin-top: 8px; line-height: 1.6; } .value { font-size: 56px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; } .value small { font-size: 26px; font-weight: 700; margin-left: 6px; } .row.som .value { color: var(--accent); } .note { font-size: 16px; font-weight: 400; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 20px; } </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 年で取りに行くのは 210 億円</h1> </div> <div class="body">  <svg data-col="1" width="720" height="640" viewBox="0 0 720 640" aria-label="市場規模の入れ子の円"> <circle cx="360" cy="320" r="318" fill="var(--ring-outer)"/> <circle cx="360" cy="480" r="158" fill="var(--ring-mid)"/> <circle cx="360" cy="579" r="59" fill="var(--accent)"/> </svg> <div class="rows" data-col="2"> <div class="row"> <span class="swatch" style="background: var(--ring-outer); outline: 2px solid var(--rule)"></span> <div> <p class="name" data-type="name">中小企業の経理にかかる人件費</p> <p class="basis" data-type="basis">従業員 300 人以下の 357 万社 × 1 社あたり年 16.2 万円</p> </div> <p class="value" data-type="value">5,800<small>億円</small></p> </div> <div class="row"> <span class="swatch" style="background: var(--ring-mid)"></span> <div> <p class="name">うち月次締めの作業</p> <p class="basis">経理の作業時間に占める締めの割合 25%</p> </div> <p class="value">1,450<small>億円</small></p> </div> <div class="row som"> <span class="swatch" style="background: var(--accent)"></span> <div> <p class="name">電子請求と銀行連携が揃う会社</p> <p class="basis">上のうち、両方が使える 14.5% ／ 5 年で届く範囲</p> </div> <p class="value">210<small>億円</small></p> </div> </div> </div> <p class="note" data-type="note">円の面積は金額に比例。数値は説明用の架空のもの</p> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #F6F5F1; --surface: #FFFFFF; --ink: #15171C; --muted: #686C75; --accent: #9A6512; --rule: #DDDAD2; /* 画面の差し替え枠。実際の画面の代わりに、行と区画の形だけを灰の濃淡で描く */ --screen-line: color-mix(in srgb, var(--ink) 14%, var(--surface)); --screen-block: color-mix(in srgb, var(--ink) 7%, var(--surface)); --screen-hit: color-mix(in srgb, var(--accent) 22%, var(--surface)); } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr; row-gap: 40px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } .stage { position: relative; } .stage svg { position: absolute; left: 0; top: 0; } .call { position: absolute; width: 340px; } .num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; } .cTitle { font-size: 28px; font-weight: 900; line-height: 1.4; margin-top: 14px; } .cBody { font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 8px; } </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">突き合わせは自動、人が見るのは食い違いだけ</h1> </div> <div class="stage"> <svg width="1600" height="700" viewBox="0 0 1600 700" aria-hidden="true">  <rect x="0" y="60" width="880" height="540" rx="18" fill="var(--ink)"/> <rect x="22" y="82" width="836" height="496" fill="var(--surface)"/> <rect x="22" y="82" width="180" height="496" fill="var(--screen-block)"/> <rect x="232" y="112" width="380" height="22" fill="var(--screen-line)"/> <g fill="var(--screen-line)"> <rect x="232" y="180" width="596" height="14"/><rect x="232" y="222" width="596" height="14"/> <rect x="232" y="264" width="596" height="14"/><rect x="232" y="348" width="596" height="14"/> <rect x="232" y="390" width="596" height="14"/><rect x="232" y="432" width="596" height="14"/> </g> <rect x="220" y="294" width="620" height="44" fill="var(--screen-hit)"/> <rect x="232" y="309" width="596" height="14" fill="var(--accent)"/> <rect x="668" y="508" width="160" height="48" rx="6" fill="var(--accent)"/>  <rect x="930" y="180" width="236" height="460" rx="32" fill="var(--ink)"/> <rect x="945" y="204" width="206" height="412" rx="20" fill="var(--surface)"/> <rect x="967" y="238" width="162" height="92" rx="8" fill="var(--screen-hit)"/> <g fill="var(--screen-line)"><rect x="967" y="356" width="162" height="12"/><rect x="967" y="386" width="124" height="12"/><rect x="967" y="416" width="142" height="12"/></g>  <g stroke="var(--accent)" stroke-width="3" fill="none"> <path d="M840 316 L900 316 L900 42 L1236 42"/> <path d="M1129 284 L1236 284"/> <path d="M748 556 L748 664 L1200 664 L1200 492 L1236 492"/> </g> <g fill="var(--accent)"><circle cx="840" cy="316" r="7"/><circle cx="1129" cy="284" r="7"/><circle cx="748" cy="556" r="7"/></g> </svg> <div class="call" style="left: 1260px; top: 20px"> <span class="num" data-type="num">1</span> <p class="cTitle" data-type="cTitle">食い違いだけを上に出す</p> <p class="cBody" data-type="cBody">ずれた行だけに色が付く</p> </div> <div class="call" style="left: 1260px; top: 262px"> <span class="num">2</span> <p class="cTitle">承認はスマホで</p> <p class="cBody">社長の確認待ちで止まらない</p> </div> <div class="call" style="left: 1260px; top: 470px"> <span class="num">3</span> <p class="cTitle">ボタン 1 つで締める</p> <p class="cBody">仕訳を送って月を閉じる</p> </div> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>収益の流れ — 誰から誰へ、お金と価値が動くかを 2 色の線で</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #F6F5F1; --surface: #FFFFFF; --ink: #15171C; --muted: #686C75; --accent: #9A6512; --rule: #DDDAD2; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 32px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } .map { position: relative; } .map svg { position: absolute; inset: 0; } /* 節は 3 つ。当社を中央に置き、お金がどちらから入るかを左右で分ける */ .node { position: absolute; width: 400px; background: var(--surface); border: 2px solid var(--rule); padding: 32px 36px; } .node.us { border: 4px solid var(--ink); } .nRole { font-size: 20px; font-weight: 700; letter-spacing: .12em; color: var(--muted); } .nName { font-size: 34px; font-weight: 900; margin-top: 8px; line-height: 1.35; } .nNote { font-size: 21px; font-weight: 400; color: var(--muted); margin-top: 10px; line-height: 1.6; } .flow { position: absolute; font-size: 24px; font-weight: 700; line-height: 1.4; } .flow.money { color: var(--accent); } .flow small { display: block; font-size: 20px; font-weight: 400; color: var(--muted); margin-top: 4px; } .legend { display: flex; gap: 48px; border-top: 1px solid var(--rule); padding-top: 20px; } .key { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 400; color: var(--muted); } .key i { display: inline-block; width: 48px; height: 0; border-top: 5px solid var(--accent); } .key i.value { border-top: 3px dashed 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">利用料は会社から、紹介料は会計事務所へ</h1> </div> <div class="map"> <svg width="1600" height="560" viewBox="0 0 1600 560" aria-hidden="true"> <defs> <marker id="m" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="12" markerHeight="12" orient="auto"><path d="M0 0 L12 6 L0 12 Z" fill="var(--accent)"/></marker> <marker id="v" viewBox="0 0 12 12" refX="10" refY="6" markerWidth="12" markerHeight="12" orient="auto"><path d="M0 0 L12 6 L0 12 Z" fill="var(--ink)"/></marker> </defs>  <path d="M400 140 L590 140" stroke="var(--accent)" stroke-width="5" fill="none" marker-end="url(#m)"/> <path d="M600 210 L410 210" stroke="var(--ink)" stroke-width="3" stroke-dasharray="10 8" fill="none" marker-end="url(#v)"/>  <path d="M1000 140 L1190 140" stroke="var(--accent)" stroke-width="5" fill="none" marker-end="url(#m)"/> <path d="M1400 264 L1400 480 L200 480 L200 270" stroke="var(--ink)" stroke-width="3" stroke-dasharray="10 8" fill="none" marker-end="url(#v)"/> </svg> <div class="node" style="left: 0; top: 70px"> <p class="nRole" data-type="nRole">利用企業</p> <p class="nName" data-type="nName">中小企業</p> <p class="nNote" data-type="nNote">従業員 50 人以下、経理は 1〜2 人</p> </div> <div class="node us" style="left: 600px; top: 70px"> <p class="nRole">当社</p> <p class="nName">ミナト経理</p> <p class="nNote">締め作業の道具を提供</p> </div> <div class="node" style="left: 1200px; top: 70px"> <p class="nRole">提携先</p> <p class="nName">会計事務所</p> <p class="nNote">顧問先の締めを預かる</p> </div> <p class="flow money" style="left: 412px; top: 72px; width: 180px" data-type="flow">月 9,800 円</p> <p class="flow" style="left: 420px; top: 222px; width: 180px">締めが半日に</p> <p class="flow money" style="left: 1012px; top: 72px; width: 180px">利用料の 20%</p> <p class="flow" style="left: 560px; top: 392px; width: 560px; text-align: center">顧問先を紹介<small data-type="flowNote">新規の 6 割がこの経路</small></p> </div> <div class="legend"> <p class="key" data-type="key"><i></i>お金の流れ</p> <p class="key"><i class="value"></i>価値・紹介の流れ</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>伸び — 売上の曲線に、節目を 3 つだけ書き込む</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #101318; --surface: #1A1F27; --ink: #F2F4F7; --muted: #8B93A1; --accent: #F5B83D; --rule: #2A303A; --area: color-mix(in srgb, var(--accent) 16%, var(--ground)); } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 32px; } .head { display: flex; justify-content: space-between; align-items: end; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } .now { text-align: right; } .nowValue { font-size: 88px; font-weight: 900; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .nowValue small { font-size: 34px; margin-left: 6px; } .nowLabel { font-size: 22px; font-weight: 400; color: var(--muted); margin-top: 10px; } svg text { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .axis { font-size: 20px; fill: var(--muted); font-variant-numeric: tabular-nums; } .mTitle { font-size: 24px; font-weight: 700; fill: var(--ink); } .mNote { font-size: 20px; fill: var(--muted); } .source { font-size: 16px; font-weight: 400; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 20px; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div class="head"> <div> <p class="kicker" data-type="kicker">実績</p> <h1 class="title" data-type="title">月次の売上は 18 か月で 14 倍</h1> </div> <div class="now"> <p class="nowValue" data-type="nowValue">2,380<small>万円</small></p> <p class="nowLabel" data-type="nowLabel">2026 年 10 月の月次売上</p> </div> </div> <svg width="1600" height="560" viewBox="0 0 1600 560" aria-label="月次売上の推移"> <g stroke="var(--rule)" stroke-width="1"> <line x1="80" y1="40" x2="1600" y2="40"/><line x1="80" y1="200" x2="1600" y2="200"/><line x1="80" y1="360" x2="1600" y2="360"/> </g> <line x1="80" y1="520" x2="1600" y2="520" stroke="var(--muted)" stroke-width="2"/> <g class="axis" text-anchor="end"> <text x="64" y="47">3,000</text><text x="64" y="207">2,000</text><text x="64" y="367">1,000</text><text x="64" y="527">0</text> </g> <g class="axis" text-anchor="middle"> <text x="120" y="552">25.4</text><text x="440" y="552">25.8</text><text x="760" y="552">25.12</text><text x="1080" y="552">26.4</text><text x="1400" y="552">26.8</text> </g>  <path d="M120 493 L200 489 L280 484 L360 477 L440 468 L520 457 L600 441 L680 425 L760 404 L840 390 L920 369 L1000 343 L1080 316 L1160 290 L1240 260 L1320 230 L1400 196 L1480 166 L1560 139 L1560 520 L120 520 Z" fill="var(--area)"/> <path d="M120 493 L200 489 L280 484 L360 477 L440 468 L520 457 L600 441 L680 425 L760 404 L840 390 L920 369 L1000 343 L1080 316 L1160 290 L1240 260 L1320 230 L1400 196 L1480 166 L1560 139" fill="none" stroke="var(--accent)" stroke-width="5" stroke-linejoin="round"/> <circle cx="1560" cy="139" r="10" fill="var(--accent)"/>  <g stroke="var(--ink)" stroke-width="2"> <line x1="440" y1="468" x2="440" y2="330"/><line x1="840" y1="390" x2="840" y2="230"/><line x1="1160" y1="290" x2="1160" y2="110"/> </g> <g fill="var(--ink)"><circle cx="440" cy="468" r="7"/><circle cx="840" cy="390" r="7"/><circle cx="1160" cy="290" r="7"/></g> <text class="mTitle" x="452" y="318" text-anchor="end">銀行連携を開始</text> <text class="mNote" x="452" y="292" text-anchor="end">25.8</text> <text class="mTitle" x="852" y="218" text-anchor="end">会計事務所の紹介制度</text> <text class="mNote" x="852" y="192" text-anchor="end">26.1</text> <text class="mTitle" x="1172" y="98" text-anchor="end">スマホ承認を公開</text> <text class="mNote" x="1172" y="72" text-anchor="end">26.5</text> </svg> <p class="source" data-type="source">月次売上（税抜）。数値は説明用の架空のもの</p> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>単位あたりの採算 — LTV・CAC・回収月数を、式でつないで並べる</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #F6F5F1; --surface: #FFFFFF; --ink: #15171C; --muted: #686C75; --accent: #9A6512; --rule: #DDDAD2; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → 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: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; align-content: center; } .card { background: var(--surface); padding: 44px 48px; border-top: 6px solid var(--ink); } .card.hi { border-top-color: var(--accent); } .cLabel { font-size: 22px; font-weight: 700; color: var(--muted); } .cName { font-size: 20px; font-weight: 400; color: var(--muted); margin-top: 4px; letter-spacing: .06em; } .cValue { font-size: 96px; font-weight: 900; line-height: 1; margin-top: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .cValue small { font-size: 36px; font-weight: 900; margin-left: 8px; letter-spacing: 0; } .card.hi .cValue { color: var(--accent); } .cHow { font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 20px; } /* 比は 1 本の帯で。カードの 4 枚目にすると、3 つと同列の別の指標に見える */ .ratio { display: grid; grid-template-columns: auto auto 1fr; column-gap: 40px; align-items: center; background: var(--ink); color: var(--surface); padding: 28px 48px; } .rLabel { font-size: 24px; font-weight: 700; } .rValue { font-size: 56px; font-weight: 900; font-variant-numeric: tabular-nums; } .rNote { font-size: 22px; font-weight: 400; color: var(--rule); text-align: right; } .source { font-size: 16px; font-weight: 400; 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">1 社を獲得する費用は、7 か月で回収できる</h1> </div> <div class="cards"> <div class="card" data-col="1"> <p class="cLabel" data-type="cLabel">1 社が払う総額</p> <p class="cName" data-type="cName">LTV</p> <p class="cValue" data-type="cValue">35.3<small>万円</small></p> <p class="cHow" data-type="cHow">月 9,800 円 × 平均の利用期間 36 か月</p> </div> <div class="card" data-col="2"> <p class="cLabel">1 社の獲得費用</p> <p class="cName">CAC</p> <p class="cValue">6.9<small>万円</small></p> <p class="cHow">広告と営業の費用 ÷ 新規の社数</p> </div> <div class="card hi" data-col="3"> <p class="cLabel">獲得費用の回収</p> <p class="cName">PAYBACK</p> <p class="cValue">7<small>か月</small></p> <p class="cHow">CAC ÷ 1 社の月の粗利 9,800 円</p> </div> </div> <div class="ratio"> <p class="rLabel" data-type="rLabel">LTV ÷ CAC</p> <p class="rValue" data-type="rValue">5.1 倍</p> <p class="rNote" data-type="rNote">目安の 3 倍を上回る。紹介経路の CAC は 2.1 万円</p> </div> <p class="source" data-type="source">CAC は直近 6 か月の平均。数値は説明用の架空のもの</p> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>チーム — 4 人の顔写真の枠と、この事業をやれる理由 1 行</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #101318; --surface: #1A1F27; --ink: #F2F4F7; --muted: #8B93A1; --accent: #F5B83D; --rule: #2A303A; /* 写真の差し替え枠。人物は描かず、頭と肩の位置だけを面で示す */ --frame-figure: color-mix(in srgb, var(--ink) 18%, var(--surface)); } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 48px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); } .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; align-content: center; } /* 1:1 で 4 人とも同じ大きさ。代表だけ大きくすると、チームではなく 1 人の会社に見える */ .photo { aspect-ratio: 1 / 1; background: var(--surface); position: relative; overflow: hidden; } .photo svg { position: absolute; inset: 0; width: 100%; height: 100%; } .role { font-size: 20px; font-weight: 700; letter-spacing: .12em; color: var(--accent); margin-top: 28px; } .name { font-size: 34px; font-weight: 900; margin-top: 8px; letter-spacing: .04em; } .why { font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 14px; } .why b { font-weight: 700; color: var(--ink); } .foot { display: flex; gap: 16px; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 24px; } .footLabel { font-size: 20px; font-weight: 700; color: var(--muted); white-space: nowrap; } .footText { font-size: 22px; font-weight: 400; 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">経理の現場と、銀行の内側を知る 4 人</h1> </div> <div class="grid"> <div data-col="1"> <div class="photo"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="40" r="17" fill="var(--frame-figure)"/><path d="M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z" fill="var(--frame-figure)"/></svg></div> <p class="role" data-type="role">代表</p> <p class="name" data-type="name">湊慎一</p> <p class="why" data-type="why"><b>120 社</b>の月次締めを担当</p> </div> <div data-col="2"> <div class="photo"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="40" r="17" fill="var(--frame-figure)"/><path d="M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z" fill="var(--frame-figure)"/></svg></div> <p class="role">開発責任者</p> <p class="name">高梨遥</p> <p class="why">地方銀行の<b>法人向け明細連携</b>を設計</p> </div> <div data-col="3"> <div class="photo"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="40" r="17" fill="var(--frame-figure)"/><path d="M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z" fill="var(--frame-figure)"/></svg></div> <p class="role">事業責任者</p> <p class="name">岡部拓</p> <p class="why">会計ソフトの<b>販売店網</b>を構築</p> </div> <div data-col="4"> <div class="photo"><svg viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="40" r="17" fill="var(--frame-figure)"/><path d="M14 100 C14 74 30 64 50 64 C70 64 86 74 86 100 Z" fill="var(--frame-figure)"/></svg></div> <p class="role">顧客支援</p> <p class="name">片山由佳</p> <p class="why">中小企業の経理を <b>9 年</b>、1 人で担当</p> </div> </div> <div class="foot"> <p class="footLabel" data-type="footLabel">社員</p> <p class="footText" data-type="footText">全 14 名（開発 8・事業 4・管理 2）。顧問に公認会計士 1 名</p> </div> </div> </div>

<!doctype html> <meta charset="utf-8"> <title>調達額と使途 — 金額、使い道の帯、届く地点を上から順に</title> <meta name="dv-font" content="Zen Kaku Gothic New:400;700;900"> <link rel="stylesheet" href="./font.css"> <style> /* この版そのもの。index.md の layout / type / colors は、この HTML を scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */ :root { --ground: #101318; --surface: #1A1F27; --ink: #F2F4F7; --muted: #8B93A1; --accent: #F5B83D; --rule: #2A303A; --series-1: #F5B83D; --series-2: #C98A2B; --series-3: #7C6A4C; } * { box-sizing: border-box; margin: 0; } html, body { width: 1920px; height: 1080px; } body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; } .artboard { width: 1920px; height: 1080px; background: var(--ground); color: var(--ink); padding: 112px 160px 96px; /* → layout.margin */ } .content { height: 100%; display: grid; grid-template-rows: auto auto 1fr; row-gap: 56px; } .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); } .ask { display: flex; align-items: baseline; gap: 40px; margin-top: 20px; } .amount { font-size: 144px; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .amount small { font-size: 52px; margin-left: 10px; letter-spacing: 0; } .terms { font-size: 26px; font-weight: 400; color: var(--muted); line-height: 1.6; } /* 使途は 1 本の帯。円グラフにすると、割合は読めても金額の大きさが伝わらない */ .useHead { font-size: 22px; font-weight: 700; color: var(--muted); letter-spacing: .12em; } .bar { display: grid; grid-template-columns: 55fr 30fr 15fr; height: 72px; margin-top: 20px; } .seg1 { background: var(--series-1); } .seg2 { background: var(--series-2); } .seg3 { background: var(--series-3); } .labels { display: grid; grid-template-columns: 55fr 30fr 15fr; margin-top: 20px; } .uName { font-size: 28px; font-weight: 900; } .uValue { font-size: 24px; font-weight: 700; color: var(--accent); margin-top: 6px; font-variant-numeric: tabular-nums; } .uWhat { font-size: 21px; font-weight: 400; color: var(--muted); margin-top: 6px; line-height: 1.6; padding-right: 32px; } /* 届く地点は使途の下に。何に使うかの次に、使うと何が言えるかを置く */ .goals { align-self: end; display: grid; grid-template-columns: auto repeat(3, 1fr); column-gap: 48px; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 32px; } .gLabel { font-size: 22px; font-weight: 700; color: var(--muted); } .gValue { font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; } .gValue small { font-size: 22px; font-weight: 700; margin-left: 4px; } .gWhat { font-size: 21px; font-weight: 400; color: var(--muted); margin-top: 4px; } </style> <div class="artboard" data-artboard> <div class="content" data-content> <div> <p class="kicker" data-type="kicker">今回のお願い</p> <div class="ask"> <p class="amount" data-type="amount">8<small>億円</small></p> <p class="terms" data-type="terms">シリーズ A ／第三者割当増資<br>2027 年 1 月クローズ予定</p> </div> </div> <div> <p class="useHead" data-type="useHead">使い道</p> <div class="bar"><span class="seg1"></span><span class="seg2"></span><span class="seg3"></span></div> <div class="labels"> <div> <p class="uName" data-type="uName">開発</p> <p class="uValue" data-type="uValue">4.4 億円</p> <p class="uWhat" data-type="uWhat">銀行連携を 40 行から 100 行へ。開発者を 8 名から 20 名に</p> </div> <div> <p class="uName">販売</p> <p class="uValue">2.4 億円</p> <p class="uWhat">会計事務所の紹介網を全国 8 地域へ</p> </div> <div> <p class="uName">管理</p> <p class="uValue">1.2 億円</p> <p class="uWhat">監査と情報保護</p> </div> </div> </div> <div class="goals"> <p class="gLabel" data-type="gLabel">24 か月後</p> <div><p class="gValue" data-type="gValue">8,000<small>社</small></p><p class="gWhat" data-type="gWhat">利用企業（今 2,400 社）</p></div> <div><p class="gValue">9<small>億円</small></p><p class="gWhat">年間の売上</p></div> <div><p class="gValue">黒字化</p><p class="gWhat">営業利益で、月次</p></div> </div> </div> </div>

The Pitch Ten — From the Cover to the Ask, One Series A Pitch

Reading order

About this deck

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

Take it with you

Everything

Prompt

Spec

Files

01 pitch-cover-value-line/pattern.html

02 problem-figure-and-voice/pattern.html

03 why-now-three-shifts/pattern.html

04 market-size-tam-sam-som/pattern.html

05 product-device-frames/pattern.html

06 revenue-flow-actors/pattern.html

07 traction-curve-milestones/pattern.html

08 unit-economics-ltv-cac/pattern.html

09 team-founders-portrait-row/pattern.html

10 funding-ask-use-of-funds/pattern.html