{
  "id": "design:midterm-plan-pillars",
  "schemaVersion": 2,
  "title": {
    "ja": "中期経営計画 — 目標の梁、3 本の柱、その下の土台",
    "en": "Mid-Term Plan — The Goal as a Beam, Three Pillars, and a Foundation"
  },
  "summary": {
    "ja": "上の梁に最終年度の目標、中段に 3 本の柱（施策と数値目標）、下の土台に全体を支える方針を置く。梁の目標を 3 本の柱が下から支える形にする",
    "en": "The final-year goal on a beam across the top, three pillars of initiatives with numeric targets, and the foundation beneath — the pillars visibly hold up the goal"
  },
  "capturedAt": "2026-10-19",
  "categories": [
    "presentation"
  ],
  "tags": [
    "bold",
    "typography"
  ],
  "useCases": [
    "roadmap"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "3-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 140,
      "bottom": 56,
      "left": 140
    },
    "columns": {
      "count": 3,
      "gap": 16
    }
  },
  "type": {
    "kicker": {
      "size": 22,
      "weight": 700,
      "tracking": "0.16em",
      "numeric": "tabular"
    },
    "title": {
      "size": 52,
      "weight": 700,
      "leading": 1.35,
      "numeric": "tabular"
    },
    "beamLabel": {
      "size": 24,
      "weight": 500,
      "numeric": "tabular"
    },
    "beamGoal": {
      "size": 40,
      "weight": 700,
      "numeric": "tabular"
    },
    "pillarNo": {
      "size": 22,
      "weight": 700,
      "numeric": "tabular"
    },
    "pillar": {
      "size": 36,
      "weight": 700,
      "numeric": "tabular"
    },
    "kpiLabel": {
      "size": 22,
      "weight": 400,
      "numeric": "tabular"
    },
    "target": {
      "size": 88,
      "weight": 700,
      "leading": 1.05,
      "numeric": "tabular"
    },
    "how": {
      "size": 22,
      "weight": 400,
      "leading": 1.6,
      "numeric": "tabular"
    },
    "baseLabel": {
      "size": 24,
      "weight": 700,
      "numeric": "tabular"
    },
    "baseText": {
      "size": 26,
      "weight": 500,
      "numeric": "tabular"
    },
    "folio": {
      "size": 16,
      "weight": 400,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F2F4F8",
    "ink": "#0E1A2B",
    "muted": "#5B6879",
    "accent": "#1D3F72",
    "rule": "#D6DCE5",
    "series": []
  },
  "rules": [
    {
      "ja": "柱ごとに数値目標を 1 つ持たせる。数字の無い柱は、方針の言い換えになる",
      "en": "Each pillar carries one numeric target — without one, a pillar is a slogan"
    },
    {
      "ja": "柱の目標には今期の見込みを添え、距離が見えるようにする",
      "en": "Pair each target with this year's estimate so the distance shows"
    },
    {
      "ja": "梁・柱・土台の 3 層を面と線で描き分ける。並べただけでは、支える関係が伝わらない",
      "en": "Draw beam, pillars and foundation as distinct layers — side by side, nothing reads as holding anything up"
    },
    {
      "ja": "柱は 3 本。4 本以上は記憶に残らない",
      "en": "Three pillars; four or more are not remembered"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BI9BH1cm.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "key-message-three-supports",
      "roadmap-4phase-band",
      "maturity-staircase-now-target"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "3-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 140,
          "bottom": 56,
          "left": 140
        },
        "columns": {
          "count": 3,
          "gap": 16
        }
      },
      "type": {
        "kicker": {
          "size": 22,
          "weight": 700,
          "tracking": "0.16em",
          "numeric": "tabular"
        },
        "title": {
          "size": 52,
          "weight": 700,
          "leading": 1.35,
          "numeric": "tabular"
        },
        "beamLabel": {
          "size": 24,
          "weight": 500,
          "numeric": "tabular"
        },
        "beamGoal": {
          "size": 40,
          "weight": 700,
          "numeric": "tabular"
        },
        "pillarNo": {
          "size": 22,
          "weight": 700,
          "numeric": "tabular"
        },
        "pillar": {
          "size": 36,
          "weight": 700,
          "numeric": "tabular"
        },
        "kpiLabel": {
          "size": 22,
          "weight": 400,
          "numeric": "tabular"
        },
        "target": {
          "size": 88,
          "weight": 700,
          "leading": 1.05,
          "numeric": "tabular"
        },
        "how": {
          "size": 22,
          "weight": 400,
          "leading": 1.6,
          "numeric": "tabular"
        },
        "baseLabel": {
          "size": 24,
          "weight": 700,
          "numeric": "tabular"
        },
        "baseText": {
          "size": 26,
          "weight": 500,
          "numeric": "tabular"
        },
        "folio": {
          "size": 16,
          "weight": 400,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F2F4F8",
        "ink": "#0E1A2B",
        "muted": "#5B6879",
        "accent": "#1D3F72",
        "rule": "#D6DCE5"
      },
      "rules": [
        "Each pillar carries one numeric target — without one, a pillar is a slogan",
        "Pair each target with this year's estimate so the distance shows",
        "Draw beam, pillars and foundation as distinct layers — side by side, nothing reads as holding anything up",
        "Three pillars; four or more are not remembered"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n- 3 カラム（等分）、間隔 16\n\n## 文字（版面 1920px に対する px）\nkicker  22px / 700 / 字間 0.16em / 等幅数字\ntitle  52px / 700 / 行送り 1.35 / 等幅数字\nbeamLabel  24px / 500 / 等幅数字\nbeamGoal  40px / 700 / 等幅数字\npillarNo  22px / 700 / 等幅数字\npillar  36px / 700 / 等幅数字\nkpiLabel  22px / 400 / 等幅数字\ntarget  88px / 700 / 行送り 1.05 / 等幅数字\nhow  22px / 400 / 行送り 1.6 / 等幅数字\nbaseLabel  24px / 700 / 等幅数字\nbaseText  26px / 500 / 等幅数字\nfolio  16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 柱ごとに数値目標を 1 つ持たせる。数字の無い柱は、方針の言い換えになる\n- 柱の目標には今期の見込みを添え、距離が見えるようにする\n- 梁・柱・土台の 3 層を面と線で描き分ける。並べただけでは、支える関係が伝わらない\n- 柱は 3 本。4 本以上は記憶に残らない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/midterm-plan-pillars/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 56 left 140\n- 3 equal columns, gap 16\n\n## Type (px against a 1920px canvas)\nkicker  22px / 700 / tracking 0.16em / tabular numerals\ntitle  52px / 700 / leading 1.35 / tabular numerals\nbeamLabel  24px / 500 / tabular numerals\nbeamGoal  40px / 700 / tabular numerals\npillarNo  22px / 700 / tabular numerals\npillar  36px / 700 / tabular numerals\nkpiLabel  22px / 400 / tabular numerals\ntarget  88px / 700 / leading 1.05 / tabular numerals\nhow  22px / 400 / leading 1.6 / tabular numerals\nbaseLabel  24px / 700 / tabular numerals\nbaseText  26px / 500 / tabular numerals\nfolio  16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5\n\n## Constraints — dropping these breaks it\n- Each pillar carries one numeric target — without one, a pillar is a slogan\n- Pair each target with this year's estimate so the distance shows\n- Draw beam, pillars and foundation as distinct layers — side by side, nothing reads as holding anything up\n- Three pillars; four or more are not remembered\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/midterm-plan-pillars/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>中期経営計画 — 目標の梁、3 本の柱、その下の土台</title>\n<meta name=\"dv-font\" content=\"IBM Plex Sans JP:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  /* この版そのもの。index.md の layout / type / colors は、この HTML を\n     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。\n     会社・人物・数値はすべて説明用の架空のもの。 */\n  :root {\n    --ground: #FFFFFF;\n    --surface: #F2F4F8;\n    --ink: #0E1A2B;\n    --muted: #5B6879;\n    --accent: #1D3F72;\n    --rule: #D6DCE5;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"IBM Plex Sans JP\", \"IPAGothic\", sans-serif; font-variant-numeric: tabular-nums; }\n\n  .artboard {\n    width: 1920px; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 96px 140px 56px;             /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }\n\n  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }\n  .title { font-size: 52px; font-weight: 700; line-height: 1.35; margin-top: 12px; }\n  /* 頁の足：社名・資料名・頁番号。どの頁でも同じ位置に置く */\n  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }\n\n  .temple { display: grid; grid-template-rows: auto 1fr auto; row-gap: 16px; }\n  /* 梁・柱・土台の 3 層。柱の数値目標が梁の目標を支えることを形で示す */\n  .beam { background: var(--accent); color: var(--ground); padding: 28px 48px; display: flex; justify-content: space-between; align-items: baseline; }\n  .beamLabel { font-size: 24px; font-weight: 500; }\n  .beamGoal { font-size: 40px; font-weight: 700; }\n  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px; }\n  .pillar { background: var(--surface); padding: 36px 44px; border-top: 6px solid var(--accent); }\n  .no { font-size: 22px; font-weight: 700; color: var(--accent); }\n  .pName { font-size: 36px; font-weight: 700; margin-top: 8px; }\n  .kpi { font-size: 22px; color: var(--muted); margin-top: 28px; }\n  .target { font-size: 88px; font-weight: 700; line-height: 1.05; color: var(--accent); }\n  .target small { font-size: 36px; margin-left: 6px; }\n  .how { font-size: 22px; line-height: 1.6; color: var(--muted); margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 16px; }\n  .base { border: 3px solid var(--accent); padding: 22px 48px; display: flex; gap: 48px; align-items: baseline; }\n  .baseLabel { font-size: 24px; font-weight: 700; color: var(--accent); }\n  .baseText { font-size: 26px; font-weight: 500; }\n\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div>\n      <p class=\"kicker\" data-type=\"kicker\">中期経営計画　AOBA 2029</p>\n      <h1 class=\"title\" data-type=\"title\">3 本の柱で、売上高 1,300 億円と利益率 12% に届く</h1>\n    </div>\n    <div class=\"temple\">\n      <div class=\"beam\"><p class=\"beamLabel\" data-type=\"beamLabel\">2029 年 3 月期の目標</p><p class=\"beamGoal\" data-type=\"beamGoal\">売上高 1,300 億円 ／ 営業利益率 12%</p></div>\n      <div class=\"pillars\">\n        <div class=\"pillar\" data-col=\"1\">\n          <p class=\"no\" data-type=\"pillarNo\">01</p>\n          <p class=\"pName\" data-type=\"pillar\">医療機器を伸ばす</p>\n          <p class=\"kpi\" data-type=\"kpiLabel\">医療機器の売上高</p>\n          <p class=\"target\" data-type=\"target\">400<small>億円</small></p>\n          <p class=\"how\" data-type=\"how\">今期見込み 290 億円。診療所向けの小型機で裾野を広げる</p>\n        </div>\n        <div class=\"pillar\" data-col=\"2\">\n          <p class=\"no\">02</p>\n          <p class=\"pName\">計測を継続収入に</p>\n          <p class=\"kpi\">継続収入の比率</p>\n          <p class=\"target\">40<small>%</small></p>\n          <p class=\"how\">今期見込み 32%。点検と校正を年間契約に切り替える</p>\n        </div>\n        <div class=\"pillar\" data-col=\"3\">\n          <p class=\"no\">03</p>\n          <p class=\"pName\">つくり方を変える</p>\n          <p class=\"kpi\">営業利益率</p>\n          <p class=\"target\">12<small>%</small></p>\n          <p class=\"how\">今期見込み 8.8%。主力 3 工場の組立を自動化する</p>\n        </div>\n      </div>\n      <div class=\"base\"><p class=\"baseLabel\" data-type=\"baseLabel\">土台</p><p class=\"baseText\" data-type=\"baseText\">人材 ・ 品質 ・ 資本効率（ROE 10% 以上を保つ）</p></div>\n    </div>\n    <div class=\"folio\">\n      <p data-type=\"folio\">アオバ精工株式会社　2027 年 3 月期 第 2 四半期 決算説明資料</p>\n      <p>06</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/midterm-plan-pillars/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/midterm-plan-pillars/font.css",
        "https://design-vault.pages.dev/designs/midterm-plan-pillars/font-0.woff2",
        "https://design-vault.pages.dev/designs/midterm-plan-pillars/font-1.woff2",
        "https://design-vault.pages.dev/designs/midterm-plan-pillars/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/midterm-plan-pillars",
    "en": "https://design-vault.pages.dev/en/designs/midterm-plan-pillars",
    "json": "https://design-vault.pages.dev/ai/assets/midterm-plan-pillars.json",
    "designJson": "https://design-vault.pages.dev/ai/designs/midterm-plan-pillars.json"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「決算・経営報告」の\n1 枚で、架空の会社「アオバ精工」の第 2 四半期決算説明として描いてある。会社・人物・数値はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the eight results-briefing slides, drawn\nas a fictional company's half-year results deck; every company, person and figure on it is invented.\n\n### Techniques\n\n- 梁は紺の面に白抜き、柱は淡い面に紺の上罫、土台は紺の枠線\n- 柱の目標は 88px の紺\n- 柱の間は 16px。梁・土台と同じ幅に揃えて 1 つの建物に見せる\n\n### Apply to\n\n- 決算説明・統合報告の中期計画\n- 部門方針の 1 枚（梁を年度目標に替える）",
  "slug": "midterm-plan-pillars",
  "kind": "artboard",
  "catalogVersion": 1,
  "designSchemaVersion": 2,
  "capabilities": [
    "view-artboard",
    "read-spec",
    "copy-prompt",
    "get-code"
  ],
  "reusePolicy": "construction-reuse"
}