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 ringName 28px / 700 / leading 1.3 ringCount 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 ## Constraints — dropping these breaks it - Do not give the rings different hues. Different colours read as different categories; these are one thing narrowed twice, and each ring contains the next - Make the outer rings lighter. The order of strength is the narrowing itself; reverse it and the centre reads as background - Put a number in every ring. Without them, concentric circles do not say whether the scope narrowed or the drawing merely has three layers - Never label the outer rings 'out of scope'. In scope but not yet started is a different statement from out of scope, and using the latter word breaks the agreement - Three rings at most. From the fourth the bands are too thin to hold their own labels 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/concentric-scope-rings/pattern.html.
/ai/designs/concentric-scope-rings.json
format: slide-16x9
density: low
layout:
kind: nested
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
ringName:
size: 28
weight: 700
leading: 1.3
ringCount:
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"
rules:
- Do not give the rings different hues. Different colours read as different categories; these are one thing narrowed twice, and each ring contains the next
- Make the outer rings lighter. The order of strength is the narrowing itself; reverse it and the centre reads as background
- Put a number in every ring. Without them, concentric circles do not say whether the scope narrowed or the drawing merely has three layers
- Never label the outer rings 'out of scope'. In scope but not yet started is a different statement from out of scope, and using the latter word breaks the agreement
- Three rings at most. From the fourth the bands are too thin to hold their own labels{
"format": "slide-16x9",
"density": "low",
"layout": {
"kind": "nested",
"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
},
"ringName": {
"size": 28,
"weight": 700,
"leading": 1.3
},
"ringCount": {
"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"
},
"rules": [
"Do not give the rings different hues. Different colours read as different categories; these are one thing narrowed twice, and each ring contains the next",
"Make the outer rings lighter. The order of strength is the narrowing itself; reverse it and the centre reads as background",
"Put a number in every ring. Without them, concentric circles do not say whether the scope narrowed or the drawing merely has three layers",
"Never label the outer rings 'out of scope'. In scope but not yet started is a different statement from out of scope, and using the latter word breaks the agreement",
"Three rings at most. From the fourth the bands are too thin to hold their own labels"
]
} /designs/concentric-scope-rings/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>今回の範囲 — 広い順に 3 つ、着手するのは中心だけ</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); }
/* 図は 620px 角。中身の段は 888 − 見出し約 131 − 脚注約 49 ＝ 約 708px なので、
下の 1 行（28 + 約 42）と合わせて収まる。増やすときは一緒に見直すこと。 */
.body {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
justify-items: center;
align-items: center;
row-gap: 28px;
}
.figure { display: block; }
/* 外側ほど薄い。濃さの順がそのまま「どこまで絞ったか」になる。 */
.ring-1 { fill: color-mix(in srgb, var(--accent) 12%, var(--ground)); }
.ring-2 { fill: color-mix(in srgb, var(--accent) 26%, var(--ground)); }
.ring-3 { fill: color-mix(in srgb, var(--accent) 44%, var(--ground)); }
.edge { stroke: var(--ground); stroke-width: 3; }
.ring-name { fill: var(--ink); font-size: 28px; font-weight: 700; line-height: 1.3; }
.ring-count { 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">今回の範囲 — 広い順に 3 つ、着手するのは中心だけ</h1>
<p class="window" data-type="window">基幹システム刷新 / 2026 年度 / 範囲の合意は 4 月の運営会議</p>
</div>
<div class="body">
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、
SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
<svg class="figure" width="620" height="620" viewBox="0 0 620 620">
<circle class="ring-1 edge" cx="310" cy="310" r="270"/>
<circle class="ring-2 edge" cx="310" cy="310" r="195"/>
<circle class="ring-3 edge" cx="310" cy="310" r="120"/>
<text class="ring-name" data-type="ringName" x="310" y="66" text-anchor="middle" dominant-baseline="central">全社の業務</text>
<text class="ring-count" data-type="ringCount" x="310" y="96" text-anchor="middle" dominant-baseline="central">18 部門・42 業務</text>
<text class="ring-name" x="310" y="141" text-anchor="middle" dominant-baseline="central">刷新の対象</text>
<text class="ring-count" x="310" y="171" text-anchor="middle" dominant-baseline="central">6 部門・11 業務</text>
<text class="ring-name" x="310" y="296" text-anchor="middle" dominant-baseline="central">第 1 段階</text>
<text class="ring-count" x="310" y="330" text-anchor="middle" dominant-baseline="central">2 部門・3 業務</text>
</svg>
<p class="conclusion" data-type="conclusion">外側の 2 つは範囲に含むが、今期は着手しない。順番であって、切り捨てではない</p>
</div>
<div class="foot" data-type="note">業務の数え方は業務一覧 v3 に従う。部門の統廃合があれば、同じ範囲でも数は動く。</div>
</div>
</div>
/designs/concentric-scope-rings/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 (285d19b503242c52)
*
* 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-34, U+36, U+38, U+76, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-304c, U+304f-3052, U+3057-305a, U+305f-3060, U+3063-3067, U+306a-306b, U+306e-3070, U+3080, U+3082, U+308a-308c, U+3094, U+3099, U+30b7-30ba, U+30c6-30c7, U+30e0, U+30fb, U+4e00, U+4e2d, U+4eca, U+4f1a, U+5074, U+5168, U+5207, U+5237, U+52d5, U+52d9, U+5408, U+540c, U+542b, U+55b6, U+56de, U+56f2, U+57fa, U+5916, U+5bfe, U+5e74, U+5e79, U+5e83, U+5ea6, U+5ec3, U+5f93, U+5fc3, U+610f, U+624b, U+6368, U+6570, U+65b0, U+65b9, U+6708, U+671f, U+696d, U+6bb5, U+756a, U+7740, U+793e, U+7b2c, U+7bc4, U+7d71, U+89a7, U+8b70, U+8c61, U+904b, U+90e8, U+9580, U+968e, U+9806;
}
@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-34, U+36, U+38, U+76, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-304c, U+304f-3052, U+3057-305a, U+305f-3060, U+3063-3067, U+306a-306b, U+306e-3070, U+3080, U+3082, U+308a-308c, U+3094, U+3099, U+30b7-30ba, U+30c6-30c7, U+30e0, U+30fb, U+4e00, U+4e2d, U+4eca, U+4f1a, U+5074, U+5168, U+5207, U+5237, U+52d5, U+52d9, U+5408, U+540c, U+542b, U+55b6, U+56de, U+56f2, U+57fa, U+5916, U+5bfe, U+5e74, U+5e79, U+5e83, U+5ea6, U+5ec3, U+5f93, U+5fc3, U+610f, U+624b, U+6368, U+6570, U+65b0, U+65b9, U+6708, U+671f, U+696d, U+6bb5, U+756a, U+7740, U+793e, U+7b2c, U+7bc4, U+7d71, U+89a7, U+8b70, U+8c61, U+904b, U+90e8, U+9580, U+968e, U+9806;
}
@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-34, U+36, U+38, U+76, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-304c, U+304f-3052, U+3057-305a, U+305f-3060, U+3063-3067, U+306a-306b, U+306e-3070, U+3080, U+3082, U+308a-308c, U+3094, U+3099, U+30b7-30ba, U+30c6-30c7, U+30e0, U+30fb, U+4e00, U+4e2d, U+4eca, U+4f1a, U+5074, U+5168, U+5207, U+5237, U+52d5, U+52d9, U+5408, U+540c, U+542b, U+55b6, U+56de, U+56f2, U+57fa, U+5916, U+5bfe, U+5e74, U+5e79, U+5e83, U+5ea6, U+5ec3, U+5f93, U+5fc3, U+610f, U+624b, U+6368, U+6570, U+65b0, U+65b9, U+6708, U+671f, U+696d, U+6bb5, U+756a, U+7740, U+793e, U+7b2c, U+7bc4, U+7d71, U+89a7, U+8b70, U+8c61, U+904b, U+90e8, U+9580, U+968e, U+9806;
}
範囲の合意が崩れるのは、たいてい「含むが今はやらない」と「そもそも対象外」が 同じ言葉で書かれたときである。同心円はその 2 つを描き分けられる数少ない形で、 外側の輪は含まれていることを図形として言い続ける。
輪ごとに色を変えたくなるが、変えた瞬間に 3 つは並列の区分になる。入れ子であることを 運んでいるのは輪の位置であって、色ではない。