{
  "id": "chord-diagram-cross-team-collaboration",
  "schemaVersion": 2,
  "title": {
    "ja": "部署間の協業 — 開発・データ・運用が結ぶ連携",
    "en": "Cross-team Collaboration — Engineering, Data, and Operations Connections"
  },
  "summary": {
    "ja": "円周上に部署、部署ペアに帯を置き、帯幅で月間の共同案件数を比べるChord diagram。誰と誰の連携が集中するかを見る",
    "en": "A chord diagram places departments around a ring and encodes monthly joint-project counts in ribbon width to reveal concentrated collaboration."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "comparison",
    "org"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "network",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 140,
      "bottom": 100,
      "left": 140
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em"
    },
    "subtitle": {
      "size": 22,
      "weight": 500
    },
    "axisTitle": {
      "size": 22,
      "weight": 700
    },
    "label": {
      "size": 22,
      "weight": 700
    },
    "legend": {
      "size": 20,
      "weight": 500
    },
    "takeaway": {
      "size": 28,
      "weight": 500
    },
    "note": {
      "size": 20,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "各部署を円周上の固定区間に置き、帯が部署ペアの共同案件数を表す",
      "en": "Place each department on a fixed ring segment; ribbons encode joint-project counts for department pairs."
    },
    {
      "ja": "帯の太さを比較して、連携の集中先や薄い結びつきを読む",
      "en": "Compare ribbon widths to find concentrated collaborations and weaker ties."
    },
    {
      "ja": "関係者ネットワークの自由配置と異なり、円周区間が各部署の総量とペア間の流れを担う",
      "en": "Unlike a freely placed stakeholder network, ring segments encode group totals while ribbons encode pairwise volume."
    },
    {
      "ja": "架空の6部署の月間件数。期間・案件定義・重複計上が異なる実データを混ぜない",
      "en": "Fictional monthly counts for six departments; do not mix periods, project definitions, or duplicate-counting rules."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BQ-kH7O6.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "network",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 140,
          "bottom": 100,
          "left": 140
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em"
        },
        "subtitle": {
          "size": 22,
          "weight": 500
        },
        "axisTitle": {
          "size": 22,
          "weight": 700
        },
        "label": {
          "size": 22,
          "weight": 700
        },
        "legend": {
          "size": 20,
          "weight": 500
        },
        "takeaway": {
          "size": 28,
          "weight": 500
        },
        "note": {
          "size": 20,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Place each department on a fixed ring segment; ribbons encode joint-project counts for department pairs.",
        "Compare ribbon widths to find concentrated collaborations and weaker ties.",
        "Unlike a freely placed stakeholder network, ring segments encode group totals while ribbons encode pairwise volume.",
        "Fictional monthly counts for six departments; do not mix periods, project definitions, or duplicate-counting rules."
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\nlabel  22px / 700\nlegend  20px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 各部署を円周上の固定区間に置き、帯が部署ペアの共同案件数を表す\n- 帯の太さを比較して、連携の集中先や薄い結びつきを読む\n- 関係者ネットワークの自由配置と異なり、円周区間が各部署の総量とペア間の流れを担う\n- 架空の6部署の月間件数。期間・案件定義・重複計上が異なる実データを混ぜない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em\nsubtitle  22px / 500\naxisTitle  22px / 700\nlabel  22px / 700\nlegend  20px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Place each department on a fixed ring segment; ribbons encode joint-project counts for department pairs.\n- Compare ribbon widths to find concentrated collaborations and weaker ties.\n- Unlike a freely placed stakeholder network, ring segments encode group totals while ribbons encode pairwise volume.\n- Fictional monthly counts for six departments; do not mix periods, project definitions, or duplicate-counting rules.\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/chord-diagram-cross-team-collaboration/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{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;\n  --plot-color-1: #008A83;\n  --plot-color-2: #C16A24;\n  --plot-color-3: #7956A8;\n  --plot-color-4: #C34B62;\n  --plot-color-5: #56813D;\n}\n*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}\n.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}\n</style>\n<div class=\"artboard\" data-artboard><div class=\"content\" data-content>\n<svg class=\"figure\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"6部署間の架空の協業件数を、円周上の部署セグメントと太さの異なる相互接続帯で示すChord diagram。開発・データ・運用が中心的な連携を持つ。\">\n<style>\n.figure{font-family:\"Zen Kaku Gothic New\",\"Hiragino Sans\",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}\n.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.label{font-size:22px;font-weight:700}.legend{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}\n.ribbon{fill:none;stroke-linecap:round;opacity:.78}.g1{stroke:var(--accent)}.g2{stroke:var(--plot-color-1)}.g3{stroke:var(--plot-color-2)}.g4{stroke:var(--plot-color-3)}.g5{stroke:var(--plot-color-4)}.g6{stroke:var(--plot-color-5)}.swatch{stroke:none}.swatch.g1{fill:var(--accent)}.swatch.g2{fill:var(--plot-color-1)}.swatch.g3{fill:var(--plot-color-2)}.swatch.g4{fill:var(--plot-color-3)}.arc{fill:none;stroke-width:26;stroke-linecap:butt}\n</style>\n<rect class=\"ground\" width=\"1920\" height=\"1080\"/>\n<text class=\"ink title\" data-type=\"title\" x=\"140\" y=\"153\">部署間の協業 — 開発・データ・運用が結ぶ連携</text>\n<text class=\"muted subtitle\" data-type=\"subtitle\" x=\"140\" y=\"201\">6部署間の月間共同案件数 / 架空データ / 帯は部署ペアの件数に比例</text>\n<line class=\"rule\" x1=\"140\" y1=\"238\" x2=\"1780\" y2=\"238\" stroke-width=\"2\"/>\n<text class=\"ink axis-title\" data-type=\"axisTitle\" x=\"960\" y=\"294\" text-anchor=\"middle\">どの部署どうしが強く結びつき、連携が集中しているか</text>\n<!-- Pair bands connect fixed group segments around a ring; width encodes joint-project volume. -->\n<g class=\"ribbon\" fill=\"none\" transform=\"translate(0 24)\">\n<path class=\"g1\" stroke-width=\"22\" d=\"M850 370 Q960 475 1035 353\"/>\n<path class=\"g1\" stroke-width=\"17\" d=\"M830 390 Q960 560 791 418\"/>\n<path class=\"g2\" stroke-width=\"20\" d=\"M1070 376 Q1120 520 1175 598\"/>\n<path class=\"g2\" stroke-width=\"15\" d=\"M1085 365 Q960 560 922 777\"/>\n<path class=\"g3\" stroke-width=\"18\" d=\"M1153 457 Q1010 545 791 418\"/>\n<path class=\"g4\" stroke-width=\"14\" d=\"M998 777 Q960 560 753 635\"/>\n<path class=\"g5\" stroke-width=\"12\" d=\"M753 635 Q960 560 1035 353\"/>\n<path class=\"g6\" stroke-width=\"10\" d=\"M791 418 Q960 560 1175 598\"/>\n</g>\n<!-- Six fixed ring segments, one per department. -->\n<g fill=\"none\" stroke-width=\"26\" transform=\"translate(0 24)\">\n<path class=\"arc g1\" d=\"M769 450 A220 220 0 0 1 922 343\"/>\n<path class=\"arc g2\" d=\"M960 340 A220 220 0 0 1 1129 419\"/>\n<path class=\"arc g3\" d=\"M1151 450 A220 220 0 0 1 1167 635\"/>\n<path class=\"arc g4\" d=\"M1151 670 A220 220 0 0 1 998 777\"/>\n<path class=\"arc g5\" d=\"M960 780 A220 220 0 0 1 791 701\"/>\n<path class=\"arc g6\" d=\"M769 670 A220 220 0 0 1 753 485\"/>\n</g>\n<text class=\"ink label\" data-type=\"label\" x=\"960\" y=\"344\" text-anchor=\"middle\">開発</text>\n<text class=\"ink label\" x=\"1355\" y=\"446\" text-anchor=\"middle\">データ</text>\n<text class=\"ink label\" x=\"1336\" y=\"766\" text-anchor=\"middle\">運用</text>\n<text class=\"ink label\" x=\"960\" y=\"825\" text-anchor=\"middle\">営業</text>\n<text class=\"ink label\" x=\"565\" y=\"766\" text-anchor=\"middle\">デザイン</text>\n<text class=\"ink label\" x=\"565\" y=\"446\" text-anchor=\"middle\">経営</text>\n<circle cx=\"960\" cy=\"589\" r=\"79\" fill=\"var(--surface)\"/>\n<text class=\"muted legend\" x=\"960\" y=\"581\" text-anchor=\"middle\">月間</text><text class=\"ink label\" data-type=\"label\" x=\"960\" y=\"615\" text-anchor=\"middle\">協業件数</text>\n<g class=\"muted legend\" dominant-baseline=\"central\">\n<rect x=\"432\" y=\"875\" width=\"20\" height=\"20\" rx=\"4\" class=\"swatch g1\"/><text x=\"463\" y=\"885\">開発発の連携</text>\n<rect x=\"720\" y=\"875\" width=\"20\" height=\"20\" rx=\"4\" class=\"swatch g2\"/><text x=\"751\" y=\"885\">データ発</text>\n<rect x=\"950\" y=\"875\" width=\"20\" height=\"20\" rx=\"4\" class=\"swatch g3\"/><text x=\"981\" y=\"885\">運用発</text>\n<rect x=\"1160\" y=\"875\" width=\"20\" height=\"20\" rx=\"4\" class=\"swatch g4\"/><text x=\"1191\" y=\"885\">その他のペア</text>\n</g>\n<text class=\"ink takeaway\" data-type=\"takeaway\" x=\"960\" y=\"945\" text-anchor=\"middle\">開発・データ・運用の結びつきが、部署横断の協業の核</text>\n<line class=\"rule\" x1=\"140\" y1=\"974\" x2=\"1780\" y2=\"974\" stroke-width=\"1\"/><text class=\"muted note\" data-type=\"note\" x=\"140\" y=\"1013\">帯の太さはペアの共同案件数。実データでは対象期間・案件定義・重複計上の扱いを揃える。</text>\n</svg></div></div>\n",
      "url": "https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration/font.css",
        "https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration/font-0.woff2",
        "https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration/font-1.woff2",
        "https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration",
    "en": "https://design-vault.pages.dev/en/designs/chord-diagram-cross-team-collaboration"
  },
  "notesMarkdown": "### 視覚的な問い\n\n6部署間の共同案件は、どのペアに集中し、どの部署が協業の中心をつないでいるか。\n\n### 構造\n\n各部署を円周の固定区間に配置し、部署ペアを結ぶ帯の幅で月間の共同案件数を示す。帯の色は連携元の部署群を\n示し、太い帯は件数の多いペアを表す。ここでは開発・データ・運用の連携を強調している。\n\n関係者ネットワーク図は節点の位置と線で個別の関係者や説得順序を示す。一方このChord diagramでは、円周区間が\n部署別の総量、帯がペア別の量を同時に表すため、部署間の結びつきの分布を読む。値は架空であり、実際に使う際は\n集計期間、案件の定義、複数部署案件の重複計上方法を揃える。"
}