版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 96 右 140 下 96 左 140 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em / 行送り 1.3 window 20px / 500 / 行送り 1.5 side 20px / 500 / 行送り 1.4 layerName 28px / 700 / 行送り 1.3 layerQuestion 22px / 400 / 行送り 1.5 conclusion 26px / 500 / 行送り 1.6 note 16px / 400 / 行送り 1.6 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 ## 外すと崩れる点 - 層ごとに色を変えない。4 つは並列の区分ではなく、下ほど広く上を含む入れ子で、色を変えると 4 種類の原因に見える - 層ごとに「そこで答える問い」を置く。名前だけの層は、どこまで掘ったかを判定できず、掘ったふりが通る - 水面は 1 本だけ引く。見えている／見えていないの境目が 2 つ以上あると、何が隠れているのかを言えなくなる - 下ほど広く描く。深い層ほど多くの出来事を説明するので、狭く描くと「例外的な事情」に見えてしまう - 層は 4 つまで。5 つ目からは帯が細って問いが入らず、問いの入らない層は名前だけの層に戻る 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: 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:
- 層ごとに色を変えない。4 つは並列の区分ではなく、下ほど広く上を含む入れ子で、色を変えると 4 種類の原因に見える
- 層ごとに「そこで答える問い」を置く。名前だけの層は、どこまで掘ったかを判定できず、掘ったふりが通る
- 水面は 1 本だけ引く。見えている／見えていないの境目が 2 つ以上あると、何が隠れているのかを言えなくなる
- 下ほど広く描く。深い層ほど多くの出来事を説明するので、狭く描くと「例外的な事情」に見えてしまう
- 層は 4 つまで。5 つ目からは帯が細って問いが入らず、問いの入らない層は名前だけの層に戻る{
"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": [
"層ごとに色を変えない。4 つは並列の区分ではなく、下ほど広く上を含む入れ子で、色を変えると 4 種類の原因に見える",
"層ごとに「そこで答える問い」を置く。名前だけの層は、どこまで掘ったかを判定できず、掘ったふりが通る",
"水面は 1 本だけ引く。見えている／見えていないの境目が 2 つ以上あると、何が隠れているのかを言えなくなる",
"下ほど広く描く。深い層ほど多くの出来事を説明するので、狭く描くと「例外的な事情」に見えてしまう",
"層は 4 つまで。5 つ目からは帯が細って問いが入らず、問いの入らない層は名前だけの層に戻る"
]
} /designs/iceberg-visible-hidden/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!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 — 全部入りには入れていない
/* 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 本しか引かないのも同じ理由である。境目が増えるほど「見えていない」の 意味が薄まり、最後には濃淡の飾りになる。