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 category 24px / 700 / leading 1.3 cause 20px / 400 / leading 1.5 effectName 26px / 700 / leading 1.3 note 16px / 400 / leading 1.6 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Fix the categories before collecting causes. Derive them from what came up and the order of mention becomes the apparent structure - One effect only. Two heads on the spine and the figure ends without saying which causes feed which - Do not colour the categories. They are not four different things but four bundles of branches feeding one result - State causes as facts. A judgement like 'low awareness' on a branch leaves nothing anyone can act on - Four to six categories. Three is too coarse; past seven the branches overlap and a cause can no longer be traced to its branch 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/fishbone-cause-categories/pattern.html.
/ai/designs/fishbone-cause-categories.json
format: slide-16x9
density: high
layout:
kind: tree
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
category:
size: 24
weight: 700
leading: 1.3
cause:
size: 20
weight: 400
leading: 1.5
effectName:
size: 26
weight: 700
leading: 1.3
note:
size: 16
weight: 400
leading: 1.6
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Fix the categories before collecting causes. Derive them from what came up and the order of mention becomes the apparent structure
- One effect only. Two heads on the spine and the figure ends without saying which causes feed which
- Do not colour the categories. They are not four different things but four bundles of branches feeding one result
- State causes as facts. A judgement like 'low awareness' on a branch leaves nothing anyone can act on
- Four to six categories. Three is too coarse; past seven the branches overlap and a cause can no longer be traced to its branch{
"format": "slide-16x9",
"density": "high",
"layout": {
"kind": "tree",
"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
},
"category": {
"size": 24,
"weight": 700,
"leading": 1.3
},
"cause": {
"size": 20,
"weight": 400,
"leading": 1.5
},
"effectName": {
"size": 26,
"weight": 700,
"leading": 1.3
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Fix the categories before collecting causes. Derive them from what came up and the order of mention becomes the apparent structure",
"One effect only. Two heads on the spine and the figure ends without saying which causes feed which",
"Do not colour the categories. They are not four different things but four bundles of branches feeding one result",
"State causes as facts. A judgement like 'low awareness' on a branch leaves nothing anyone can act on",
"Four to six categories. Three is too coarse; past seven the branches overlap and a cause can no longer be traced to its branch"
]
} /designs/fishbone-cause-categories/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>納期が遅れる要因 — 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() で名指す。
区分色は持たない —— 分類は 4 種類の「違うもの」ではなく、同じ 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; }
.spine { fill: none; stroke: var(--ink); stroke-width: 3; }
.branch { fill: none; stroke: var(--muted); stroke-width: 2.5; }
.twig { fill: none; stroke: var(--rule); stroke-width: 2; }
.effect { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.category { fill: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.3; }
.cause { fill: var(--muted); font-size: 20px; font-weight: 400; line-height: 1.5; }
.effect-name { fill: var(--ink); font-size: 26px; font-weight: 700; line-height: 1.3; }
.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">納期が遅れる要因 — 4 つに分けて、手が届くものを選ぶ</h1>
<p class="window" data-type="window">対象は 9 月に完了した 12 件 / 分類は人・手順・道具・情報 / 挙げた順ではなく分類で並べる</p>
</div>
<div class="body">
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、
SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
<svg class="figure" width="1640" height="560" viewBox="0 0 1640 560">
<defs>
<marker id="spinehead" 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(--ink)"/>
</marker>
</defs>
<path class="spine" marker-end="url(#spinehead)" d="M60 280H1272"/>
<path class="branch" d="M420 280L300 90M860 280L740 90M420 280L300 470M860 280L740 470"/>
<path class="twig" d="M378 213.5h-40M336 147h-40M818 213.5h-40M776 147h-40M378 346.5h-40M336 413h-40M818 346.5h-40M776 413h-40"/>
<text class="category" data-type="category" x="300" y="60" text-anchor="middle" dominant-baseline="central">人</text>
<text class="category" x="740" y="60" text-anchor="middle" dominant-baseline="central">手順</text>
<text class="category" x="300" y="502" text-anchor="middle" dominant-baseline="central">道具</text>
<text class="category" x="740" y="502" text-anchor="middle" dominant-baseline="central">情報</text>
<text class="cause" data-type="cause" x="330" y="213.5" text-anchor="end" dominant-baseline="central">レビューできる人が 2 名</text>
<text class="cause" x="288" y="147" text-anchor="end" dominant-baseline="central">兼務で 4 割の稼働</text>
<text class="cause" x="770" y="213.5" text-anchor="end" dominant-baseline="central">受入条件が着手後に決まる</text>
<text class="cause" x="728" y="147" text-anchor="end" dominant-baseline="central">差し戻しの基準が人による</text>
<text class="cause" x="330" y="346.5" text-anchor="end" dominant-baseline="central">検証環境が 1 つしかない</text>
<text class="cause" x="288" y="413" text-anchor="end" dominant-baseline="central">本番同等の準備に 2 日</text>
<text class="cause" x="770" y="346.5" text-anchor="end" dominant-baseline="central">仕様の版が 3 つ並存</text>
<text class="cause" x="728" y="413" text-anchor="end" dominant-baseline="central">変更の通知が口頭</text>
<rect class="effect" x="1290" y="215" width="320" height="130" rx="10"/>
<text class="effect-name" data-type="effectName" x="1450" y="280" text-anchor="middle" dominant-baseline="central">納期が 2 週間遅れる</text>
</svg>
</div>
<div class="foot" data-type="note">分類は挙げた順ではなく人・手順・道具・情報で固定する。分類を後から作ると、思いついた順が原因の構造に見える。</div>
</div>
</div>
/designs/fishbone-cause-categories/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 (7d009289d68d811f)
*
* 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-34, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+3078-3079, U+307e, U+3082, U+3088-3089, U+308b-308c, U+3092, U+3099, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e26, U+4e86, U+4eba, U+4ed5, U+4ef6, U+4f5c, U+5099, U+50cd, U+5165, U+5177, U+517c, U+5206, U+5272, U+52d9, U+539f, U+53d7, U+53e3, U+540c-540d, U+56e0, U+56fa, U+57fa, U+5831, U+5883, U+5909, U+5b58, U+5b8c, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5f8c, U+601d, U+60c5, U+623b, U+624b, U+6319, U+65e5, U+66f4, U+6708, U+671f, U+672c, U+6761, U+691c, U+69cb, U+69d8, U+6c7a, U+6e96, U+7248, U+74b0, U+756a, U+7740, U+77e5, U+7a3c, U+7b49, U+7d0d, U+8981, U+898b, U+8a3c, U+8c61, U+901a, U+9020, U+9031, U+9045, U+9053, U+9078, U+9593, U+9806, U+982d, U+985e;
}
@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-34, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+3078-3079, U+307e, U+3082, U+3088-3089, U+308b-308c, U+3092, U+3099, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e26, U+4e86, U+4eba, U+4ed5, U+4ef6, U+4f5c, U+5099, U+50cd, U+5165, U+5177, U+517c, U+5206, U+5272, U+52d9, U+539f, U+53d7, U+53e3, U+540c-540d, U+56e0, U+56fa, U+57fa, U+5831, U+5883, U+5909, U+5b58, U+5b8c, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5f8c, U+601d, U+60c5, U+623b, U+624b, U+6319, U+65e5, U+66f4, U+6708, U+671f, U+672c, U+6761, U+691c, U+69cb, U+69d8, U+6c7a, U+6e96, U+7248, U+74b0, U+756a, U+7740, U+77e5, U+7a3c, U+7b49, U+7d0d, U+8981, U+898b, U+8a3c, U+8c61, U+901a, U+9020, U+9031, U+9045, U+9053, U+9078, U+9593, U+9806, U+982d, U+985e;
}
@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-34, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3064-306b, U+306e-3070, U+3075-3076, U+3078-3079, U+307e, U+3082, U+3088-3089, U+308b-308c, U+3092, U+3099, U+30d2-30d3, U+30e5, U+30ec, U+30fb-30fc, U+4e26, U+4e86, U+4eba, U+4ed5, U+4ef6, U+4f5c, U+5099, U+50cd, U+5165, U+5177, U+517c, U+5206, U+5272, U+52d9, U+539f, U+53d7, U+53e3, U+540c-540d, U+56e0, U+56fa, U+57fa, U+5831, U+5883, U+5909, U+5b58, U+5b8c, U+5b9a, U+5bfe, U+5c4a, U+5dee, U+5f8c, U+601d, U+60c5, U+623b, U+624b, U+6319, U+65e5, U+66f4, U+6708, U+671f, U+672c, U+6761, U+691c, U+69cb, U+69d8, U+6c7a, U+6e96, U+7248, U+74b0, U+756a, U+7740, U+77e5, U+7a3c, U+7b49, U+7d0d, U+8981, U+898b, U+8a3c, U+8c61, U+901a, U+9020, U+9031, U+9045, U+9053, U+9078, U+9593, U+9806, U+982d, U+985e;
}
特性要因図が形骸化するのは、分類を後から作ったときである。出てきた原因を眺めて 「これは人の話、これは道具の話」と括ると、分類はその日の発言の要約になり、 次に同じ図を描いたときにまったく違う骨組みが出てくる。
原因を事実の形で書くのも同じ理由である。「意識が低い」は枝に置けるが、そこから 打てる手が無い。「レビューできる人が 2 名」なら、増やすか減らすかの話になる。