版の配色
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 marker 26px / 700 / 行送り 1.2 levelName 24px / 700 / 行送り 1.3 levelNote 20px / 400 / 行送り 1.6 conclusion 26px / 500 / 行送り 1.6 note 16px / 400 / 行送り 1.6 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 ## 外すと崩れる点 - 段ごとに「満たしたと言える条件」を書く。条件の無い成熟度は自己申告になり、2 段目か 3 段目かで会議が終わる - 段に色を与えない。5 つの段は 5 種類ではなく 1 本の尺度の目盛りで、色を変えると並列の区分に見える - 現在地と目標だけを印す。途中の段に印を足すと、階段が計画表に変わって「いつ」の話が始まる - 段を飛ばせるように描かない。高さが積み上がって見えるのは、下の段が上の段の前提だからである - 上がる手段が変わる場所を結論に書く。道具で上がれる段と、人を置かないと上がれない段の境目が、この図で唯一の決定点である 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/maturity-staircase-now-target/pattern.html
/ai/designs/maturity-staircase-now-target.json
format: slide-16x9
density: medium
layout:
kind: axis
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
marker:
size: 26
weight: 700
leading: 1.2
levelName:
size: 24
weight: 700
leading: 1.3
levelNote:
size: 20
weight: 400
leading: 1.6
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:
- 段ごとに「満たしたと言える条件」を書く。条件の無い成熟度は自己申告になり、2 段目か 3 段目かで会議が終わる
- 段に色を与えない。5 つの段は 5 種類ではなく 1 本の尺度の目盛りで、色を変えると並列の区分に見える
- 現在地と目標だけを印す。途中の段に印を足すと、階段が計画表に変わって「いつ」の話が始まる
- 段を飛ばせるように描かない。高さが積み上がって見えるのは、下の段が上の段の前提だからである
- 上がる手段が変わる場所を結論に書く。道具で上がれる段と、人を置かないと上がれない段の境目が、この図で唯一の決定点である{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"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
},
"marker": {
"size": 26,
"weight": 700,
"leading": 1.2
},
"levelName": {
"size": 24,
"weight": 700,
"leading": 1.3
},
"levelNote": {
"size": 20,
"weight": 400,
"leading": 1.6
},
"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": [
"段ごとに「満たしたと言える条件」を書く。条件の無い成熟度は自己申告になり、2 段目か 3 段目かで会議が終わる",
"段に色を与えない。5 つの段は 5 種類ではなく 1 本の尺度の目盛りで、色を変えると並列の区分に見える",
"現在地と目標だけを印す。途中の段に印を足すと、階段が計画表に変わって「いつ」の話が始まる",
"段を飛ばせるように描かない。高さが積み上がって見えるのは、下の段が上の段の前提だからである",
"上がる手段が変わる場所を結論に書く。道具で上がれる段と、人を置かないと上がれない段の境目が、この図で唯一の決定点である"
]
} /designs/maturity-staircase-now-target/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>運用の成熟度 — いま 2 段目、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() で名指す。
区分色は持たない —— 段は 5 つの区分ではなく 1 本の尺度の目盛りなので、
色で分けると「5 種類の運用」に見えてしまう。 */
: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; row-gap: 44px; }
.stairs { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 12px; }
.step { display: grid; grid-template-rows: 64px 400px auto; align-items: end; }
/* 印は段そのものに付ける。全部を同じ高さに並べると、段の高さが違うぶん
「いま」だけが自分の段から離れて浮き、2 つの印が別のものを指しているように見える。
上の 64px は、いちばん高い段の印がはみ出さないための余地。 */
.marker { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 14px; white-space: nowrap; padding: 7px 20px; border-radius: 999px; font-size: 26px; font-weight: 700; line-height: 1.2; }
/* 地の色を強調の上に抜かない。抜くと `emphasis.via: ["fill"]` の宣言が要り、
宣言の無い版に配色プリセットを当てると読めない取り合わせが通ってしまう。 */
.marker-now { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--ground)); }
.marker-target { color: var(--muted); background: var(--surface); }
.bar { position: relative; background: var(--surface); border-top: 5px solid var(--rule); }
.h1 { height: 120px; }
.h2 { height: 190px; }
.h3 { height: 260px; }
.h4 { height: 330px; }
.h5 { height: 400px; }
.step-now .bar { background: color-mix(in srgb, var(--accent) 16%, var(--ground)); border-top-color: var(--accent); }
.step-target .bar { background: color-mix(in srgb, var(--accent) 6%, var(--ground)); border-top-style: dashed; border-top-color: var(--accent); }
.level-name { margin-top: 20px; font-size: 24px; font-weight: 700; line-height: 1.3; }
.level-note { margin-top: 8px; font-size: 20px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.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">運用の成熟度 — いま 2 段目、1 年後に 4 段目</h1>
<p class="window" data-type="window">対象は障害対応の運用 / 評価は 9 月の内部監査 / 段の定義は運用基準 v2</p>
</div>
<div class="body">
<div class="stairs">
<div class="step">
<span></span>
<div class="bar h1"></div>
<div>
<div class="level-name" data-type="levelName">その場対応</div>
<div class="level-note" data-type="levelNote">担当者の記憶で直す</div>
</div>
</div>
<div class="step step-now">
<span></span>
<div class="bar h2"><span class="marker marker-now" data-type="marker">いま</span></div>
<div>
<div class="level-name">手順がある</div>
<div class="level-note">手順書どおりに直せる</div>
</div>
</div>
<div class="step">
<span></span>
<div class="bar h3"></div>
<div>
<div class="level-name">記録が残る</div>
<div class="level-note">何が起きたか後から追える</div>
</div>
</div>
<div class="step step-target">
<span></span>
<div class="bar h4"><span class="marker marker-target">1 年後</span></div>
<div>
<div class="level-name">数字で見える</div>
<div class="level-note">件数と時間が毎週出る</div>
</div>
</div>
<div class="step">
<span></span>
<div class="bar h5"></div>
<div>
<div class="level-name">自動で直る</div>
<div class="level-note">既知の事象は人が触らない</div>
</div>
</div>
</div>
<p class="conclusion" data-type="conclusion">3 段目までは道具を入れれば上がる。4 段目からは、数字を毎週見る人を置くかどうかの話になる</p>
</div>
<div class="foot" data-type="note">段は積み上がる。下の段を満たさずに上の段だけを満たすことはできない。</div>
</div>
</div>
/designs/maturity-staircase-now-target/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 108 (fa68258beb24e2b9)
*
* 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+76, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304a-3056, U+3059-3060, U+3066-306b, U+306e-3070, U+307e-307f, U+3089-308c, U+3092, U+3094, U+3099, U+4e0a-4e0b, U+4e8b, U+4eba, U+4ef6, U+4f55, U+4fa1, U+5165, U+5177, U+5185, U+51fa, U+52d5, U+57fa, U+5834, U+5b57, U+5b9a, U+5bb3, U+5bfe, U+5e74, U+5ea6, U+5f53, U+5f8c, U+5fdc, U+61b6, U+6210, U+624b, U+62c5, U+6570, U+65e2, U+6642, U+66f8, U+6708, U+67fb, U+6b8b, U+6bb5, U+6bce, U+6e80, U+6e96, U+719f, U+7528, U+76e3, U+76ee, U+76f4, U+77e5, U+7a4d, U+7f6e, U+7fa9, U+8005, U+81ea, U+898b, U+89e6, U+8a18, U+8a55, U+8a71, U+8c61, U+8d77, U+8ffd, U+9031, U+904b, U+9053, U+90e8, U+9332, U+9593, U+969c, 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, U+31-34, U+39, U+76, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304a-3056, U+3059-3060, U+3066-306b, U+306e-3070, U+307e-307f, U+3089-308c, U+3092, U+3094, U+3099, U+4e0a-4e0b, U+4e8b, U+4eba, U+4ef6, U+4f55, U+4fa1, U+5165, U+5177, U+5185, U+51fa, U+52d5, U+57fa, U+5834, U+5b57, U+5b9a, U+5bb3, U+5bfe, U+5e74, U+5ea6, U+5f53, U+5f8c, U+5fdc, U+61b6, U+6210, U+624b, U+62c5, U+6570, U+65e2, U+6642, U+66f8, U+6708, U+67fb, U+6b8b, U+6bb5, U+6bce, U+6e80, U+6e96, U+719f, U+7528, U+76e3, U+76ee, U+76f4, U+77e5, U+7a4d, U+7f6e, U+7fa9, U+8005, U+81ea, U+898b, U+89e6, U+8a18, U+8a55, U+8a71, U+8c61, U+8d77, U+8ffd, U+9031, U+904b, U+9053, U+90e8, U+9332, U+9593, U+969c, 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, U+31-34, U+39, U+76, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304a-3056, U+3059-3060, U+3066-306b, U+306e-3070, U+307e-307f, U+3089-308c, U+3092, U+3094, U+3099, U+4e0a-4e0b, U+4e8b, U+4eba, U+4ef6, U+4f55, U+4fa1, U+5165, U+5177, U+5185, U+51fa, U+52d5, U+57fa, U+5834, U+5b57, U+5b9a, U+5bb3, U+5bfe, U+5e74, U+5ea6, U+5f53, U+5f8c, U+5fdc, U+61b6, U+6210, U+624b, U+62c5, U+6570, U+65e2, U+6642, U+66f8, U+6708, U+67fb, U+6b8b, U+6bb5, U+6bce, U+6e80, U+6e96, U+719f, U+7528, U+76e3, U+76ee, U+76f4, U+77e5, U+7a4d, U+7f6e, U+7fa9, U+8005, U+81ea, U+898b, U+89e6, U+8a18, U+8a55, U+8a71, U+8c61, U+8d77, U+8ffd, U+9031, U+904b, U+9053, U+90e8, U+9332, U+9593, U+969c, U+9806;
}
成熟度の図が役に立たなくなるのは、段に名前しか書かれていないときである。 「手順がある」と「記録が残る」のどちらに居るかは、条件が書かれていなければ 自己申告になり、その申告を巡って会議が終わる。
印を 2 つに絞っているのも同じ理由である。3 つ目を置いた瞬間、この図は水準の話を やめて日程の話を始める。いつ上がるかは別の図の仕事であり、ここで答えるのは 「いまどこにいて、どこを目指すか」だけである。