As measured
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 96 right 140 bottom 96 left 140 ## Type (px against a 1920px canvas) title 44px / 700 / tracking 0.01em / leading 1.3 window 20px / 500 / leading 1.5 termName 24px / 500 / leading 1.4 termValue 64px / 700 / tracking -0.01em / leading 1.1 / tabular numerals operator 40px / 500 / leading 1 driver 20px / 400 / leading 1.6 delta 20px / 700 / leading 1.4 / tabular numerals conclusion 26px / 500 / leading 1.6 note 16px / 400 / leading 1.6 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Use numbers that actually multiply out to the left-hand side. A formula that does not balance passes unnoticed in the room and later casts doubt on every figure in the deck - Give every factor what moves it. The identity alone does not say which factor anyone can reach - Fill one factor only. Fill all three and the decomposition becomes the subject, burying the one decision - Three factors at most. Past four, each contributes so little that no factor looks worth moving - State that the formula is an identity, not a causal claim. Moving the right side moves the left, but whether it can be moved lives outside the formula 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/equation-driver-formula/pattern.html.
/ai/designs/equation-driver-formula.json
format: slide-16x9
density: medium
layout:
kind: centered
canvas:
w: 1920
h: 1080
margin:
top: 96
right: 140
bottom: 96
left: 140
type:
title:
size: 44
weight: 700
tracking: 0.01em
leading: 1.3
window:
size: 20
weight: 500
leading: 1.5
termName:
size: 24
weight: 500
leading: 1.4
termValue:
size: 64
weight: 700
tracking: -0.01em
leading: 1.1
numeric: tabular
operator:
size: 40
weight: 500
leading: 1
driver:
size: 20
weight: 400
leading: 1.6
delta:
size: 20
weight: 700
leading: 1.4
numeric: tabular
conclusion:
size: 26
weight: 500
leading: 1.6
note:
size: 16
weight: 400
leading: 1.6
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Use numbers that actually multiply out to the left-hand side. A formula that does not balance passes unnoticed in the room and later casts doubt on every figure in the deck
- Give every factor what moves it. The identity alone does not say which factor anyone can reach
- Fill one factor only. Fill all three and the decomposition becomes the subject, burying the one decision
- Three factors at most. Past four, each contributes so little that no factor looks worth moving
- State that the formula is an identity, not a causal claim. Moving the right side moves the left, but whether it can be moved lives outside the formula{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "centered",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"window": {
"size": 20,
"weight": 500,
"leading": 1.5
},
"termName": {
"size": 24,
"weight": 500,
"leading": 1.4
},
"termValue": {
"size": 64,
"weight": 700,
"tracking": "-0.01em",
"leading": 1.1,
"numeric": "tabular"
},
"operator": {
"size": 40,
"weight": 500,
"leading": 1
},
"driver": {
"size": 20,
"weight": 400,
"leading": 1.6
},
"delta": {
"size": 20,
"weight": 700,
"leading": 1.4,
"numeric": "tabular"
},
"conclusion": {
"size": 26,
"weight": 500,
"leading": 1.6
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Use numbers that actually multiply out to the left-hand side. A formula that does not balance passes unnoticed in the room and later casts doubt on every figure in the deck",
"Give every factor what moves it. The identity alone does not say which factor anyone can reach",
"Fill one factor only. Fill all three and the decomposition becomes the subject, burying the one decision",
"Three factors at most. Past four, each contributes so little that no factor looks worth moving",
"State that the formula is an identity, not a causal claim. Moving the right side moves the left, but whether it can be moved lives outside the formula"
]
} /designs/equation-driver-formula/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>売上の分解 — 今期に動かせるのは頻度だけ</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
区分色は持たない —— 3 つの項は違う種類のものではなく同じ式の因子で、
強調するのは「今期に動かせる 1 つ」だけ。 */
:root {
--ground: #FFFFFF;
--surface: #F4F6F9;
--ink: #131820;
--muted: #667183;
--accent: #1F5FA8;
--rule: #DBE1E9;
}
* { 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: 96px 140px;
}
.content {
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.head { border-bottom: 2px solid var(--rule); padding-bottom: 28px; }
.title { font-size: 44px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; }
.window { margin-top: 14px; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.body { display: grid; align-content: center; row-gap: 44px; }
.equation { display: flex; align-items: center; justify-content: center; gap: 20px; }
.term { width: 340px; padding: 30px 24px; border-radius: 12px; background: var(--surface); text-align: center; }
.term-result { width: 340px; border: 3px solid var(--accent); background: var(--ground); }
/* 今期に手が届く項だけを塗る。3 つとも塗ると、式の分解そのものが主題に見える。 */
.term-live { background: color-mix(in srgb, var(--accent) 14%, var(--ground)); }
.term-name { font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--muted); }
.term-value { margin-top: 12px; font-size: 64px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* 幅を固定する。下の行が 40px の枠を空けて桁を合わせているので、演算子が
字送り任せだと、書体が変わった日に式と説明の列がずれる。 */
.operator { width: 40px; text-align: center; font-size: 40px; font-weight: 500; line-height: 1; color: var(--muted); }
.drivers { display: flex; align-items: flex-start; justify-content: center; gap: 20px; }
.driver-slot { width: 340px; text-align: center; }
.driver-gap { width: 340px; }
.driver-op { width: 40px; }
.driver { font-size: 20px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.delta { margin-top: 6px; font-size: 20px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.conclusion { text-align: center; font-size: 26px; font-weight: 500; line-height: 1.6; color: var(--muted); }
.foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<div class="head">
<h1 class="title" data-type="title">売上の分解 — 今期に動かせるのは頻度だけ</h1>
<p class="window" data-type="window">2026 年度上期の実績 / 単価は税抜 / 頻度は 1 社あたりの年間購入回数</p>
</div>
<div class="body">
<div class="equation">
<div class="term term-result">
<div class="term-name" data-type="termName">売上</div>
<div class="term-value" data-type="termValue">2.4 億</div>
</div>
<span class="operator" data-type="operator">=</span>
<div class="term">
<div class="term-name">客数</div>
<div class="term-value">1,200 社</div>
</div>
<span class="operator">×</span>
<div class="term">
<div class="term-name">単価</div>
<div class="term-value">8.0 万</div>
</div>
<span class="operator">×</span>
<div class="term term-live">
<div class="term-name">頻度</div>
<div class="term-value">2.5 回</div>
</div>
</div>
<div class="drivers">
<span class="driver-gap"></span>
<span class="driver-op"></span>
<div class="driver-slot">
<div class="driver" data-type="driver">新規商談の数 × 受注率</div>
<div class="delta" data-type="delta">前期比 +3%</div>
</div>
<span class="driver-op"></span>
<div class="driver-slot">
<div class="driver">構成の見直しでしか動かない</div>
<div class="delta">前期比 0%</div>
</div>
<span class="driver-op"></span>
<div class="driver-slot">
<div class="driver">更新案内の自動化で伸びる</div>
<div class="delta">前期比 +12%</div>
</div>
</div>
<p class="conclusion" data-type="conclusion">客数は商談の数に縛られ、単価は価格の議論が要る。今期に手が届くのは右端の 1 つだけ</p>
</div>
<div class="foot" data-type="note">式は恒等式であって因果ではない。右辺のどれかを動かせば左辺が動くが、動かせるかどうかは式の外の話。</div>
</div>
</div>
/designs/equation-driver-formula/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 107 (d12864306ccdf04d)
*
* 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+25, U+2b-2c, U+2e-36, U+38, U+3d, U+d7, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+304b-304c, U+304f-3052, U+3057-3058, U+305b-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3072-3073, U+3089-308c, U+3092, U+3094, U+3099, U+4e07, U+4e0a, U+4eca, U+4f38, U+4fa1, U+5104, U+5165, U+5185, U+5206, U+524d, U+52d5, U+5316, U+5358, U+53d7, U+53f3, U+5546, U+56de, U+56e0, U+58f2, U+5916, U+5b9f, U+5ba2, U+5c4a, U+5de6, U+5e74, U+5ea6, U+5f0f, U+6052, U+6210, U+624b, U+629c, U+6570, U+65b0, U+66f4, U+671f, U+679c, U+683c, U+6848, U+69cb, U+6bd4, U+6ce8, U+7387, U+76f4, U+793e, U+7a0e, U+7aef, U+7b49, U+7e1b, U+7e3e, U+81ea, U+8981, U+898b, U+898f, U+89e3, U+8a71, U+8ac7, U+8ad6, U+8b70, U+8cfc, U+8fba, U+9593, U+983b;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-1.woff2) format('woff2');
unicode-range: U+25, U+2b-2c, U+2e-36, U+38, U+3d, U+d7, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+304b-304c, U+304f-3052, U+3057-3058, U+305b-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3072-3073, U+3089-308c, U+3092, U+3094, U+3099, U+4e07, U+4e0a, U+4eca, U+4f38, U+4fa1, U+5104, U+5165, U+5185, U+5206, U+524d, U+52d5, U+5316, U+5358, U+53d7, U+53f3, U+5546, U+56de, U+56e0, U+58f2, U+5916, U+5b9f, U+5ba2, U+5c4a, U+5de6, U+5e74, U+5ea6, U+5f0f, U+6052, U+6210, U+624b, U+629c, U+6570, U+65b0, U+66f4, U+671f, U+679c, U+683c, U+6848, U+69cb, U+6bd4, U+6ce8, U+7387, U+76f4, U+793e, U+7a0e, U+7aef, U+7b49, U+7e1b, U+7e3e, U+81ea, U+8981, U+898b, U+898f, U+89e3, U+8a71, U+8ac7, U+8ad6, U+8b70, U+8cfc, U+8fba, U+9593, U+983b;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-2.woff2) format('woff2');
unicode-range: U+25, U+2b-2c, U+2e-36, U+38, U+3d, U+d7, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+304b-304c, U+304f-3052, U+3057-3058, U+305b-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3072-3073, U+3089-308c, U+3092, U+3094, U+3099, U+4e07, U+4e0a, U+4eca, U+4f38, U+4fa1, U+5104, U+5165, U+5185, U+5206, U+524d, U+52d5, U+5316, U+5358, U+53d7, U+53f3, U+5546, U+56de, U+56e0, U+58f2, U+5916, U+5b9f, U+5ba2, U+5c4a, U+5de6, U+5e74, U+5ea6, U+5f0f, U+6052, U+6210, U+624b, U+629c, U+6570, U+65b0, U+66f4, U+671f, U+679c, U+683c, U+6848, U+69cb, U+6bd4, U+6ce8, U+7387, U+76f4, U+793e, U+7a0e, U+7aef, U+7b49, U+7e1b, U+7e3e, U+81ea, U+8981, U+898b, U+898f, U+89e3, U+8a71, U+8ac7, U+8ad6, U+8b70, U+8cfc, U+8fba, U+9593, U+983b;
}
分解の式は、置いた瞬間に「どれを動かすか」という問いに変わる。だから項ごとに 何がそれを動かすかを添えないと、式は正しいのに決められない図になる。
数が合っていることは、思っている以上に重い。1,200 × 8.0 万 × 2.5 が 2.4 億に ならない式は、その場では誰も検算しないが、あとで 1 つでも食い違いが見つかった 瞬間に、この資料のすべての数字が疑われる。