Operational Maturity — Level Two Today, Level Four in a Year

140 96

1920 × 1080 Seen as a design

About this one

Five rising steps. Height is the level, two markers say where we are and where we are going, and each step carries the condition that makes it true

Reach for it when

Status Report

Source

Saved: 2026.09.16
License: Original

Similar structure

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 marker 26px / 700 / leading 1.2 levelName 24px / 700 / leading 1.3 levelNote 20px / 400 / leading 1.6 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 - Give every step the condition that makes it true. Without one, maturity is self-assessed and the meeting is spent arguing between level two and three - Do not colour the steps. Five steps are not five categories but marks on one scale, and colour makes them read as parallel options - Mark only where you are and where you are going. A third marker turns the staircase into a schedule and the conversation shifts to dates - Never draw the steps as skippable. The rising height is the claim that each level rests on the one below - Close on where the means of climbing changes. The boundary between steps a tool can lift you over and steps that need a person is the only decision this figure asks for 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/maturity-staircase-now-target/pattern.html.

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: - Give every step the condition that makes it true. Without one, maturity is self-assessed and the meeting is spent arguing between level two and three - Do not colour the steps. Five steps are not five categories but marks on one scale, and colour makes them read as parallel options - Mark only where you are and where you are going. A third marker turns the staircase into a schedule and the conversation shifts to dates - Never draw the steps as skippable. The rising height is the claim that each level rests on the one below - Close on where the means of climbing changes. The boundary between steps a tool can lift you over and steps that need a person is the only decision this figure asks for

{ "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": [ "Give every step the condition that makes it true. Without one, maturity is self-assessed and the meeting is spent arguing between level two and three", "Do not colour the steps. Five steps are not five categories but marks on one scale, and colour makes them read as parallel options", "Mark only where you are and where you are going. A third marker turns the staircase into a schedule and the conversation shifts to dates", "Never draw the steps as skippable. The rising height is the claim that each level rests on the one below", "Close on where the means of climbing changes. The boundary between steps a tool can lift you over and steps that need a person is the only decision this figure asks for" ] }

<!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>

/* 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; }

Notes

成熟度の図が役に立たなくなるのは、段に名前しか書かれていないときである。「手順がある」と「記録が残る」のどちらに居るかは、条件が書かれていなければ自己申告になり、その申告を巡って会議が終わる。

印を 2 つに絞っているのも同じ理由である。3 つ目を置いた瞬間、この図は水準の話をやめて日程の話を始める。いつ上がるかは別の図の仕事であり、ここで答えるのは「いまどこにいて、どこを目指すか」だけである。

Operational Maturity — Level Two Today, Level Four in a Year

Take it with you

Everything

Prompt

Spec

Files

pattern.html

font.css

Notes