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

伸び — 売上の曲線に、節目を 3 つだけ書き込む

一軸
版
伸び — 売上の曲線に、節目を 3 つだけ書き込む
160 112

1920 × 1080 作品として見る

持ち帰る

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

全部入り

traction-curve-milestones-everything.md

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

依頼文

1.0 KB 
以下の仕様でスライドを 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

仕様

1.2 KB

/ai/designs/traction-curve-milestones.json 

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 から始める。途中から始めると、伸びが誇張される

ファイル

pattern.html

4.9 KB

/designs/traction-curve-milestones/pattern.html — 版そのものの 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>

font.css

2.6 KB

/designs/traction-curve-milestones/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;700;900
 * chars   76 (fe6ccb6731e39573)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+20, U+2c, U+2e, U+30-36, U+38, U+2014, U+3001-3002, U+304b-304e, U+3051-3052, U+305f-3060, U+3064-3067, U+306b, U+306e-3070, U+3072-3073, U+3080, U+3082, U+3092, U+3099, U+30b9-30ba, U+30db-30dc, U+30de, U+4e07, U+4e0a, U+4e8b, U+4ecb, U+4f1a, U+4f38, U+500d, U+5024, U+516c, U+5186, U+5236, U+52d9, U+58f2, U+59cb, U+5b9f, U+5e74, U+5ea6, U+6240, U+627f, U+629c, U+643a, U+6570, U+660e, U+66f2, U+66f8, U+6708, U+67b6, U+6b21, U+7528, U+76ee, U+7a0e, U+7a7a, U+7bc0, U+7d39, U+7dda, U+7e3e, U+884c, U+8a08, U+8a8d, U+8aac, U+8fbc, U+9023, U+9280, U+958b, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+20, U+2c, U+2e, U+30-36, U+38, U+2014, U+3001-3002, U+304b-304e, U+3051-3052, U+305f-3060, U+3064-3067, U+306b, U+306e-3070, U+3072-3073, U+3080, U+3082, U+3092, U+3099, U+30b9-30ba, U+30db-30dc, U+30de, U+4e07, U+4e0a, U+4e8b, U+4ecb, U+4f1a, U+4f38, U+500d, U+5024, U+516c, U+5186, U+5236, U+52d9, U+58f2, U+59cb, U+5b9f, U+5e74, U+5ea6, U+6240, U+627f, U+629c, U+643a, U+6570, U+660e, U+66f2, U+66f8, U+6708, U+67b6, U+6b21, U+7528, U+76ee, U+7a0e, U+7a7a, U+7bc0, U+7d39, U+7dda, U+7e3e, U+884c, U+8a08, U+8a8d, U+8aac, U+8fbc, U+9023, U+9280, U+958b, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+20, U+2c, U+2e, U+30-36, U+38, U+2014, U+3001-3002, U+304b-304e, U+3051-3052, U+305f-3060, U+3064-3067, U+306b, U+306e-3070, U+3072-3073, U+3080, U+3082, U+3092, U+3099, U+30b9-30ba, U+30db-30dc, U+30de, U+4e07, U+4e0a, U+4e8b, U+4ecb, U+4f1a, U+4f38, U+500d, U+5024, U+516c, U+5186, U+5236, U+52d9, U+58f2, U+59cb, U+5b9f, U+5e74, U+5ea6, U+6240, U+627f, U+629c, U+643a, U+6570, U+660e, U+66f2, U+66f8, U+6708, U+67b6, U+6b21, U+7528, U+76ee, U+7a0e, U+7a7a, U+7bc0, U+7d39, U+7dda, U+7e3e, U+884c, U+8a08, U+8a8d, U+8aac, U+8fbc, U+9023, U+9280, U+958b, U+ff08-ff09;
}

ノート

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「事業計画・資金調達」の 1 枚で、架空の会社「ミナト経理」のシリーズ A のピッチとして描いてある。会社・人物・数値はすべて架空。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it. One of the ten pitch slides, drawn as the Series A deck of a fictional company; every company, person and figure on it is invented.

Techniques

Apply to