Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English

一式

事業計画・資金調達の 10 枚 — 表紙から調達額まで、シリーズ A のピッチ 1 回ぶん

表紙・課題・なぜ今か・市場・製品・収益の仕組み・実績・採算・チーム・調達額の 10 枚を、架空の会社のシリーズ A のピッチとして通す

10 枚 · スライド 16:9

持ち帰る JSON 何枚あっても 1 回で。順に束ねて写すので、貼った先でも並びが残る。

読む順

  1. 01 表紙・扉 ピッチの表紙 — 社名より、一文の価値提案を主役にする ピッチの表紙 — 社名より、一文の価値提案を主役にする
  2. 02 課題と打ち手 課題 — 大きな数字 1 つと、当事者の声 1 つ 課題 — 大きな数字 1 つと、当事者の声 1 つ
  3. 03 市場・事業機会 なぜ今か — 3 つの変化を年の線に並べ、今に収束させる なぜ今か — 3 つの変化を年の線に並べ、今に収束させる
  4. 04 市場・事業機会 市場規模 — 面積で比べる 3 重の円と、数字の出どころ 市場規模 — 面積で比べる 3 重の円と、数字の出どころ
  5. 05 提供内容の一覧 製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す 製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す
  6. 06 価格・料金の提示 収益の流れ — 誰から誰へ、お金と価値が動くかを 2 種類の線で 収益の流れ — 誰から誰へ、お金と価値が動くかを 2 種類の線で
  7. 07 数値・KPI の報告 伸び — 売上の曲線に、節目を 3 つだけ書き込む 伸び — 売上の曲線に、節目を 3 つだけ書き込む
  8. 08 数値・KPI の報告 単位あたりの採算 — LTV・CAC・回収月数を、式を添えて並べる 単位あたりの採算 — LTV・CAC・回収月数を、式を添えて並べる
  9. 09 人の紹介 チーム — 同じ大きさの 4 つの顔写真の枠と、この事業をやれる理由 1 行 チーム — 同じ大きさの 4 つの顔写真の枠と、この事業をやれる理由 1 行
  10. 10 次の一手・依頼 調達額と使途 — 金額、使い道の帯、届く地点を上から順に 調達額と使途 — 金額、使い道の帯、届く地点を上から順に

この一式について

この一式について / 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.

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

pitch-series-a-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

12.8 KB
# ピッチの表紙 — 社名より、一文の価値提案を主役にする
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160

## 文字(版面 1920px に対する px)
company  26px / 700 / 字間 0.08em
line  108px / 900 / 字間 -0.01em / 行送り 1.22
what  30px / 400 / 行送り 1.6
round  24px / 700 / 字間 0.06em
date  22px / 400 / 等幅数字

## 配色
地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A

## 外すと崩れる点
- 表紙の主役は価値提案の 1 文。社名を主役にすると、まだ知られていない会社は何も伝えられない
- 1 文の中で、変化の大きさ(3 日 → 半日)だけを強調色にする
- 補足は 1 行、誰のための道具かを書く。機能の列挙は次の頁から
- 調達の回と日付は下端の罫の下に小さく。表紙で金額は出さない

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/pitch-cover-value-line/pattern.html

---

# 課題 — 大きな数字 1 つと、当事者の声 1 つ
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160
- 2 カラム(等分)、間隔 120

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
figure  220px / 900 / 字間 -0.03em / 行送り 1 / 等幅数字
figLabel  30px / 700 / 行送り 1.5
figBasis  22px / 400 / 行送り 1.7
quote  40px / 700 / 行送り 1.6
who  24px / 400
source  16px / 400

## 配色
地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A

## 外すと崩れる点
- 数字は 1 つ。並べると比べ始めて、課題の重さが薄まる
- 数字の下に、何あたりの値かを必ず書く。単位の無い大きな数字は信じてもらえない
- 声は当事者の言葉のまま、話し手の属性と時期を添える。架空なら出典に書く
- 数字と声を縦の強調線で区切り、2 つが別の証拠であることを見せる

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/problem-figure-and-voice/pattern.html

---

# なぜ今か — 3 つの変化を年の線に並べ、今に収束させる
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160
- 4 カラム(等分)、間隔 40

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
year  26px / 700 / 等幅数字
sTitle  36px / 900 / 行送り 1.4
sBody  24px / 400 / 行送り 1.75
nowLabel  26px / 700
nowText  40px / 900 / 行送り 1.45

## 配色
地 #F6F5F1 / 面 #FFFFFF / 文字 #15171C / 補助 #686C75 / 強調 #9A6512 / 罫 #DDDAD2

## 外すと崩れる点
- 変化は 3 つ。どれも外部の変化(制度・技術・人)にし、自社の出来事を混ぜない
- 最後の点だけ塗りの強調色にし、題を他より大きくする。そこが結論
- 各変化に数字を 1 つ持たせる。数字の無い変化は、ただの流行に見える
- 年は等間隔に置く。間隔に意味を持たせない

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/why-now-three-shifts/pattern.html

---

# 市場規模 — 面積で比べる 3 重の円と、数字の出どころ
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160
- 2 カラム(等分)、間隔 96

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
name  28px / 700
basis  21px / 400 / 行送り 1.6
value  56px / 900 / 等幅数字
note  16px / 400

## 配色
地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A

## 外すと崩れる点
- 円の面積を金額に比例させる。半径に比例させると、大きい側が何倍にも誇張される
- 各段に算出の根拠を 1 行で添える。根拠の無い市場規模は、最初に質問される
- 見出しには、取りに行く金額(いちばん内側)を書く。外側の大きな数字で始めない
- いちばん内側の円だけを強調色にする

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/market-size-tam-sam-som/pattern.html

---

# 製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
num  24px / 900 / 等幅数字
cTitle  28px / 900 / 行送り 1.4
cBody  22px / 400 / 行送り 1.7

## 配色
地 #F6F5F1 / 面 #FFFFFF / 文字 #15171C / 補助 #686C75 / 強調 #9A6512 / 罫 #DDDAD2

## 外すと崩れる点
- 引き出しは 3 か所まで。全部の機能を指すと、どれが要か分からない
- 画面は灰色の略図にし、指す所だけ強調色にする。実際の画面写真を貼ると、細部に目が行く
- 引き出し線は直角に折り、画面の上で交差させない
- 説明は 1 項目 1 行の効き目。機能名ではなく、使う人に起きることを書く

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/product-device-frames/pattern.html

---

# 収益の流れ — 誰から誰へ、お金と価値が動くかを 2 種類の線で
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
nRole  20px / 700 / 字間 0.12em
nName  34px / 900 / 行送り 1.35
nNote  21px / 400 / 行送り 1.6
flow  24px / 700 / 行送り 1.4
flowNote  20px / 400 / 行送り 1.4
key  20px / 400

## 配色
地 #F6F5F1 / 面 #FFFFFF / 文字 #15171C / 補助 #686C75 / 強調 #9A6512 / 罫 #DDDAD2

## 外すと崩れる点
- お金と価値を線の種類で分ける。同じ線だと、どちらがどちらへ払うのか読めない
- 自社の箱だけ太い枠にし、中央に置く
- 線ごとに金額か効き目を書く。矢印だけでは、仕組みは分かっても規模が分からない
- 登場する者は 3 つまで。4 つ目が要るなら、別の 1 枚に分ける

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/revenue-flow-actors/pattern.html

---

# 伸び — 売上の曲線に、節目を 3 つだけ書き込む
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
nowValue  88px / 900 / 行送り 1 / 等幅数字
nowLabel  22px / 400
source  16px / 400

## 配色
地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A

## 外すと崩れる点
- 節目は 3 つ。伸びの傾きが変わった所だけを選ぶ
- 見出しで倍率を言い切り、右上に今の値を置く。グラフを読む前に結論が届く
- 注記は縦線の左に寄せ、曲線を隠さない
- 縦軸は 0 から始める。途中から始めると、伸びが誇張される

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/traction-curve-milestones/pattern.html

---

# 単位あたりの採算 — LTV・CAC・回収月数を、式を添えて並べる
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160
- 3 カラム(等分)、間隔 32

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
cLabel  22px / 700
cName  20px / 400 / 字間 0.06em
cValue  96px / 900 / 字間 -0.02em / 行送り 1 / 等幅数字
cHow  22px / 400 / 行送り 1.7
rLabel  24px / 700
rValue  56px / 900 / 等幅数字
rNote  22px / 400
source  16px / 400

## 配色
地 #F6F5F1 / 面 #FFFFFF / 文字 #15171C / 補助 #686C75 / 強調 #9A6512 / 罫 #DDDAD2

## 外すと崩れる点
- 各数字の下に算出の式を書く。式の無い LTV は、最初に疑われる
- 比(LTV ÷ CAC)はカードにせず、下の帯に分ける。4 枚目のカードにすると、別の指標に見える
- 用語は日本語を主に、略語を小さく添える
- 結論の 1 枚(回収月数)だけを強調色にする

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/unit-economics-ltv-cac/pattern.html

---

# チーム — 同じ大きさの 4 つの顔写真の枠と、この事業をやれる理由 1 行
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160
- 4 カラム(等分)、間隔 40

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
title  56px / 900 / 行送り 1.3
role  20px / 700 / 字間 0.12em
name  34px / 900 / 字間 0.04em
why  22px / 400 / 行送り 1.7
footLabel  20px / 700
footText  22px / 400

## 配色
地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A

## 外すと崩れる点
- 4 人とも同じ大きさにする。代表だけ大きくすると、チームではなく 1 人の会社に見える
- 経歴は 1 行、この事業に効く経験だけ。学歴や前職の社名を並べない
- 経歴の中で数字か固有の領域を 1 句だけ太字にする
- 写真が無いうちは、頭と肩の位置だけを面で示す。人物の絵は描かない

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/team-founders-portrait-row/pattern.html

---

# 調達額と使途 — 金額、使い道の帯、届く地点を上から順に
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 160 下 96 左 160

## 文字(版面 1920px に対する px)
kicker  22px / 700 / 字間 0.2em
amount  144px / 900 / 字間 -0.03em / 行送り 1 / 等幅数字
terms  26px / 400 / 行送り 1.6
useHead  22px / 700 / 字間 0.12em
uName  28px / 900
uValue  24px / 700 / 等幅数字
uWhat  21px / 400 / 行送り 1.6
gLabel  22px / 700
gValue  40px / 900 / 等幅数字
gWhat  21px / 400

## 配色
地 #101318 / 面 #1A1F27 / 文字 #F2F4F7 / 補助 #8B93A1 / 強調 #F5B83D / 罫 #2A303A / #F5B83D / #C98A2B / #7C6A4C

## 外すと崩れる点
- 使途は 1 本の帯にする。円グラフにすると、割合は読めても金額の大きさが伝わらない
- 帯の区切りの下に、名前・金額・何に使うかを揃えて置く
- 使途の次に、使うと何が言えるか(届く地点)を置く。お金の話で終わらせない
- 帯の色は強調色からの濃淡 3 段。別々の色相にしない

内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/funding-ask-use-of-funds/pattern.html

仕様

11.5 KB
# ピッチの表紙 — 社名より、一文の価値提案を主役にする
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:
  - 表紙の主役は価値提案の 1 文。社名を主役にすると、まだ知られていない会社は何も伝えられない
  - 1 文の中で、変化の大きさ(3 日 → 半日)だけを強調色にする
  - 補足は 1 行、誰のための道具かを書く。機能の列挙は次の頁から
  - 調達の回と日付は下端の罫の下に小さく。表紙で金額は出さない

---

# 課題 — 大きな数字 1 つと、当事者の声 1 つ
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:
  - 数字は 1 つ。並べると比べ始めて、課題の重さが薄まる
  - 数字の下に、何あたりの値かを必ず書く。単位の無い大きな数字は信じてもらえない
  - 声は当事者の言葉のまま、話し手の属性と時期を添える。架空なら出典に書く
  - 数字と声を縦の強調線で区切り、2 つが別の証拠であることを見せる

---

# なぜ今か — 3 つの変化を年の線に並べ、今に収束させる
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:
  - 変化は 3 つ。どれも外部の変化(制度・技術・人)にし、自社の出来事を混ぜない
  - 最後の点だけ塗りの強調色にし、題を他より大きくする。そこが結論
  - 各変化に数字を 1 つ持たせる。数字の無い変化は、ただの流行に見える
  - 年は等間隔に置く。間隔に意味を持たせない

---

# 市場規模 — 面積で比べる 3 重の円と、数字の出どころ
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:
  - 円の面積を金額に比例させる。半径に比例させると、大きい側が何倍にも誇張される
  - 各段に算出の根拠を 1 行で添える。根拠の無い市場規模は、最初に質問される
  - 見出しには、取りに行く金額(いちばん内側)を書く。外側の大きな数字で始めない
  - いちばん内側の円だけを強調色にする

---

# 製品 — PC とスマホの枠に画面を置き、効く所を 3 か所だけ指す
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:
  - 引き出しは 3 か所まで。全部の機能を指すと、どれが要か分からない
  - 画面は灰色の略図にし、指す所だけ強調色にする。実際の画面写真を貼ると、細部に目が行く
  - 引き出し線は直角に折り、画面の上で交差させない
  - 説明は 1 項目 1 行の効き目。機能名ではなく、使う人に起きることを書く

---

# 収益の流れ — 誰から誰へ、お金と価値が動くかを 2 種類の線で
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:
  - お金と価値を線の種類で分ける。同じ線だと、どちらがどちらへ払うのか読めない
  - 自社の箱だけ太い枠にし、中央に置く
  - 線ごとに金額か効き目を書く。矢印だけでは、仕組みは分かっても規模が分からない
  - 登場する者は 3 つまで。4 つ目が要るなら、別の 1 枚に分ける

---

# 伸び — 売上の曲線に、節目を 3 つだけ書き込む
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:
  - 節目は 3 つ。伸びの傾きが変わった所だけを選ぶ
  - 見出しで倍率を言い切り、右上に今の値を置く。グラフを読む前に結論が届く
  - 注記は縦線の左に寄せ、曲線を隠さない
  - 縦軸は 0 から始める。途中から始めると、伸びが誇張される

---

# 単位あたりの採算 — LTV・CAC・回収月数を、式を添えて並べる
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:
  - 各数字の下に算出の式を書く。式の無い LTV は、最初に疑われる
  - 比(LTV ÷ CAC)はカードにせず、下の帯に分ける。4 枚目のカードにすると、別の指標に見える
  - 用語は日本語を主に、略語を小さく添える
  - 結論の 1 枚(回収月数)だけを強調色にする

---

# チーム — 同じ大きさの 4 つの顔写真の枠と、この事業をやれる理由 1 行
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:
  - 4 人とも同じ大きさにする。代表だけ大きくすると、チームではなく 1 人の会社に見える
  - 経歴は 1 行、この事業に効く経験だけ。学歴や前職の社名を並べない
  - 経歴の中で数字か固有の領域を 1 句だけ太字にする
  - 写真が無いうちは、頭と肩の位置だけを面で示す。人物の絵は描かない

---

# 調達額と使途 — 金額、使い道の帯、届く地点を上から順に
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:
  - 使途は 1 本の帯にする。円グラフにすると、割合は読めても金額の大きさが伝わらない
  - 帯の区切りの下に、名前・金額・何に使うかを揃えて置く
  - 使途の次に、使うと何が言えるか(届く地点)を置く。お金の話で終わらせない
  - 帯の色は強調色からの濃淡 3 段。別々の色相にしない

ファイル

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

2.6 KB

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

中身を見る
<!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>

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

3.3 KB

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

中身を見る
<!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>

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

3.8 KB

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

中身を見る
<!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>

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

4.4 KB

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

中身を見る
<!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>

05 product-device-frames/pattern.html

5.0 KB

/designs/product-device-frames/pattern.html

中身を見る
<!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">
        <!-- PC:枠と画面 -->
        <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>

06 revenue-flow-actors/pattern.html

5.2 KB

/designs/revenue-flow-actors/pattern.html

中身を見る
<!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>

07 traction-curve-milestones/pattern.html

4.9 KB

/designs/traction-curve-milestones/pattern.html

中身を見る
<!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>
      <!-- 1 か月 80px、売上 1,000 万円 = 160px -->
      <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>

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

4.1 KB

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

中身を見る
<!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>

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

4.6 KB

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

中身を見る
<!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>

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

4.6 KB

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

中身を見る
<!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>