{
  "id": "lorenz-curve-household-income-share",
  "schemaVersion": 2,
  "title": {
    "ja": "世帯所得の分布 — 上位20%が所得の半分を占める",
    "en": "Household Income Distribution — The Top 20% Receives Half"
  },
  "summary": {
    "ja": "Lorenz曲線で、所得順の累積世帯比と累積所得比を比較する。完全平等線からの距離が、分布の偏りを示す",
    "en": "A Lorenz curve compares cumulative household share with cumulative income share. Its distance from the line of equality shows how unevenly income is distributed."
  },
  "capturedAt": "2026-09-25",
  "categories": [
    "presentation"
  ],
  "tags": [
    "data-viz",
    "minimal"
  ],
  "useCases": [
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "axis",
    "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
    },
    "tick": {
      "size": 20,
      "weight": 500
    },
    "axisLabel": {
      "size": 22,
      "weight": 500
    },
    "legend": {
      "size": 22,
      "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": "世帯を所得の低い順に並べ、20%刻みの累積世帯比と累積所得比を対応させる",
      "en": "Order households from lowest to highest income and pair cumulative household and income shares in 20% steps."
    },
    {
      "ja": "完全平等線は同じ世帯比と所得比を結ぶ。曲線がその線から離れるほど分布が偏っている",
      "en": "The equality line pairs equal household and income shares. Greater distance from it means a more unequal distribution."
    },
    {
      "ja": "累積比は0%から100%まで単調に進み、最後は必ず100%で交わる",
      "en": "Both cumulative shares increase monotonically from 0% to 100% and meet at 100%."
    },
    {
      "ja": "架空データと明記し、実データの対象期間・所得定義・世帯単位を混ぜない",
      "en": "Mark the values as fictional and do not mix periods, income definitions, or household units in real comparisons."
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BaCZ6F0F.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": []
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "axis",
        "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
        },
        "tick": {
          "size": 20,
          "weight": 500
        },
        "axisLabel": {
          "size": 22,
          "weight": 500
        },
        "legend": {
          "size": 22,
          "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": [
        "Order households from lowest to highest income and pair cumulative household and income shares in 20% steps.",
        "The equality line pairs equal household and income shares. Greater distance from it means a more unequal distribution.",
        "Both cumulative shares increase monotonically from 0% to 100% and meet at 100%.",
        "Mark the values as fictional and do not mix periods, income definitions, or household units in real comparisons."
      ]
    },
    "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\ntick  20px / 500\naxisLabel  22px / 500\nlegend  22px / 500\ntakeaway  28px / 500\nnote  20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 世帯を所得の低い順に並べ、20%刻みの累積世帯比と累積所得比を対応させる\n- 完全平等線は同じ世帯比と所得比を結ぶ。曲線がその線から離れるほど分布が偏っている\n- 累積比は0%から100%まで単調に進み、最後は必ず100%で交わる\n- 架空データと明記し、実データの対象期間・所得定義・世帯単位を混ぜない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/lorenz-curve-household-income-share/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\ntick  20px / 500\naxisLabel  22px / 500\nlegend  22px / 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- Order households from lowest to highest income and pair cumulative household and income shares in 20% steps.\n- The equality line pairs equal household and income shares. Greater distance from it means a more unequal distribution.\n- Both cumulative shares increase monotonically from 0% to 100% and meet at 100%.\n- Mark the values as fictional and do not mix periods, income definitions, or household units in real comparisons.\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/lorenz-curve-household-income-share/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>世帯所得の分布 — 上位20%が所得の半分を占める</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: #FFFFFF;\n    --surface: #F4F6F9;\n    --ink: #131820;\n    --muted: #667183;\n    --accent: #1F5FA8;\n    --rule: #DBE1E9;\n  }\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 { width: 1920px; height: 1080px; padding: 100px 140px; background: var(--ground); color: var(--ink); }\n  .content { width: 100%; height: 100%; position: relative; }\n  .figure { position: absolute; left: -140px; top: -100px; width: 1920px; height: 1080px; }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <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=\"架空データのLorenz曲線。下位80%の世帯が所得の50%を得ており、上位20%が残りの50%を占める。\">\n      <style>\n        .figure { font-family: \"Zen Kaku Gothic New\", \"Hiragino Sans\", sans-serif; }\n        .ground { fill: var(--ground); }\n        .ink { fill: var(--ink); }\n        .muted { fill: var(--muted); }\n        .rule { stroke: var(--rule); }\n        .title { font-size: 46px; font-weight: 700; letter-spacing: .01em; }\n        .subtitle { font-size: 22px; font-weight: 500; }\n        .axis-title { font-size: 22px; font-weight: 700; }\n        .tick { font-size: 20px; font-weight: 500; }\n        .legend { font-size: 22px; font-weight: 500; }\n        .takeaway { font-size: 28px; font-weight: 500; }\n        .note { font-size: 20px; font-weight: 400; }\n        .equality { fill: none; stroke: var(--muted); stroke-width: 4; stroke-dasharray: 12 10; }\n        .lorenz { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }\n        .point { fill: var(--ground); stroke: var(--accent); stroke-width: 5; }\n      </style>\n      <rect class=\"ground\" width=\"1920\" height=\"1080\"/>\n\n      <text class=\"ink title\" data-type=\"title\" x=\"140\" y=\"153\">世帯所得の分布 — 上位20%が所得の半分を占める</text>\n      <text class=\"muted subtitle\" data-type=\"subtitle\" x=\"140\" y=\"201\">世帯を所得の低い順に並べた累積比 / 各20%の世帯ごとに所得シェアを集計</text>\n      <line class=\"rule\" x1=\"140\" y1=\"238\" x2=\"1780\" y2=\"238\" stroke-width=\"2\"/>\n\n      <text class=\"ink axis-title\" data-type=\"axisTitle\" x=\"930\" y=\"300\" text-anchor=\"middle\">完全平等線からの離れ方で、所得の偏りを見る</text>\n      <g class=\"rule\" fill=\"none\" stroke-width=\"1.5\">\n        <line x1=\"380\" y1=\"320\" x2=\"380\" y2=\"755\"/>\n        <line x1=\"598\" y1=\"320\" x2=\"598\" y2=\"755\"/>\n        <line x1=\"816\" y1=\"320\" x2=\"816\" y2=\"755\"/>\n        <line x1=\"1034\" y1=\"320\" x2=\"1034\" y2=\"755\"/>\n        <line x1=\"1252\" y1=\"320\" x2=\"1252\" y2=\"755\"/>\n        <line x1=\"1470\" y1=\"320\" x2=\"1470\" y2=\"755\"/>\n        <line x1=\"380\" y1=\"755\" x2=\"1470\" y2=\"755\"/>\n        <line x1=\"380\" y1=\"668\" x2=\"1470\" y2=\"668\"/>\n        <line x1=\"380\" y1=\"581\" x2=\"1470\" y2=\"581\"/>\n        <line x1=\"380\" y1=\"494\" x2=\"1470\" y2=\"494\"/>\n        <line x1=\"380\" y1=\"407\" x2=\"1470\" y2=\"407\"/>\n        <line x1=\"380\" y1=\"320\" x2=\"1470\" y2=\"320\"/>\n      </g>\n\n      <!-- Each step represents one equal 20% household group. Values are cumulative shares. -->\n      <path class=\"equality\" d=\"M380 755 L1470 320\"/>\n      <path class=\"lorenz\" d=\"M380 755 L598 733.25 L816 694.1 L1034 637.55 L1252 537.5 L1470 320\"/>\n      <g>\n        <circle class=\"point\" cx=\"380\" cy=\"755\" r=\"8\"/>\n        <circle class=\"point\" cx=\"598\" cy=\"733.25\" r=\"8\"/>\n        <circle class=\"point\" cx=\"816\" cy=\"694.1\" r=\"8\"/>\n        <circle class=\"point\" cx=\"1034\" cy=\"637.55\" r=\"8\"/>\n        <circle class=\"point\" cx=\"1252\" cy=\"537.5\" r=\"8\"/>\n        <circle class=\"point\" cx=\"1470\" cy=\"320\" r=\"8\"/>\n      </g>\n\n      <g class=\"muted tick\" text-anchor=\"middle\" dominant-baseline=\"central\">\n        <text data-type=\"tick\" x=\"380\" y=\"785\">0%</text>\n        <text x=\"598\" y=\"785\">20%</text>\n        <text x=\"816\" y=\"785\">40%</text>\n        <text x=\"1034\" y=\"785\">60%</text>\n        <text x=\"1252\" y=\"785\">80%</text>\n        <text x=\"1470\" y=\"785\">100%</text>\n        <text x=\"340\" y=\"755\">0%</text>\n        <text x=\"340\" y=\"668\">20%</text>\n        <text x=\"340\" y=\"581\">40%</text>\n        <text x=\"340\" y=\"494\">60%</text>\n        <text x=\"340\" y=\"407\">80%</text>\n        <text x=\"340\" y=\"320\">100%</text>\n      </g>\n      <text class=\"ink legend\" data-type=\"axisLabel\" x=\"925\" y=\"835\" text-anchor=\"middle\">累積世帯の割合（所得の低い順）</text>\n      <text class=\"muted legend\" x=\"140\" y=\"300\">累積所得の割合</text>\n\n      <line x1=\"555\" y1=\"882\" x2=\"615\" y2=\"882\" stroke=\"var(--muted)\" stroke-width=\"4\" stroke-dasharray=\"12 10\"/>\n      <text class=\"muted legend\" data-type=\"legend\" x=\"630\" y=\"882\" dominant-baseline=\"central\">完全平等線</text>\n      <line x1=\"1005\" y1=\"882\" x2=\"1065\" y2=\"882\" stroke=\"var(--accent)\" stroke-width=\"8\" stroke-linecap=\"round\"/>\n      <circle class=\"point\" cx=\"1035\" cy=\"882\" r=\"7\"/>\n      <text class=\"ink legend\" x=\"1080\" y=\"882\" dominant-baseline=\"central\">架空の世帯所得</text>\n\n      <text class=\"ink takeaway\" data-type=\"takeaway\" x=\"960\" y=\"938\" text-anchor=\"middle\">下位80%が所得の50%を受け取り、上位20%が残りの半分を占める</text>\n      <line class=\"rule\" x1=\"140\" y1=\"974\" x2=\"1780\" y2=\"974\" stroke-width=\"1\"/>\n      <text class=\"muted note\" data-type=\"note\" x=\"140\" y=\"1013\">架空データ。格差を比較するには、対象期間・所得定義・世帯単位を揃える。</text>\n    </svg>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/lorenz-curve-household-income-share/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/lorenz-curve-household-income-share/font.css",
        "https://design-vault.pages.dev/designs/lorenz-curve-household-income-share/font-0.woff2",
        "https://design-vault.pages.dev/designs/lorenz-curve-household-income-share/font-1.woff2",
        "https://design-vault.pages.dev/designs/lorenz-curve-household-income-share/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/lorenz-curve-household-income-share",
    "en": "https://design-vault.pages.dev/en/designs/lorenz-curve-household-income-share"
  },
  "notesMarkdown": "### 視覚的な問い\n\n世帯を所得順に並べたとき、累積所得の分布は完全平等線からどれだけ離れるか。\n\n### 構造\n\n横軸は累積世帯比、縦軸は累積所得比。破線は両比率が一致する完全平等線で、実線は所得順に\n積み上げた架空データである。上位20%が所得の50%を占めるため、下位80%の累積点は50%になる。\n\n散布図のように異なる項目どうしの相関を示す図ではない。等しい世帯比を区切りとして所得シェアを\n積み上げ、対角線からの離れ具合を分布の偏りとして読む。"
}