{
  "id": "do-dont-paired",
  "schemaVersion": 2,
  "title": {
    "ja": "する・しない — 守ってほしい振る舞いを、行を揃えた対で見せる",
    "en": "Do and Don't — Behaviours in Pairs, Row by Row"
  },
  "summary": {
    "ja": "「こう案内する」と「こうは案内しない」を 2 列に並べ、対になる行の高さを揃える。各行に言い回しの例を添える",
    "en": "What to do and what not to, in two columns whose paired rows share a height, each with an example of the wording"
  },
  "capturedAt": "2026-10-19",
  "categories": [
    "presentation"
  ],
  "tags": [
    "minimal",
    "typography"
  ],
  "useCases": [
    "comparison"
  ],
  "format": "slide-16x9",
  "density": "medium",
  "layout": {
    "kind": "2-column",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 96,
      "right": 140,
      "bottom": 96,
      "left": 140
    },
    "columns": {
      "count": 2,
      "gap": 48
    }
  },
  "type": {
    "kicker": {
      "size": 20,
      "weight": 500,
      "tracking": "0.16em"
    },
    "title": {
      "size": 52,
      "weight": 700,
      "leading": 1.35
    },
    "hLabel": {
      "size": 30,
      "weight": 700
    },
    "say": {
      "size": 27,
      "weight": 700,
      "leading": 1.5
    },
    "eg": {
      "size": 22,
      "weight": 400,
      "leading": 1.7
    },
    "folio": {
      "size": 16,
      "weight": 400,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#FFFFFF",
    "surface": "#F4F6F9",
    "ink": "#131820",
    "muted": "#667183",
    "accent": "#1F5FA8",
    "rule": "#DBE1E9",
    "series": []
  },
  "rules": [
    {
      "ja": "2 列を 1 つの格子に組み、対になる行の高さを揃える。列ごとに組むと、どれとどれが対か分からなくなる",
      "en": "Set both columns in one grid so paired rows share a height — column by column, the pairs come apart"
    },
    {
      "ja": "しない側は灰色に落とし、記号も白抜きにする。両方を同じ強さにすると、しない側を覚えて帰られる",
      "en": "Grey out the don't side and hollow its mark — at equal weight, the don't is what people remember"
    },
    {
      "ja": "各行に実際の言い回しを「」で添える。振る舞いの名前だけでは、現場で同じ言葉が出てこない",
      "en": "Give each row the actual words in quotes — the name of a behaviour does not put the sentence in anyone's mouth"
    },
    {
      "ja": "対は 3 組まで",
      "en": "Three pairs at most"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.9dyIRhWF.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "comparison-before-after",
      "scope-in-out-two-fields",
      "bullets-three-levels"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "medium",
      "layout": {
        "kind": "2-column",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 96,
          "right": 140,
          "bottom": 96,
          "left": 140
        },
        "columns": {
          "count": 2,
          "gap": 48
        }
      },
      "type": {
        "kicker": {
          "size": 20,
          "weight": 500,
          "tracking": "0.16em"
        },
        "title": {
          "size": 52,
          "weight": 700,
          "leading": 1.35
        },
        "hLabel": {
          "size": 30,
          "weight": 700
        },
        "say": {
          "size": 27,
          "weight": 700,
          "leading": 1.5
        },
        "eg": {
          "size": 22,
          "weight": 400,
          "leading": 1.7
        },
        "folio": {
          "size": 16,
          "weight": 400,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#FFFFFF",
        "surface": "#F4F6F9",
        "ink": "#131820",
        "muted": "#667183",
        "accent": "#1F5FA8",
        "rule": "#DBE1E9"
      },
      "rules": [
        "Set both columns in one grid so paired rows share a height — column by column, the pairs come apart",
        "Grey out the don't side and hollow its mark — at equal weight, the don't is what people remember",
        "Give each row the actual words in quotes — the name of a behaviour does not put the sentence in anyone's mouth",
        "Three pairs at most"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 96 左 140\n- 2 カラム（等分）、間隔 48\n\n## 文字（版面 1920px に対する px）\nkicker  20px / 500 / 字間 0.16em\ntitle  52px / 700 / 行送り 1.35\nhLabel  30px / 700\nsay  27px / 700 / 行送り 1.5\neg  22px / 400 / 行送り 1.7\nfolio  16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9\n\n## 外すと崩れる点\n- 2 列を 1 つの格子に組み、対になる行の高さを揃える。列ごとに組むと、どれとどれが対か分からなくなる\n- しない側は灰色に落とし、記号も白抜きにする。両方を同じ強さにすると、しない側を覚えて帰られる\n- 各行に実際の言い回しを「」で添える。振る舞いの名前だけでは、現場で同じ言葉が出てこない\n- 対は 3 組まで\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/do-dont-paired/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- 2 equal columns, gap 48\n\n## Type (px against a 1920px canvas)\nkicker  20px / 500 / tracking 0.16em\ntitle  52px / 700 / leading 1.35\nhLabel  30px / 700\nsay  27px / 700 / leading 1.5\neg  22px / 400 / leading 1.7\nfolio  16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9\n\n## Constraints — dropping these breaks it\n- Set both columns in one grid so paired rows share a height — column by column, the pairs come apart\n- Grey out the don't side and hollow its mark — at equal weight, the don't is what people remember\n- Give each row the actual words in quotes — the name of a behaviour does not put the sentence in anyone's mouth\n- Three pairs at most\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/do-dont-paired/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  /* この版そのもの。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: 96px 140px;                  /* → layout.margin */\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 48px; }\n\n  .kicker { font-size: 20px; font-weight: 500; letter-spacing: .16em; color: var(--accent); }\n  .title { font-size: 52px; font-weight: 700; line-height: 1.35; margin-top: 16px; }\n\n  /* 2 列を 1 つの格子に組む。列ごとに組むと、対になる行の高さが揃わない */\n  .pairs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-content: center; }\n  .col { display: contents; }\n  .head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 4px solid var(--ink); }\n  .head.dont { border-bottom-color: var(--rule); }\n  .head svg { flex: none; }\n  .hLabel { font-size: 30px; font-weight: 700; }\n  .dont .hLabel { color: var(--muted); }\n\n  .cell { padding: 28px 0; border-bottom: 1px solid var(--rule); }\n  .say { font-size: 27px; font-weight: 700; line-height: 1.5; }\n  .eg { font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 8px; }\n  .cell.dont .say { font-weight: 500; color: var(--muted); }\n  .eg q { quotes: \"「\" \"」\"; color: var(--ink); }\n\n  .folio { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 20px;\n           font-size: 16px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <div class=\"content\" data-content>\n    <div>\n      <p class=\"kicker\" data-type=\"kicker\">3. 来月からのお願い</p>\n      <h1 class=\"title\" data-type=\"title\">お客様から聞かれたときの案内</h1>\n    </div>\n\n    <div class=\"pairs\">\n      <div class=\"head\" data-col=\"1\">\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" aria-hidden=\"true\"><circle cx=\"18\" cy=\"18\" r=\"17\" fill=\"var(--accent)\"/><path d=\"M10 18.5 l5.5 5.5 L26.5 12\" fill=\"none\" stroke=\"var(--ground)\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <p class=\"hLabel\" data-type=\"hLabel\">こう案内する</p>\n      </div>\n      <div class=\"head dont\" data-col=\"2\">\n        <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" aria-hidden=\"true\"><circle cx=\"18\" cy=\"18\" r=\"16\" fill=\"none\" stroke=\"var(--muted)\" stroke-width=\"2.5\"/><path d=\"M12 12 L24 24 M24 12 L12 24\" stroke=\"var(--muted)\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>\n        <p class=\"hLabel\">こうは案内しない</p>\n      </div>\n\n      <div class=\"cell\">\n        <p class=\"say\" data-type=\"say\">どの内容でも新しい番号を伝える</p>\n        <p class=\"eg\" data-type=\"eg\">例：<q>契約も請求も、0120-000-000 にお電話ください</q></p>\n      </div>\n      <div class=\"cell dont\">\n        <p class=\"say\">内容を聞いてから窓口を選ばせる</p>\n        <p class=\"eg\">例：<q>請求のことでしたら別の番号に…</q></p>\n      </div>\n\n      <div class=\"cell\">\n        <p class=\"say\">答えが分からなくても、受けた人が引き取る</p>\n        <p class=\"eg\">例：<q>担当から 1 時間以内に折り返します</q></p>\n      </div>\n      <div class=\"cell dont\">\n        <p class=\"say\">分からない内容をそのまま転送する</p>\n        <p class=\"eg\">例：<q>担当部署におつなぎします</q>（保留のまま待たせる）</p>\n      </div>\n\n      <div class=\"cell\">\n        <p class=\"say\">旧番号への電話も、その場で受ける</p>\n        <p class=\"eg\">例：旧番号は 2027 年 3 月まで新窓口へ自動でつながる</p>\n      </div>\n      <div class=\"cell dont\">\n        <p class=\"say\">旧番号の利用者に、かけ直しを求める</p>\n        <p class=\"eg\">例：<q>番号が変わりましたので、おかけ直しください</q></p>\n      </div>\n    </div>\n\n    <div class=\"folio\" data-type=\"folio\"><span>問い合わせ窓口の一本化 ／ 社内説明会</span><span>07 / 10</span></div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/do-dont-paired/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/do-dont-paired/font.css",
        "https://design-vault.pages.dev/designs/do-dont-paired/font-0.woff2",
        "https://design-vault.pages.dev/designs/do-dont-paired/font-1.woff2",
        "https://design-vault.pages.dev/designs/do-dont-paired/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/do-dont-paired",
    "en": "https://design-vault.pages.dev/en/designs/do-dont-paired"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「基本の 10 枚」の 1 枚で、\n配色は system-project 一式の淡地・濃地と同じ 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 ten basic slides, drawn in the\nsame two palettes as the system-project deck so the two can be mixed.\n\n### Techniques\n\n- 見出しの下罫を、する側は墨の太罫、しない側は罫の色にする\n- 例文の引用符の中だけ本文色に戻し、地の文と区別する\n- しない側の見出しの記号は、塗らずに輪郭だけ\n\n### Apply to\n\n- 業務の切り替えや規程の説明で、守ってほしい振る舞いを示す 1 枚\n- 表記・デザインの取り決め（言い回しの例を見本の図に替える）"
}