{
  "id": "stakeholder-network-hub",
  "schemaVersion": 2,
  "title": {
    "ja": "関係図 — 階層を持たない繋がりを示す",
    "en": "Stakeholder Network — Connections Without a Hierarchy"
  },
  "summary": {
    "ja": "7 者の関係を節と線で置き、説得の対象 1 者だけを塗る",
    "en": "Seven parties as nodes and edges, with only the one to persuade filled in"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz"
  ],
  "useCases": [
    "org"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "network",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 128,
      "bottom": 96,
      "left": 128
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "legend": {
      "size": 17,
      "weight": 400
    },
    "who": {
      "size": 23,
      "weight": 700,
      "leading": 1.3
    },
    "stance": {
      "size": 15,
      "weight": 400
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "count": {
      "size": 15,
      "weight": 500,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#10141A",
    "surface": "#1A2029",
    "ink": "#EDF1F6",
    "muted": "#8A94A2",
    "accent": "#5BC0BE",
    "rule": "#262F3A",
    "series": []
  },
  "rules": [
    {
      "ja": "塗るのは 1 者だけ。全員を色分けすると「誰から話すか」が消える",
      "en": "Fill one node only — colouring everyone erases who to approach first"
    },
    {
      "ja": "線は SVG、節は HTML。描画順がそのまま重なり順になり、節が必ず線の上に乗る",
      "en": "Edges in SVG, nodes in HTML — document order puts every node above every line"
    },
    {
      "ja": "孤立した節を置かない。線の無い関係者は、この図に載せる理由が無い",
      "en": "No orphan nodes — a party with no edge has no reason to be on the chart"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.CX2KQ4MX.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "org-tree-three-tiers",
      "matrix-2x2-priority-plot",
      "next-action-owner-date"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "network",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 128,
          "bottom": 96,
          "left": 128
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "legend": {
          "size": 17,
          "weight": 400
        },
        "who": {
          "size": 23,
          "weight": 700,
          "leading": 1.3
        },
        "stance": {
          "size": 15,
          "weight": 400
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "count": {
          "size": 15,
          "weight": 500,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#10141A",
        "surface": "#1A2029",
        "ink": "#EDF1F6",
        "muted": "#8A94A2",
        "accent": "#5BC0BE",
        "rule": "#262F3A"
      },
      "rules": [
        "Fill one node only — colouring everyone erases who to approach first",
        "Edges in SVG, nodes in HTML — document order puts every node above every line",
        "No orphan nodes — a party with no edge has no reason to be on the chart"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 128 下 96 左 128\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nlegend  17px / 400\nwho  23px / 700 / 行送り 1.3\nstance  15px / 400\nnote  17px / 400 / 行送り 1.8\ncount  15px / 500 / 等幅数字\n\n## 配色\n地 #10141A / 面 #1A2029 / 文字 #EDF1F6 / 補助 #8A94A2 / 強調 #5BC0BE / 罫 #262F3A\n\n## 外すと崩れる点\n- 塗るのは 1 者だけ。全員を色分けすると「誰から話すか」が消える\n- 線は SVG、節は HTML。描画順がそのまま重なり順になり、節が必ず線の上に乗る\n- 孤立した節を置かない。線の無い関係者は、この図に載せる理由が無い\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/stakeholder-network-hub/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 128 bottom 96 left 128\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nlegend  17px / 400\nwho  23px / 700 / leading 1.3\nstance  15px / 400\nnote  17px / 400 / leading 1.8\ncount  15px / 500 / tabular numerals\n\n## Colour\nGround #10141A / Surface #1A2029 / Ink #EDF1F6 / Muted #8A94A2 / Accent #5BC0BE / Rule #262F3A\n\n## Constraints — dropping these breaks it\n- Fill one node only — colouring everyone erases who to approach first\n- Edges in SVG, nodes in HTML — document order puts every node above every line\n- No orphan nodes — a party with no edge has no reason to be on the chart\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/stakeholder-network-hub/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  :root {\n    --ground: #10141A;\n    --surface: #1A2029;\n    --ink: #EDF1F6;\n    --muted: #8A94A2;\n    --accent: #5BC0BE;\n    --rule: #262F3A;\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 128px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 36px; }\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  .plane { position: relative; }\n  /* 線は SVG、節は HTML。線を先に描いてから節を置くので、\n     節が必ず線の上に乗る（描画順がそのまま重なり順になる）。 */\n  .edges { position: absolute; inset: 0; width: 100%; height: 100%; }\n\n  .node { position: absolute; transform: translate(-50%, -50%);\n          background: var(--surface); border: 1px solid var(--rule);\n          padding: 20px 26px; display: grid; gap: 7px; text-align: center; white-space: nowrap; }\n  .who { font-size: 23px; font-weight: 500; line-height: 1.3; }\n  .stance { font-size: 15px; font-weight: 400; color: var(--muted); }\n  /* 説得の対象 1 者だけを立てる。全員を色分けすると「誰から話すか」が消える。 */\n  .node[data-key] { border-color: var(--accent); background: var(--accent); }\n  .node[data-key] .who { color: var(--ground); font-weight: 700; }\n  .node[data-key] .stance { color: color-mix(in srgb, var(--ground) 76%, transparent); }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 24px;\n          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: 1280px; }\n  .count { font-size: 15px; font-weight: 500; color: var(--muted); 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\">この決裁に関わる 7 者</h1>\n      <p class=\"legend\" data-type=\"legend\">太い線は週次で話す相手。細い線は報告だけの関係</p>\n    </div>\n\n    <div class=\"plane\">\n      <svg class=\"edges\" viewBox=\"0 0 1664 640\" preserveAspectRatio=\"none\">\n        <g stroke=\"var(--rule)\" stroke-width=\"1.5\" fill=\"none\">\n          <path d=\"M832 320 L1380 130\" />\n          <path d=\"M832 320 L300 540\" />\n          <path d=\"M832 320 L1380 540\" />\n          <path d=\"M300 130 L300 540\" />\n          <path d=\"M1380 130 L1380 540\" />\n          <path d=\"M300 130 L1380 130\" />\n          <path d=\"M832 320 L832 614\" />\n        </g>\n        <g stroke=\"var(--accent)\" stroke-width=\"3\" fill=\"none\">\n          <path d=\"M832 320 L832 70\" />\n          <path d=\"M832 70 L1380 130\" />\n          <path d=\"M832 320 L300 130\" />\n        </g>\n      </svg>\n\n      <div class=\"node\" data-key style=\"left:50%; top:10.9%\">\n        <p class=\"who\" data-type=\"who\">情報システム部 部長</p>\n        <p class=\"stance\" data-type=\"stance\">決裁者 / 現状は中立</p>\n      </div>\n      <div class=\"node\" style=\"left:50%; top:50%\">\n        <p class=\"who\">情報システム部 課長</p>\n        <p class=\"stance\">窓口 / 推進に前向き</p>\n      </div>\n      <div class=\"node\" style=\"left:18%; top:20.3%\">\n        <p class=\"who\">経理部 部長</p>\n        <p class=\"stance\">費用の承認 / 慎重</p>\n      </div>\n      <div class=\"node\" style=\"left:82.9%; top:20.3%\">\n        <p class=\"who\">製造本部 本部長</p>\n        <p class=\"stance\">停止時間に反対</p>\n      </div>\n      <div class=\"node\" style=\"left:18%; top:84.4%\">\n        <p class=\"who\">営業部 課長</p>\n        <p class=\"stance\">現場の代表 / 賛成</p>\n      </div>\n      <div class=\"node\" style=\"left:82.9%; top:84.4%\">\n        <p class=\"who\">保守ベンダー</p>\n        <p class=\"stance\">期限の当事者</p>\n      </div>\n      <div class=\"node\" style=\"left:50%; top:96%\">\n        <p class=\"who\">当社 営業担当</p>\n        <p class=\"stance\">窓口 / 週次で同席</p>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">製造本部の反対は停止時間だけが理由です。ここを先に潰せば、経理部の慎重さは費用の内訳で解けます。順序を逆にすると 2 回とも説明し直しになります。</p>\n      <p class=\"count\" data-type=\"count\">週次で話す相手 3 者 / 報告のみ 4 者</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/stakeholder-network-hub/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/stakeholder-network-hub/font.css",
        "https://design-vault.pages.dev/designs/stakeholder-network-hub/font-0.woff2",
        "https://design-vault.pages.dev/designs/stakeholder-network-hub/font-1.woff2",
        "https://design-vault.pages.dev/designs/stakeholder-network-hub/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/stakeholder-network-hub",
    "en": "https://design-vault.pages.dev/en/designs/stakeholder-network-hub"
  },
  "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- 太さ 2 値（1.5px / 3px）だけで関係の濃さを示す。3 段階目は作らない\n- 各節に「立場」を 1 行で書く。名前だけでは説得の順序が決まらない\n- SVG の paint は var(--role) で書く。リテラルを置くと配色の差し替えが半分で止まる\n\n### Apply to\n\n- 大型案件の意思決定者マップ\n- 社内調整の順序を合意する"
}