1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 110 right 160 bottom 90 left 160 ## Type (px against a 1920px canvas) title 48px / 700 subtitle 24px / 400 variable 20px / 500 coefficient 24px / 700 / tabular numerals takeaway 26px / 700 legend 20px / 500 / tabular numerals note 20px / 400 ## Colour Ground #F7F8FA / Surface #FFFFFF / Ink #171C24 / Muted #596575 / Accent #B04A35 / Rule #D7DDE5 / #24557A / #8B3421 ## Constraints — dropping these breaks it - Keep the same order on rows and columns so the matrix remains symmetric. - Use 1.00 on the diagonal and show coefficient signs in addition to color. - Response time and repeat visits have the strongest absolute coefficient (+0.77) in this five-variable example. - Values are fictional, and correlation does not establish causation. Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/correlation-matrix-support-operations/pattern.html.
/ai/designs/correlation-matrix-support-operations.json
format: slide-16x9
density: medium
layout:
kind: matrix
canvas:
w: 1920
h: 1080
margin:
top: 110
right: 160
bottom: 90
left: 160
type:
title:
size: 48
weight: 700
subtitle:
size: 24
weight: 400
variable:
size: 20
weight: 500
coefficient:
size: 24
weight: 700
numeric: tabular
takeaway:
size: 26
weight: 700
legend:
size: 20
weight: 500
numeric: tabular
note:
size: 20
weight: 400
colors:
ground: "#F7F8FA"
surface: "#FFFFFF"
ink: "#171C24"
muted: "#596575"
accent: "#B04A35"
rule: "#D7DDE5"
series:
- "#24557A"
- "#8B3421"
rules:
- Keep the same order on rows and columns so the matrix remains symmetric.
- Use 1.00 on the diagonal and show coefficient signs in addition to color.
- Response time and repeat visits have the strongest absolute coefficient (+0.77) in this five-variable example.
- Values are fictional, and correlation does not establish causation.{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "matrix",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 110,
"right": 160,
"bottom": 90,
"left": 160
}
},
"type": {
"title": {
"size": 48,
"weight": 700
},
"subtitle": {
"size": 24,
"weight": 400
},
"variable": {
"size": 20,
"weight": 500
},
"coefficient": {
"size": 24,
"weight": 700,
"numeric": "tabular"
},
"takeaway": {
"size": 26,
"weight": 700
},
"legend": {
"size": 20,
"weight": 500,
"numeric": "tabular"
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#F7F8FA",
"surface": "#FFFFFF",
"ink": "#171C24",
"muted": "#596575",
"accent": "#B04A35",
"rule": "#D7DDE5",
"series": [
"#24557A",
"#8B3421"
]
},
"rules": [
"Keep the same order on rows and columns so the matrix remains symmetric.",
"Use 1.00 on the diagonal and show coefficient signs in addition to color.",
"Response time and repeat visits have the strongest absolute coefficient (+0.77) in this five-variable example.",
"Values are fictional, and correlation does not establish causation."
]
} /designs/correlation-matrix-support-operations/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!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: #F7F8FA;
--surface: #FFFFFF;
--ink: #171C24;
--muted: #596575;
--accent: #B04A35;
--rule: #D7DDE5;
--series-1: #24557A;
--series-2: #8B3421;
--cell-e4e9ee: #E4E9EE;
--cell-ba6a56: #BA6A56;
--cell-a9bed0: #A9BED0;
--cell-91aec6: #91AEC6;
--cell-c78e81: #C78E81;
--cell-d5e0e9: #D5E0E9;
--cell-bdd0de: #BDD0DE;
--cell-d2a69c: #D2A69C;
--cell-a96351: #A96351;
--cell-9fb5c6: #9FB5C6;
--cell-c28b7e: #C28B7E;
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 1920px; height: 1080px; }
body { font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.artboard { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--ground); color: var(--ink); }
.content { position: absolute; left: 160px; top: 110px; width: 1600px; height: 880px; }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="880" viewBox="160 110 1600 880" role="img" aria-label="サポート運用の5指標の相関行列。応答時間と再訪率が正に相関し、相関は因果を意味しない。">
<style>
svg { font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
.title { fill: var(--ink); font-size: 48px; font-weight: 700; }
.subtitle { fill: var(--muted); font-size: 24px; font-weight: 400; }
.variable { fill: var(--ink); font-size: 20px; font-weight: 500; }
.coefficient { fill: var(--ink); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; stroke: none; }
.takeaway { fill: var(--ink); font-size: 26px; font-weight: 700; }
.legend { fill: var(--muted); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.note { fill: var(--muted); font-size: 20px; font-weight: 400; }
.rule { stroke: var(--rule); stroke-width: 2; }
.cell { stroke: var(--surface); stroke-width: 3; }
</style>
<text class="title" data-type="title" x="160" y="165">応答時間と再訪率の関連が最も強い</text>
<text class="subtitle" data-type="subtitle" x="160" y="215">サポート運用の5指標｜同じ対象期間で算出した相関係数｜架空データ</text>
<line class="rule" x1="160" y1="252" x2="1760" y2="252"/>
<text class="variable" data-type="variable" x="644" y="345" text-anchor="middle">稼働率</text>
<text class="variable" x="752" y="345" text-anchor="middle">一次解決率</text>
<text class="variable" x="860" y="345" text-anchor="middle">応答時間</text>
<text class="variable" x="968" y="345" text-anchor="middle">再訪率</text>
<text class="variable" x="1076" y="345" text-anchor="middle">満足度</text>
<text class="variable" x="540" y="444" text-anchor="end">稼働率</text>
<text class="variable" x="540" y="552" text-anchor="end">一次解決率</text>
<text class="variable" x="540" y="660" text-anchor="end">応答時間</text>
<text class="variable" x="540" y="768" text-anchor="end">再訪率</text>
<text class="variable" x="540" y="876" text-anchor="end">満足度</text>
<g class="cell">
<rect x="590" y="380" width="108" height="108" fill="var(--cell-e4e9ee)"/><text class="coefficient" data-type="coefficient" x="644" y="447" text-anchor="middle">1.000</text>
<rect x="698" y="380" width="108" height="108" fill="var(--cell-ba6a56)"/><text class="coefficient" x="752" y="447" text-anchor="middle">+0.640</text>
<rect x="806" y="380" width="108" height="108" fill="var(--cell-a9bed0)"/><text class="coefficient" x="860" y="447" text-anchor="middle">−0.340</text>
<rect x="914" y="380" width="108" height="108" fill="var(--cell-91aec6)"/><text class="coefficient" x="968" y="447" text-anchor="middle">−0.460</text>
<rect x="1022" y="380" width="108" height="108" fill="var(--cell-c78e81)"/><text class="coefficient" x="1076" y="447" text-anchor="middle">+0.420</text>
<rect x="590" y="488" width="108" height="108" fill="var(--cell-ba6a56)"/><text class="coefficient" x="644" y="555" text-anchor="middle">+0.640</text>
<rect x="698" y="488" width="108" height="108" fill="var(--cell-e4e9ee)"/><text class="coefficient" x="752" y="555" text-anchor="middle">1.000</text>
<rect x="806" y="488" width="108" height="108" fill="var(--cell-d5e0e9)"/><text class="coefficient" x="860" y="555" text-anchor="middle">−0.140</text>
<rect x="914" y="488" width="108" height="108" fill="var(--cell-bdd0de)"/><text class="coefficient" x="968" y="555" text-anchor="middle">−0.290</text>
<rect x="1022" y="488" width="108" height="108" fill="var(--cell-d2a69c)"/><text class="coefficient" x="1076" y="555" text-anchor="middle">+0.300</text>
<rect x="590" y="596" width="108" height="108" fill="var(--cell-a9bed0)"/><text class="coefficient" x="644" y="663" text-anchor="middle">−0.340</text>
<rect x="698" y="596" width="108" height="108" fill="var(--cell-d5e0e9)"/><text class="coefficient" x="752" y="663" text-anchor="middle">−0.140</text>
<rect x="806" y="596" width="108" height="108" fill="var(--cell-e4e9ee)"/><text class="coefficient" x="860" y="663" text-anchor="middle">1.000</text>
<rect x="914" y="596" width="108" height="108" fill="var(--cell-a96351)"/><text class="coefficient" x="968" y="663" text-anchor="middle" fill="var(--surface)">+0.770</text>
<rect x="1022" y="596" width="108" height="108" fill="var(--cell-91aec6)"/><text class="coefficient" x="1076" y="663" text-anchor="middle">−0.570</text>
<rect x="590" y="704" width="108" height="108" fill="var(--cell-91aec6)"/><text class="coefficient" x="644" y="771" text-anchor="middle">−0.460</text>
<rect x="698" y="704" width="108" height="108" fill="var(--cell-bdd0de)"/><text class="coefficient" x="752" y="771" text-anchor="middle">−0.290</text>
<rect x="806" y="704" width="108" height="108" fill="var(--cell-a96351)"/><text class="coefficient" x="860" y="771" text-anchor="middle" fill="var(--surface)">+0.770</text>
<rect x="914" y="704" width="108" height="108" fill="var(--cell-e4e9ee)"/><text class="coefficient" x="968" y="771" text-anchor="middle">1.000</text>
<rect x="1022" y="704" width="108" height="108" fill="var(--cell-91aec6)"/><text class="coefficient" x="1076" y="771" text-anchor="middle">−0.570</text>
<rect x="590" y="812" width="108" height="108" fill="var(--cell-c78e81)"/><text class="coefficient" x="644" y="879" text-anchor="middle">+0.420</text>
<rect x="698" y="812" width="108" height="108" fill="var(--cell-d2a69c)"/><text class="coefficient" x="752" y="879" text-anchor="middle">+0.300</text>
<rect x="806" y="812" width="108" height="108" fill="var(--cell-91aec6)"/><text class="coefficient" x="860" y="879" text-anchor="middle">−0.570</text>
<rect x="914" y="812" width="108" height="108" fill="var(--cell-91aec6)"/><text class="coefficient" x="968" y="879" text-anchor="middle">−0.570</text>
<rect x="1022" y="812" width="108" height="108" fill="var(--cell-e4e9ee)"/><text class="coefficient" x="1076" y="879" text-anchor="middle">1.000</text>
</g>
<text class="takeaway" data-type="takeaway" x="1220" y="465">最も強い関連</text>
<text x="1220" y="535" fill="var(--accent)" font-size="54" font-weight="700" font-variant-numeric="tabular-nums">+0.77</text>
<text class="variable" x="1220" y="582">応答時間 × 再訪率</text>
<text class="note" x="1220" y="624">係数の絶対値が5組中最大</text>
<text class="legend" data-type="legend" x="1220" y="700">負の相関</text>
<rect x="1220" y="718" width="64" height="30" fill="var(--series-1)"/><rect x="1284" y="718" width="64" height="30" fill="var(--cell-9fb5c6)"/><rect x="1348" y="718" width="64" height="30" fill="var(--surface)" stroke="var(--rule)"/><rect x="1412" y="718" width="64" height="30" fill="var(--cell-c28b7e)"/><rect x="1476" y="718" width="64" height="30" fill="var(--series-2)"/>
<text class="legend" x="1220" y="777">−1</text><text class="legend" x="1348" y="777" text-anchor="middle">0</text><text class="legend" x="1540" y="777" text-anchor="end">+1</text>
<text class="note" x="1220" y="830">色は方向と強さを示す。</text>
<text class="note" x="1220" y="858">係数値も併せて確認。</text>
<line class="rule" x1="160" y1="948" x2="1760" y2="948"/>
<text class="note" data-type="note" x="160" y="982">架空データ｜相関は因果を示さない。測定条件と対象期間を揃えた分析例です。</text>
<text class="note" x="1760" y="982" text-anchor="end">相関行列 · 01</text>
</svg>
</div>
</div>
/designs/correlation-matrix-support-operations/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 99 (4a6daaaa615cb2d2)
*
* 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+2b, U+2e, U+30-37, U+39, U+b7, U+d7, U+2212, U+3002, U+3044, U+3048, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-306a, U+306e-3071, U+3082, U+3092, U+3099-309a, U+30b5-30b6, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30fc, U+4e00, U+4e2d, U+4ef6, U+4f75, U+4f8b, U+4fc2, U+5024, U+50cd, U+518d, U+51fa, U+5206, U+5217, U+540c, U+5411, U+56e0, U+5927, U+5b9a, U+5bfe, U+5ea6, U+5f37, U+5fdc, U+6307, U+63c3, U+6570, U+65b9, U+6642, U+6700, U+671f, U+6761, U+6790, U+679c, U+67b6, U+6a19, U+6b21, U+6c7a, U+6e2c, U+6e80, U+7387, U+7528, U+76f8, U+78ba, U+793a, U+7a3c, U+7a7a, U+7b54, U+7b97, U+7d44, U+7d76, U+8272, U+884c, U+89e3, U+8a2a, U+8a8d, U+8c61, U+8ca0, U+8db3, U+9023, U+904b, U+9593, U+95a2, U+ff5c;
}
@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+2b, U+2e, U+30-37, U+39, U+b7, U+d7, U+2212, U+3002, U+3044, U+3048, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-306a, U+306e-3071, U+3082, U+3092, U+3099-309a, U+30b5-30b6, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30fc, U+4e00, U+4e2d, U+4ef6, U+4f75, U+4f8b, U+4fc2, U+5024, U+50cd, U+518d, U+51fa, U+5206, U+5217, U+540c, U+5411, U+56e0, U+5927, U+5b9a, U+5bfe, U+5ea6, U+5f37, U+5fdc, U+6307, U+63c3, U+6570, U+65b9, U+6642, U+6700, U+671f, U+6761, U+6790, U+679c, U+67b6, U+6a19, U+6b21, U+6c7a, U+6e2c, U+6e80, U+7387, U+7528, U+76f8, U+78ba, U+793a, U+7a3c, U+7a7a, U+7b54, U+7b97, U+7d44, U+7d76, U+8272, U+884c, U+89e3, U+8a2a, U+8a8d, U+8c61, U+8ca0, U+8db3, U+9023, U+904b, U+9593, U+95a2, U+ff5c;
}
@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+2b, U+2e, U+30-37, U+39, U+b7, U+d7, U+2212, U+3002, U+3044, U+3048, U+304b-304c, U+3055-305c, U+305f-3060, U+3066-306a, U+306e-3071, U+3082, U+3092, U+3099-309a, U+30b5-30b6, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30fc, U+4e00, U+4e2d, U+4ef6, U+4f75, U+4f8b, U+4fc2, U+5024, U+50cd, U+518d, U+51fa, U+5206, U+5217, U+540c, U+5411, U+56e0, U+5927, U+5b9a, U+5bfe, U+5ea6, U+5f37, U+5fdc, U+6307, U+63c3, U+6570, U+65b9, U+6642, U+6700, U+671f, U+6761, U+6790, U+679c, U+67b6, U+6a19, U+6b21, U+6c7a, U+6e2c, U+6e80, U+7387, U+7528, U+76f8, U+78ba, U+793a, U+7a3c, U+7a7a, U+7b54, U+7b97, U+7d44, U+7d76, U+8272, U+884c, U+89e3, U+8a2a, U+8a8d, U+8c61, U+8ca0, U+8db3, U+9023, U+904b, U+9593, U+95a2, U+ff5c;
}
色の濃さは相関の強さ、青と赤は負・正の方向を表す。対称な上下三角は同じ係数で、対角は自己相関1.00である。
この架空例では応答時間と再訪率の係数が+0.77で最も強い。ただし相関から、応答時間を短くすれば再訪が減るとは言えない。対象期間・測定条件を揃え、因果を判断するには別の分析が必要である。