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 step 44px / 700 / leading 1 period 26px / 500 / leading 1.4 name 30px / 700 / leading 1.35 detail 22px / 400 / leading 1.7 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 colour the stages differently. A reader will look for meaning in colour if it varies, and here the only thing carrying meaning is the order around the ring - Close the ring with an arrow from the last stage back to the first. Without that one arc this is a four-step procedure, not a cycle - Put the period at the centre. A cycle that never says how long one turn takes reads as a loop that simply runs forever - Keep the stage text outside the ring and leaning toward its node. Inside, the length of a sentence starts dictating the thickness of the ring - Four stages at most. Beyond five the nodes crowd and the eye can no longer follow which arc leads to which stage 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/cycle-four-stage-loop/pattern.html.
/ai/designs/cycle-four-stage-loop.json
format: slide-16x9
density: low
layout:
kind: radial
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
step:
size: 44
weight: 700
leading: 1
period:
size: 26
weight: 500
leading: 1.4
name:
size: 30
weight: 700
leading: 1.35
detail:
size: 22
weight: 400
leading: 1.7
note:
size: 16
weight: 400
leading: 1.6
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Do not colour the stages differently. A reader will look for meaning in colour if it varies, and here the only thing carrying meaning is the order around the ring
- Close the ring with an arrow from the last stage back to the first. Without that one arc this is a four-step procedure, not a cycle
- Put the period at the centre. A cycle that never says how long one turn takes reads as a loop that simply runs forever
- Keep the stage text outside the ring and leaning toward its node. Inside, the length of a sentence starts dictating the thickness of the ring
- Four stages at most. Beyond five the nodes crowd and the eye can no longer follow which arc leads to which stage{
"format": "slide-16x9",
"density": "low",
"layout": {
"kind": "radial",
"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
},
"step": {
"size": 44,
"weight": 700,
"leading": 1
},
"period": {
"size": 26,
"weight": 500,
"leading": 1.4
},
"name": {
"size": 30,
"weight": 700,
"leading": 1.35
},
"detail": {
"size": 22,
"weight": 400,
"leading": 1.7
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Do not colour the stages differently. A reader will look for meaning in colour if it varies, and here the only thing carrying meaning is the order around the ring",
"Close the ring with an arrow from the last stage back to the first. Without that one arc this is a four-step procedure, not a cycle",
"Put the period at the centre. A cycle that never says how long one turn takes reads as a loop that simply runs forever",
"Keep the stage text outside the ring and leaning toward its node. Inside, the length of a sentence starts dictating the thickness of the ring",
"Four stages at most. Beyond five the nodes crowd and the eye can no longer follow which arc leads to which stage"
]
} /designs/cycle-four-stage-loop/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>改善の 1 周 — 終わりが次の始まりになる 4 工程</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;
grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) 520px minmax(0, 1fr);
grid-template-areas:
". top . "
"left fig right"
". bottom . ";
align-items: center;
column-gap: 40px;
}
.figure { grid-area: fig; }
.ring { display: block; }
.track { fill: none; stroke: var(--rule); stroke-width: 3; }
.arc { fill: none; stroke: var(--accent); stroke-width: 3; }
.node { fill: var(--surface); stroke: var(--rule); stroke-width: 2; }
.step { fill: var(--accent); font-size: 44px; font-weight: 700; line-height: 1; }
.period { fill: var(--muted); font-size: 26px; font-weight: 500; line-height: 1.4; }
.stage-top { grid-area: top; text-align: center; }
.stage-right { grid-area: right; text-align: left; }
.stage-bottom { grid-area: bottom; text-align: center; }
.stage-left { grid-area: left; text-align: right; }
.name { font-size: 30px; font-weight: 700; line-height: 1.35; }
.detail { margin-top: 10px; font-size: 22px; font-weight: 400; line-height: 1.7; 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">改善の 1 周 — 終わりが次の始まりになる 4 工程</h1>
<p class="window" data-type="window">開発チーム 6 名 / 2026 年 4 月から運用 / 周の長さは変えない</p>
</div>
<!-- 節の並びは 1 → 2 → 3 → 4 の順でここに書く。見える位置は grid-area が決めるので、
書く順は画面の配置と切り離せる。読み上げ・本文の抽出・AI へ渡す
reproduction.code.html はこの順をそのまま読むので、環に沿った順序が
意味だと言っている版が 1 → 4 → 2 → 3 で並んでいてはいけない。 -->
<div class="body">
<div class="stage-top">
<div class="name" data-type="name">決める</div>
<div class="detail" data-type="detail">やらないことを先に決めて範囲を閉じる</div>
</div>
<div class="stage-right">
<div class="name">作る</div>
<div class="detail">1 周に収まる大きさへ削ってから着手する</div>
</div>
<div class="stage-bottom">
<div class="name">確かめる</div>
<div class="detail">使う人に見せ、役に立つかを測る</div>
</div>
<div class="stage-left">
<div class="name">振り返る</div>
<div class="detail">次の周で変える点を 1 つだけ決める</div>
</div>
<div class="figure">
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、
SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
<svg class="ring" width="520" height="520" viewBox="0 0 520 520">
<defs>
<marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
<path d="M0 0 L10 5 L0 10 Z" fill="var(--accent)"/>
</marker>
</defs>
<circle class="track" cx="260" cy="260" r="190"/>
<path class="arc" marker-end="url(#arrowhead)" d="M337.3 86.4 A190 190 0 0 1 433.6 182.7"/>
<path class="arc" marker-end="url(#arrowhead)" d="M433.6 337.3 A190 190 0 0 1 337.3 433.6"/>
<path class="arc" marker-end="url(#arrowhead)" d="M182.7 433.6 A190 190 0 0 1 86.4 337.3"/>
<path class="arc" marker-end="url(#arrowhead)" d="M86.4 182.7 A190 190 0 0 1 182.7 86.4"/>
<circle class="node" cx="260" cy="70" r="62"/>
<circle class="node" cx="450" cy="260" r="62"/>
<circle class="node" cx="260" cy="450" r="62"/>
<circle class="node" cx="70" cy="260" r="62"/>
<text class="step" data-type="step" x="260" y="70" text-anchor="middle" dominant-baseline="central">1</text>
<text class="step" x="450" y="260" text-anchor="middle" dominant-baseline="central">2</text>
<text class="step" x="260" y="450" text-anchor="middle" dominant-baseline="central">3</text>
<text class="step" x="70" y="260" text-anchor="middle" dominant-baseline="central">4</text>
<text class="period" data-type="period" x="260" y="260" text-anchor="middle" dominant-baseline="central">2 週間で 1 周</text>
</svg>
</div>
</div>
<div class="foot" data-type="note">工程の名前は組織によって違う。ここでは受け入れ条件・実装・検証・振り返りの 4 つを 1 周として数える。</div>
</div>
</div>
/designs/cycle-four-stage-loop/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 101 (29a181f8727b9fcc)
*
* 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+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3084, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+30c1-30c2, U+30e0, U+30fb-30fc, U+4eba, U+4ef6, U+4f5c, U+4f7f, U+5148, U+5165, U+524a, U+524d, U+53ce, U+53d7, U+540d, U+5468, U+5584, U+56f2, U+5909, U+5927, U+59cb, U+5b9f, U+5de5, U+5e74, U+5f79, U+624b, U+632f, U+6539, U+6570, U+6708, U+6761, U+691c, U+6b21, U+6c7a, U+6e2c, U+70b9, U+7528, U+767a, U+7740, U+78ba, U+7a0b, U+7acb, U+7bc4, U+7d42, U+7d44, U+7e54, U+88c5, U+898b, U+8a3c, U+8fd4, U+9031, U+904b, U+9055, U+9577, U+9589, U+958b, U+9593;
}
@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+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3084, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+30c1-30c2, U+30e0, U+30fb-30fc, U+4eba, U+4ef6, U+4f5c, U+4f7f, U+5148, U+5165, U+524a, U+524d, U+53ce, U+53d7, U+540d, U+5468, U+5584, U+56f2, U+5909, U+5927, U+59cb, U+5b9f, U+5de5, U+5e74, U+5f79, U+624b, U+632f, U+6539, U+6570, U+6708, U+6761, U+691c, U+6b21, U+6c7a, U+6e2c, U+70b9, U+7528, U+767a, U+7740, U+78ba, U+7a0b, U+7acb, U+7bc4, U+7d42, U+7d44, U+7e54, U+88c5, U+898b, U+8a3c, U+8fd4, U+9031, U+904b, U+9055, U+9577, U+9589, U+958b, U+9593;
}
@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+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-305c, U+305f-3060, U+3063-306b, U+306e-3070, U+3078-3079, U+307e, U+3081, U+3084, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+30c1-30c2, U+30e0, U+30fb-30fc, U+4eba, U+4ef6, U+4f5c, U+4f7f, U+5148, U+5165, U+524a, U+524d, U+53ce, U+53d7, U+540d, U+5468, U+5584, U+56f2, U+5909, U+5927, U+59cb, U+5b9f, U+5de5, U+5e74, U+5f79, U+624b, U+632f, U+6539, U+6570, U+6708, U+6761, U+691c, U+6b21, U+6c7a, U+6e2c, U+70b9, U+7528, U+767a, U+7740, U+78ba, U+7a0b, U+7acb, U+7bc4, U+7d42, U+7d44, U+7e54, U+88c5, U+898b, U+8a3c, U+8fd4, U+9031, U+904b, U+9055, U+9577, U+9589, U+958b, U+9593;
}
循環図が手順図と違うのは、戻りの 1 本だけである。その 1 本を描き忘れた循環図は 驚くほど多く、そうなると「4 つ目が終わったら解散」という別の意味の絵になる。
中心を空けておくのは、ドーナツと同じ理由ではない。ここに置くべきは母数ではなく 周の長さである。1 周が 2 週間なのか 1 年なのかで、同じ 4 工程がまったく違う 働き方を指す。