{
  "id": "architecture-3tier-stack",
  "schemaVersion": 2,
  "title": {
    "ja": "システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る",
    "en": "System Architecture — Three Tiers, One of Them New"
  },
  "summary": {
    "ja": "利用者・業務・データの 3 層を積み、すべて新規の中段だけを面にする。既存は点線ではなく文字色で示す",
    "en": "Three stacked tiers with only the all-new middle one filled; what already exists is dimmed, never dashed"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "architecture",
    "scope"
  ],
  "format": "slide-16x9",
  "density": "high",
  "layout": {
    "kind": "stack",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 104,
      "right": 140,
      "bottom": 104,
      "left": 140
    },
    "emphasis": {
      "row": 2,
      "via": [
        "fill",
        "rule"
      ]
    }
  },
  "type": {
    "title": {
      "size": 46,
      "weight": 700,
      "tracking": "0.01em",
      "leading": 1.3
    },
    "lede": {
      "size": 19,
      "weight": 400,
      "leading": 1.8
    },
    "tname": {
      "size": 24,
      "weight": 700,
      "leading": 1.4
    },
    "tnote": {
      "size": 15,
      "weight": 400,
      "leading": 1.6
    },
    "bname": {
      "size": 19,
      "weight": 500,
      "leading": 1.4
    },
    "btag": {
      "size": 14,
      "weight": 400
    },
    "fkey": {
      "size": 14,
      "weight": 500,
      "tracking": "0.14em"
    },
    "fval": {
      "size": 17,
      "weight": 500,
      "leading": 1.6
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "層は 3 つまで。4 つ目を足した瞬間、聞き手は層の名前を覚えるほうに気を取られ、どこを作るのかを聞き逃す",
      "en": "Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building"
    },
    {
      "ja": "すべて新規の層だけを塗る。一部だけ足す層は箱の「新規」で示す。全層を塗ると「全部作り直す」と読まれ、費用の話がその前提で始まる",
      "en": "Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there"
    },
    {
      "ja": "既存システムは点線にしない。点線は「未確定」と読まれる。示したいのは確定していることなので、文字色だけを落とす",
      "en": "Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts"
    },
    {
      "ja": "1 層に置く箱は 5 個まで。6 個目からは、箱の名前ではなく箱の数が印象に残る",
      "en": "Five boxes per tier. From the sixth on, what the room remembers is the count, not the names"
    },
    {
      "ja": "連携方式を下端に 1 行で書く。構成図に矢印で書き込むと、線の意味を説明する時間のほうが長くなる",
      "en": "State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DKsARws0.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "scope-in-out-two-fields",
      "team-structure-joint-pmo",
      "test-v-model-paired"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "high",
      "layout": {
        "kind": "stack",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 104,
          "right": 140,
          "bottom": 104,
          "left": 140
        },
        "emphasis": {
          "row": 2,
          "via": [
            "fill",
            "rule"
          ]
        }
      },
      "type": {
        "title": {
          "size": 46,
          "weight": 700,
          "tracking": "0.01em",
          "leading": 1.3
        },
        "lede": {
          "size": 19,
          "weight": 400,
          "leading": 1.8
        },
        "tname": {
          "size": 24,
          "weight": 700,
          "leading": 1.4
        },
        "tnote": {
          "size": 15,
          "weight": 400,
          "leading": 1.6
        },
        "bname": {
          "size": 19,
          "weight": 500,
          "leading": 1.4
        },
        "btag": {
          "size": 14,
          "weight": 400
        },
        "fkey": {
          "size": 14,
          "weight": 500,
          "tracking": "0.14em"
        },
        "fval": {
          "size": 17,
          "weight": 500,
          "leading": 1.6
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building",
        "Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there",
        "Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts",
        "Five boxes per tier. From the sixth on, what the room remembers is the count, not the names",
        "State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 104 右 140 下 104 左 140\n\n## 強調\n2 行目のみ。手段は 塗り + 罫 だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  46px / 700 / 字間 0.01em / 行送り 1.3\nlede  19px / 400 / 行送り 1.8\ntname  24px / 700 / 行送り 1.4\ntnote  15px / 400 / 行送り 1.6\nbname  19px / 500 / 行送り 1.4\nbtag  14px / 400\nfkey  14px / 500 / 字間 0.14em\nfval  17px / 500 / 行送り 1.6\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 層は 3 つまで。4 つ目を足した瞬間、聞き手は層の名前を覚えるほうに気を取られ、どこを作るのかを聞き逃す\n- すべて新規の層だけを塗る。一部だけ足す層は箱の「新規」で示す。全層を塗ると「全部作り直す」と読まれ、費用の話がその前提で始まる\n- 既存システムは点線にしない。点線は「未確定」と読まれる。示したいのは確定していることなので、文字色だけを落とす\n- 1 層に置く箱は 5 個まで。6 個目からは、箱の名前ではなく箱の数が印象に残る\n- 連携方式を下端に 1 行で書く。構成図に矢印で書き込むと、線の意味を説明する時間のほうが長くなる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/architecture-3tier-stack/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 104 right 140 bottom 104 left 140\n\n## Emphasis\nrow 2 only, by fill + rule and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  46px / 700 / tracking 0.01em / leading 1.3\nlede  19px / 400 / leading 1.8\ntname  24px / 700 / leading 1.4\ntnote  15px / 400 / leading 1.6\nbname  19px / 500 / leading 1.4\nbtag  14px / 400\nfkey  14px / 500 / tracking 0.14em\nfval  17px / 500 / 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- Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building\n- Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there\n- Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts\n- Five boxes per tier. From the sixth on, what the room remembers is the count, not the names\n- State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves\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/architecture-3tier-stack/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New: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  :root {\n    --ground: #FFFFFF;\n    --surface: #F4F6F9;\n    --ink: #131820;\n    --muted: #667183;\n    --accent: #1F5FA8;\n    --rule: #DBE1E9;\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; height: 1080px;\n    background: var(--ground); color: var(--ink);\n    padding: 104px 140px;                 /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }\n\n  .head { display: grid; gap: 16px; }\n  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }\n  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n\n  /* 層は 3 つまで。4 つ目を足した瞬間、聞き手は層の名前を覚えるほうに気を取られる。 */\n  .stack { align-self: center; display: grid; gap: 22px; }\n  .tier { display: grid; grid-template-columns: 236px 1fr; align-items: center; gap: 40px; border: 1px solid var(--rule); padding: 32px 36px; }\n  /* 新しく作る層だけを塗る。既存を塗ると「全部作り直す」と読まれる。 */\n  .tier[data-emphasis] { background: var(--surface); border-color: var(--accent); }\n\n  .tname { font-size: 24px; font-weight: 700; line-height: 1.4; }\n  .tnote { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--muted); margin-top: 8px; }\n  .tier[data-emphasis] .tname { color: var(--accent); }\n\n  .boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }\n  .box { border: 1px solid var(--rule); background: var(--ground); padding: 22px 20px; }\n  /* 既存システムは点線にしない — 点線は「未確定」と読まれる。文字色だけ落とす。 */\n  .box[data-keep] .bname { color: var(--muted); }\n  .bname { font-size: 19px; font-weight: 500; line-height: 1.4; }\n  .btag { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 10px; }\n\n  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 26px; }\n  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }\n  .fval { font-size: 17px; font-weight: 500; line-height: 1.6; margin-top: 10px; }\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\">システム構成（第 1 期）</h1>\n      <p class=\"lede\" data-type=\"lede\">すべて新しく作るのは中段の 1 層だけです。上下は既存の資産を使い、足すのは受注の画面 2 つとデータベースに限ります。</p>\n    </div>\n\n    <div class=\"stack\">\n      <section class=\"tier\" data-row=\"1\">\n        <div>\n          <p class=\"tname\" data-type=\"tname\">利用者層</p>\n          <p class=\"tnote\" data-type=\"tnote\">既存の端末・認証をそのまま使う</p>\n        </div>\n        <div class=\"boxes\">\n          <div class=\"box\"><p class=\"bname\" data-type=\"bname\">受注入力画面</p><p class=\"btag\" data-type=\"btag\">新規</p></div>\n          <div class=\"box\"><p class=\"bname\">受注照会画面</p><p class=\"btag\">新規</p></div>\n          <div class=\"box\" data-keep><p class=\"bname\">社内ポータル</p><p class=\"btag\">既存</p></div>\n          <div class=\"box\" data-keep><p class=\"bname\">認証基盤</p><p class=\"btag\">既存</p></div>\n          <div class=\"box\" data-keep><p class=\"bname\">帳票ビューア</p><p class=\"btag\">既存</p></div>\n        </div>\n      </section>\n\n      <section class=\"tier\" data-row=\"2\" data-emphasis=\"fill rule\">\n        <div>\n          <p class=\"tname\">業務アプリ層</p>\n          <p class=\"tnote\">第 1 期の開発の中心</p>\n        </div>\n        <div class=\"boxes\">\n          <div class=\"box\"><p class=\"bname\">受注管理</p><p class=\"btag\">新規</p></div>\n          <div class=\"box\"><p class=\"bname\">出荷指示</p><p class=\"btag\">新規</p></div>\n          <div class=\"box\"><p class=\"bname\">在庫引当</p><p class=\"btag\">新規</p></div>\n          <div class=\"box\"><p class=\"bname\">帳票出力</p><p class=\"btag\">新規</p></div>\n          <div class=\"box\"><p class=\"bname\">監査ログ</p><p class=\"btag\">新規</p></div>\n        </div>\n      </section>\n\n      <section class=\"tier\" data-row=\"3\">\n        <div>\n          <p class=\"tname\">データ・連携層</p>\n          <p class=\"tnote\">既存の連携基盤を経由する</p>\n        </div>\n        <div class=\"boxes\">\n          <div class=\"box\"><p class=\"bname\">受注データベース</p><p class=\"btag\">新規</p></div>\n          <div class=\"box\" data-keep><p class=\"bname\">在庫システム</p><p class=\"btag\">既存</p></div>\n          <div class=\"box\" data-keep><p class=\"bname\">会計システム</p><p class=\"btag\">既存</p></div>\n          <div class=\"box\" data-keep><p class=\"bname\">連携基盤</p><p class=\"btag\">既存</p></div>\n          <div class=\"box\" data-keep><p class=\"bname\">マスタ管理</p><p class=\"btag\">既存</p></div>\n        </div>\n      </section>\n    </div>\n\n    <div class=\"foot\">\n      <div>\n        <p class=\"fkey\" data-type=\"fkey\">連携方式</p>\n        <p class=\"fval\" data-type=\"fval\">在庫は同期、会計は日次バッチ</p>\n      </div>\n      <div>\n        <p class=\"fkey\">稼働環境</p>\n        <p class=\"fval\">既存のプライベートクラウドに相乗り</p>\n      </div>\n      <div>\n        <p class=\"fkey\">この章でのご判断</p>\n        <p class=\"fval\">在庫連携を同期にする前提の可否</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/architecture-3tier-stack/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/architecture-3tier-stack/font.css",
        "https://design-vault.pages.dev/designs/architecture-3tier-stack/font-0.woff2",
        "https://design-vault.pages.dev/designs/architecture-3tier-stack/font-1.woff2",
        "https://design-vault.pages.dev/designs/architecture-3tier-stack/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/architecture-3tier-stack",
    "en": "https://design-vault.pages.dev/en/designs/architecture-3tier-stack"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n第 1 期で作る範囲を構成図の上で示すための版。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nThe architecture slide that shows which part of the estate this phase touches. `pattern.html` is\nthe artboard itself; both `cover.png` and the measurements come from it, so the three cannot\ndrift apart.\n\n### Techniques\n\n- 層の名前と補足を左 236px に固定すると、箱の数が層ごとに違っても左端が揃う\n- 箱は等幅の 5 列。空きが出ても詰めない — 空いていること自体が「この層は薄い」という情報になる\n- 新規・既存の別は `btag` の 2 文字だけで足りる。凡例を別に置くと凡例を読む時間が要る\n- 塗るのはすべて新規の層だけ。上下の層に画面や DB を 1 つ足す程度なら層は塗らず、箱の `btag` で示す — 足す箱があるたびに層を塗ると、塗りが「どこを作るか」を言わなくなる\n\n### Apply to\n\n- 提案・基本設計での構成説明、フェーズ分割の根拠\n- 現行構成の説明（塗りを外し、`btag` を「継続／廃止」に読み替える）"
}