{
  "id": "defect-severity-status-matrix",
  "schemaVersion": 2,
  "title": {
    "ja": "品質状況 — 残件の合計ではなく、出荷を止める区画を読む",
    "en": "Defect Status — Read the Blocking Cell, Not the Total"
  },
  "summary": {
    "ja": "重要度 × 状態の平面に件数を置き、未解決と完了の間を太い罫で分ける。最上位の行だけを塗り、推移は下端に 4 本",
    "en": "Counts on a severity-by-state plane, unresolved split from done by one heavy rule, the top row filled, the trend at the foot"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "data-viz"
  ],
  "useCases": [
    "testing",
    "status"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "matrix",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 92,
      "right": 140,
      "bottom": 92,
      "left": 140
    },
    "emphasis": {
      "row": 1,
      "via": [
        "fill",
        "weight"
      ]
    }
  },
  "type": {
    "title": {
      "size": 44,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "period": {
      "size": 17,
      "weight": 400,
      "numeric": "tabular"
    },
    "col": {
      "size": 15,
      "weight": 500,
      "tracking": "0.12em"
    },
    "sev": {
      "size": 27,
      "weight": 700,
      "leading": 1.4
    },
    "sevNote": {
      "size": 14,
      "weight": 400
    },
    "n": {
      "size": 42,
      "weight": 700,
      "numeric": "tabular"
    },
    "nSoft": {
      "size": 31,
      "weight": 400,
      "numeric": "tabular"
    },
    "fkey": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em"
    },
    "wn": {
      "size": 18,
      "weight": 700,
      "numeric": "tabular"
    },
    "wk": {
      "size": 13,
      "weight": 400,
      "numeric": "tabular"
    },
    "rule": {
      "size": 16,
      "weight": 400,
      "leading": 1.8
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "残件の合計を大きく出さない。「残 37 件」は安全とも危険とも決めない。決めるのは重要度「高」の未解決の区画",
      "en": "Never headline the total: \"37 open\" decides nothing. What decides is the unresolved cell at the top severity"
    },
    {
      "ja": "重要度の定義を行の下に 1 行ずつ書く。定義の無い高・中・低は、報告のたびに基準がずれる",
      "en": "Define each severity in one line beside it — undefined, high and medium drift between reports"
    },
    {
      "ja": "未解決 3 列と完了列の間に太い罫を引く。完了を隣に並べるだけだと、大きい完了件数が未解決を小さく見せる",
      "en": "Rule between the unresolved columns and done; merely adjacent, a large done count makes the unresolved look small"
    },
    {
      "ja": "完了列は消さない。分母が消えると、収束しているのか始まってもいないのかが読めない",
      "en": "Keep the done column — without the denominator there is no telling convergence from a test that has barely started"
    },
    {
      "ja": "推移は残存 1 本だけにする。検出と解決を重ねると、「収束しているか」より先に内訳の議論になる",
      "en": "Trend the open count alone; overlay found and fixed and the room debates the breakdown before answering whether it is converging"
    },
    {
      "ja": "次工程へ進む条件を同じ面に書く。条件が別紙にあると、この表は「今の様子」で終わり、判断の材料にならない",
      "en": "State the gate on this page — kept elsewhere, the table reports a situation rather than supporting a decision"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.KVsA4M8t.png",
  "assets": [],
  "shortlist": true,
  "status": "published",
  "relations": {
    "similar": [
      "test-v-model-paired",
      "status-report-rag-rows",
      "requirements-response-table"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "matrix",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 92,
          "right": 140,
          "bottom": 92,
          "left": 140
        },
        "emphasis": {
          "row": 1,
          "via": [
            "fill",
            "weight"
          ]
        }
      },
      "type": {
        "title": {
          "size": 44,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "period": {
          "size": 17,
          "weight": 400,
          "numeric": "tabular"
        },
        "col": {
          "size": 15,
          "weight": 500,
          "tracking": "0.12em"
        },
        "sev": {
          "size": 27,
          "weight": 700,
          "leading": 1.4
        },
        "sevNote": {
          "size": 14,
          "weight": 400
        },
        "n": {
          "size": 42,
          "weight": 700,
          "numeric": "tabular"
        },
        "nSoft": {
          "size": 31,
          "weight": 400,
          "numeric": "tabular"
        },
        "fkey": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em"
        },
        "wn": {
          "size": 18,
          "weight": 700,
          "numeric": "tabular"
        },
        "wk": {
          "size": 13,
          "weight": 400,
          "numeric": "tabular"
        },
        "rule": {
          "size": 16,
          "weight": 400,
          "leading": 1.8
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Never headline the total: \"37 open\" decides nothing. What decides is the unresolved cell at the top severity",
        "Define each severity in one line beside it — undefined, high and medium drift between reports",
        "Rule between the unresolved columns and done; merely adjacent, a large done count makes the unresolved look small",
        "Keep the done column — without the denominator there is no telling convergence from a test that has barely started",
        "Trend the open count alone; overlay found and fixed and the room debates the breakdown before answering whether it is converging",
        "State the gate on this page — kept elsewhere, the table reports a situation rather than supporting a decision"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 92 右 140 下 92 左 140\n\n## 強調\n1 行目のみ。手段は 塗り + 太さ だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  44px / 700 / 字間 0.01em / 行送り 1.3\nperiod  17px / 400 / 等幅数字\ncol  15px / 500 / 字間 0.12em\nsev  27px / 700 / 行送り 1.4\nsevNote  14px / 400\nn  42px / 700 / 等幅数字\nnSoft  31px / 400 / 等幅数字\nfkey  14px / 500 / 字間 0.14em\nwn  18px / 700 / 等幅数字\nwk  13px / 400 / 等幅数字\nrule  16px / 400 / 行送り 1.8\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 残件の合計を大きく出さない。「残 37 件」は安全とも危険とも決めない。決めるのは重要度「高」の未解決の区画\n- 重要度の定義を行の下に 1 行ずつ書く。定義の無い高・中・低は、報告のたびに基準がずれる\n- 未解決 3 列と完了列の間に太い罫を引く。完了を隣に並べるだけだと、大きい完了件数が未解決を小さく見せる\n- 完了列は消さない。分母が消えると、収束しているのか始まってもいないのかが読めない\n- 推移は残存 1 本だけにする。検出と解決を重ねると、「収束しているか」より先に内訳の議論になる\n- 次工程へ進む条件を同じ面に書く。条件が別紙にあると、この表は「今の様子」で終わり、判断の材料にならない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/defect-severity-status-matrix/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 92 right 140 bottom 92 left 140\n\n## Emphasis\nrow 1 only, by fill + weight and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  44px / 700 / tracking 0.01em / leading 1.3\nperiod  17px / 400 / tabular numerals\ncol  15px / 500 / tracking 0.12em\nsev  27px / 700 / leading 1.4\nsevNote  14px / 400\nn  42px / 700 / tabular numerals\nnSoft  31px / 400 / tabular numerals\nfkey  14px / 500 / tracking 0.14em\nwn  18px / 700 / tabular numerals\nwk  13px / 400 / tabular numerals\nrule  16px / 400 / leading 1.8\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Never headline the total: \"37 open\" decides nothing. What decides is the unresolved cell at the top severity\n- Define each severity in one line beside it — undefined, high and medium drift between reports\n- Rule between the unresolved columns and done; merely adjacent, a large done count makes the unresolved look small\n- Keep the done column — without the denominator there is no telling convergence from a test that has barely started\n- Trend the open count alone; overlay found and fixed and the room debates the breakdown before answering whether it is converging\n- State the gate on this page — kept elsewhere, the table reports a situation rather than supporting a decision\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/defect-severity-status-matrix/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>品質状況 — 残件の合計ではなく、出荷を止める区画を読む</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */\n  :root {\n    --ground: #FFFFFF;\n    --surface: #F4F6F9;\n    --ink: #131820;\n    --muted: #667183;\n    --accent: #1F5FA8;\n    --rule: #DBE1E9;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 92px 140px;                  /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }\n  .title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }\n  .period { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n  .plate { align-self: center; width: 100%; }\n\n  /* 重要度 × 状態の平面。未解決 3 列と完了 1 列の間に太い罫を引き、\n     出荷を止める側とそうでない側を版面の上で分ける。 */\n  .grid { display: grid; grid-template-columns: 300px repeat(3, minmax(0, 1fr)) 210px 210px; }\n  .cell { padding: 36px 24px; border-bottom: 1px solid var(--rule); text-align: right; }\n  .cell.rowhead { text-align: left; }\n  /* 未解決 3 列と完了列の間に太い罫。表頭にも同じ位置で引かないと、\n     境界が本体だけの飾りに見える。 */\n  .grid > .cell:nth-child(6n + 5),\n  .grid > .colhead:nth-child(5) { border-right: 2px solid var(--ink); }\n\n  .colhead { padding: 16px 24px; border-bottom: 1px solid var(--ink); text-align: right; }\n  .colhead.first { text-align: left; }\n  .col { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }\n\n  .sev { font-size: 27px; font-weight: 700; line-height: 1.4; }\n  .sevNote { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 6px; }\n  .n { font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }\n  .n[data-zero] { color: var(--rule); font-weight: 500; }\n  .n[data-soft] { font-size: 31px; font-weight: 400; color: var(--muted); }\n\n  /* 塗るのは最上位の重要度の行だけ。ここの未解決が 0 にならないかぎり\n     出荷判定に進めない、という 1 本の規則を版面で言う。 */\n  .band[data-emphasis] .cell { background: var(--surface); }\n  .band[data-emphasis] .n { color: var(--accent); }\n  .band[data-emphasis] .n[data-zero] { color: var(--muted); font-weight: 500; }\n  .band[data-emphasis] .n[data-soft] { color: var(--muted); }\n\n  .foot { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; border-top: 1px solid var(--rule); padding-top: 24px; align-items: start; }\n  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n\n  /* 週次の残存だけを 4 本の帯にする。推移は「収束しているか」だけを答えればよく、\n     検出と解決の 2 本を重ねると、その問いより先に内訳の話になる。 */\n  .trend { display: grid; grid-template-columns: repeat(4, 96px); gap: 30px; margin-top: 16px; align-items: end; }\n  .week { display: grid; justify-items: start; gap: 8px; }\n  /* 高さは件数に比例（1 件 = 2.2px）。幅を狭く取らないと、差が\n     「帯の高さ」ではなく「四角の大きさ」として読まれて比が効かない。 */\n  .wbar { width: 96px; background: color-mix(in srgb, var(--ink) 12%, transparent); }\n  .week[data-now] .wbar { background: var(--accent); }\n  .wn { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }\n  .wk { font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n  .rule { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--ink); margin-top: 14px; }\n  .rule em { font-style: normal; font-weight: 700; color: var(--accent); }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"head\">\n      <h1 class=\"title\" data-type=\"title\">品質状況（結合テスト 第 4 週）</h1>\n      <p class=\"period\" data-type=\"period\">2027.08.24 時点 ／ 検出累計 214 件・解決 177 件</p>\n    </div>\n\n    <div class=\"plate\">\n      <div class=\"grid\">\n        <div class=\"colhead first\"><p class=\"col\" data-type=\"col\">重要度</p></div>\n        <div class=\"colhead\"><p class=\"col\">未着手</p></div>\n        <div class=\"colhead\"><p class=\"col\">調査中</p></div>\n        <div class=\"colhead\"><p class=\"col\">確認待ち</p></div>\n        <div class=\"colhead\"><p class=\"col\">未解決 計</p></div>\n        <div class=\"colhead\"><p class=\"col\">完了</p></div>\n      </div>\n\n      <div class=\"grid band\" data-row=\"1\" data-emphasis=\"fill weight\">\n        <div class=\"cell rowhead\">\n          <p class=\"sev\" data-type=\"sev\">高</p>\n          <p class=\"sevNote\" data-type=\"sevNote\">業務が止まる・データが壊れる</p>\n        </div>\n        <div class=\"cell\"><p class=\"n\" data-type=\"n\">2</p></div>\n        <div class=\"cell\"><p class=\"n\">3</p></div>\n        <div class=\"cell\"><p class=\"n\">1</p></div>\n        <div class=\"cell\"><p class=\"n\">6</p></div>\n        <div class=\"cell\"><p class=\"n\" data-soft data-type=\"nSoft\">41</p></div>\n      </div>\n\n      <div class=\"grid band\" data-row=\"2\">\n        <div class=\"cell rowhead\">\n          <p class=\"sev\">中</p>\n          <p class=\"sevNote\">回避手順があれば運用できる</p>\n        </div>\n        <div class=\"cell\"><p class=\"n\">7</p></div>\n        <div class=\"cell\"><p class=\"n\">9</p></div>\n        <div class=\"cell\"><p class=\"n\">5</p></div>\n        <div class=\"cell\"><p class=\"n\">21</p></div>\n        <div class=\"cell\"><p class=\"n\" data-soft>88</p></div>\n      </div>\n\n      <div class=\"grid band\" data-row=\"3\">\n        <div class=\"cell rowhead\">\n          <p class=\"sev\">低</p>\n          <p class=\"sevNote\">表記・見た目・利便性</p>\n        </div>\n        <div class=\"cell\"><p class=\"n\">6</p></div>\n        <div class=\"cell\"><p class=\"n\">4</p></div>\n        <div class=\"cell\"><p class=\"n\" data-zero>0</p></div>\n        <div class=\"cell\"><p class=\"n\">10</p></div>\n        <div class=\"cell\"><p class=\"n\" data-soft>48</p></div>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <div>\n        <p class=\"fkey\" data-type=\"fkey\">未解決の推移（週末時点）</p>\n        <div class=\"trend\">\n          <div class=\"week\">\n            <p class=\"wn\" data-type=\"wn\">52</p>\n            <div class=\"wbar\" style=\"height: 114px\"></div>\n            <p class=\"wk\" data-type=\"wk\">第 1 週</p>\n          </div>\n          <div class=\"week\">\n            <p class=\"wn\">49</p>\n            <div class=\"wbar\" style=\"height: 108px\"></div>\n            <p class=\"wk\">第 2 週</p>\n          </div>\n          <div class=\"week\">\n            <p class=\"wn\">44</p>\n            <div class=\"wbar\" style=\"height: 97px\"></div>\n            <p class=\"wk\">第 3 週</p>\n          </div>\n          <div class=\"week\" data-now>\n            <p class=\"wn\">37</p>\n            <div class=\"wbar\" style=\"height: 81px\"></div>\n            <p class=\"wk\">第 4 週</p>\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"fkey\">総合テストへ進む条件</p>\n        <p class=\"rule\" data-type=\"rule\">重要度「高」の未解決が <em>0 件</em>。中・低の残件は、回避手順を添えて総合テストへ持ち越せます。</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/defect-severity-status-matrix/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/defect-severity-status-matrix/font.css",
        "https://design-vault.pages.dev/designs/defect-severity-status-matrix/font-0.woff2",
        "https://design-vault.pages.dev/designs/defect-severity-status-matrix/font-1.woff2",
        "https://design-vault.pages.dev/designs/defect-severity-status-matrix/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/defect-severity-status-matrix",
    "en": "https://design-vault.pages.dev/en/designs/defect-severity-status-matrix"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\nテスト工程の定例で出す品質状況。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe quality report for a test phase. `pattern.html` is the artboard itself; both `cover.png` and\nthe measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 表頭と本体に同じ位置で太い罫を引く。本体だけに引くと、境界が飾りに見えて働かない\n- 完了列の数字は級数を落とし `--muted` にする。桁が大きいので、同じ級数だと未解決より目立つ\n- 推移の帯は幅 96px 固定・高さ 1 件 = 2.2px。幅を広く取ると高さの差が「四角の大きさ」として読まれ、比が効かなくなる\n- 0 件のセルは `--rule` に落として空欄にしない。空欄は「集計していない」と区別がつかない\n\n### Apply to\n\n- 結合・総合テストの週次報告、受入テストの状況共有\n- 運用後の障害状況（重要度の定義をそのまま使い、列を「受付・調査・修正待ち・完了」に読み替える）"
}