{
  "id": "comparison-before-after",
  "schemaVersion": 2,
  "title": {
    "ja": "Before / After — 同じ行で左右を突き合わせる",
    "en": "Before / After — Paired on the Same Row"
  },
  "summary": {
    "ja": "変わるものだけを 4 行に絞り、左右を同じ行で比べさせる",
    "en": "Only what changes, in four rows, each pairing the two sides on one line"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "data-viz"
  ],
  "useCases": [
    "comparison",
    "problem-solution"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "2-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 100,
      "right": 128,
      "bottom": 100,
      "left": 128
    },
    "columns": {
      "count": 2,
      "gap": 56
    },
    "emphasis": {
      "column": 2,
      "via": [
        "rule"
      ]
    }
  },
  "type": {
    "title": {
      "size": 42,
      "weight": 700,
      "tracking": "0.02em"
    },
    "lede": {
      "size": 19,
      "weight": 400,
      "leading": 1.8
    },
    "side": {
      "size": 15,
      "weight": 500,
      "tracking": "0.18em"
    },
    "sideName": {
      "size": 26,
      "weight": 700
    },
    "aspect": {
      "size": 22,
      "weight": 500
    },
    "value": {
      "size": 34,
      "weight": 700,
      "tracking": "-0.01em",
      "numeric": "tabular"
    },
    "detail": {
      "size": 17,
      "weight": 400,
      "leading": 1.7
    },
    "note": {
      "size": 17,
      "weight": 400,
      "leading": 1.8
    },
    "basis": {
      "size": 15,
      "weight": 400
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F3F4F6",
    "ink": "#15181C",
    "muted": "#737A83",
    "accent": "#0E6E4E",
    "rule": "#D7DBE0",
    "series": []
  },
  "rules": [
    {
      "ja": "変わらないものは載せない。載せると「変化の表」ではなく「仕様の表」になる",
      "en": "Leave out what does not change — otherwise it is a spec sheet, not a change sheet"
    },
    {
      "ja": "項目ごとに高さを揃える。揃えないと 2 つの箇条書きが並んでいるだけになる",
      "en": "Align the rows — unaligned, it is two bullet lists side by side"
    },
    {
      "ja": "After の側だけに accent を使う。両側に色を置くと差が読めない",
      "en": "Only the after column takes the accent; colouring both hides the difference"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.C7Q5JemT.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "comparison-table-single-fill",
      "matrix-2x2-priority-plot",
      "problem-solution-3step"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "2-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 100,
          "right": 128,
          "bottom": 100,
          "left": 128
        },
        "columns": {
          "count": 2,
          "gap": 56
        },
        "emphasis": {
          "column": 2,
          "via": [
            "rule"
          ]
        }
      },
      "type": {
        "title": {
          "size": 42,
          "weight": 700,
          "tracking": "0.02em"
        },
        "lede": {
          "size": 19,
          "weight": 400,
          "leading": 1.8
        },
        "side": {
          "size": 15,
          "weight": 500,
          "tracking": "0.18em"
        },
        "sideName": {
          "size": 26,
          "weight": 700
        },
        "aspect": {
          "size": 22,
          "weight": 500
        },
        "value": {
          "size": 34,
          "weight": 700,
          "tracking": "-0.01em",
          "numeric": "tabular"
        },
        "detail": {
          "size": 17,
          "weight": 400,
          "leading": 1.7
        },
        "note": {
          "size": 17,
          "weight": 400,
          "leading": 1.8
        },
        "basis": {
          "size": 15,
          "weight": 400
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F3F4F6",
        "ink": "#15181C",
        "muted": "#737A83",
        "accent": "#0E6E4E",
        "rule": "#D7DBE0"
      },
      "rules": [
        "Leave out what does not change — otherwise it is a spec sheet, not a change sheet",
        "Align the rows — unaligned, it is two bullet lists side by side",
        "Only the after column takes the accent; colouring both hides the difference"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 128 下 100 左 128\n- 2 カラム（等分）、間隔 56\n\n## 強調\n2 列目のみ。手段は 罫 だけ。ほかは変えない\n\n## 文字（版面 1920px に対する px）\ntitle  42px / 700 / 字間 0.02em\nlede  19px / 400 / 行送り 1.8\nside  15px / 500 / 字間 0.18em\nsideName  26px / 700\naspect  22px / 500\nvalue  34px / 700 / 字間 -0.01em / 等幅数字\ndetail  17px / 400 / 行送り 1.7\nnote  17px / 400 / 行送り 1.8\nbasis  15px / 400\n\n## 配色\n地 #FFFFFF / 面 #F3F4F6 / 文字 #15181C / 補助 #737A83 / 強調 #0E6E4E / 罫 #D7DBE0\n\n## 外すと崩れる点\n- 変わらないものは載せない。載せると「変化の表」ではなく「仕様の表」になる\n- 項目ごとに高さを揃える。揃えないと 2 つの箇条書きが並んでいるだけになる\n- After の側だけに accent を使う。両側に色を置くと差が読めない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/comparison-before-after/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 128 bottom 100 left 128\n- 2 equal columns, gap 56\n\n## Emphasis\ncolumn 2 only, by rule and nothing else\n\n## Type (px against a 1920px canvas)\ntitle  42px / 700 / tracking 0.02em\nlede  19px / 400 / leading 1.8\nside  15px / 500 / tracking 0.18em\nsideName  26px / 700\naspect  22px / 500\nvalue  34px / 700 / tracking -0.01em / tabular numerals\ndetail  17px / 400 / leading 1.7\nnote  17px / 400 / leading 1.8\nbasis  15px / 400\n\n## Colour\nGround #FFFFFF / Surface #F3F4F6 / Ink #15181C / Muted #737A83 / Accent #0E6E4E / Rule #D7DBE0\n\n## Constraints — dropping these breaks it\n- Leave out what does not change — otherwise it is a spec sheet, not a change sheet\n- Align the rows — unaligned, it is two bullet lists side by side\n- Only the after column takes the accent; colouring both hides the difference\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/comparison-before-after/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>Before / After — 同じ行で左右を突き合わせる</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: #F3F4F6;\n    --ink: #15181C;\n    --muted: #737A83;\n    --accent: #0E6E4E;\n    --rule: #D7DBE0;\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: 100px 128px;\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 30px; }\n\n  .head { display: grid; gap: 12px; }\n  .title { font-size: 42px; font-weight: 700; letter-spacing: .02em; }\n  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }\n\n  /* 左右は同じ行に並ぶ。項目ごとに高さを揃えないと、\n     「比べている」のではなく「2 つの箇条書きが並んでいる」絵になる。 */\n  .cols { display: grid; grid-template-columns: 300px 1fr 1fr; column-gap: 56px; }\n  .colHead { padding-bottom: 18px; border-bottom: 2px solid var(--rule); display: flex; align-items: baseline; gap: 16px; }\n  .side { font-size: 15px; font-weight: 500; letter-spacing: .18em; color: var(--muted); }\n  .sideName { font-size: 26px; font-weight: 700; }\n  .colHead[data-emphasis] { border-bottom-color: var(--accent); }\n  .colHead[data-emphasis] .side, .colHead[data-emphasis] .sideName { color: var(--accent); }\n\n  .rows { display: grid; grid-template-rows: repeat(4, 1fr); }\n  .row { display: grid; grid-template-columns: 300px 1fr 1fr; column-gap: 56px; align-items: center;\n         border-bottom: 1px solid var(--rule); }\n  .aspect { font-size: 22px; font-weight: 500; }\n  .cell { display: grid; gap: 10px; padding: 26px 0; }\n  .value { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n  .cell[data-after] .value { color: var(--accent); }\n  .detail { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--muted); }\n\n  .foot { border-top: 1px solid var(--rule); padding-top: 24px; display: flex; justify-content: space-between; gap: 48px; }\n  .note { font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--muted); max-width: 1280px; }\n  .basis { font-size: 15px; font-weight: 400; 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=\"lede\" data-type=\"lede\">変わらないものは載せていません。ここに無い業務は、移行後も今日と同じ手順です。</p>\n    </div>\n\n    <div class=\"cols\">\n      <div></div>\n      <div class=\"colHead\" data-col=\"1\"><span class=\"side\" data-type=\"side\">BEFORE</span><span class=\"sideName\" data-type=\"sideName\">現行</span></div>\n      <div class=\"colHead\" data-col=\"2\" data-emphasis=\"rule\"><span class=\"side\">AFTER</span><span class=\"sideName\">移行後</span></div>\n    </div>\n\n    <div class=\"rows\">\n      <div class=\"row\">\n        <p class=\"aspect\" data-type=\"aspect\">月次締めの所要</p>\n        <div class=\"cell\"><p class=\"value\" data-type=\"value\">5.5 日</p><p class=\"detail\" data-type=\"detail\">4 拠点の集計を手で突き合わせ</p></div>\n        <div class=\"cell\" data-after><p class=\"value\">1.0 日</p><p class=\"detail\">拠点別の入力がそのまま集計になる</p></div>\n      </div>\n      <div class=\"row\">\n        <p class=\"aspect\">台帳の数</p>\n        <div class=\"cell\"><p class=\"value\">7 系統</p><p class=\"detail\">同じ得意先が別 ID で 7 か所に</p></div>\n        <div class=\"cell\" data-after><p class=\"value\">1 系統</p><p class=\"detail\">得意先コードを 1 本に統合</p></div>\n      </div>\n      <div class=\"row\">\n        <p class=\"aspect\">連携の本数</p>\n        <div class=\"cell\"><p class=\"value\">23 本</p><p class=\"detail\">うち 9 本は台帳に記載が無い</p></div>\n        <div class=\"cell\" data-after><p class=\"value\">11 本</p><p class=\"detail\">全数を台帳に登録し、監視下に置く</p></div>\n      </div>\n      <div class=\"row\">\n        <p class=\"aspect\">年間の保守費</p>\n        <div class=\"cell\"><p class=\"value\">4,100 万円</p><p class=\"detail\">延長保守の割増を含む</p></div>\n        <div class=\"cell\" data-after><p class=\"value\">2,850 万円</p><p class=\"detail\">3 年目以降。初年度は移行費が乗る</p></div>\n      </div>\n    </div>\n\n    <div class=\"foot\">\n      <p class=\"note\" data-type=\"note\">初年度は移行費で費用が増えます。回収は 3 年目です —— 保守切れの 2027 年 3 月に間に合わせること自体が目的なので、回収年数は判断材料の 2 番目に置いています。</p>\n      <p class=\"basis\" data-type=\"basis\">現行は 2026 年 4-8 月の実測</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/comparison-before-after/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/comparison-before-after/font.css",
        "https://design-vault.pages.dev/designs/comparison-before-after/font-0.woff2",
        "https://design-vault.pages.dev/designs/comparison-before-after/font-1.woff2",
        "https://design-vault.pages.dev/designs/comparison-before-after/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/comparison-before-after",
    "en": "https://design-vault.pages.dev/en/designs/comparison-before-after"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 数値は等幅で右揃えにせず、左揃えのまま桁を合わせる（4 行しかないため）\n- 各セルに 1 行の補足を置き、数字の出どころを添える\n- 不利な事実（初年度は費用が増える）を注記に書く。伏せると比較表の信用が落ちる\n\n### Apply to\n\n- 刷新の効果説明\n- 現行と新方式の突き合わせ"
}