{
  "id": "deck-cover-project-brief",
  "schemaVersion": 2,
  "title": {
    "ja": "案件資料の表紙 — 件名の下に発行情報を並べる",
    "en": "Project Deck Cover — Subject Above the Issue Record"
  },
  "summary": {
    "ja": "16:9 の濃地。件名を左に据え、提出先・提出日・文書番号・作成を下端に 4 つ固定で並べる",
    "en": "A dark 16:9 cover: the subject at left, with four fixed issue fields along the foot"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "cover"
  ],
  "format": "slide-16x9",
  "density": "low",
  "layout": {
    "kind": "stack",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 116,
      "right": 140,
      "bottom": 116,
      "left": 140
    }
  },
  "type": {
    "doctype": {
      "size": 20,
      "weight": 700,
      "tracking": "0.08em"
    },
    "edition": {
      "size": 17,
      "weight": 400,
      "tracking": "0.04em",
      "numeric": "tabular"
    },
    "kicker": {
      "size": 15,
      "weight": 500,
      "tracking": "0.3em",
      "transform": "upper"
    },
    "title": {
      "size": 84,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.28
    },
    "lede": {
      "size": 20,
      "weight": 400,
      "leading": 1.9
    },
    "label": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em"
    },
    "value": {
      "size": 21,
      "weight": 500,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#111722",
    "surface": "#1A2231",
    "ink": "#E9EDF4",
    "muted": "#8894A6",
    "accent": "#5AA2E8",
    "rule": "#2B3445",
    "series": []
  },
  "rules": [
    {
      "ja": "発行情報は 4 つで固定する。案件資料は同じ件名で何度も出るので、版・日付・宛先が表紙に無いと現物を特定できない",
      "en": "Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold"
    },
    {
      "ja": "文書種別は件名より先に読ませてよい唯一の情報。塗った小さな箱に入れ、件名とは級数で差をつける",
      "en": "The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position"
    },
    {
      "ja": "色は件名の 2 行目だけに置く。1 行目は案件、2 行目はその資料が扱う範囲、という読み順がそれで付く",
      "en": "Colour only the second line of the subject — the first names the project, the second names what this deck covers"
    },
    {
      "ja": "濃地では文字を純白にしない。表紙は会議中いちばん長く映される 1 枚になる",
      "en": "Never pure white on a dark ground — the cover stays on screen longer than any other slide"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DzApcxkh.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "cover-a4-centered-subject",
      "agenda-numbered-sections",
      "phase-divider-step-rail"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "low",
      "layout": {
        "kind": "stack",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 116,
          "right": 140,
          "bottom": 116,
          "left": 140
        }
      },
      "type": {
        "doctype": {
          "size": 20,
          "weight": 700,
          "tracking": "0.08em"
        },
        "edition": {
          "size": 17,
          "weight": 400,
          "tracking": "0.04em",
          "numeric": "tabular"
        },
        "kicker": {
          "size": 15,
          "weight": 500,
          "tracking": "0.3em",
          "transform": "upper"
        },
        "title": {
          "size": 84,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.28
        },
        "lede": {
          "size": 20,
          "weight": 400,
          "leading": 1.9
        },
        "label": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em"
        },
        "value": {
          "size": 21,
          "weight": 500,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#111722",
        "surface": "#1A2231",
        "ink": "#E9EDF4",
        "muted": "#8894A6",
        "accent": "#5AA2E8",
        "rule": "#2B3445"
      },
      "rules": [
        "Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold",
        "The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position",
        "Colour only the second line of the subject — the first names the project, the second names what this deck covers",
        "Never pure white on a dark ground — the cover stays on screen longer than any other slide"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 116 右 140 下 116 左 140\n\n## 文字（版面 1920px に対する px）\ndoctype  20px / 700 / 字間 0.08em\nedition  17px / 400 / 字間 0.04em / 等幅数字\nkicker  15px / 500 / 字間 0.3em / 大文字\ntitle  84px / 700 / 字間 0.01em / 行送り 1.28\nlede  20px / 400 / 行送り 1.9\nlabel  14px / 500 / 字間 0.14em\nvalue  21px / 500 / 等幅数字\n\n## 配色\n地 #111722 / 面 #1A2231 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445\n\n## 外すと崩れる点\n- 発行情報は 4 つで固定する。案件資料は同じ件名で何度も出るので、版・日付・宛先が表紙に無いと現物を特定できない\n- 文書種別は件名より先に読ませてよい唯一の情報。塗った小さな箱に入れ、件名とは級数で差をつける\n- 色は件名の 2 行目だけに置く。1 行目は案件、2 行目はその資料が扱う範囲、という読み順がそれで付く\n- 濃地では文字を純白にしない。表紙は会議中いちばん長く映される 1 枚になる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/deck-cover-project-brief/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 116 right 140 bottom 116 left 140\n\n## Type (px against a 1920px canvas)\ndoctype  20px / 700 / tracking 0.08em\nedition  17px / 400 / tracking 0.04em / tabular numerals\nkicker  15px / 500 / tracking 0.3em / uppercase\ntitle  84px / 700 / tracking 0.01em / leading 1.28\nlede  20px / 400 / leading 1.9\nlabel  14px / 500 / tracking 0.14em\nvalue  21px / 500 / tabular numerals\n\n## Colour\nGround #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445\n\n## Constraints — dropping these breaks it\n- Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold\n- The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position\n- Colour only the second line of the subject — the first names the project, the second names what this deck covers\n- Never pure white on a dark ground — the cover stays on screen longer than any other slide\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/deck-cover-project-brief/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: #111722;\n    --surface: #1A2231;\n    --ink: #E9EDF4;      /* 純白にしない — 表紙は最も長く映される 1 枚 */\n    --muted: #8894A6;\n    --accent: #5AA2E8;\n    --rule: #2B3445;\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: 116px 140px;                 /* → layout.margin */\n  }\n  /* [data-content] は版面（安全領域）そのもので、中身の外接矩形ではない。\n     height:100% で余白と一対一に対応させる。 */\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  /* 上端は「この紙が何か」だけ。件名より先に読まれてよい唯一の情報。 */\n  .head { display: flex; align-items: baseline; gap: 28px; }\n  .doctype {\n    font-size: 20px; font-weight: 700; letter-spacing: .08em;\n    background: var(--surface); border: 1px solid var(--rule); padding: 12px 26px;\n  }\n  .edition { font-size: 17px; font-weight: 400; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n  .subject { align-self: center; display: grid; gap: 34px; max-width: 1180px; }\n  .kicker { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }\n  .title { font-size: 84px; font-weight: 700; line-height: 1.28; letter-spacing: .01em; }\n  /* 色は件名の 2 行目だけ。1 行目にも置くとどちらが主語か分からなくなる。 */\n  .title em { font-style: normal; color: var(--accent); }\n  .lede { font-size: 20px; font-weight: 400; line-height: 1.9; color: var(--muted); }\n\n  /* 発行情報は 4 つで固定する。案件資料は同じ件名で何度も出るので、\n     どの版をいつ誰に出したかが表紙で分からないと現物が特定できない。 */\n  .foot { border-top: 1px solid var(--rule); padding-top: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; }\n  .label { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n  .value { font-size: 21px; font-weight: 500; margin-top: 14px; 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      <p class=\"doctype\" data-type=\"doctype\">提案書</p>\n      <p class=\"edition\" data-type=\"edition\">第 1.2 版 ／ 2026.09.15 改訂</p>\n    </div>\n\n    <div class=\"subject\">\n      <p class=\"kicker\" data-type=\"kicker\">RFP RESPONSE</p>\n      <h1 class=\"title\" data-type=\"title\">受発注システムの刷新<br><em>第 1 期 実施方針</em></h1>\n      <p class=\"lede\" data-type=\"lede\">現行の受注業務を止めないことを前提に、対象範囲・体制・工程・移行手順をまとめています。</p>\n    </div>\n\n    <div class=\"foot\">\n      <div>\n        <p class=\"label\" data-type=\"label\">提出先</p>\n        <p class=\"value\" data-type=\"value\">株式会社 ○○商事 御中</p>\n      </div>\n      <div>\n        <p class=\"label\">提出日</p>\n        <p class=\"value\">2026 年 9 月 15 日</p>\n      </div>\n      <div>\n        <p class=\"label\">文書番号</p>\n        <p class=\"value\">PRP-2026-0915-02</p>\n      </div>\n      <div>\n        <p class=\"label\">作成</p>\n        <p class=\"value\">システム開発本部</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/deck-cover-project-brief/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/deck-cover-project-brief/font.css",
        "https://design-vault.pages.dev/designs/deck-cover-project-brief/font-0.woff2",
        "https://design-vault.pages.dev/designs/deck-cover-project-brief/font-1.woff2",
        "https://design-vault.pages.dev/designs/deck-cover-project-brief/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/deck-cover-project-brief",
    "en": "https://design-vault.pages.dev/en/designs/deck-cover-project-brief"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\nシステム開発案件の一式（RFP 回答 〜 リリース報告）で使う表紙。**`pattern.html` が版そのもの**で、\n`cover.png` と frontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe cover for a system-development deck. `pattern.html` is the artboard itself; both `cover.png`\nand the measurements come from it, so the three cannot drift apart.\n\n### Techniques\n\n- 版面を 3 段（文書種別・件名・発行情報）に割り、間を `1fr` で空ける。件名の行数が増えても上下の帯は動かない\n- 発行情報を 4 等分の列に固定すると、宛先が長くても日付と番号の位置が動かない\n- 濃地に薄い面を 1 つだけ置く。文書種別の箱がそれで、他に面を使わないから種別が浮く\n\n### Apply to\n\n- 提案書・要件定義書・基本設計書の表紙（`提案書` を差し替えるだけで通しで使える）\n- 週次・月次の進捗報告（件名を報告対象期間に差し替える）"
}