{
  "id": "org-tree-three-tiers",
  "schemaVersion": 2,
  "title": {
    "ja": "体制図 3 階層 — 意思決定の線だけを引く",
    "en": "Org Tree — Only the Decision Path Is Drawn"
  },
  "summary": {
    "ja": "決裁の経路だけを線にした体制図。日々の相談はこの線を通らないと明記する",
    "en": "A structure chart whose lines are decisions only, stating that daily work bypasses them"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal"
  ],
  "useCases": [
    "org"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "tree",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 120,
      "bottom": 96,
      "left": 120
    },
    "columns": {
      "count": 3,
      "gap": 80
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "legend": {
      "size": 17,
      "weight": 400
    },
    "role": {
      "size": 15,
      "weight": 500,
      "tracking": "0.14em"
    },
    "who": {
      "size": 27,
      "weight": 700,
      "leading": 1.3
    },
    "body": {
      "size": 16,
      "weight": 400,
      "leading": 1.6
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    }
  },
  "colors": {
    "ground": "#FAFAFB",
    "surface": "#FFFFFF",
    "ink": "#14161B",
    "muted": "#71767F",
    "accent": "#3F4AC4",
    "rule": "#D8DBE1",
    "series": []
  },
  "rules": [
    {
      "ja": "線は決裁の経路に限る。相談の線を混ぜると、どちらも読めなくなる",
      "en": "Lines mean decisions only — mixing in consultation makes both unreadable"
    },
    {
      "ja": "決裁の一点は箱の罫で示す。線で示すと組織の線と混ざる",
      "en": "Mark the decision point on the box, not the line, so it cannot be read as reporting"
    },
    {
      "ja": "縦線・横線の位置は列の中心の実寸で取る。目分量の 16.6% は箱の中心を外す",
      "en": "Derive the connector positions from the real column centres — 16.6% misses the box"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover._bSM_lUU.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "stakeholder-network-hub",
      "next-action-owner-date",
      "timeline-vertical-milestones"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "tree",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 120,
          "bottom": 96,
          "left": 120
        },
        "columns": {
          "count": 3,
          "gap": 80
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "legend": {
          "size": 17,
          "weight": 400
        },
        "role": {
          "size": 15,
          "weight": 500,
          "tracking": "0.14em"
        },
        "who": {
          "size": 27,
          "weight": 700,
          "leading": 1.3
        },
        "body": {
          "size": 16,
          "weight": 400,
          "leading": 1.6
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        }
      },
      "colors": {
        "ground": "#FAFAFB",
        "surface": "#FFFFFF",
        "ink": "#14161B",
        "muted": "#71767F",
        "accent": "#3F4AC4",
        "rule": "#D8DBE1"
      },
      "rules": [
        "Lines mean decisions only — mixing in consultation makes both unreadable",
        "Mark the decision point on the box, not the line, so it cannot be read as reporting",
        "Derive the connector positions from the real column centres — 16.6% misses the box"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 120 下 96 左 120\n- 3 カラム（等分）、間隔 80\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nlegend  17px / 400\nrole  15px / 500 / 字間 0.14em\nwho  27px / 700 / 行送り 1.3\nbody  16px / 400 / 行送り 1.6\nnote  17px / 400 / 行送り 1.8\n\n## 配色\n地 #FAFAFB / 面 #FFFFFF / 文字 #14161B / 補助 #71767F / 強調 #3F4AC4 / 罫 #D8DBE1\n\n## 外すと崩れる点\n- 線は決裁の経路に限る。相談の線を混ぜると、どちらも読めなくなる\n- 決裁の一点は箱の罫で示す。線で示すと組織の線と混ざる\n- 縦線・横線の位置は列の中心の実寸で取る。目分量の 16.6% は箱の中心を外す\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/org-tree-three-tiers/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- 3 equal columns, gap 80\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nlegend  17px / 400\nrole  15px / 500 / tracking 0.14em\nwho  27px / 700 / leading 1.3\nbody  16px / 400 / leading 1.6\nnote  17px / 400 / leading 1.8\n\n## Colour\nGround #FAFAFB / Surface #FFFFFF / Ink #14161B / Muted #71767F / Accent #3F4AC4 / Rule #D8DBE1\n\n## Constraints — dropping these breaks it\n- Lines mean decisions only — mixing in consultation makes both unreadable\n- Mark the decision point on the box, not the line, so it cannot be read as reporting\n- Derive the connector positions from the real column centres — 16.6% misses the box\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/org-tree-three-tiers/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>体制図 3 階層 — 意思決定の線だけを引く</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: #FAFAFB;\n    --surface: #FFFFFF;\n    --ink: #14161B;\n    --muted: #71767F;\n    --accent: #3F4AC4;\n    --rule: #D8DBE1;\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  .tree { display: grid; grid-template-rows: auto 56px auto 56px 1fr; justify-items: center; }\n\n  .node { background: var(--surface); border: 1px solid var(--rule); padding: 26px 34px;\n          display: grid; gap: 8px; text-align: center; min-width: 360px; }\n  .role { font-size: 15px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n  .who { font-size: 27px; font-weight: 700; line-height: 1.3; }\n  .body { font-size: 16px; font-weight: 400; color: var(--muted); line-height: 1.6; }\n  /* 決裁の一点だけを立てる。線ではなく箱の罫で示すので、\n     組織の線（誰が誰に報告するか）と混ざらない。 */\n  .node[data-lead] { border-color: var(--accent); border-top-width: 4px; }\n  .node[data-lead] .role { color: var(--accent); }\n\n  /* 縦線・横線は擬似要素で引く。SVG を使わないのは、\n     箱の高さが中身で動いても線の起点がずれないようにするため。 */\n  .drop { position: relative; width: 100%; }\n  .drop::before { content: \"\"; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); }\n  .span { position: relative; width: 100%; }\n  /* 横線と縦線の位置は tier の列中心に合わせる。3 列 1fr + gap 80px を\n     版面幅 1680px で割った実寸で、目分量の 16.6% では card の中心を外す。 */\n  .span::before { content: \"\"; position: absolute; left: 15.08%; right: 15.08%; top: 50%; height: 1px; background: var(--rule); }\n  .span::after { content: \"\"; position: absolute; left: 50%; top: 0; height: 50%; width: 1px; background: var(--rule); }\n  .span i { position: absolute; top: 50%; bottom: 0; width: 1px; background: var(--rule); }\n\n  .tier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px; width: 100%; }\n  .unit { display: grid; gap: 22px; align-content: start; }\n  .members { list-style: none; padding: 0; display: grid; gap: 10px;\n             border-top: 1px solid var(--rule); padding-top: 20px; }\n  .members li { font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--muted); }\n  .members li b { font-weight: 500; color: var(--ink); }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 24px; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1400px; }\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\">線は決裁の経路。日々の相談はこの線を通りません</p>\n    </div>\n\n    <div class=\"tree\">\n      <div class=\"node\" data-lead>\n        <p class=\"role\" data-type=\"role\">PROJECT OWNER</p>\n        <p class=\"who\" data-type=\"who\">情報システム部 部長</p>\n        <p class=\"body\" data-type=\"body\">方式・費用・停止時間の最終決裁</p>\n      </div>\n\n      <div class=\"drop\"></div>\n\n      <div class=\"node\">\n        <p class=\"role\">PROJECT MANAGER</p>\n        <p class=\"who\">当社 プロジェクト責任者</p>\n        <p class=\"body\">週次で進捗と課題を上げる。現場判断はここで止める</p>\n      </div>\n\n      <div class=\"span\"><i style=\"left:15.08%\"></i><i style=\"left:50%\"></i><i style=\"left:84.92%\"></i></div>\n\n      <div class=\"tier\">\n        <div class=\"unit\" data-col=\"1\">\n          <div class=\"node\">\n            <p class=\"role\">TEAM A</p>\n            <p class=\"who\">業務設計</p>\n            <p class=\"body\">現行業務の確定と受入基準</p>\n          </div>\n          <ul class=\"members\">\n            <li><b>貴社</b> 各課から 1 名（計 6 名）</li>\n            <li><b>当社</b> 業務コンサル 2 名</li>\n            <li>週 2 日 常駐</li>\n          </ul>\n        </div>\n        <div class=\"unit\" data-col=\"2\">\n          <div class=\"node\">\n            <p class=\"role\">TEAM B</p>\n            <p class=\"who\">データ移行</p>\n            <p class=\"body\">23 本の連携の棚卸しと切替</p>\n          </div>\n          <ul class=\"members\">\n            <li><b>貴社</b> 情報システム部 3 名</li>\n            <li><b>当社</b> 移行担当 4 名</li>\n            <li>全期間 常駐</li>\n          </ul>\n        </div>\n        <div class=\"unit\" data-col=\"3\">\n          <div class=\"node\">\n            <p class=\"role\">TEAM C</p>\n            <p class=\"who\">展開・定着</p>\n            <p class=\"body\">拠点への展開と運用の引き渡し</p>\n          </div>\n          <ul class=\"members\">\n            <li><b>貴社</b> 各拠点の推進役 9 名</li>\n            <li><b>当社</b> 教育担当 2 名</li>\n            <li>Q3 以降に立ち上げ</li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">この図に無い人は決裁に関与しません。関与する人を増やすほど週次の合意が遅れるため、Team 間の調整は責任者 1 人に集約しています。</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/org-tree-three-tiers/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/org-tree-three-tiers/font.css",
        "https://design-vault.pages.dev/designs/org-tree-three-tiers/font-0.woff2",
        "https://design-vault.pages.dev/designs/org-tree-three-tiers/font-1.woff2",
        "https://design-vault.pages.dev/designs/org-tree-three-tiers/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/org-tree-three-tiers",
    "en": "https://design-vault.pages.dev/en/designs/org-tree-three-tiers"
  },
  "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- 各チームの下に人数の内訳を置く。箱だけでは負担が読めない\n- 連結線は擬似要素で引く。箱の高さが中身で動いても起点がずれない\n- 「この図に無い人は決裁に関与しない」を注記として明示する\n\n### Apply to\n\n- 提案書の体制ページ\n- プロジェクト開始時の役割合意"
}