{
  "id": "venn-two-set-sweet-spot",
  "schemaVersion": 2,
  "title": {
    "ja": "絞り込みの二条件 — 両方を満たす案だけに人を割く",
    "en": "Two Conditions — Only What Satisfies Both Gets People"
  },
  "summary": {
    "ja": "2 円のベン図。重なりに件数を置き、条件を 1 つしか満たさない候補を「落とす」ではなく「待たせる」と言い切る",
    "en": "A two-set Venn with the count placed in the overlap, and the rest named as deferred rather than rejected"
  },
  "capturedAt": "2026-09-16",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "data-viz"
  ],
  "useCases": [
    "comparison",
    "prioritization"
  ],
  "format": "slide-16x9",
  "density": "low",
  "layout": {
    "kind": "overlap",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 140,
      "bottom": 96,
      "left": 140
    }
  },
  "type": {
    "title": {
      "size": 44,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "window": {
      "size": 20,
      "weight": 500,
      "leading": 1.5
    },
    "setName": {
      "size": 32,
      "weight": 700,
      "leading": 1.35
    },
    "setNote": {
      "size": 22,
      "weight": 400,
      "leading": 1.6
    },
    "spotCount": {
      "size": 44,
      "weight": 700,
      "leading": 1
    },
    "spotLabel": {
      "size": 22,
      "weight": 500,
      "leading": 1.4
    },
    "conclusion": {
      "size": 26,
      "weight": 500,
      "leading": 1.6
    },
    "note": {
      "size": 16,
      "weight": 400,
      "leading": 1.6
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": [
      "#1C8C79",
      "#2F6FB5"
    ]
  },
  "rules": [
    {
      "ja": "重なりに色を塗らない。2 枚の透過が重なった結果そのものが「両方」であり、3 つ目の色を置くと重なりが独立した区分に見える",
      "en": "Do not paint the intersection. It is the two translucent sets landing on each other; give it a colour of its own and it reads as a third category"
    },
    {
      "ja": "重なりには数を置く。「ここが狙い目」とだけ書かれたベン図は、重なりが空でも同じ絵になる",
      "en": "Put a number in the overlap. A Venn that only says 'the sweet spot' looks identical when the sweet spot is empty"
    },
    {
      "ja": "円は 2 つまで。3 円にすると領域が 7 つに増え、どの領域を指しているのかを言葉で補わなければ読めなくなる",
      "en": "Two circles at most. Three makes seven regions, and none of them can be identified without a sentence explaining which is which"
    },
    {
      "ja": "外れた側の行き先を書く。条件を満たさなかった候補の扱いが書かれていないと、この図は「切り捨ての通告」として読まれる",
      "en": "Say where the excluded go. Without it, the figure is read as a notice of rejection rather than a decision about sequence"
    },
    {
      "ja": "2 つの条件は同じ重みで描く。円の大きさを変えると、集合の大小ではなく条件の重要度の差として読まれる",
      "en": "Draw both conditions the same size. Unequal circles are read as unequal importance, not as unequal set sizes"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DQ-rwFLq.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "donut-share-center-total"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "low",
      "layout": {
        "kind": "overlap",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 140,
          "bottom": 96,
          "left": 140
        }
      },
      "type": {
        "title": {
          "size": 44,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "window": {
          "size": 20,
          "weight": 500,
          "leading": 1.5
        },
        "setName": {
          "size": 32,
          "weight": 700,
          "leading": 1.35
        },
        "setNote": {
          "size": 22,
          "weight": 400,
          "leading": 1.6
        },
        "spotCount": {
          "size": 44,
          "weight": 700,
          "leading": 1
        },
        "spotLabel": {
          "size": 22,
          "weight": 500,
          "leading": 1.4
        },
        "conclusion": {
          "size": 26,
          "weight": 500,
          "leading": 1.6
        },
        "note": {
          "size": 16,
          "weight": 400,
          "leading": 1.6
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9",
        "series": [
          "#1C8C79",
          "#2F6FB5"
        ]
      },
      "rules": [
        "Do not paint the intersection. It is the two translucent sets landing on each other; give it a colour of its own and it reads as a third category",
        "Put a number in the overlap. A Venn that only says 'the sweet spot' looks identical when the sweet spot is empty",
        "Two circles at most. Three makes seven regions, and none of them can be identified without a sentence explaining which is which",
        "Say where the excluded go. Without it, the figure is read as a notice of rejection rather than a decision about sequence",
        "Draw both conditions the same size. Unequal circles are read as unequal importance, not as unequal set sizes"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n\n## 文字（版面 1920px に対する px）\ntitle  44px / 700 / 字間 0.01em / 行送り 1.3\nwindow  20px / 500 / 行送り 1.5\nsetName  32px / 700 / 行送り 1.35\nsetNote  22px / 400 / 行送り 1.6\nspotCount  44px / 700 / 行送り 1\nspotLabel  22px / 500 / 行送り 1.4\nconclusion  26px / 500 / 行送り 1.6\nnote  16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #2F6FB5\n\n## 外すと崩れる点\n- 重なりに色を塗らない。2 枚の透過が重なった結果そのものが「両方」であり、3 つ目の色を置くと重なりが独立した区分に見える\n- 重なりには数を置く。「ここが狙い目」とだけ書かれたベン図は、重なりが空でも同じ絵になる\n- 円は 2 つまで。3 円にすると領域が 7 つに増え、どの領域を指しているのかを言葉で補わなければ読めなくなる\n- 外れた側の行き先を書く。条件を満たさなかった候補の扱いが書かれていないと、この図は「切り捨ての通告」として読まれる\n- 2 つの条件は同じ重みで描く。円の大きさを変えると、集合の大小ではなく条件の重要度の差として読まれる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/venn-two-set-sweet-spot/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 96 left 140\n\n## Type (px against a 1920px canvas)\ntitle  44px / 700 / tracking 0.01em / leading 1.3\nwindow  20px / 500 / leading 1.5\nsetName  32px / 700 / leading 1.35\nsetNote  22px / 400 / leading 1.6\nspotCount  44px / 700 / leading 1\nspotLabel  22px / 500 / leading 1.4\nconclusion  26px / 500 / leading 1.6\nnote  16px / 400 / leading 1.6\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1C8C79 / #2F6FB5\n\n## Constraints — dropping these breaks it\n- Do not paint the intersection. It is the two translucent sets landing on each other; give it a colour of its own and it reads as a third category\n- Put a number in the overlap. A Venn that only says 'the sweet spot' looks identical when the sweet spot is empty\n- Two circles at most. Three makes seven regions, and none of them can be identified without a sentence explaining which is which\n- Say where the excluded go. Without it, the figure is read as a notice of rejection rather than a decision about sequence\n- Draw both conditions the same size. Unequal circles are read as unequal importance, not as unequal set sizes\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/venn-two-set-sweet-spot/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 にだけ置く。以下の規則は var() か color-mix() で名指す。\n     区分色は 2 つだけ —— この図で色が言うのは「どちらの条件か」であって、\n     3 つ目の色は重なりの領域が勝手に作る。 */\n  :root {\n    --ground: #FFFFFF;\n    --surface: #F4F6F9;\n    --ink: #131820;\n    --muted: #667183;\n    --accent: #1F5FA8;\n    --rule: #DBE1E9;\n    --series-1: #1C8C79;\n    --series-2: #2F6FB5;\n  }\n\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n\n  .artboard {\n    width: 1920px;\n    height: 1080px;\n    background: var(--ground);\n    color: var(--ink);\n    padding: 96px 140px;\n  }\n\n  .content {\n    height: 100%;\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr) auto;\n  }\n\n  .head { border-bottom: 2px solid var(--rule); padding-bottom: 28px; }\n  .title { font-size: 44px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; }\n  .window { margin-top: 14px; font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--muted); }\n\n  .body {\n    display: grid;\n    grid-template-rows: minmax(0, 1fr) auto;\n    justify-items: center;\n    align-items: center;\n    row-gap: 28px;\n  }\n\n  .figure { display: block; }\n  /* 重なりの色は塗らない。2 枚の透過が重なった結果そのものが「両方」であって、\n     3 つ目の色を置くと、重なりが独立した区分に見えてしまう。 */\n  .set { fill-opacity: 0.22; stroke-width: 2.5; }\n  .set-1 { fill: var(--series-1); stroke: var(--series-1); }\n  .set-2 { fill: var(--series-2); stroke: var(--series-2); }\n  .set-name { fill: var(--ink); font-size: 32px; font-weight: 700; line-height: 1.35; }\n  .set-note { fill: var(--muted); font-size: 22px; font-weight: 400; line-height: 1.6; }\n  .spot-count { fill: var(--ink); font-size: 44px; font-weight: 700; line-height: 1; }\n  .spot-label { fill: var(--ink); font-size: 22px; font-weight: 500; line-height: 1.4; }\n\n  .conclusion { font-size: 26px; font-weight: 500; line-height: 1.6; color: var(--muted); }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted); }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div class=\"head\">\n      <h1 class=\"title\" data-type=\"title\">絞り込みの二条件 — 両方を満たす案だけに人を割く</h1>\n      <p class=\"window\" data-type=\"window\">2026 年度下期の投資判断 / 候補 14 件 / 事業部横断の評価会</p>\n    </div>\n\n    <div class=\"body\">\n      <!-- 等倍で描く。viewBox と width/height を一致させてあるので、\n           SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->\n      <svg class=\"figure\" width=\"1100\" height=\"600\" viewBox=\"0 0 1100 600\">\n        <circle class=\"set set-1\" cx=\"400\" cy=\"300\" r=\"250\"/>\n        <circle class=\"set set-2\" cx=\"700\" cy=\"300\" r=\"250\"/>\n\n        <text class=\"set-name\" data-type=\"setName\" x=\"300\" y=\"265\" text-anchor=\"middle\" dominant-baseline=\"central\">今期に出せる</text>\n        <text class=\"set-note\" data-type=\"setNote\" x=\"300\" y=\"305\" text-anchor=\"middle\" dominant-baseline=\"central\">6 か月で本番に載る</text>\n\n        <text class=\"set-name\" x=\"800\" y=\"265\" text-anchor=\"middle\" dominant-baseline=\"central\">真似されにくい</text>\n        <text class=\"set-note\" x=\"800\" y=\"305\" text-anchor=\"middle\" dominant-baseline=\"central\">自社の運用データが要る</text>\n\n        <text class=\"spot-count\" data-type=\"spotCount\" x=\"550\" y=\"285\" text-anchor=\"middle\" dominant-baseline=\"central\">4 件</text>\n        <text class=\"spot-label\" data-type=\"spotLabel\" x=\"550\" y=\"335\" text-anchor=\"middle\" dominant-baseline=\"central\">両方を満たす</text>\n      </svg>\n\n      <p class=\"conclusion\" data-type=\"conclusion\">残る 10 件は片方しか満たさない。落とすのではなく、条件が変わる来期まで待たせる</p>\n    </div>\n\n    <div class=\"foot\" data-type=\"note\">候補は事業部からの申請 14 件。両方を満たす 4 件で、下期の開発工数の 8 割を使う。</div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/venn-two-set-sweet-spot/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/venn-two-set-sweet-spot/font.css",
        "https://design-vault.pages.dev/designs/venn-two-set-sweet-spot/font-0.woff2",
        "https://design-vault.pages.dev/designs/venn-two-set-sweet-spot/font-1.woff2",
        "https://design-vault.pages.dev/designs/venn-two-set-sweet-spot/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/venn-two-set-sweet-spot",
    "en": "https://design-vault.pages.dev/en/designs/venn-two-set-sweet-spot"
  },
  "notesMarkdown": "ベン図がよく失敗するのは、重なりに**言葉しか**置かないときである。「ここが狙い目」\nと書かれた重なりは、そこに 4 件あっても 0 件でも同じ絵になる。数を置いた瞬間、\nこの図は主張ではなく報告になる。\n\nもうひとつは、外れた側の扱いを書かないことである。条件を満たさなかった 10 件に\n行き先が無いと、この図は選定の説明ではなく切り捨ての通告として受け取られる。"
}