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 setName 32px / 700 / leading 1.35 setNote 22px / 400 / leading 1.6 spotCount 44px / 700 / leading 1 spotLabel 22px / 500 / leading 1.4 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 / #1C8C79 / #2F6FB5 ## Constraints — dropping these breaks it - Do not paint the intersection. It is the two translucent sets landing on each other; give it a colour of its own and it reads as a third category - Put a number in the overlap. A Venn that only says 'the sweet spot' looks identical when the sweet spot is empty - Two circles at most. Three makes seven regions, and none of them can be identified without a sentence explaining which is which - Say where the excluded go. Without it, the figure is read as a notice of rejection rather than a decision about sequence - Draw both conditions the same size. Unequal circles are read as unequal importance, not as unequal set sizes 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/venn-two-set-sweet-spot/pattern.html.
/ai/designs/venn-two-set-sweet-spot.json
format: slide-16x9
density: low
layout:
kind: overlap
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
setName:
size: 32
weight: 700
leading: 1.35
setNote:
size: 22
weight: 400
leading: 1.6
spotCount:
size: 44
weight: 700
leading: 1
spotLabel:
size: 22
weight: 500
leading: 1.4
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"
series:
- "#1C8C79"
- "#2F6FB5"
rules:
- Do not paint the intersection. It is the two translucent sets landing on each other; give it a colour of its own and it reads as a third category
- Put a number in the overlap. A Venn that only says 'the sweet spot' looks identical when the sweet spot is empty
- Two circles at most. Three makes seven regions, and none of them can be identified without a sentence explaining which is which
- Say where the excluded go. Without it, the figure is read as a notice of rejection rather than a decision about sequence
- Draw both conditions the same size. Unequal circles are read as unequal importance, not as unequal set sizes{
"format": "slide-16x9",
"density": "low",
"layout": {
"kind": "overlap",
"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
},
"setName": {
"size": 32,
"weight": 700,
"leading": 1.35
},
"setNote": {
"size": 22,
"weight": 400,
"leading": 1.6
},
"spotCount": {
"size": 44,
"weight": 700,
"leading": 1
},
"spotLabel": {
"size": 22,
"weight": 500,
"leading": 1.4
},
"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",
"series": [
"#1C8C79",
"#2F6FB5"
]
},
"rules": [
"Do not paint the intersection. It is the two translucent sets landing on each other; give it a colour of its own and it reads as a third category",
"Put a number in the overlap. A Venn that only says 'the sweet spot' looks identical when the sweet spot is empty",
"Two circles at most. Three makes seven regions, and none of them can be identified without a sentence explaining which is which",
"Say where the excluded go. Without it, the figure is read as a notice of rejection rather than a decision about sequence",
"Draw both conditions the same size. Unequal circles are read as unequal importance, not as unequal set sizes"
]
} /designs/venn-two-set-sweet-spot/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() で名指す。
区分色は 2 つだけ —— この図で色が言うのは「どちらの条件か」であって、
3 つ目の色は重なりの領域が勝手に作る。 */
:root {
--ground: #FFFFFF;
--surface: #F4F6F9;
--ink: #131820;
--muted: #667183;
--accent: #1F5FA8;
--rule: #DBE1E9;
--series-1: #1C8C79;
--series-2: #2F6FB5;
}
* { 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;
grid-template-rows: minmax(0, 1fr) auto;
justify-items: center;
align-items: center;
row-gap: 28px;
}
.figure { display: block; }
/* 重なりの色は塗らない。2 枚の透過が重なった結果そのものが「両方」であって、
3 つ目の色を置くと、重なりが独立した区分に見えてしまう。 */
.set { fill-opacity: 0.22; stroke-width: 2.5; }
.set-1 { fill: var(--series-1); stroke: var(--series-1); }
.set-2 { fill: var(--series-2); stroke: var(--series-2); }
.set-name { fill: var(--ink); font-size: 32px; font-weight: 700; line-height: 1.35; }
.set-note { fill: var(--muted); font-size: 22px; font-weight: 400; line-height: 1.6; }
.spot-count { fill: var(--ink); font-size: 44px; font-weight: 700; line-height: 1; }
.spot-label { fill: var(--ink); font-size: 22px; font-weight: 500; line-height: 1.4; }
.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">絞り込みの二条件 — 両方を満たす案だけに人を割く</h1>
<p class="window" data-type="window">2026 年度下期の投資判断 / 候補 14 件 / 事業部横断の評価会</p>
</div>
<div class="body">
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、
SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
<svg class="figure" width="1100" height="600" viewBox="0 0 1100 600">
<circle class="set set-1" cx="400" cy="300" r="250"/>
<circle class="set set-2" cx="700" cy="300" r="250"/>
<text class="set-name" data-type="setName" x="300" y="265" text-anchor="middle" dominant-baseline="central">今期に出せる</text>
<text class="set-note" data-type="setNote" x="300" y="305" text-anchor="middle" dominant-baseline="central">6 か月で本番に載る</text>
<text class="set-name" x="800" y="265" text-anchor="middle" dominant-baseline="central">真似されにくい</text>
<text class="set-note" x="800" y="305" text-anchor="middle" dominant-baseline="central">自社の運用データが要る</text>
<text class="spot-count" data-type="spotCount" x="550" y="285" text-anchor="middle" dominant-baseline="central">4 件</text>
<text class="spot-label" data-type="spotLabel" x="550" y="335" text-anchor="middle" dominant-baseline="central">両方を満たす</text>
</svg>
<p class="conclusion" data-type="conclusion">残る 10 件は片方しか満たさない。落とすのではなく、条件が変わる来期まで待たせる</p>
</div>
<div class="foot" data-type="note">候補は事業部からの申請 14 件。両方を満たす 4 件で、下期の開発工数の 8 割を使う。</div>
</div>
</div>
/designs/venn-two-set-sweet-spot/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 93 (4635534d022a61ca)
*
* 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+2f-32, U+34, U+36, U+38, U+2014, U+3001-3002, U+3044, U+3046, U+304b-304c, U+304f-3052, U+3055-305c, U+305f-3060, U+3066-306b, U+306e-3070, U+307e-307f, U+3089-308c, U+308f, U+3092, U+3094, U+3099, U+30bf-30c0, U+30c6-30c7, U+30fc, U+4e0b, U+4e21, U+4e8b-4e8c, U+4eba, U+4eca, U+4ef6, U+4f1a, U+4f3c, U+4f7f, U+4fa1, U+5019, U+51fa, U+5224, U+5272, U+5909, U+5de5, U+5e74, U+5ea6, U+5f85, U+6295, U+6570, U+65ad, U+65b9, U+6708, U+671f, U+672c, U+6761, U+6765, U+6848, U+696d, U+6a2a, U+6b8b, U+6e80, U+7247, U+7528, U+7533, U+756a, U+767a, U+771f, U+793e, U+7d5e, U+81ea, U+843d, U+88dc, U+8981, U+8a55, U+8acb, U+8cc7, U+8f09, U+8fbc, U+904b, U+90e8, U+958b;
}
@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+2f-32, U+34, U+36, U+38, U+2014, U+3001-3002, U+3044, U+3046, U+304b-304c, U+304f-3052, U+3055-305c, U+305f-3060, U+3066-306b, U+306e-3070, U+307e-307f, U+3089-308c, U+308f, U+3092, U+3094, U+3099, U+30bf-30c0, U+30c6-30c7, U+30fc, U+4e0b, U+4e21, U+4e8b-4e8c, U+4eba, U+4eca, U+4ef6, U+4f1a, U+4f3c, U+4f7f, U+4fa1, U+5019, U+51fa, U+5224, U+5272, U+5909, U+5de5, U+5e74, U+5ea6, U+5f85, U+6295, U+6570, U+65ad, U+65b9, U+6708, U+671f, U+672c, U+6761, U+6765, U+6848, U+696d, U+6a2a, U+6b8b, U+6e80, U+7247, U+7528, U+7533, U+756a, U+767a, U+771f, U+793e, U+7d5e, U+81ea, U+843d, U+88dc, U+8981, U+8a55, U+8acb, U+8cc7, U+8f09, U+8fbc, U+904b, U+90e8, U+958b;
}
@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+2f-32, U+34, U+36, U+38, U+2014, U+3001-3002, U+3044, U+3046, U+304b-304c, U+304f-3052, U+3055-305c, U+305f-3060, U+3066-306b, U+306e-3070, U+307e-307f, U+3089-308c, U+308f, U+3092, U+3094, U+3099, U+30bf-30c0, U+30c6-30c7, U+30fc, U+4e0b, U+4e21, U+4e8b-4e8c, U+4eba, U+4eca, U+4ef6, U+4f1a, U+4f3c, U+4f7f, U+4fa1, U+5019, U+51fa, U+5224, U+5272, U+5909, U+5de5, U+5e74, U+5ea6, U+5f85, U+6295, U+6570, U+65ad, U+65b9, U+6708, U+671f, U+672c, U+6761, U+6765, U+6848, U+696d, U+6a2a, U+6b8b, U+6e80, U+7247, U+7528, U+7533, U+756a, U+767a, U+771f, U+793e, U+7d5e, U+81ea, U+843d, U+88dc, U+8981, U+8a55, U+8acb, U+8cc7, U+8f09, U+8fbc, U+904b, U+90e8, U+958b;
}
ベン図がよく失敗するのは、重なりに言葉しか置かないときである。「ここが狙い目」 と書かれた重なりは、そこに 4 件あっても 0 件でも同じ絵になる。数を置いた瞬間、 この図は主張ではなく報告になる。
もうひとつは、外れた側の扱いを書かないことである。条件を満たさなかった 10 件に 行き先が無いと、この図は選定の説明ではなく切り捨ての通告として受け取られる。