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 poleName 28px / 700 / leading 1.3 poleNote 22px / 400 / leading 1.6 markerNow 32px / 700 / leading 1 / tabular numerals markerPast 24px / 500 / 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 - Put an unreachable extreme at each end. Real options as endpoints turn the scale back into a comparison of choices, and position stops being the reading - Two markers at most. One shows no movement; three or more and the scale is standing in for a line chart - Do not add tick marks. They invite reading a five-point difference, and this figure can only answer direction and rough degree - Never say which pole is better. The track's fill is there to make the distance from the left pole readable; the moment colour means 'the good side', this stops being a measurement and becomes an argument - Close on what the position costs, not the position. Whether it can be reversed drives the decision more than the number does 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/spectrum-two-poles/pattern.html.
/ai/designs/spectrum-two-poles.json
format: slide-16x9
density: low
layout:
kind: axis
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
poleName:
size: 28
weight: 700
leading: 1.3
poleNote:
size: 22
weight: 400
leading: 1.6
markerNow:
size: 32
weight: 700
leading: 1
numeric: tabular
markerPast:
size: 24
weight: 500
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:
- Put an unreachable extreme at each end. Real options as endpoints turn the scale back into a comparison of choices, and position stops being the reading
- Two markers at most. One shows no movement; three or more and the scale is standing in for a line chart
- Do not add tick marks. They invite reading a five-point difference, and this figure can only answer direction and rough degree
- Never say which pole is better. The track's fill is there to make the distance from the left pole readable; the moment colour means 'the good side', this stops being a measurement and becomes an argument
- Close on what the position costs, not the position. Whether it can be reversed drives the decision more than the number does{
"format": "slide-16x9",
"density": "low",
"layout": {
"kind": "axis",
"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
},
"poleName": {
"size": 28,
"weight": 700,
"leading": 1.3
},
"poleNote": {
"size": 22,
"weight": 400,
"leading": 1.6
},
"markerNow": {
"size": 32,
"weight": 700,
"leading": 1,
"numeric": "tabular"
},
"markerPast": {
"size": 24,
"weight": 500,
"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": [
"Put an unreachable extreme at each end. Real options as endpoints turn the scale back into a comparison of choices, and position stops being the reading",
"Two markers at most. One shows no movement; three or more and the scale is standing in for a line chart",
"Do not add tick marks. They invite reading a five-point difference, and this figure can only answer direction and rough degree",
"Never say which pole is better. The track's fill is there to make the distance from the left pole readable; the moment colour means 'the good side', this stops being a measurement and becomes an argument",
"Close on what the position costs, not the position. Whether it can be reversed drives the decision more than the number does"
]
} /designs/spectrum-two-poles/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>内製と外注のあいだ — いま 7 割を外に出している</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
区分色は持たない —— 軸の上では色ではなく位置が意味を運ぶ。 */
: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: 48px; }
.poles { display: flex; justify-content: space-between; align-items: flex-start; }
.pole-right { text-align: right; }
.pole-name { font-size: 28px; font-weight: 700; line-height: 1.3; }
.pole-note { margin-top: 10px; font-size: 22px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.figure { display: block; }
.track { fill: var(--surface); }
/* 塗りは「左の極からどれだけ来たか」を示すためのもので、望ましい側の表明ではない
（左端の「全部を内製」は誰も選ばない極として置いてある）。印だけでも位置は読めるが、
塗りが無いと 55% と 70% の差が目測になる。望ましさを言い始めたらこの塗りは外す。 */
.fill { fill: var(--accent); }
.stem { stroke: var(--rule); stroke-width: 2; }
.knob-now { fill: var(--ground); stroke: var(--accent); stroke-width: 8; }
.knob-past { fill: var(--ground); stroke: var(--muted); stroke-width: 5; }
.marker-now { fill: var(--ink); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.marker-past { fill: var(--muted); font-size: 24px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }
.conclusion { 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">内製と外注のあいだ — いま 7 割を外に出している</h1>
<p class="window" data-type="window">2026 年度の開発工数ベース / 運用と保守は含まない / 判断は 3 月の投資委員会</p>
</div>
<div class="body">
<div class="poles">
<div class="pole-left">
<div class="pole-name" data-type="poleName">全部を内製</div>
<div class="pole-note" data-type="poleNote">設計から運用まで自社が持つ</div>
</div>
<div class="pole-right">
<div class="pole-name">全部を外注</div>
<div class="pole-note">仕様だけ自社に残す</div>
</div>
</div>
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、
SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
<svg class="figure" width="1640" height="300" viewBox="0 0 1640 300">
<text class="marker-now" data-type="markerNow" x="1132" y="44" text-anchor="middle" dominant-baseline="central">いま 70%</text>
<path class="stem" d="M1132 66V120"/>
<rect class="track" x="40" y="136" width="1560" height="40" rx="20"/>
<rect class="fill" x="40" y="136" width="1092" height="40" rx="20"/>
<circle class="knob-past" cx="898" cy="156" r="18"/>
<circle class="knob-now" cx="1132" cy="156" r="34"/>
<path class="stem" d="M898 192v46"/>
<text class="marker-past" data-type="markerPast" x="898" y="262" text-anchor="middle" dominant-baseline="central">1 年前 55%</text>
</svg>
<p class="conclusion" data-type="conclusion">7 割そのものは問題ではない。戻す判断ができる人が社内に 2 名しかいないことが問題</p>
</div>
<div class="foot" data-type="note">工数は受入検査を含む。社内の兼務者は稼働率で按分している。</div>
</div>
</div>
/designs/spectrum-two-poles/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 92 (cfaac8ef07341ab0)
*
* 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+2f-33, U+35-37, U+2014, U+3002, U+3042, U+3044, U+304b-304e, U+3051-3054, U+3057-305a, U+305d-3060, U+3064-306b, U+306e-3070, U+307e, U+3080, U+3082, U+3089, U+308b, U+3092, U+3099, U+30b9-30ba, U+30d8-30d9, U+30fc, U+4eba, U+4ed5, U+4f1a, U+4fdd, U+50cd, U+5165, U+5168, U+517c, U+5185, U+51fa, U+5206, U+5224, U+524d, U+5272, U+52d9, U+53d7, U+540d, U+542b, U+54e1, U+554f, U+5916, U+59d4, U+5b88, U+5de5, U+5e74, U+5ea6, U+623b, U+6295, U+6301, U+6309, U+6570, U+65ad, U+6708, U+67fb, U+691c, U+69d8, U+6b8b, U+6ce8, U+7387, U+7528, U+767a, U+793e, U+7a3c, U+8005, U+81ea, U+88fd, U+8a08, U+8a2d, U+8cc7, U+904b, U+90e8, U+958b, U+984c;
}
@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+2f-33, U+35-37, U+2014, U+3002, U+3042, U+3044, U+304b-304e, U+3051-3054, U+3057-305a, U+305d-3060, U+3064-306b, U+306e-3070, U+307e, U+3080, U+3082, U+3089, U+308b, U+3092, U+3099, U+30b9-30ba, U+30d8-30d9, U+30fc, U+4eba, U+4ed5, U+4f1a, U+4fdd, U+50cd, U+5165, U+5168, U+517c, U+5185, U+51fa, U+5206, U+5224, U+524d, U+5272, U+52d9, U+53d7, U+540d, U+542b, U+54e1, U+554f, U+5916, U+59d4, U+5b88, U+5de5, U+5e74, U+5ea6, U+623b, U+6295, U+6301, U+6309, U+6570, U+65ad, U+6708, U+67fb, U+691c, U+69d8, U+6b8b, U+6ce8, U+7387, U+7528, U+767a, U+793e, U+7a3c, U+8005, U+81ea, U+88fd, U+8a08, U+8a2d, U+8cc7, U+904b, U+90e8, U+958b, U+984c;
}
@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+2f-33, U+35-37, U+2014, U+3002, U+3042, U+3044, U+304b-304e, U+3051-3054, U+3057-305a, U+305d-3060, U+3064-306b, U+306e-3070, U+307e, U+3080, U+3082, U+3089, U+308b, U+3092, U+3099, U+30b9-30ba, U+30d8-30d9, U+30fc, U+4eba, U+4ed5, U+4f1a, U+4fdd, U+50cd, U+5165, U+5168, U+517c, U+5185, U+51fa, U+5206, U+5224, U+524d, U+5272, U+52d9, U+53d7, U+540d, U+542b, U+54e1, U+554f, U+5916, U+59d4, U+5b88, U+5de5, U+5e74, U+5ea6, U+623b, U+6295, U+6301, U+6309, U+6570, U+65ad, U+6708, U+67fb, U+691c, U+69d8, U+6b8b, U+6ce8, U+7387, U+7528, U+767a, U+793e, U+7a3c, U+8005, U+81ea, U+88fd, U+8a08, U+8a2d, U+8cc7, U+904b, U+90e8, U+958b, U+984c;
}
内製か外注かという問いは、置き方を変えるだけで答えが出ることがある。両極を端に 置いた軸の上では、どちらかを選ぶのではなく「いまどこにいて、どちらへ動いたか」を 言うことになるからである。
端に実在する選択肢を置かないのは、そのためである。「全部を内製」は誰も選ばない案 だが、端にあることで軸が軸として成立する。実在する案を端に置くと、目盛りは たちまち二択の比較表に戻る。