Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Why Now — Three Shifts on a Line of Years, Converging on Today

Timeline
Design
Why Now — Three Shifts on a Line of Years, Converging on Today
column 1
column 2
column 3
column 4
160 112

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

why-now-three-shifts-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.1 KB 
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.

Spec

1.4 KB

/ai/designs/why-now-three-shifts.json 

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

Files

pattern.html

3.8 KB

/designs/why-now-three-shifts/pattern.html — The artboard itself, font subset included — open it and this picture draws.

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

font.css

3.0 KB

/designs/why-now-three-shifts/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;700;900
 * chars   96 (556528d5664e888e)
 *
 * 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+2e, U+30-37, U+2014, U+3001-3002, U+3044, U+304b-3050, U+3055-3056, U+305b-305c, U+305f-3060, U+3063-3067, U+306a-306b, U+306e-3070, U+3081, U+3089-308c, U+3092, U+3099, U+30a4, U+30b9-30ba, U+30bf-30c0, U+30c6-30c7, U+30db-30dc, U+30f3, U+30fc, U+4eba, U+4eca, U+4ee3, U+4ef6, U+4f5c, U+500d, U+51fa, U+5236, U+5272, U+52d5, U+5316, U+53d6, U+53e3, U+5730, U+57cb, U+5909, U+5916, U+5b50, U+5c4a, U+5e74, U+5ea6-5ea7, U+5f53, U+62c5, U+63a1, U+63c3, U+65b9, U+660e, U+66f8, U+6761, U+696d, U+6c42, U+6cd5, U+7387, U+7406, U+7528, U+7740, U+7a74, U+7d30, U+7d4c, U+7de0, U+7f6e, U+8005, U+81ea, U+884c, U+8acb, U+8db3, U+8f9e, U+90e8, U+91cd, U+9280, U+958b, U+96fb, U+9806;
}
@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+2e, U+30-37, U+2014, U+3001-3002, U+3044, U+304b-3050, U+3055-3056, U+305b-305c, U+305f-3060, U+3063-3067, U+306a-306b, U+306e-3070, U+3081, U+3089-308c, U+3092, U+3099, U+30a4, U+30b9-30ba, U+30bf-30c0, U+30c6-30c7, U+30db-30dc, U+30f3, U+30fc, U+4eba, U+4eca, U+4ee3, U+4ef6, U+4f5c, U+500d, U+51fa, U+5236, U+5272, U+52d5, U+5316, U+53d6, U+53e3, U+5730, U+57cb, U+5909, U+5916, U+5b50, U+5c4a, U+5e74, U+5ea6-5ea7, U+5f53, U+62c5, U+63a1, U+63c3, U+65b9, U+660e, U+66f8, U+6761, U+696d, U+6c42, U+6cd5, U+7387, U+7406, U+7528, U+7740, U+7a74, U+7d30, U+7d4c, U+7de0, U+7f6e, U+8005, U+81ea, U+884c, U+8acb, U+8db3, U+8f9e, U+90e8, U+91cd, U+9280, U+958b, U+96fb, U+9806;
}
@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+2e, U+30-37, U+2014, U+3001-3002, U+3044, U+304b-3050, U+3055-3056, U+305b-305c, U+305f-3060, U+3063-3067, U+306a-306b, U+306e-3070, U+3081, U+3089-308c, U+3092, U+3099, U+30a4, U+30b9-30ba, U+30bf-30c0, U+30c6-30c7, U+30db-30dc, U+30f3, U+30fc, U+4eba, U+4eca, U+4ee3, U+4ef6, U+4f5c, U+500d, U+51fa, U+5236, U+5272, U+52d5, U+5316, U+53d6, U+53e3, U+5730, U+57cb, U+5909, U+5916, U+5b50, U+5c4a, U+5e74, U+5ea6-5ea7, U+5f53, U+62c5, U+63a1, U+63c3, U+65b9, U+660e, U+66f8, U+6761, U+696d, U+6c42, U+6cd5, U+7387, U+7406, U+7528, U+7740, U+7a74, U+7d30, U+7d4c, U+7de0, U+7f6e, U+8005, U+81ea, U+884c, U+8acb, U+8db3, U+8f9e, U+90e8, U+91cd, U+9280, U+958b, U+96fb, U+9806;
}

Notes

この構成について / 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