{
  "id": "test-v-model-paired",
  "schemaVersion": 2,
  "title": {
    "ja": "テスト計画 — 作る工程と受け入れる試験を行で対にする",
    "en": "Test Plan — Each Phase Paired With What Accepts It"
  },
  "summary": {
    "ja": "V 字を斜めに描かず、左右等幅の行で対応させる。受け入れる側だけを面にして、判定の主体を示す",
    "en": "The V-model as paired rows rather than a diagonal — the accepting side filled, so the judge is visible"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "testing",
    "process"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "2-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 140,
      "bottom": 100,
      "left": 140
    },
    "columns": {
      "count": 2,
      "gap": 56
    },
    "emphasis": {
      "column": 2,
      "via": [
        "fill"
      ]
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "lede": {
      "size": 19,
      "weight": 400,
      "leading": 1.8
    },
    "label": {
      "size": 16,
      "weight": 500,
      "tracking": "0.18em",
      "transform": "upper"
    },
    "lv": {
      "size": 16,
      "weight": 700,
      "numeric": "tabular"
    },
    "sname": {
      "size": 24,
      "weight": 700,
      "leading": 1.4
    },
    "sdoc": {
      "size": 15,
      "weight": 400,
      "leading": 1.7
    },
    "fkey": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em"
    },
    "fval": {
      "size": 17,
      "weight": 500,
      "leading": 1.6,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "V 字を斜めに描かない。斜めにすると対応関係が図の形の話になり、L2 と T2 が対だという肝心の点が読み落とされる",
      "en": "Do not draw the V as a diagonal — the shape becomes the subject and the pairing of L2 with T2, which is the point, gets missed"
    },
    {
      "ja": "左右は同じ行数にする。試験のほうが少ない計画は、受け入れられない成果物があるということ",
      "en": "Equal row counts on both sides; fewer tests than phases means some deliverable has nothing to accept it"
    },
    {
      "ja": "各試験に実施者を書く。「総合テスト」だけでは、立ち会うのか判定するのかが決まらない",
      "en": "Name who runs each test — \"system test\" alone does not say who attends and who judges"
    },
    {
      "ja": "受入基準は左の工程を書いた時点で作る。試験の直前に決めると、作ったものに合わせた基準になる",
      "en": "Write the acceptance criteria when the left-hand phase is written; decided just before the test, they describe what was built"
    },
    {
      "ja": "面を敷くのは受け入れる側だけ。両側を敷くと、どちらが判定の主体か分からなくなる",
      "en": "Fill only the accepting side; fill both and the slide stops saying who decides"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.Btyi9AS4.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "architecture-3tier-stack",
      "requirements-response-table",
      "status-report-rag-rows"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "2-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 140,
          "bottom": 100,
          "left": 140
        },
        "columns": {
          "count": 2,
          "gap": 56
        },
        "emphasis": {
          "column": 2,
          "via": [
            "fill"
          ]
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "lede": {
          "size": 19,
          "weight": 400,
          "leading": 1.8
        },
        "label": {
          "size": 16,
          "weight": 500,
          "tracking": "0.18em",
          "transform": "upper"
        },
        "lv": {
          "size": 16,
          "weight": 700,
          "numeric": "tabular"
        },
        "sname": {
          "size": 24,
          "weight": 700,
          "leading": 1.4
        },
        "sdoc": {
          "size": 15,
          "weight": 400,
          "leading": 1.7
        },
        "fkey": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em"
        },
        "fval": {
          "size": 17,
          "weight": 500,
          "leading": 1.6,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Do not draw the V as a diagonal — the shape becomes the subject and the pairing of L2 with T2, which is the point, gets missed",
        "Equal row counts on both sides; fewer tests than phases means some deliverable has nothing to accept it",
        "Name who runs each test — \"system test\" alone does not say who attends and who judges",
        "Write the acceptance criteria when the left-hand phase is written; decided just before the test, they describe what was built",
        "Fill only the accepting side; fill both and the slide stops saying who decides"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n- 2 カラム（等分）、間隔 56\n\n## 強調\n2 列目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em / 行送り 1.3\nlede  19px / 400 / 行送り 1.8\nlabel  16px / 500 / 字間 0.18em / 大文字\nlv  16px / 700 / 等幅数字\nsname  24px / 700 / 行送り 1.4\nsdoc  15px / 400 / 行送り 1.7\nfkey  14px / 500 / 字間 0.14em\nfval  17px / 500 / 行送り 1.6 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- V 字を斜めに描かない。斜めにすると対応関係が図の形の話になり、L2 と T2 が対だという肝心の点が読み落とされる\n- 左右は同じ行数にする。試験のほうが少ない計画は、受け入れられない成果物があるということ\n- 各試験に実施者を書く。「総合テスト」だけでは、立ち会うのか判定するのかが決まらない\n- 受入基準は左の工程を書いた時点で作る。試験の直前に決めると、作ったものに合わせた基準になる\n- 面を敷くのは受け入れる側だけ。両側を敷くと、どちらが判定の主体か分からなくなる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/test-v-model-paired/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n- 2 equal columns, gap 56\n\n## Emphasis\ncolumn 2 only, by fill and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em / leading 1.3\nlede  19px / 400 / leading 1.8\nlabel  16px / 500 / tracking 0.18em / uppercase\nlv  16px / 700 / tabular numerals\nsname  24px / 700 / leading 1.4\nsdoc  15px / 400 / leading 1.7\nfkey  14px / 500 / tracking 0.14em\nfval  17px / 500 / leading 1.6 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Do not draw the V as a diagonal — the shape becomes the subject and the pairing of L2 with T2, which is the point, gets missed\n- Equal row counts on both sides; fewer tests than phases means some deliverable has nothing to accept it\n- Name who runs each test — \"system test\" alone does not say who attends and who judges\n- Write the acceptance criteria when the left-hand phase is written; decided just before the test, they describe what was built\n- Fill only the accepting side; fill both and the slide stops saying who decides\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/test-v-model-paired/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: 100px 140px;                 /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  .head { display: grid; gap: 16px; }\n  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }\n  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n\n  /* 左右を等幅にし、同じ行に「作る工程」と「それを受け入れる試験」を置く。\n     V 字を斜めに描くと、対応関係が図の形の話になって読み落とされる。 */\n  .pairs { align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }\n  .side { display: grid; align-content: start; }\n  .label { font-size: 16px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-bottom: 20px; }\n  .side[data-emphasis] .label { color: var(--accent); }\n\n  .step { display: grid; grid-template-columns: 54px 1fr; gap: 24px; align-items: baseline; padding: 24px 26px; border-top: 1px solid var(--rule); }\n  .step:last-child { border-bottom: 1px solid var(--rule); }\n  .side[data-emphasis] .step { background: var(--surface); }\n  .lv { font-size: 16px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }\n  .side[data-emphasis] .lv { color: var(--accent); }\n  .sname { font-size: 24px; font-weight: 700; line-height: 1.4; }\n  .sdoc { font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 8px; }\n\n  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 26px; }\n  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n  .fval { font-size: 17px; font-weight: 500; line-height: 1.6; margin-top: 10px; font-variant-numeric: tabular-nums; }\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\">テスト計画 — 工程と試験の対応</h1>\n      <p class=\"lede\" data-type=\"lede\">左で決めたことを、同じ行の試験で受け入れます。受入基準は左を書いた時点で作り、試験の直前に決めません。</p>\n    </div>\n\n    <div class=\"pairs\">\n      <section class=\"side\" data-col=\"1\">\n        <p class=\"label\" data-type=\"label\">WHAT WE BUILD</p>\n        <div class=\"step\">\n          <p class=\"lv\" data-type=\"lv\">L1</p>\n          <div>\n            <p class=\"sname\" data-type=\"sname\">要件定義</p>\n            <p class=\"sdoc\" data-type=\"sdoc\">業務要件一覧・受入基準（御社承認）</p>\n          </div>\n        </div>\n        <div class=\"step\">\n          <p class=\"lv\">L2</p>\n          <div>\n            <p class=\"sname\">基本設計</p>\n            <p class=\"sdoc\">画面・帳票・連携インタフェース定義</p>\n          </div>\n        </div>\n        <div class=\"step\">\n          <p class=\"lv\">L3</p>\n          <div>\n            <p class=\"sname\">詳細設計</p>\n            <p class=\"sdoc\">処理仕様・データ設計</p>\n          </div>\n        </div>\n        <div class=\"step\">\n          <p class=\"lv\">L4</p>\n          <div>\n            <p class=\"sname\">実装</p>\n            <p class=\"sdoc\">ソースコード・単体試験項目</p>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"side\" data-col=\"2\" data-emphasis=\"fill\">\n        <p class=\"label\">WHAT ACCEPTS IT</p>\n        <div class=\"step\">\n          <p class=\"lv\">T1</p>\n          <div>\n            <p class=\"sname\">受入テスト</p>\n            <p class=\"sdoc\">御社実施 ／ 4 週間・判定は業務チーム</p>\n          </div>\n        </div>\n        <div class=\"step\">\n          <p class=\"lv\">T2</p>\n          <div>\n            <p class=\"sname\">総合テスト</p>\n            <p class=\"sdoc\">弊社実施・御社立会 ／ 性能と連携を含む</p>\n          </div>\n        </div>\n        <div class=\"step\">\n          <p class=\"lv\">T3</p>\n          <div>\n            <p class=\"sname\">結合テスト</p>\n            <p class=\"sdoc\">弊社実施 ／ 既存システムとの接続を含む</p>\n          </div>\n        </div>\n        <div class=\"step\">\n          <p class=\"lv\">T4</p>\n          <div>\n            <p class=\"sname\">単体テスト</p>\n            <p class=\"sdoc\">弊社実施 ／ 網羅率は分岐 80% を基準</p>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <div class=\"foot\">\n      <div>\n        <p class=\"fkey\" data-type=\"fkey\">不具合の管理</p>\n        <p class=\"fval\" data-type=\"fval\">合同 PMO が 1 本の台帳で管理</p>\n      </div>\n      <div>\n        <p class=\"fkey\">受入判定の期限</p>\n        <p class=\"fval\">2027.09.30 ／ 移行判断の 4 週間前</p>\n      </div>\n      <div>\n        <p class=\"fkey\">御社にお願いする稼働</p>\n        <p class=\"fval\">受入テスト 4 週間 ／ 実務担当 6 名</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/test-v-model-paired/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/test-v-model-paired/font.css",
        "https://design-vault.pages.dev/designs/test-v-model-paired/font-0.woff2",
        "https://design-vault.pages.dev/designs/test-v-model-paired/font-1.woff2",
        "https://design-vault.pages.dev/designs/test-v-model-paired/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/test-v-model-paired",
    "en": "https://design-vault.pages.dev/en/designs/test-v-model-paired"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n工程と試験の対応を 1 枚で合意するための版。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe page that gets the phase-to-test mapping agreed. `pattern.html` is the artboard itself; both\n`cover.png` and the measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- L1〜L4 / T1〜T4 の記号を左端 54px に固定すると、対応が番号だけで指せるようになる\n- 成果物と実施条件を各行に 1 行で添える。別表にすると、この 1 枚は工程名の羅列になる\n- 下端に「不具合の管理」「判定期限」「御社にお願いする稼働」を置く。テスト計画で揉めるのは常にこの 3 つ\n\n### Apply to\n\n- 要件定義〜設計フェーズでのテスト計画合意、受入テスト計画書の冒頭\n- 品質報告（右側を実績の合否に差し替える）"
}