{
  "id": "spectrum-two-poles",
  "schemaVersion": 2,
  "title": {
    "ja": "内製と外注のあいだ — いま 7 割を外に出している",
    "en": "Between Build and Buy — Seventy Percent Is Outside Today"
  },
  "summary": {
    "ja": "両極を端に置いた 1 本の軸。二者択一に見える問いを位置の問題に置き換え、1 年前の位置を並べて動いた向きを見せる",
    "en": "One scale with a pole at each end. A question that looks binary becomes a position, and last year's marker shows which way it moved"
  },
  "capturedAt": "2026-09-16",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "data-viz"
  ],
  "useCases": [
    "comparison",
    "prioritization"
  ],
  "format": "slide-16x9",
  "density": "low",
  "layout": {
    "kind": "axis",
    "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
    },
    "poleName": {
      "size": 28,
      "weight": 700,
      "leading": 1.3
    },
    "poleNote": {
      "size": 22,
      "weight": 400,
      "leading": 1.6
    },
    "markerNow": {
      "size": 32,
      "weight": 700,
      "leading": 1,
      "numeric": "tabular"
    },
    "markerPast": {
      "size": 24,
      "weight": 500,
      "leading": 1.4,
      "numeric": "tabular"
    },
    "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": []
  },
  "rules": [
    {
      "ja": "両端に「ありえない極」を置く。実在する選択肢を端にすると、軸が選択肢の比較に戻ってしまい、位置という読み方が消える",
      "en": "Put an unreachable extreme at each end. Real options as endpoints turn the scale back into a comparison of choices, and position stops being the reading"
    },
    {
      "ja": "印は 2 つまで。現在地だけでは動きが見えず、3 つ以上になると軸が折れ線グラフの代わりになる",
      "en": "Two markers at most. One shows no movement; three or more and the scale is standing in for a line chart"
    },
    {
      "ja": "目盛りを刻まない。刻むと 5% の差を読み取ろうとするが、この図が答えられるのは向きと程度までである",
      "en": "Do not add tick marks. They invite reading a five-point difference, and this figure can only answer direction and rough degree"
    },
    {
      "ja": "どちらの極が望ましいかを図で言わない。軸の塗りは左の極からの距離を読ませるためのもので、色を「良い側」の意味に使った瞬間、これは測定ではなく主張になる",
      "en": "Never say which pole is better. The track's fill is there to make the distance from the left pole readable; the moment colour means 'the good side', this stops being a measurement and becomes an argument"
    },
    {
      "ja": "位置ではなく、位置がもたらす制約を結論に書く。7 割という数より、戻せるかどうかが決定に効く",
      "en": "Close on what the position costs, not the position. Whether it can be reversed drives the decision more than the number does"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BLEK9utR.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "venn-two-set-sweet-spot"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "low",
      "layout": {
        "kind": "axis",
        "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
        },
        "poleName": {
          "size": 28,
          "weight": 700,
          "leading": 1.3
        },
        "poleNote": {
          "size": 22,
          "weight": 400,
          "leading": 1.6
        },
        "markerNow": {
          "size": 32,
          "weight": 700,
          "leading": 1,
          "numeric": "tabular"
        },
        "markerPast": {
          "size": 24,
          "weight": 500,
          "leading": 1.4,
          "numeric": "tabular"
        },
        "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"
      },
      "rules": [
        "Put an unreachable extreme at each end. Real options as endpoints turn the scale back into a comparison of choices, and position stops being the reading",
        "Two markers at most. One shows no movement; three or more and the scale is standing in for a line chart",
        "Do not add tick marks. They invite reading a five-point difference, and this figure can only answer direction and rough degree",
        "Never say which pole is better. The track's fill is there to make the distance from the left pole readable; the moment colour means 'the good side', this stops being a measurement and becomes an argument",
        "Close on what the position costs, not the position. Whether it can be reversed drives the decision more than the number does"
      ]
    },
    "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\npoleName  28px / 700 / 行送り 1.3\npoleNote  22px / 400 / 行送り 1.6\nmarkerNow  32px / 700 / 行送り 1 / 等幅数字\nmarkerPast  24px / 500 / 行送り 1.4 / 等幅数字\nconclusion  26px / 500 / 行送り 1.6\nnote  16px / 400 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 両端に「ありえない極」を置く。実在する選択肢を端にすると、軸が選択肢の比較に戻ってしまい、位置という読み方が消える\n- 印は 2 つまで。現在地だけでは動きが見えず、3 つ以上になると軸が折れ線グラフの代わりになる\n- 目盛りを刻まない。刻むと 5% の差を読み取ろうとするが、この図が答えられるのは向きと程度までである\n- どちらの極が望ましいかを図で言わない。軸の塗りは左の極からの距離を読ませるためのもので、色を「良い側」の意味に使った瞬間、これは測定ではなく主張になる\n- 位置ではなく、位置がもたらす制約を結論に書く。7 割という数より、戻せるかどうかが決定に効く\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/spectrum-two-poles/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\npoleName  28px / 700 / leading 1.3\npoleNote  22px / 400 / leading 1.6\nmarkerNow  32px / 700 / leading 1 / tabular numerals\nmarkerPast  24px / 500 / leading 1.4 / tabular numerals\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\n\n## Constraints — dropping these breaks it\n- Put an unreachable extreme at each end. Real options as endpoints turn the scale back into a comparison of choices, and position stops being the reading\n- Two markers at most. One shows no movement; three or more and the scale is standing in for a line chart\n- Do not add tick marks. They invite reading a five-point difference, and this figure can only answer direction and rough degree\n- Never say which pole is better. The track's fill is there to make the distance from the left pole readable; the moment colour means 'the good side', this stops being a measurement and becomes an argument\n- Close on what the position costs, not the position. Whether it can be reversed drives the decision more than the number does\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/spectrum-two-poles/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>内製と外注のあいだ — いま 7 割を外に出している</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     区分色は持たない —— 軸の上では色ではなく位置が意味を運ぶ。 */\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\", \"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 { display: grid; align-content: center; row-gap: 48px; }\n\n  .poles { display: flex; justify-content: space-between; align-items: flex-start; }\n  .pole-right { text-align: right; }\n  .pole-name { font-size: 28px; font-weight: 700; line-height: 1.3; }\n  .pole-note { margin-top: 10px; font-size: 22px; font-weight: 400; line-height: 1.6; color: var(--muted); }\n\n  .figure { display: block; }\n  .track { fill: var(--surface); }\n  /* 塗りは「左の極からどれだけ来たか」を示すためのもので、望ましい側の表明ではない\n     （左端の「全部を内製」は誰も選ばない極として置いてある）。印だけでも位置は読めるが、\n     塗りが無いと 55% と 70% の差が目測になる。望ましさを言い始めたらこの塗りは外す。 */\n  .fill { fill: var(--accent); }\n  .stem { stroke: var(--rule); stroke-width: 2; }\n  .knob-now { fill: var(--ground); stroke: var(--accent); stroke-width: 8; }\n  .knob-past { fill: var(--ground); stroke: var(--muted); stroke-width: 5; }\n  .marker-now { fill: var(--ink); font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }\n  .marker-past { fill: var(--muted); font-size: 24px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; }\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\">内製と外注のあいだ — いま 7 割を外に出している</h1>\n      <p class=\"window\" data-type=\"window\">2026 年度の開発工数ベース / 運用と保守は含まない / 判断は 3 月の投資委員会</p>\n    </div>\n\n    <div class=\"body\">\n      <div class=\"poles\">\n        <div class=\"pole-left\">\n          <div class=\"pole-name\" data-type=\"poleName\">全部を内製</div>\n          <div class=\"pole-note\" data-type=\"poleNote\">設計から運用まで自社が持つ</div>\n        </div>\n        <div class=\"pole-right\">\n          <div class=\"pole-name\">全部を外注</div>\n          <div class=\"pole-note\">仕様だけ自社に残す</div>\n        </div>\n      </div>\n\n      <!-- 等倍で描く。viewBox と width/height を一致させてあるので、\n           SVG の中の文字の級数は版面の px とそのまま同じ数字になる。 -->\n      <svg class=\"figure\" width=\"1640\" height=\"300\" viewBox=\"0 0 1640 300\">\n        <text class=\"marker-now\" data-type=\"markerNow\" x=\"1132\" y=\"44\" text-anchor=\"middle\" dominant-baseline=\"central\">いま 70%</text>\n        <path class=\"stem\" d=\"M1132 66V120\"/>\n\n        <rect class=\"track\" x=\"40\" y=\"136\" width=\"1560\" height=\"40\" rx=\"20\"/>\n        <rect class=\"fill\" x=\"40\" y=\"136\" width=\"1092\" height=\"40\" rx=\"20\"/>\n\n        <circle class=\"knob-past\" cx=\"898\" cy=\"156\" r=\"18\"/>\n        <circle class=\"knob-now\" cx=\"1132\" cy=\"156\" r=\"34\"/>\n\n        <path class=\"stem\" d=\"M898 192v46\"/>\n        <text class=\"marker-past\" data-type=\"markerPast\" x=\"898\" y=\"262\" text-anchor=\"middle\" dominant-baseline=\"central\">1 年前 55%</text>\n      </svg>\n\n      <p class=\"conclusion\" data-type=\"conclusion\">7 割そのものは問題ではない。戻す判断ができる人が社内に 2 名しかいないことが問題</p>\n    </div>\n\n    <div class=\"foot\" data-type=\"note\">工数は受入検査を含む。社内の兼務者は稼働率で按分している。</div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/spectrum-two-poles/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/spectrum-two-poles/font.css",
        "https://design-vault.pages.dev/designs/spectrum-two-poles/font-0.woff2",
        "https://design-vault.pages.dev/designs/spectrum-two-poles/font-1.woff2",
        "https://design-vault.pages.dev/designs/spectrum-two-poles/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/spectrum-two-poles",
    "en": "https://design-vault.pages.dev/en/designs/spectrum-two-poles"
  },
  "notesMarkdown": "内製か外注かという問いは、置き方を変えるだけで答えが出ることがある。両極を端に\n置いた軸の上では、どちらかを選ぶのではなく「いまどこにいて、どちらへ動いたか」を\n言うことになるからである。\n\n端に実在する選択肢を置かないのは、そのためである。「全部を内製」は誰も選ばない案\nだが、端にあることで軸が軸として成立する。実在する案を端に置くと、目盛りは\nたちまち二択の比較表に戻る。"
}