{
  "id": "requirements-response-table",
  "schemaVersion": 2,
  "title": {
    "ja": "要求一覧への回答 — 代替提案の行だけを塗る",
    "en": "Requirement Responses — Only the Alternative Is Filled"
  },
  "summary": {
    "ja": "RFP の要求を 1 行ずつ立て、判定を 3 値に絞る。満たす行は塗らず、代替提案の 1 行だけを面にする",
    "en": "One row per requirement, a verdict limited to three values, and a fill reserved for the one alternative"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "data-viz"
  ],
  "useCases": [
    "requirements",
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "table",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 104,
      "right": 140,
      "bottom": 104,
      "left": 140
    },
    "emphasis": {
      "row": 3,
      "via": [
        "fill",
        "weight"
      ]
    }
  },
  "type": {
    "title": {
      "size": 44,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "count": {
      "size": 17,
      "weight": 400,
      "numeric": "tabular"
    },
    "col": {
      "size": 15,
      "weight": 500,
      "tracking": "0.12em"
    },
    "rid": {
      "size": 19,
      "weight": 500,
      "numeric": "tabular"
    },
    "req": {
      "size": 21,
      "weight": 500,
      "leading": 1.5
    },
    "verdict": {
      "size": 17,
      "weight": 500
    },
    "how": {
      "size": 17,
      "weight": 400,
      "leading": 1.7
    },
    "when": {
      "size": 17,
      "weight": 400
    },
    "foot": {
      "size": 16,
      "weight": 400,
      "leading": 1.8
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "判定は「満たす／代替提案／第 2 期」の 3 値だけにする。「条件付きで満たす」は条件が読まれないまま合意された扱いになる",
      "en": "Three verdicts only — met, alternative, next phase. \"Met with conditions\" gets agreed to without the conditions ever being read"
    },
    {
      "ja": "塗るのは代替提案の行だけ。満たす行を塗ると表全体が強調になり、議論すべき 1 行が沈む",
      "en": "Fill only the alternative row; filling the met rows makes the whole table emphasis and buries the one row worth discussing"
    },
    {
      "ja": "実現方式を同じ行に置く。別紙に送ると「代替提案」の 3 文字だけが残り、何が違うのか分からないまま持ち帰られる",
      "en": "Keep the means in the same row — sent to an annex, \"alternative\" travels alone and nobody can say what changed"
    },
    {
      "ja": "抜粋なら件数を見出しの隣に書く。全 48 件のうち 6 件だと分かって初めて、この 1 枚が議題になる",
      "en": "If it is an extract, say so beside the title — six of forty-eight is a different slide from six of six"
    },
    {
      "ja": "要求番号は発注側の採番をそのまま使う。振り直すと、以後すべての質疑で番号の突き合わせが要る",
      "en": "Carry the client's own requirement IDs unchanged; renumbering costs a lookup in every later exchange"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BXFJ1B0J.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "comparison-table-single-fill",
      "scope-in-out-two-fields",
      "status-report-rag-rows"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "table",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 104,
          "right": 140,
          "bottom": 104,
          "left": 140
        },
        "emphasis": {
          "row": 3,
          "via": [
            "fill",
            "weight"
          ]
        }
      },
      "type": {
        "title": {
          "size": 44,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "count": {
          "size": 17,
          "weight": 400,
          "numeric": "tabular"
        },
        "col": {
          "size": 15,
          "weight": 500,
          "tracking": "0.12em"
        },
        "rid": {
          "size": 19,
          "weight": 500,
          "numeric": "tabular"
        },
        "req": {
          "size": 21,
          "weight": 500,
          "leading": 1.5
        },
        "verdict": {
          "size": 17,
          "weight": 500
        },
        "how": {
          "size": 17,
          "weight": 400,
          "leading": 1.7
        },
        "when": {
          "size": 17,
          "weight": 400
        },
        "foot": {
          "size": 16,
          "weight": 400,
          "leading": 1.8
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Three verdicts only — met, alternative, next phase. \"Met with conditions\" gets agreed to without the conditions ever being read",
        "Fill only the alternative row; filling the met rows makes the whole table emphasis and buries the one row worth discussing",
        "Keep the means in the same row — sent to an annex, \"alternative\" travels alone and nobody can say what changed",
        "If it is an extract, say so beside the title — six of forty-eight is a different slide from six of six",
        "Carry the client's own requirement IDs unchanged; renumbering costs a lookup in every later exchange"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 104 右 140 下 104 左 140\n\n## 強調\n3 行目のみ。手段は 塗り + 太さ だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  44px / 700 / 字間 0.01em / 行送り 1.3\ncount  17px / 400 / 等幅数字\ncol  15px / 500 / 字間 0.12em\nrid  19px / 500 / 等幅数字\nreq  21px / 500 / 行送り 1.5\nverdict  17px / 500\nhow  17px / 400 / 行送り 1.7\nwhen  17px / 400\nfoot  16px / 400 / 行送り 1.8\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 判定は「満たす／代替提案／第 2 期」の 3 値だけにする。「条件付きで満たす」は条件が読まれないまま合意された扱いになる\n- 塗るのは代替提案の行だけ。満たす行を塗ると表全体が強調になり、議論すべき 1 行が沈む\n- 実現方式を同じ行に置く。別紙に送ると「代替提案」の 3 文字だけが残り、何が違うのか分からないまま持ち帰られる\n- 抜粋なら件数を見出しの隣に書く。全 48 件のうち 6 件だと分かって初めて、この 1 枚が議題になる\n- 要求番号は発注側の採番をそのまま使う。振り直すと、以後すべての質疑で番号の突き合わせが要る\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/requirements-response-table/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 104 right 140 bottom 104 left 140\n\n## Emphasis\nrow 3 only, by fill + weight and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  44px / 700 / tracking 0.01em / leading 1.3\ncount  17px / 400 / tabular numerals\ncol  15px / 500 / tracking 0.12em\nrid  19px / 500 / tabular numerals\nreq  21px / 500 / leading 1.5\nverdict  17px / 500\nhow  17px / 400 / leading 1.7\nwhen  17px / 400\nfoot  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- Three verdicts only — met, alternative, next phase. \"Met with conditions\" gets agreed to without the conditions ever being read\n- Fill only the alternative row; filling the met rows makes the whole table emphasis and buries the one row worth discussing\n- Keep the means in the same row — sent to an annex, \"alternative\" travels alone and nobody can say what changed\n- If it is an extract, say so beside the title — six of forty-eight is a different slide from six of six\n- Carry the client's own requirement IDs unchanged; renumbering costs a lookup in every later exchange\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/requirements-response-table/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: 104px 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  .count { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n  .table { align-self: center; width: 100%; }\n  /* 要求番号・要求事項・判定・実現方式・工程。判定列は固定幅にして、\n     縦に読んだとき「満たす／代替」の並びが揃って見えるようにする。 */\n  .row { display: grid; grid-template-columns: 132px 1fr 132px 1.15fr 168px; align-items: baseline; gap: 34px; padding: 26px 22px; border-bottom: 1px solid var(--rule); }\n  .row:first-child { border-top: 1px solid var(--rule); }\n  .row.head-row { padding-top: 18px; padding-bottom: 18px; border-bottom-color: var(--ink); }\n  .col { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }\n\n  .rid { font-size: 19px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }\n  .req { font-size: 21px; font-weight: 500; line-height: 1.5; }\n  .how { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--muted); }\n  .when { font-size: 17px; font-weight: 400; color: var(--muted); }\n  /* 判定は 3 値。「満たす」を塗ると表が真っ青になって読み所を失うので、\n     塗るのは代替提案の行だけにする。 */\n  .verdict { font-size: 17px; font-weight: 500; }\n  .row[data-alt] { background: var(--surface); }\n  .row[data-alt] .verdict { color: var(--accent); font-weight: 700; }\n  .row[data-out] .req,\n  .row[data-out] .verdict { color: var(--muted); }\n\n  .foot { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 24px; }\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=\"count\" data-type=\"count\">全 48 件中 6 件を抜粋 ／ 全件は付録 A-1</p>\n    </div>\n\n    <div class=\"table\">\n      <div class=\"row head-row\">\n        <p class=\"col\" data-type=\"col\">要求番号</p>\n        <p class=\"col\">要求事項</p>\n        <p class=\"col\">判定</p>\n        <p class=\"col\">実現方式</p>\n        <p class=\"col\">対応工程</p>\n      </div>\n\n      <div class=\"row\" data-row=\"1\">\n        <p class=\"rid\" data-type=\"rid\">RQ-012</p>\n        <p class=\"req\" data-type=\"req\">受注登録を 3 画面以内で完了できること</p>\n        <p class=\"verdict\" data-type=\"verdict\">満たす</p>\n        <p class=\"how\" data-type=\"how\">入力の 2 画面化＋確認 1 画面</p>\n        <p class=\"when\" data-type=\"when\">基本設計</p>\n      </div>\n      <div class=\"row\" data-row=\"2\">\n        <p class=\"rid\">RQ-018</p>\n        <p class=\"req\">既存の在庫システムと即時に連携すること</p>\n        <p class=\"verdict\">満たす</p>\n        <p class=\"how\">連携基盤経由の同期呼び出し</p>\n        <p class=\"when\">基本設計</p>\n      </div>\n      <div class=\"row\" data-row=\"3\" data-alt data-emphasis=\"fill weight\">\n        <p class=\"rid\">RQ-023</p>\n        <p class=\"req\">帳票をすべて現行と同一の様式で出力すること</p>\n        <p class=\"verdict\">代替提案</p>\n        <p class=\"how\">主要 9 帳票は同一。残り 4 帳票は統合を提案</p>\n        <p class=\"when\">要件定義</p>\n      </div>\n      <div class=\"row\" data-row=\"4\">\n        <p class=\"rid\">RQ-031</p>\n        <p class=\"req\">同時接続 400 名で応答 2 秒以内</p>\n        <p class=\"verdict\">満たす</p>\n        <p class=\"how\">性能試験で確認、結果を報告</p>\n        <p class=\"when\">総合テスト</p>\n      </div>\n      <div class=\"row\" data-row=\"5\">\n        <p class=\"rid\">RQ-040</p>\n        <p class=\"req\">操作履歴を 5 年間保持すること</p>\n        <p class=\"verdict\">満たす</p>\n        <p class=\"how\">監査ログを別領域へ日次で退避</p>\n        <p class=\"when\">基本設計</p>\n      </div>\n      <div class=\"row\" data-row=\"6\" data-out>\n        <p class=\"rid\">RQ-044</p>\n        <p class=\"req\">モバイル端末からの受注登録</p>\n        <p class=\"verdict\">第 2 期</p>\n        <p class=\"how\">第 1 期は参照のみ。登録は次期で対応</p>\n        <p class=\"when\">対象外</p>\n      </div>\n    </div>\n\n    <p class=\"foot\" data-type=\"foot\">判定は「満たす／代替提案／第 2 期」の 3 値のみ。条件付きで満たす、は使いません — 条件が読まれないまま合意された扱いになるためです。</p>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/requirements-response-table/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/requirements-response-table/font.css",
        "https://design-vault.pages.dev/designs/requirements-response-table/font-0.woff2",
        "https://design-vault.pages.dev/designs/requirements-response-table/font-1.woff2",
        "https://design-vault.pages.dev/designs/requirements-response-table/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/requirements-response-table",
    "en": "https://design-vault.pages.dev/en/designs/requirements-response-table"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\nRFP の要求一覧に 1 件ずつ回答する表。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nA table answering an RFP's requirement list one row at a time. `pattern.html` is the artboard\nitself; both `cover.png` and the measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 判定列を固定幅にすると、縦に読んだとき判定の並びが揃い、例外が 1 行だけだと目で分かる\n- 表頭の下だけ罫を `--ink` にする。他の罫は `--rule` のままなので、頭と本体が 1 手段で分かれる\n- 対象外の行は文字色を `--muted` に落とすだけにする。取り消し線は「交渉の余地なし」と読まれる\n\n### Apply to\n\n- 提案書の要求対応表、要件定義書のトレーサビリティ一覧\n- 受入基準の確認（判定を「合格／条件付き／未実施」に読み替える）"
}