Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English
索引に戻る

部署間の協業 — 開発・データ・運用が結ぶ連携

ネットワーク
部署間の協業 — 開発・データ・運用が結ぶ連携
140 100

1920 × 1080 作品として見る

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

chord-diagram-cross-team-collaboration-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

1.1 KB 
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 100 右 140 下 100 左 140

## 文字（版面 1920px に対する px）
title  46px / 700 / 字間 0.01em
subtitle  22px / 500
axisTitle  22px / 700
label  22px / 700
legend  20px / 500
takeaway  28px / 500
note  20px / 400

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 各部署を円周上の固定区間に置き、帯が部署ペアの共同案件数を表す
- 帯の太さを比較して、連携の集中先や薄い結びつきを読む
- 関係者ネットワークの自由配置と異なり、円周区間が各部署の総量とペア間の流れを担う
- 架空の6部署の月間件数。期間・案件定義・重複計上が異なる実データを混ぜない

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/chord-diagram-cross-team-collaboration/pattern.html

仕様

1.3 KB

/ai/designs/chord-diagram-cross-team-collaboration.json 

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:
  - 各部署を円周上の固定区間に置き、帯が部署ペアの共同案件数を表す
  - 帯の太さを比較して、連携の集中先や薄い結びつきを読む
  - 関係者ネットワークの自由配置と異なり、円周区間が各部署の総量とペア間の流れを担う
  - 架空の6部署の月間件数。期間・案件定義・重複計上が異なる実データを混ぜない

ファイル

pattern.html

5.5 KB

/designs/chord-diagram-cross-team-collaboration/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>部署間の協業 — 開発・データ・運用が結ぶ連携</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;
  --plot-color-1: #008A83;
  --plot-color-2: #C16A24;
  --plot-color-3: #7956A8;
  --plot-color-4: #C34B62;
  --plot-color-5: #56813D;
}
*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}
.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}
</style>
<div class="artboard" data-artboard><div class="content" data-content>
<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。開発・データ・運用が中心的な連携を持つ。">
<style>
.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)}
.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}
.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}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">部署間の協業 — 開発・データ・運用が結ぶ連携</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">6部署間の月間共同案件数 / 架空データ / 帯は部署ペアの件数に比例</text>
<line class="rule" x1="140" y1="238" x2="1780" y2="238" stroke-width="2"/>
<text class="ink axis-title" data-type="axisTitle" x="960" y="294" text-anchor="middle">どの部署どうしが強く結びつき、連携が集中しているか</text>
<!-- Pair bands connect fixed group segments around a ring; width encodes joint-project volume. -->
<g class="ribbon" fill="none" transform="translate(0 24)">
<path class="g1" stroke-width="22" d="M850 370 Q960 475 1035 353"/>
<path class="g1" stroke-width="17" d="M830 390 Q960 560 791 418"/>
<path class="g2" stroke-width="20" d="M1070 376 Q1120 520 1175 598"/>
<path class="g2" stroke-width="15" d="M1085 365 Q960 560 922 777"/>
<path class="g3" stroke-width="18" d="M1153 457 Q1010 545 791 418"/>
<path class="g4" stroke-width="14" d="M998 777 Q960 560 753 635"/>
<path class="g5" stroke-width="12" d="M753 635 Q960 560 1035 353"/>
<path class="g6" stroke-width="10" d="M791 418 Q960 560 1175 598"/>
</g>
<!-- Six fixed ring segments, one per department. -->
<g fill="none" stroke-width="26" transform="translate(0 24)">
<path class="arc g1" d="M769 450 A220 220 0 0 1 922 343"/>
<path class="arc g2" d="M960 340 A220 220 0 0 1 1129 419"/>
<path class="arc g3" d="M1151 450 A220 220 0 0 1 1167 635"/>
<path class="arc g4" d="M1151 670 A220 220 0 0 1 998 777"/>
<path class="arc g5" d="M960 780 A220 220 0 0 1 791 701"/>
<path class="arc g6" d="M769 670 A220 220 0 0 1 753 485"/>
</g>
<text class="ink label" data-type="label" x="960" y="344" text-anchor="middle">開発</text>
<text class="ink label" x="1355" y="446" text-anchor="middle">データ</text>
<text class="ink label" x="1336" y="766" text-anchor="middle">運用</text>
<text class="ink label" x="960" y="825" text-anchor="middle">営業</text>
<text class="ink label" x="565" y="766" text-anchor="middle">デザイン</text>
<text class="ink label" x="565" y="446" text-anchor="middle">経営</text>
<circle cx="960" cy="589" r="79" fill="var(--surface)"/>
<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>
<g class="muted legend" dominant-baseline="central">
<rect x="432" y="875" width="20" height="20" rx="4" class="swatch g1"/><text x="463" y="885">開発発の連携</text>
<rect x="720" y="875" width="20" height="20" rx="4" class="swatch g2"/><text x="751" y="885">データ発</text>
<rect x="950" y="875" width="20" height="20" rx="4" class="swatch g3"/><text x="981" y="885">運用発</text>
<rect x="1160" y="875" width="20" height="20" rx="4" class="swatch g4"/><text x="1191" y="885">その他のペア</text>
</g>
<text class="ink takeaway" data-type="takeaway" x="960" y="945" text-anchor="middle">開発・データ・運用の結びつきが、部署横断の協業の核</text>
<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>
</svg></div></div>

font.css

2.8 KB

/designs/chord-diagram-cross-team-collaboration/font.css — 全部入りには入れていない

中身を見る 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   80 (86a3dd3d402c2e01)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+2f, U+36, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-3050, U+3055-3058, U+305d-305e, U+3064-3069, U+306b, U+306e-3077, U+308b, U+3092, U+3094, U+3099-309a, U+30a2, U+30a4, U+30b5-30b6, U+30bf-30c0, U+30c6-30c7, U+30d8-30da, U+30f3, U+30fb-30fc, U+4e0a, U+4e2d, U+4ed6, U+4ef6, U+4f8b, U+5171, U+5354, U+540c, U+55b6, U+592a, U+5b9a, U+5b9f, U+5bfe, U+5e2f, U+5f37, U+6271, U+63c3, U+643a, U+6570, U+65ad, U+6708, U+671f, U+67b6, U+6838, U+6848, U+696d, U+6a2a, U+6bd4, U+7528, U+767a, U+7a7a, U+7d4c, U+7d50, U+7f72, U+7fa9, U+8907, U+8a08, U+8c61, U+9023, U+904b, U+90e8, U+91cd, U+958b, U+9593, U+96c6;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+2f, U+36, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-3050, U+3055-3058, U+305d-305e, U+3064-3069, U+306b, U+306e-3077, U+308b, U+3092, U+3094, U+3099-309a, U+30a2, U+30a4, U+30b5-30b6, U+30bf-30c0, U+30c6-30c7, U+30d8-30da, U+30f3, U+30fb-30fc, U+4e0a, U+4e2d, U+4ed6, U+4ef6, U+4f8b, U+5171, U+5354, U+540c, U+55b6, U+592a, U+5b9a, U+5b9f, U+5bfe, U+5e2f, U+5f37, U+6271, U+63c3, U+643a, U+6570, U+65ad, U+6708, U+671f, U+67b6, U+6838, U+6848, U+696d, U+6a2a, U+6bd4, U+7528, U+767a, U+7a7a, U+7d4c, U+7d50, U+7f72, U+7fa9, U+8907, U+8a08, U+8c61, U+9023, U+904b, U+90e8, U+91cd, U+958b, U+9593, U+96c6;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+2f, U+36, U+2014, U+3001-3002, U+3044, U+3046, U+3048, U+304b-3050, U+3055-3058, U+305d-305e, U+3064-3069, U+306b, U+306e-3077, U+308b, U+3092, U+3094, U+3099-309a, U+30a2, U+30a4, U+30b5-30b6, U+30bf-30c0, U+30c6-30c7, U+30d8-30da, U+30f3, U+30fb-30fc, U+4e0a, U+4e2d, U+4ed6, U+4ef6, U+4f8b, U+5171, U+5354, U+540c, U+55b6, U+592a, U+5b9a, U+5b9f, U+5bfe, U+5e2f, U+5f37, U+6271, U+63c3, U+643a, U+6570, U+65ad, U+6708, U+671f, U+67b6, U+6838, U+6848, U+696d, U+6a2a, U+6bd4, U+7528, U+767a, U+7a7a, U+7d4c, U+7d50, U+7f72, U+7fa9, U+8907, U+8a08, U+8c61, U+9023, U+904b, U+90e8, U+91cd, U+958b, U+9593, U+96c6;
}

ノート

視覚的な問い

6部署間の共同案件は、どのペアに集中し、どの部署が協業の中心をつないでいるか。

構造

各部署を円周の固定区間に配置し、部署ペアを結ぶ帯の幅で月間の共同案件数を示す。帯の色は連携元の部署群を 示し、太い帯は件数の多いペアを表す。ここでは開発・データ・運用の連携を強調している。

関係者ネットワーク図は節点の位置と線で個別の関係者や説得順序を示す。一方このChord diagramでは、円周区間が 部署別の総量、帯がペア別の量を同時に表すため、部署間の結びつきの分布を読む。値は架空であり、実際に使う際は 集計期間、案件の定義、複数部署案件の重複計上方法を揃える。