{
  "id": "correlation-matrix-support-operations",
  "schemaVersion": 2,
  "title": {
    "ja": "応答時間と再訪率の関連が最も強い",
    "en": "Response Time and Repeat Visits Show the Strongest Relationship"
  },
  "summary": {
    "ja": "サポート運用の5指標について相関係数を対称行列で示す。正負の方向と係数値を併記し、応答時間と再訪率の強い正の関連を読む",
    "en": "A symmetric correlation matrix for five support operations measures. Signs and coefficients accompany color so the strong positive relationship between response time and repeat visits can be read without treating it as causation."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "comparison",
    "kpi"
  ],
  "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": [
    {
      "ja": "行と列は同じ順序にし、行列の対称性を保つ",
      "en": "Keep the same order on rows and columns so the matrix remains symmetric."
    },
    {
      "ja": "対角は自己相関1.00。正負の方向は色だけでなく係数の符号でも示す",
      "en": "Use 1.00 on the diagonal and show coefficient signs in addition to color."
    },
    {
      "ja": "応答時間と再訪率の係数は+0.77で、この5指標中で絶対値が最も大きい",
      "en": "Response time and repeat visits have the strongest absolute coefficient (+0.77) in this five-variable example."
    },
    {
      "ja": "数値は架空データ。相関は因果関係を示さない",
      "en": "Values are fictional, and correlation does not establish causation."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DTo4MwHw.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "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."
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 110 右 160 下 90 左 160\n\n## 文字（版面 1920px に対する px）\ntitle  48px / 700\nsubtitle  24px / 400\nvariable  20px / 500\ncoefficient  24px / 700 / 等幅数字\ntakeaway  26px / 700\nlegend  20px / 500 / 等幅数字\nnote  20px / 400\n\n## 配色\n地 #F7F8FA / 面 #FFFFFF / 文字 #171C24 / 補助 #596575 / 強調 #B04A35 / 罫 #D7DDE5 / #24557A / #8B3421\n\n## 外すと崩れる点\n- 行と列は同じ順序にし、行列の対称性を保つ\n- 対角は自己相関1.00。正負の方向は色だけでなく係数の符号でも示す\n- 応答時間と再訪率の係数は+0.77で、この5指標中で絶対値が最も大きい\n- 数値は架空データ。相関は因果関係を示さない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/correlation-matrix-support-operations/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 110 right 160 bottom 90 left 160\n\n## Type (px against a 1920px canvas)\ntitle  48px / 700\nsubtitle  24px / 400\nvariable  20px / 500\ncoefficient  24px / 700 / tabular numerals\ntakeaway  26px / 700\nlegend  20px / 500 / tabular numerals\nnote  20px / 400\n\n## Colour\nGround #F7F8FA / Surface #FFFFFF / Ink #171C24 / Muted #596575 / Accent #B04A35 / Rule #D7DDE5 / #24557A / #8B3421\n\n## Constraints — dropping these breaks it\n- Keep the same order on rows and columns so the matrix remains symmetric.\n- Use 1.00 on the diagonal and show coefficient signs in addition to color.\n- Response time and repeat visits have the strongest absolute coefficient (+0.77) in this five-variable example.\n- Values are fictional, and correlation does not establish causation.\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/correlation-matrix-support-operations/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 {\n    --ground: #F7F8FA;\n    --surface: #FFFFFF;\n    --ink: #171C24;\n    --muted: #596575;\n    --accent: #B04A35;\n    --rule: #D7DDE5;\n    --series-1: #24557A;\n    --series-2: #8B3421;\n    --cell-e4e9ee: #E4E9EE;\n    --cell-ba6a56: #BA6A56;\n    --cell-a9bed0: #A9BED0;\n    --cell-91aec6: #91AEC6;\n    --cell-c78e81: #C78E81;\n    --cell-d5e0e9: #D5E0E9;\n    --cell-bdd0de: #BDD0DE;\n    --cell-d2a69c: #D2A69C;\n    --cell-a96351: #A96351;\n    --cell-9fb5c6: #9FB5C6;\n    --cell-c28b7e: #C28B7E;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"Hiragino Sans\", sans-serif; }\n  .artboard { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--ground); color: var(--ink); }\n  .content { position: absolute; left: 160px; top: 110px; width: 1600px; height: 880px; }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1600\" height=\"880\" viewBox=\"160 110 1600 880\" role=\"img\" aria-label=\"サポート運用の5指標の相関行列。応答時間と再訪率が正に相関し、相関は因果を意味しない。\">\n      <style>\n        svg { font-family: \"Zen Kaku Gothic New\", \"Hiragino Sans\", sans-serif; }\n        .title { fill: var(--ink); font-size: 48px; font-weight: 700; }\n        .subtitle { fill: var(--muted); font-size: 24px; font-weight: 400; }\n        .variable { fill: var(--ink); font-size: 20px; font-weight: 500; }\n        .coefficient { fill: var(--ink); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; stroke: none; }\n        .takeaway { fill: var(--ink); font-size: 26px; font-weight: 700; }\n        .legend { fill: var(--muted); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }\n        .note { fill: var(--muted); font-size: 20px; font-weight: 400; }\n        .rule { stroke: var(--rule); stroke-width: 2; }\n        .cell { stroke: var(--surface); stroke-width: 3; }\n      </style>\n      <text class=\"title\" data-type=\"title\" x=\"160\" y=\"165\">応答時間と再訪率の関連が最も強い</text>\n      <text class=\"subtitle\" data-type=\"subtitle\" x=\"160\" y=\"215\">サポート運用の5指標｜同じ対象期間で算出した相関係数｜架空データ</text>\n      <line class=\"rule\" x1=\"160\" y1=\"252\" x2=\"1760\" y2=\"252\"/>\n\n      <text class=\"variable\" data-type=\"variable\" x=\"644\" y=\"345\" text-anchor=\"middle\">稼働率</text>\n      <text class=\"variable\" x=\"752\" y=\"345\" text-anchor=\"middle\">一次解決率</text>\n      <text class=\"variable\" x=\"860\" y=\"345\" text-anchor=\"middle\">応答時間</text>\n      <text class=\"variable\" x=\"968\" y=\"345\" text-anchor=\"middle\">再訪率</text>\n      <text class=\"variable\" x=\"1076\" y=\"345\" text-anchor=\"middle\">満足度</text>\n\n      <text class=\"variable\" x=\"540\" y=\"444\" text-anchor=\"end\">稼働率</text>\n      <text class=\"variable\" x=\"540\" y=\"552\" text-anchor=\"end\">一次解決率</text>\n      <text class=\"variable\" x=\"540\" y=\"660\" text-anchor=\"end\">応答時間</text>\n      <text class=\"variable\" x=\"540\" y=\"768\" text-anchor=\"end\">再訪率</text>\n      <text class=\"variable\" x=\"540\" y=\"876\" text-anchor=\"end\">満足度</text>\n\n      <g class=\"cell\">\n        <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>\n        <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>\n        <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>\n        <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>\n        <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>\n\n        <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>\n        <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>\n        <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>\n        <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>\n        <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>\n\n        <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>\n        <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>\n        <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>\n        <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>\n        <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>\n\n        <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>\n        <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>\n        <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>\n        <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>\n        <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>\n\n        <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>\n        <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>\n        <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>\n        <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>\n        <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>\n      </g>\n\n      <text class=\"takeaway\" data-type=\"takeaway\" x=\"1220\" y=\"465\">最も強い関連</text>\n      <text x=\"1220\" y=\"535\" fill=\"var(--accent)\" font-size=\"54\" font-weight=\"700\" font-variant-numeric=\"tabular-nums\">+0.77</text>\n      <text class=\"variable\" x=\"1220\" y=\"582\">応答時間 × 再訪率</text>\n      <text class=\"note\" x=\"1220\" y=\"624\">係数の絶対値が5組中最大</text>\n\n      <text class=\"legend\" data-type=\"legend\" x=\"1220\" y=\"700\">負の相関</text>\n      <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)\"/>\n      <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>\n      <text class=\"note\" x=\"1220\" y=\"830\">色は方向と強さを示す。</text>\n      <text class=\"note\" x=\"1220\" y=\"858\">係数値も併せて確認。</text>\n\n      <line class=\"rule\" x1=\"160\" y1=\"948\" x2=\"1760\" y2=\"948\"/>\n      <text class=\"note\" data-type=\"note\" x=\"160\" y=\"982\">架空データ｜相関は因果を示さない。測定条件と対象期間を揃えた分析例です。</text>\n      <text class=\"note\" x=\"1760\" y=\"982\" text-anchor=\"end\">相関行列 · 01</text>\n    </svg>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/correlation-matrix-support-operations/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/correlation-matrix-support-operations/font.css",
        "https://design-vault.pages.dev/designs/correlation-matrix-support-operations/font-0.woff2",
        "https://design-vault.pages.dev/designs/correlation-matrix-support-operations/font-1.woff2",
        "https://design-vault.pages.dev/designs/correlation-matrix-support-operations/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/correlation-matrix-support-operations",
    "en": "https://design-vault.pages.dev/en/designs/correlation-matrix-support-operations"
  },
  "notesMarkdown": "色の濃さは相関の強さ、青と赤は負・正の方向を表す。対称な上下三角は同じ係数で、対角は自己相関1.00である。\n\nこの架空例では応答時間と再訪率の係数が+0.77で最も強い。ただし相関から、応答時間を短くすれば再訪が減るとは言えない。対象期間・測定条件を揃え、因果を判断するには別の分析が必要である。"
}