{
  "id": "offering-grid-six-cards",
  "schemaVersion": 2,
  "title": {
    "ja": "提供範囲 6 区画 — 網羅を見せ、順位をつけない",
    "en": "Offering Grid — Coverage Without Ranking"
  },
  "summary": {
    "ja": "同じ大きさの 6 区画で扱う範囲を示し、本提案に含む 4 区画を罫で囲う",
    "en": "Six equal cells showing the scope, with the four in this proposal outlined"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal"
  ],
  "useCases": [
    "offering"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "grid",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 120,
      "bottom": 96,
      "left": 120
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "legend": {
      "size": 17,
      "weight": 400
    },
    "no": {
      "size": 14,
      "weight": 500,
      "tracking": "0.2em",
      "numeric": "tabular"
    },
    "name": {
      "size": 30,
      "weight": 700,
      "leading": 1.35
    },
    "desc": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "scopeLabel": {
      "size": 15,
      "weight": 400
    },
    "scopeValue": {
      "size": 18,
      "weight": 500,
      "numeric": "tabular"
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "tally": {
      "size": 15,
      "weight": 500
    }
  },
  "colors": {
    "ground": "#F7F7F5",
    "surface": "#FFFFFF",
    "ink": "#17181A",
    "muted": "#74767B",
    "accent": "#23408E",
    "rule": "#DDDEDB",
    "series": []
  },
  "rules": [
    {
      "ja": "6 区画はすべて同じ大きさ。1 つでも大きくすると「おすすめ」の図になる",
      "en": "All six cells are equal — enlarge one and coverage turns into a recommendation"
    },
    {
      "ja": "含む / 別途の区別は罫 1 本で示す。塗ると優劣に見える",
      "en": "In-scope is marked by a rule, never a fill — a fill reads as better"
    },
    {
      "ja": "含まないものも同じ区画に置く。落とすと範囲外が見えなくなる",
      "en": "Out-of-scope items keep their cell — dropping them hides the boundary"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DXzY9UiG.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "pricing-3col-center-emphasis",
      "estimate-breakdown-table",
      "matrix-2x2-priority-plot"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "grid",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 120,
          "bottom": 96,
          "left": 120
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "legend": {
          "size": 17,
          "weight": 400
        },
        "no": {
          "size": 14,
          "weight": 500,
          "tracking": "0.2em",
          "numeric": "tabular"
        },
        "name": {
          "size": 30,
          "weight": 700,
          "leading": 1.35
        },
        "desc": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "scopeLabel": {
          "size": 15,
          "weight": 400
        },
        "scopeValue": {
          "size": 18,
          "weight": 500,
          "numeric": "tabular"
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "tally": {
          "size": 15,
          "weight": 500
        }
      },
      "colors": {
        "ground": "#F7F7F5",
        "surface": "#FFFFFF",
        "ink": "#17181A",
        "muted": "#74767B",
        "accent": "#23408E",
        "rule": "#DDDEDB"
      },
      "rules": [
        "All six cells are equal — enlarge one and coverage turns into a recommendation",
        "In-scope is marked by a rule, never a fill — a fill reads as better",
        "Out-of-scope items keep their cell — dropping them hides the boundary"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 120 下 96 左 120\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nlegend  17px / 400\nno  14px / 500 / 字間 0.2em / 等幅数字\nname  30px / 700 / 行送り 1.35\ndesc  17px / 400 / 行送り 1.8\nscopeLabel  15px / 400\nscopeValue  18px / 500 / 等幅数字\nnote  17px / 400 / 行送り 1.8\ntally  15px / 500\n\n## 配色\n地 #F7F7F5 / 面 #FFFFFF / 文字 #17181A / 補助 #74767B / 強調 #23408E / 罫 #DDDEDB\n\n## 外すと崩れる点\n- 6 区画はすべて同じ大きさ。1 つでも大きくすると「おすすめ」の図になる\n- 含む / 別途の区別は罫 1 本で示す。塗ると優劣に見える\n- 含まないものも同じ区画に置く。落とすと範囲外が見えなくなる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/offering-grid-six-cards/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 120 bottom 96 left 120\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nlegend  17px / 400\nno  14px / 500 / tracking 0.2em / tabular numerals\nname  30px / 700 / leading 1.35\ndesc  17px / 400 / leading 1.8\nscopeLabel  15px / 400\nscopeValue  18px / 500 / tabular numerals\nnote  17px / 400 / leading 1.8\ntally  15px / 500\n\n## Colour\nGround #F7F7F5 / Surface #FFFFFF / Ink #17181A / Muted #74767B / Accent #23408E / Rule #DDDEDB\n\n## Constraints — dropping these breaks it\n- All six cells are equal — enlarge one and coverage turns into a recommendation\n- In-scope is marked by a rule, never a fill — a fill reads as better\n- Out-of-scope items keep their cell — dropping them hides the boundary\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/offering-grid-six-cards/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>提供範囲 6 区画 — 網羅を見せ、順位をつけない</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  :root {\n    --ground: #F7F7F5;\n    --surface: #FFFFFF;\n    --ink: #17181A;\n    --muted: #74767B;\n    --accent: #23408E;\n    --rule: #DDDEDB;\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: 96px 120px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 40px; }\n\n  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 64px; }\n  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }\n  .legend { font-size: 17px; font-weight: 400; color: var(--muted); }\n\n  /* 6 区画はすべて同じ大きさ・同じ描き方。1 つでも大きくすると、\n     「網羅」の図が「おすすめ」の図に変わってしまう。 */\n  .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 32px; }\n  .card { background: var(--surface); border: 1px solid var(--rule); padding: 40px 38px 36px;\n          display: grid; grid-template-rows: auto auto 1fr auto; }\n  .no { font-size: 14px; font-weight: 500; letter-spacing: .2em; color: var(--muted); font-variant-numeric: tabular-nums; }\n  .name { margin-top: 16px; font-size: 30px; font-weight: 700; line-height: 1.35; }\n  .desc { margin-top: 18px; font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n  .scope { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule);\n           display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }\n  .scopeLabel { font-size: 15px; font-weight: 400; color: var(--muted); }\n  .scopeValue { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }\n  /* 「本提案に含む」区画だけ、罫 1 本で範囲を示す。色は 1 つの意味しか持たない。 */\n  .card[data-in] { border-color: var(--accent); }\n  .card[data-in] .no { color: var(--accent); }\n  .card[data-in] .scopeValue { color: var(--accent); }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 24px; display: flex; justify-content: space-between; gap: 48px; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1320px; }\n  .tally { font-size: 15px; font-weight: 500; color: var(--muted); }\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=\"legend\" data-type=\"legend\">枠が濃い 4 区画が本提案に含まれます。残り 2 つは別途お見積</p>\n    </div>\n\n    <div class=\"grid\">\n      <section class=\"card\" data-in>\n        <p class=\"no\" data-type=\"no\">01</p>\n        <p class=\"name\" data-type=\"name\">現状調査</p>\n        <p class=\"desc\" data-type=\"desc\">連携・帳票・権限の棚卸し。台帳に無いものを洗い出すところまで。</p>\n        <p class=\"scope\"><span class=\"scopeLabel\" data-type=\"scopeLabel\">本提案</span><span class=\"scopeValue\" data-type=\"scopeValue\">含む</span></p>\n      </section>\n      <section class=\"card\" data-in>\n        <p class=\"no\">02</p>\n        <p class=\"name\">業務設計</p>\n        <p class=\"desc\">移行後の手順を各課と確定し、受入基準まで文書にします。</p>\n        <p class=\"scope\"><span class=\"scopeLabel\">本提案</span><span class=\"scopeValue\">含む</span></p>\n      </section>\n      <section class=\"card\" data-in>\n        <p class=\"no\">03</p>\n        <p class=\"name\">データ移行</p>\n        <p class=\"desc\">23 本の連携の切替と、7 系統の得意先コードの統合。</p>\n        <p class=\"scope\"><span class=\"scopeLabel\">本提案</span><span class=\"scopeValue\">含む</span></p>\n      </section>\n      <section class=\"card\" data-in>\n        <p class=\"no\">04</p>\n        <p class=\"name\">拠点展開</p>\n        <p class=\"desc\">2 拠点の並行稼働のあと、残り 7 拠点へ順に広げます。</p>\n        <p class=\"scope\"><span class=\"scopeLabel\">本提案</span><span class=\"scopeValue\">含む</span></p>\n      </section>\n      <section class=\"card\">\n        <p class=\"no\">05</p>\n        <p class=\"name\">教育・定着支援</p>\n        <p class=\"desc\">拠点ごとの操作研修と、3 か月の質問受付。人数で費用が動きます。</p>\n        <p class=\"scope\"><span class=\"scopeLabel\">本提案</span><span class=\"scopeValue\">別途</span></p>\n      </section>\n      <section class=\"card\">\n        <p class=\"no\">06</p>\n        <p class=\"name\">運用の受託</p>\n        <p class=\"desc\">移行後の日次監視と一次対応。引き渡し先が決まってからの検討で十分です。</p>\n        <p class=\"scope\"><span class=\"scopeLabel\">本提案</span><span class=\"scopeValue\">別途</span></p>\n      </section>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">別途とした 2 区画は、いま決めても見積が動きます。人数と引き渡し先が決まってから出したほうが、結果として安く収まります。</p>\n      <p class=\"tally\" data-type=\"tally\">含む 4 区画 / 別途 2 区画</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/offering-grid-six-cards/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/offering-grid-six-cards/font.css",
        "https://design-vault.pages.dev/designs/offering-grid-six-cards/font-0.woff2",
        "https://design-vault.pages.dev/designs/offering-grid-six-cards/font-1.woff2",
        "https://design-vault.pages.dev/designs/offering-grid-six-cards/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/offering-grid-six-cards",
    "en": "https://design-vault.pages.dev/en/designs/offering-grid-six-cards"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 各区画に 1 行の説明と「本提案: 含む / 別途」の 1 行を必ず置く\n- 別途とした理由を下端に書く。書かないと「出し渋り」に読まれる\n- 区画数は 6 まで。8 区画にすると 1 枚あたりの説明が 1 行に痩せる\n\n### Apply to\n\n- 提案書の提供範囲ページ\n- サービス一覧の紹介"
}