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 side 20px / 500 / leading 1.4 layerName 28px / 700 / leading 1.3 layerQuestion 22px / 400 / leading 1.5 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 colour the layers differently. They are not four categories but a nesting in which each deeper layer contains the one above; different hues make them read as four kinds of cause - Give every layer the question it answers. Layers with only names cannot tell you how deep the analysis actually went, so stopping early passes as digging - Draw exactly one waterline. With more than one boundary between seen and unseen, the figure can no longer say what is hidden - Draw the deeper layers wider. A deeper layer explains more events, and drawing it narrow makes it look like a special case - Four layers at most. From the fifth the bands are too thin to hold their question, and a layer without its question is back to being only a name 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/iceberg-visible-hidden/pattern.html.
/ai/designs/iceberg-visible-hidden.json
format: slide-16x9
density: medium
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
side:
size: 20
weight: 500
leading: 1.4
layerName:
size: 28
weight: 700
leading: 1.3
layerQuestion:
size: 22
weight: 400
leading: 1.5
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 colour the layers differently. They are not four categories but a nesting in which each deeper layer contains the one above; different hues make them read as four kinds of cause
- Give every layer the question it answers. Layers with only names cannot tell you how deep the analysis actually went, so stopping early passes as digging
- Draw exactly one waterline. With more than one boundary between seen and unseen, the figure can no longer say what is hidden
- Draw the deeper layers wider. A deeper layer explains more events, and drawing it narrow makes it look like a special case
- Four layers at most. From the fifth the bands are too thin to hold their question, and a layer without its question is back to being only a name{
"format": "slide-16x9",
"density": "medium",
"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
},
"side": {
"size": 20,
"weight": 500,
"leading": 1.4
},
"layerName": {
"size": 28,
"weight": 700,
"leading": 1.3
},
"layerQuestion": {
"size": 22,
"weight": 400,
"leading": 1.5
},
"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 colour the layers differently. They are not four categories but a nesting in which each deeper layer contains the one above; different hues make them read as four kinds of cause",
"Give every layer the question it answers. Layers with only names cannot tell you how deep the analysis actually went, so stopping early passes as digging",
"Draw exactly one waterline. With more than one boundary between seen and unseen, the figure can no longer say what is hidden",
"Draw the deeper layers wider. A deeper layer explains more events, and drawing it narrow makes it look like a special case",
"Four layers at most. From the fifth the bands are too thin to hold their question, and a layer without its question is back to being only a name"
]
} /designs/iceberg-visible-hidden/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() で名指す。
区分色は持たない —— 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); }
/* 図 620 + 結論で中身の段（約 708px）に収まる。増やすときは一緒に見直すこと。 */
.body {
display: grid;
grid-template-rows: auto auto;
align-content: center;
justify-items: center;
row-gap: 28px;
}
.figure { display: block; }
/* 下ほど濃い。濃さの順がそのまま深さで、色の違いではない。 */
.layer-1 { fill: color-mix(in srgb, var(--accent) 10%, var(--ground)); }
.layer-2 { fill: color-mix(in srgb, var(--accent) 22%, var(--ground)); }
.layer-3 { fill: color-mix(in srgb, var(--accent) 34%, var(--ground)); }
.layer-4 { fill: color-mix(in srgb, var(--accent) 46%, var(--ground)); }
.edge { stroke: var(--ground); stroke-width: 3; }
.waterline { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 12 9; }
.side { fill: var(--muted); font-size: 20px; font-weight: 500; line-height: 1.4; }
.layer-name { fill: var(--ink); font-size: 28px; font-weight: 700; line-height: 1.3; }
.layer-question { fill: var(--ink); font-size: 22px; font-weight: 400; line-height: 1.5; }
.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">対象は 9 月の障害 3 件 / 層の名前は運用基準 v2 / 問いは各層で必ず答える</p>
</div>
<div class="body">
<!-- 等倍で描く。viewBox と width/height を一致させてあるので、
SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->
<svg class="figure" width="1100" height="620" viewBox="0 0 1100 620">
<polygon class="layer-1 edge" points="420,40 680,40 730,160 370,160"/>
<polygon class="layer-2 edge" points="370,160 730,160 810,310 290,310"/>
<polygon class="layer-3 edge" points="290,310 810,310 880,455 220,455"/>
<polygon class="layer-4 edge" points="220,455 880,455 950,600 150,600"/>
<path class="waterline" d="M60 160H1040"/>
<text class="side" data-type="side" x="70" y="122" text-anchor="start" dominant-baseline="central">見えている</text>
<text class="side" x="70" y="200" text-anchor="start" dominant-baseline="central">見えていない</text>
<text class="layer-name" data-type="layerName" x="550" y="86" text-anchor="middle" dominant-baseline="central">出来事</text>
<text class="layer-question" data-type="layerQuestion" x="550" y="122" text-anchor="middle" dominant-baseline="central">何が起きたか</text>
<text class="layer-name" x="550" y="218" text-anchor="middle" dominant-baseline="central">パターン</text>
<text class="layer-question" x="550" y="256" text-anchor="middle" dominant-baseline="central">それは何度目か</text>
<text class="layer-name" x="550" y="365" text-anchor="middle" dominant-baseline="central">仕組み</text>
<text class="layer-question" x="550" y="403" text-anchor="middle" dominant-baseline="central">何がそれを起こし続けているか</text>
<text class="layer-name" x="550" y="510" text-anchor="middle" dominant-baseline="central">前提</text>
<text class="layer-question" x="550" y="548" text-anchor="middle" dominant-baseline="central">なぜそれを当たり前だと思っているか</text>
</svg>
<p class="conclusion" data-type="conclusion">出来事だけを直すと、同じ出来事がまた起きる。手を入れられる場所は下の 2 層にしかない</p>
</div>
<div class="foot" data-type="note">層の名前は組織によって違う。ここでは出来事・パターン・仕組み・前提の 4 層で数える。</div>
</div>
</div>
/designs/iceberg-visible-hidden/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 87 (ed9c48f39d66329b)
*
* 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+32-34, U+39, U+76, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-3054, U+3057-3060, U+3063, U+3066-306b, U+306e-3071, U+307e-307f, U+3088-308c, U+3092, U+3094, U+3099-309a, U+30bf-30c0, U+30cf-30d1, U+30f3, U+30fb-30fc, U+4e0b, U+4e8b, U+4ed5, U+4ef6, U+4f55, U+5165, U+51fa, U+524d, U+5404, U+540c-540d, U+554f, U+57fa, U+5834, U+5bb3, U+5bfe, U+5c64, U+5ea6, U+5f53, U+5fc5, U+601d, U+6240, U+624b, U+63d0, U+6570, U+6708, U+6765, U+6e96, U+7528, U+76ee, U+76f4, U+7b54, U+7d44, U+7d9a, U+7e54, U+898b, U+8c61, U+8d77, U+904b, U+9055, U+969c;
}
@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+32-34, U+39, U+76, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-3054, U+3057-3060, U+3063, U+3066-306b, U+306e-3071, U+307e-307f, U+3088-308c, U+3092, U+3094, U+3099-309a, U+30bf-30c0, U+30cf-30d1, U+30f3, U+30fb-30fc, U+4e0b, U+4e8b, U+4ed5, U+4ef6, U+4f55, U+5165, U+51fa, U+524d, U+5404, U+540c-540d, U+554f, U+57fa, U+5834, U+5bb3, U+5bfe, U+5c64, U+5ea6, U+5f53, U+5fc5, U+601d, U+6240, U+624b, U+63d0, U+6570, U+6708, U+6765, U+6e96, U+7528, U+76ee, U+76f4, U+7b54, U+7d44, U+7d9a, U+7e54, U+898b, U+8c61, U+8d77, U+904b, U+9055, U+969c;
}
@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+32-34, U+39, U+76, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-304e, U+3051-3054, U+3057-3060, U+3063, U+3066-306b, U+306e-3071, U+307e-307f, U+3088-308c, U+3092, U+3094, U+3099-309a, U+30bf-30c0, U+30cf-30d1, U+30f3, U+30fb-30fc, U+4e0b, U+4e8b, U+4ed5, U+4ef6, U+4f55, U+5165, U+51fa, U+524d, U+5404, U+540c-540d, U+554f, U+57fa, U+5834, U+5bb3, U+5bfe, U+5c64, U+5ea6, U+5f53, U+5fc5, U+601d, U+6240, U+624b, U+63d0, U+6570, U+6708, U+6765, U+6e96, U+7528, U+76ee, U+76f4, U+7b54, U+7d44, U+7d9a, U+7e54, U+898b, U+8c61, U+8d77, U+904b, U+9055, U+969c;
}
氷山の図が形骸化するのは、層に名前しか書かれていないときである。「仕組み」と 書かれた帯を指して「ここまで掘りました」と言うことは誰にでもできる。層ごとに そこで答える問いを置くと、掘ったかどうかは答えの有無で決まる。
水面を 1 本しか引かないのも同じ理由である。境目が増えるほど「見えていない」の 意味が薄まり、最後には濃淡の飾りになる。