版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 96 右 140 下 96 左 140 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em / 行送り 1.3 window 20px / 500 / 行送り 1.5 setName 32px / 700 / 行送り 1.35 setNote 22px / 400 / 行送り 1.6 spotCount 44px / 700 / 行送り 1 spotLabel 22px / 500 / 行送り 1.4 conclusion 26px / 500 / 行送り 1.6 note 16px / 400 / 行送り 1.6 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #2F6FB5 ## 外すと崩れる点 - 重なりに色を塗らない。2 枚の透過が重なった結果そのものが「両方」であり、3 つ目の色を置くと重なりが独立した区分に見える - 重なりには数を置く。「ここが狙い目」とだけ書かれたベン図は、重なりが空でも同じ絵になる - 円は 2 つまで。3 円にすると領域が 7 つに増え、どの領域を指しているのかを言葉で補わなければ読めなくなる - 外れた側の行き先を書く。条件を満たさなかった候補の扱いが書かれていないと、この図は「切り捨ての通告」として読まれる - 2 つの条件は同じ重みで描く。円の大きさを変えると、集合の大小ではなく条件の重要度の差として読まれる 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: 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:
- 重なりに色を塗らない。2 枚の透過が重なった結果そのものが「両方」であり、3 つ目の色を置くと重なりが独立した区分に見える
- 重なりには数を置く。「ここが狙い目」とだけ書かれたベン図は、重なりが空でも同じ絵になる
- 円は 2 つまで。3 円にすると領域が 7 つに増え、どの領域を指しているのかを言葉で補わなければ読めなくなる
- 外れた側の行き先を書く。条件を満たさなかった候補の扱いが書かれていないと、この図は「切り捨ての通告」として読まれる
- 2 つの条件は同じ重みで描く。円の大きさを変えると、集合の大小ではなく条件の重要度の差として読まれる{
"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": [
"重なりに色を塗らない。2 枚の透過が重なった結果そのものが「両方」であり、3 つ目の色を置くと重なりが独立した区分に見える",
"重なりには数を置く。「ここが狙い目」とだけ書かれたベン図は、重なりが空でも同じ絵になる",
"円は 2 つまで。3 円にすると領域が 7 つに増え、どの領域を指しているのかを言葉で補わなければ読めなくなる",
"外れた側の行き先を書く。条件を満たさなかった候補の扱いが書かれていないと、この図は「切り捨ての通告」として読まれる",
"2 つの条件は同じ重みで描く。円の大きさを変えると、集合の大小ではなく条件の重要度の差として読まれる"
]
} /designs/venn-two-set-sweet-spot/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!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 — 全部入りには入れていない
/* 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 件に 行き先が無いと、この図は選定の説明ではなく切り捨ての通告として受け取られる。