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 sectionLabel 20px / 500 / leading 1.4 nodeName 22px / 700 / leading 1.3 insetTitle 26px / 700 / leading 1.3 itemNote 20px / 400 / leading 1.5 note 16px / 400 / leading 1.6 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Exactly two lines. One reads as a leader line; three or more stop saying where the magnified region ends - Do not fill the framed box in the whole. Frame and lines alone say 'this is what is enlarged'; a fill makes it ambiguous with 'this is the important one' - State that the overview has no scale. If box sizes are read as meaningful, the very act of magnifying becomes a lie - Magnify one place only. Two blow-ups cross their lines, the correspondence stops being readable, and the overview loses its job - Put finer information in the blow-up. Enlarged at the same granularity, it is not a magnification but wasted space 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/zoom-inset-whole-detail/pattern.html.
/ai/designs/zoom-inset-whole-detail.json
format: slide-16x9
density: medium
layout:
kind: annotated
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
sectionLabel:
size: 20
weight: 500
leading: 1.4
nodeName:
size: 22
weight: 700
leading: 1.3
insetTitle:
size: 26
weight: 700
leading: 1.3
itemNote:
size: 20
weight: 400
leading: 1.5
note:
size: 16
weight: 400
leading: 1.6
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Exactly two lines. One reads as a leader line; three or more stop saying where the magnified region ends
- Do not fill the framed box in the whole. Frame and lines alone say 'this is what is enlarged'; a fill makes it ambiguous with 'this is the important one'
- State that the overview has no scale. If box sizes are read as meaningful, the very act of magnifying becomes a lie
- Magnify one place only. Two blow-ups cross their lines, the correspondence stops being readable, and the overview loses its job
- Put finer information in the blow-up. Enlarged at the same granularity, it is not a magnification but wasted space{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "annotated",
"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
},
"sectionLabel": {
"size": 20,
"weight": 500,
"leading": 1.4
},
"nodeName": {
"size": 22,
"weight": 700,
"leading": 1.3
},
"insetTitle": {
"size": 26,
"weight": 700,
"leading": 1.3
},
"itemNote": {
"size": 20,
"weight": 400,
"leading": 1.5
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Exactly two lines. One reads as a leader line; three or more stop saying where the magnified region ends",
"Do not fill the framed box in the whole. Frame and lines alone say 'this is what is enlarged'; a fill makes it ambiguous with 'this is the important one'",
"State that the overview has no scale. If box sizes are read as meaningful, the very act of magnifying becomes a lie",
"Magnify one place only. Two blow-ups cross their lines, the correspondence stops being readable, and the overview loses its job",
"Put finer information in the blow-up. Enlarged at the same granularity, it is not a magnification but wasted space"
]
} /designs/zoom-inset-whole-detail/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>全体構成と、いま話している一点 — 2 つの縮尺を線で結ぶ</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* 色のリテラルはこの :root にだけ置く。以下の規則は var() か color-mix() で名指す。
区分色は持たない —— 強調するのは「いま話している一点」の 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; justify-items: center; }
.figure { display: block; }
.node { fill: var(--surface); stroke: var(--rule); stroke-width: 2; }
.flow { fill: none; stroke: var(--muted); stroke-width: 2; }
/* 拡大しているのがどこかは、枠と 2 本の線だけで言う。全体側の箱を塗って
しまうと、拡大の対象なのか「重要な構成要素」なのかが区別できない。 */
.frame { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 7; }
.cone { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 10 7; }
.panel { fill: var(--ground); stroke: var(--accent); stroke-width: 3; }
.item { fill: var(--surface); stroke: var(--rule); stroke-width: 2; }
.section-label { fill: var(--muted); font-size: 20px; font-weight: 500; line-height: 1.4; }
.node-name { fill: var(--ink); font-size: 22px; font-weight: 700; line-height: 1.3; }
.inset-title { fill: var(--ink); font-size: 26px; font-weight: 700; line-height: 1.3; }
.item-note { fill: var(--muted); font-size: 20px; font-weight: 400; line-height: 1.5; }
.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">全体構成と、いま話している一点 — 2 つの縮尺を線で結ぶ</h1>
<p class="window" data-type="window">対象は会員基盤の刷新 / 全体図は設計書 v4 の再掲 / 拡大は今回の変更範囲</p>
</div>
<div class="body">
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、
SVG の中の文字の級数は版面の px とそのまま同じ数字になる。
画像は置かない —— 公開されるのは版と font.css と woff2 だけなので、
隣に置いた画像は手元でだけ出て、公開版では静かに欠ける。 -->
<svg class="figure" width="1640" height="600" viewBox="0 0 1640 600">
<text class="section-label" data-type="sectionLabel" x="40" y="22" text-anchor="start" dominant-baseline="central">全体構成</text>
<rect class="node" x="40" y="46" width="200" height="64" rx="8"/>
<text class="node-name" data-type="nodeName" x="140" y="78" text-anchor="middle" dominant-baseline="central">利用者</text>
<rect class="node" x="40" y="146" width="200" height="64" rx="8"/>
<text class="node-name" x="140" y="178" text-anchor="middle" dominant-baseline="central">画面</text>
<rect class="node" x="40" y="246" width="200" height="64" rx="8"/>
<text class="node-name" x="140" y="278" text-anchor="middle" dominant-baseline="central">API</text>
<rect class="node" x="40" y="346" width="200" height="64" rx="8"/>
<text class="node-name" x="140" y="378" text-anchor="middle" dominant-baseline="central">データベース</text>
<path class="flow" d="M140 110v36M140 210v36M140 310v36M240 278h56"/>
<rect class="node" x="300" y="246" width="200" height="64" rx="8"/>
<text class="node-name" x="400" y="278" text-anchor="middle" dominant-baseline="central">認証基盤</text>
<rect class="frame" x="288" y="234" width="224" height="88" rx="12"/>
<path class="cone" d="M512 234L760 40M512 322L760 560"/>
<text class="section-label" x="760" y="22" text-anchor="start" dominant-baseline="central">拡大</text>
<rect class="panel" x="760" y="40" width="840" height="520" rx="12"/>
<text class="inset-title" data-type="insetTitle" x="800" y="90" text-anchor="start" dominant-baseline="central">認証基盤の中身</text>
<rect class="item" x="800" y="130" width="760" height="120" rx="8"/>
<text class="node-name" x="830" y="190" text-anchor="start" dominant-baseline="central">トークン発行</text>
<text class="item-note" x="1530" y="190" text-anchor="end" dominant-baseline="central">有効期限 15 分</text>
<rect class="item" x="800" y="272" width="760" height="120" rx="8"/>
<text class="node-name" x="830" y="332" text-anchor="start" dominant-baseline="central">失効リスト</text>
<text class="item-note" x="1530" y="332" text-anchor="end" dominant-baseline="central">毎分の同期</text>
<rect class="item" x="800" y="414" width="760" height="120" rx="8"/>
<text class="node-name" x="830" y="474" text-anchor="start" dominant-baseline="central">監査ログ</text>
<text class="item-note" x="1530" y="474" text-anchor="end" dominant-baseline="central">1 年保持</text>
</svg>
</div>
<div class="foot" data-type="note">全体図は縮尺を持たない。箱の大きさと距離には意味が無く、意味を持つのは繋がりと、枠が指す一点だけ。</div>
</div>
</div>
/designs/zoom-inset-whole-detail/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 112 (9ffd9bf3f903768c)
*
* 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, U+31-32, U+34-35, U+41, U+49, U+50, U+76, U+2014, U+3001-3002, U+3044, U+304b-3052, U+3055-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+307e, U+308a-308b, U+3092, U+3099, U+30af-30b0, U+30b9-30ba, U+30bf-30c0, U+30c6-30c9, U+30d8-30d9, U+30ea, U+30ed, U+30f3, U+30fc, U+4e00, U+4e2d, U+4eca, U+4f1a, U+4f53, U+4fdd, U+5168, U+518d, U+5206, U+5229, U+5237, U+52b9, U+540c, U+5473, U+54e1, U+56de, U+56f2-56f3, U+57fa, U+5909, U+5927, U+5931, U+5bfe, U+5c3a, U+5e74, U+610f, U+6210, U+62e1, U+6301, U+6307, U+63b2, U+65b0, U+66f4, U+66f8, U+6709, U+671f, U+67a0, U+67fb, U+69cb, U+6bce, U+70b9, U+7121, U+7528, U+753b, U+767a, U+76e3-76e4, U+7bb1, U+7bc4, U+7d50, U+7dda, U+7e2e, U+7e4b, U+8005, U+884c, U+8a08, U+8a2d, U+8a3c, U+8a71, U+8a8d, U+8c61, U+8ddd, U+8eab, U+9650, U+96e2, U+9762;
}
@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, U+31-32, U+34-35, U+41, U+49, U+50, U+76, U+2014, U+3001-3002, U+3044, U+304b-3052, U+3055-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+307e, U+308a-308b, U+3092, U+3099, U+30af-30b0, U+30b9-30ba, U+30bf-30c0, U+30c6-30c9, U+30d8-30d9, U+30ea, U+30ed, U+30f3, U+30fc, U+4e00, U+4e2d, U+4eca, U+4f1a, U+4f53, U+4fdd, U+5168, U+518d, U+5206, U+5229, U+5237, U+52b9, U+540c, U+5473, U+54e1, U+56de, U+56f2-56f3, U+57fa, U+5909, U+5927, U+5931, U+5bfe, U+5c3a, U+5e74, U+610f, U+6210, U+62e1, U+6301, U+6307, U+63b2, U+65b0, U+66f4, U+66f8, U+6709, U+671f, U+67a0, U+67fb, U+69cb, U+6bce, U+70b9, U+7121, U+7528, U+753b, U+767a, U+76e3-76e4, U+7bb1, U+7bc4, U+7d50, U+7dda, U+7e2e, U+7e4b, U+8005, U+884c, U+8a08, U+8a2d, U+8a3c, U+8a71, U+8a8d, U+8c61, U+8ddd, U+8eab, U+9650, U+96e2, U+9762;
}
@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, U+31-32, U+34-35, U+41, U+49, U+50, U+76, U+2014, U+3001-3002, U+3044, U+304b-3052, U+3055-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+307e, U+308a-308b, U+3092, U+3099, U+30af-30b0, U+30b9-30ba, U+30bf-30c0, U+30c6-30c9, U+30d8-30d9, U+30ea, U+30ed, U+30f3, U+30fc, U+4e00, U+4e2d, U+4eca, U+4f1a, U+4f53, U+4fdd, U+5168, U+518d, U+5206, U+5229, U+5237, U+52b9, U+540c, U+5473, U+54e1, U+56de, U+56f2-56f3, U+57fa, U+5909, U+5927, U+5931, U+5bfe, U+5c3a, U+5e74, U+610f, U+6210, U+62e1, U+6301, U+6307, U+63b2, U+65b0, U+66f4, U+66f8, U+6709, U+671f, U+67a0, U+67fb, U+69cb, U+6bce, U+70b9, U+7121, U+7528, U+753b, U+767a, U+76e3-76e4, U+7bb1, U+7bc4, U+7d50, U+7dda, U+7e2e, U+7e4b, U+8005, U+884c, U+8a08, U+8a2d, U+8a3c, U+8a71, U+8a8d, U+8c61, U+8ddd, U+8eab, U+9650, U+96e2, U+9762;
}
構成の話が長くなると、聞き手は「いまどこの話か」を見失う。全体図を毎回 出し直すのは重く、出さないと迷子になる。拡大図はその中間で、全体を小さく 残したまま一点だけを詳しく見せる。
2 本の線が要点である。1 本では引き出し線と区別が付かず、3 本以上では拡大の 範囲がどこまでなのかを言えなくなる。2 本が張る三角形が、そのまま「ここから ここまでを大きくした」という宣言になる。