版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 90 右 120 下 40 左 120 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em subtitle 22px / 400 loopTag 20px / 700 / 字間 0.06em nodeTitle 24px / 700 nodeDetail 20px / 400 polarity 25px / 700 delay 20px / 400 loopCopy 20px / 500 legend 20px / 500 note 20px / 400 ## 配色 地 #F7F8F5 / 面 #FFFFFF / 文字 #18232D / 補助 #586875 / 強調 #C64E32 / 罫 #D7DEE1 / #236B9A / #A66019 ## 外すと崩れる点 - ＋は2つの変数が同じ向きに、−は逆向きに変化する関係を示す - Rは変化を増幅するループ、Bは変化を抑えるループ。どちらも良し悪しを表す記号ではない - 二重線は影響が現れるまでの遅れを示し、承認と配置の間にある時間差を明示する - 因果ループの仮説図。実際の現場で関係の向きと遅れを確かめる 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/causal-loop-support-rework-backlog/pattern.html
/ai/designs/causal-loop-support-rework-backlog.json
format: slide-16x9
density: medium
layout:
kind: network
canvas:
w: 1920
h: 1080
margin:
top: 90
right: 120
bottom: 40
left: 120
type:
title:
size: 44
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 400
loopTag:
size: 20
weight: 700
tracking: 0.06em
nodeTitle:
size: 24
weight: 700
nodeDetail:
size: 20
weight: 400
polarity:
size: 25
weight: 700
delay:
size: 20
weight: 400
loopCopy:
size: 20
weight: 500
legend:
size: 20
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#F7F8F5"
surface: "#FFFFFF"
ink: "#18232D"
muted: "#586875"
accent: "#C64E32"
rule: "#D7DEE1"
series:
- "#236B9A"
- "#A66019"
rules:
- ＋は2つの変数が同じ向きに、−は逆向きに変化する関係を示す
- Rは変化を増幅するループ、Bは変化を抑えるループ。どちらも良し悪しを表す記号ではない
- 二重線は影響が現れるまでの遅れを示し、承認と配置の間にある時間差を明示する
- 因果ループの仮説図。実際の現場で関係の向きと遅れを確かめる{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "network",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 90,
"right": 120,
"bottom": 40,
"left": 120
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 400
},
"loopTag": {
"size": 20,
"weight": 700,
"tracking": "0.06em"
},
"nodeTitle": {
"size": 24,
"weight": 700
},
"nodeDetail": {
"size": 20,
"weight": 400
},
"polarity": {
"size": 25,
"weight": 700
},
"delay": {
"size": 20,
"weight": 400
},
"loopCopy": {
"size": 20,
"weight": 500
},
"legend": {
"size": 20,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#F7F8F5",
"surface": "#FFFFFF",
"ink": "#18232D",
"muted": "#586875",
"accent": "#C64E32",
"rule": "#D7DEE1",
"series": [
"#236B9A",
"#A66019"
]
},
"rules": [
"＋は2つの変数が同じ向きに、−は逆向きに変化する関係を示す",
"Rは変化を増幅するループ、Bは変化を抑えるループ。どちらも良し悪しを表す記号ではない",
"二重線は影響が現れるまでの遅れを示し、承認と配置の間にある時間差を明示する",
"因果ループの仮説図。実際の現場で関係の向きと遅れを確かめる"
]
} /designs/causal-loop-support-rework-backlog/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: #F7F8F5;
--surface: #FFFFFF;
--ink: #18232D;
--muted: #586875;
--accent: #C64E32;
--rule: #D7DEE1;
--series-1: #236B9A;
--series-2: #A66019;
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 1920px; height: 1080px; }
body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" role="img" aria-labelledby="loop-title loop-desc" data-artboard="true">
<title id="loop-title">未処理件数が増える2つのフィードバックループ</title>
<desc id="loop-desc">残業、疲労、再作業は未処理件数を増やす増幅ループ。増員承認と処理量は未処理件数を減らす抑制ループだが、承認から稼働までに遅れがある。</desc>
<style>
text { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
.ground { fill: var(--ground); }
.surface { fill: var(--surface); }
.ink { fill: var(--ink); }
.muted { fill: var(--muted); }
.rule { stroke: var(--rule); }
.title { font-size: 44px; font-weight: 700; letter-spacing: .01em; }
.subtitle { font-size: 22px; font-weight: 400; }
.eyebrow { font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.node-title { font-size: 24px; font-weight: 700; }
.node-detail { font-size: 20px; font-weight: 400; }
.edge-r { fill: none; stroke: var(--series-1); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.edge-b { fill: none; stroke: var(--series-2); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.polarity { font-size: 25px; font-weight: 700; text-anchor: middle; }
.loop-tag { font-size: 20px; font-weight: 700; }
.loop-copy { font-size: 20px; font-weight: 500; }
.legend { font-size: 20px; font-weight: 500; }
.note { font-size: 20px; font-weight: 400; }
</style>
<defs>
<marker id="arrow-blue" markerWidth="12" markerHeight="12" refX="9" refY="6" orient="auto" markerUnits="strokeWidth"><path d="M1 1L10 6L1 11Z" fill="var(--series-1)"/></marker>
<marker id="arrow-amber" markerWidth="12" markerHeight="12" refX="9" refY="6" orient="auto" markerUnits="strokeWidth"><path d="M1 1L10 6L1 11Z" fill="var(--series-2)"/></marker>
</defs>
<rect class="ground" width="1920" height="1080"/>
<g data-content="true">
<rect x="120" y="90" width="1680" height="950" fill="none" aria-hidden="true"/>
<text class="ink title" data-type="title" x="120" y="137">残業は滞留を解消せず、再作業を増やす</text>
<text class="muted subtitle" data-type="subtitle" x="120" y="181">サポート窓口の未処理件数に働く2つのフィードバック</text>
<line class="rule" x1="120" y1="218" x2="1800" y2="218" stroke-width="2"/>
<g transform="translate(120 0)">
<rect x="52" y="260" width="686" height="52" rx="10" fill="var(--series-1)" opacity=".12"/>
<text x="76" y="295" class="eyebrow" fill="var(--series-1)" data-type="loopTag">R · 増幅ループ</text>
<text x="260" y="295" class="muted" font-size="20">負荷が自己増幅</text>
<rect x="930" y="260" width="686" height="52" rx="10" fill="var(--series-2)" opacity=".12"/>
<text x="954" y="295" class="eyebrow" fill="var(--series-2)" data-type="loopTag">B · 抑制ループ</text>
<text x="1235" y="295" class="muted" font-size="20">処理能力は遅れて戻る</text>
<!-- R: backlog → overtime → fatigue → rework → backlog -->
<path class="edge-r" marker-end="url(#arrow-blue)" d="M820 470 C750 414 698 394 650 390"/>
<path class="edge-r" marker-end="url(#arrow-blue)" d="M560 430 C515 484 510 568 556 625"/>
<path class="edge-r" marker-end="url(#arrow-blue)" d="M510 690 C445 706 386 679 350 626"/>
<path class="edge-r" marker-end="url(#arrow-blue)" d="M365 548 C475 454 640 448 806 505"/>
<!-- B: backlog → approval → staffing → throughput ┤ backlog -->
<path class="edge-b" marker-end="url(#arrow-amber)" d="M1065 486 C1150 420 1215 394 1288 390"/>
<path class="edge-b" marker-end="url(#arrow-amber)" d="M1435 428 C1490 460 1508 485 1502 518"/>
<path class="edge-b" marker-end="url(#arrow-amber)" d="M1490 620 C1470 664 1430 696 1390 716"/>
<path class="edge-b" marker-end="url(#arrow-amber)" d="M1280 752 C1170 712 1115 634 1070 585"/>
<!-- Signed causal links -->
<g class="polarity" fill="var(--series-1)">
<text x="738" y="413" data-type="polarity">＋</text>
<text x="493" y="536">＋</text>
<text x="425" y="715">＋</text>
<text x="603" y="454">＋</text>
</g>
<g class="polarity" fill="var(--series-2)">
<text x="1167" y="420" data-type="polarity">＋</text>
<text x="1508" y="477">＋</text>
<text x="1457" y="678">＋</text>
<text x="1154" y="690">−</text>
</g>
<!-- Loop variables -->
<g>
<rect class="surface" x="810" y="470" width="270" height="112" rx="18" stroke="var(--ink)" stroke-width="3"/>
<text class="ink node-title" x="945" y="516" text-anchor="middle" data-type="nodeTitle">未処理件数</text>
<text class="muted node-detail" x="945" y="550" text-anchor="middle" data-type="nodeDetail">積み上がる問い合わせ</text>
<rect class="surface" x="510" y="350" width="190" height="82" rx="16" stroke="var(--series-1)" stroke-width="3"/>
<text class="ink node-title" x="605" y="401" text-anchor="middle">残業時間</text>
<rect class="surface" x="500" y="625" width="190" height="82" rx="16" stroke="var(--series-1)" stroke-width="3"/>
<text class="ink node-title" x="595" y="676" text-anchor="middle">疲労</text>
<rect class="surface" x="255" y="540" width="200" height="86" rx="16" stroke="var(--series-1)" stroke-width="3"/>
<text class="ink node-title" x="355" y="578" text-anchor="middle">再作業</text>
<text class="muted node-detail" x="355" y="608" text-anchor="middle">修正・再応答</text>
<rect class="surface" x="1280" y="350" width="250" height="82" rx="16" stroke="var(--series-2)" stroke-width="3"/>
<text class="ink node-title" x="1405" y="401" text-anchor="middle">増員承認</text>
<rect class="surface" x="1410" y="520" width="190" height="100" rx="16" stroke="var(--series-2)" stroke-width="3"/>
<text class="ink node-title" x="1505" y="563" text-anchor="middle">稼働人数</text>
<text class="muted node-detail" x="1505" y="592" text-anchor="middle">配置できた人数</text>
<rect class="surface" x="1280" y="710" width="220" height="86" rx="16" stroke="var(--series-2)" stroke-width="3"/>
<text class="ink node-title" x="1390" y="748" text-anchor="middle">処理量</text>
<text class="muted node-detail" x="1390" y="778" text-anchor="middle">完了する件数</text>
</g>
<!-- Delay on approval-to-staffing link -->
<g stroke="var(--series-2)" stroke-width="4">
<line x1="1475" y1="470" x2="1490" y2="488"/>
<line x1="1492" y1="466" x2="1507" y2="484"/>
</g>
<text class="muted" x="1660" y="480" text-anchor="end" font-size="20" data-type="delay">採用・配置の遅れ</text>
</g>
<line class="rule" x1="120" y1="850" x2="1800" y2="850" stroke-width="2"/>
<text class="ink loop-copy" x="120" y="896" data-type="loopCopy">R 残業 → 疲労 → 再作業 → 未処理が連鎖して増える</text>
<text class="ink loop-copy" x="1000" y="896">B 増員 → 処理量が未処理を抑える。承認の遅れが効果を待たせる</text>
<g class="legend" data-type="legend">
<text class="muted" x="120" y="956">＋ 同じ向きに変化</text>
<text class="muted" x="420" y="956">− 逆向きに変化</text>
<text class="muted" x="720" y="956">∥ 遅れを伴う関係</text>
<line x1="120" y1="988" x2="1800" y2="988" class="rule"/>
</g>
<text class="muted note" x="120" y="1030" data-type="note">因果ループの仮説図。関係者と検証し、観測データで関係の向きと遅れを確かめる。</text>
</g>
</svg>
/designs/causal-loop-support-rework-backlog/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 132 (35f32f5975f1f173)
*
* 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+32, U+42, U+52, U+b7, U+2192, U+2212, U+2225, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3050, U+3057-305c, U+305f-3060, U+3064-3069, U+306b, U+306e-3071, U+307e-307f, U+3081, U+3084, U+3089, U+308b-308c, U+308f, U+3092, U+3094, U+3099-309a, U+30a3, U+30af-30b0, U+30b5-30b6, U+30bf-30c0, U+30c3, U+30c6-30c9, U+30cf-30d1, U+30d5-30d7, U+30db-30dd, U+30eb, U+30fb-30fc, U+4e0a, U+4e86, U+4eba, U+4eee, U+4ef6, U+4f34, U+4f5c, U+4fc2, U+4fee, U+50cd, U+518d, U+51e6, U+5236, U+529b, U+52b4, U+52b9, U+5316, U+53e3, U+5408, U+540c, U+5411, U+54e1, U+554f, U+56e0, U+56f3, U+5897, U+5909, U+5b8c, U+5df1, U+5e45, U+5f85, U+5fdc, U+623b, U+627f, U+6291, U+63a1, U+6570, U+6642, U+672a, U+679c, U+691c, U+696d, U+6b63, U+6b8b, U+6d88, U+6e1b, U+6e2c, U+6ede, U+7406, U+7528, U+7559, U+75b2, U+78ba, U+7a3c, U+7a4d, U+7a93, U+7b54, U+7f6e, U+8005, U+80fd, U+81ea, U+8377, U+89b3, U+89e3, U+8a3c, U+8a8d, U+8aac, U+8ca0, U+9006, U+9023, U+9045, U+914d, U+91cf, U+9396, U+9593, U+95a2, U+ff0b;
}
@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+32, U+42, U+52, U+b7, U+2192, U+2212, U+2225, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3050, U+3057-305c, U+305f-3060, U+3064-3069, U+306b, U+306e-3071, U+307e-307f, U+3081, U+3084, U+3089, U+308b-308c, U+308f, U+3092, U+3094, U+3099-309a, U+30a3, U+30af-30b0, U+30b5-30b6, U+30bf-30c0, U+30c3, U+30c6-30c9, U+30cf-30d1, U+30d5-30d7, U+30db-30dd, U+30eb, U+30fb-30fc, U+4e0a, U+4e86, U+4eba, U+4eee, U+4ef6, U+4f34, U+4f5c, U+4fc2, U+4fee, U+50cd, U+518d, U+51e6, U+5236, U+529b, U+52b4, U+52b9, U+5316, U+53e3, U+5408, U+540c, U+5411, U+54e1, U+554f, U+56e0, U+56f3, U+5897, U+5909, U+5b8c, U+5df1, U+5e45, U+5f85, U+5fdc, U+623b, U+627f, U+6291, U+63a1, U+6570, U+6642, U+672a, U+679c, U+691c, U+696d, U+6b63, U+6b8b, U+6d88, U+6e1b, U+6e2c, U+6ede, U+7406, U+7528, U+7559, U+75b2, U+78ba, U+7a3c, U+7a4d, U+7a93, U+7b54, U+7f6e, U+8005, U+80fd, U+81ea, U+8377, U+89b3, U+89e3, U+8a3c, U+8a8d, U+8aac, U+8ca0, U+9006, U+9023, U+9045, U+914d, U+91cf, U+9396, U+9593, U+95a2, U+ff0b;
}
@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+32, U+42, U+52, U+b7, U+2192, U+2212, U+2225, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3050, U+3057-305c, U+305f-3060, U+3064-3069, U+306b, U+306e-3071, U+307e-307f, U+3081, U+3084, U+3089, U+308b-308c, U+308f, U+3092, U+3094, U+3099-309a, U+30a3, U+30af-30b0, U+30b5-30b6, U+30bf-30c0, U+30c3, U+30c6-30c9, U+30cf-30d1, U+30d5-30d7, U+30db-30dd, U+30eb, U+30fb-30fc, U+4e0a, U+4e86, U+4eba, U+4eee, U+4ef6, U+4f34, U+4f5c, U+4fc2, U+4fee, U+50cd, U+518d, U+51e6, U+5236, U+529b, U+52b4, U+52b9, U+5316, U+53e3, U+5408, U+540c, U+5411, U+54e1, U+554f, U+56e0, U+56f3, U+5897, U+5909, U+5b8c, U+5df1, U+5e45, U+5f85, U+5fdc, U+623b, U+627f, U+6291, U+63a1, U+6570, U+6642, U+672a, U+679c, U+691c, U+696d, U+6b63, U+6b8b, U+6d88, U+6e1b, U+6e2c, U+6ede, U+7406, U+7528, U+7559, U+75b2, U+78ba, U+7a3c, U+7a4d, U+7a93, U+7b54, U+7f6e, U+8005, U+80fd, U+81ea, U+8377, U+89b3, U+89e3, U+8a3c, U+8a8d, U+8aac, U+8ca0, U+9006, U+9023, U+9045, U+914d, U+91cf, U+9396, U+9593, U+95a2, U+ff0b;
}
問い合わせの未処理が増えたとき、残業を増やす対応は滞留を解消するのか、それとも再作業を通じて負荷を増幅するのか。
中央の未処理件数から二つのループをたどる。R（増幅）では、未処理の増加が残業を促し、疲労と再作業を増やして未処理をさらに積み上げる。B（抑制）では、未処理を受けて増員を承認し、稼働人数と処理量を増やして未処理を減らす。ただし承認から配置までの遅れがあるため、処理能力はすぐには戻らない。
線の符号は変数どうしの変化の向きを示し、色はループを追うためだけに使う。R/Bは「望ましい・望ましくない」の評価ではない。現場の観測で因果の向きや遅れが確かめられていない段階では、検証対象の仮説として扱う。