{
  "id": "quiz-four-choices",
  "schemaVersion": 2,
  "title": {
    "ja": "確認問題 4 択 — 問い 1 行と、同じ大きさの選択肢 4 つ",
    "en": "Four-Choice Quiz — One Question and Four Equal Choices"
  },
  "summary": {
    "ja": "問いを 1 行で置き、同じ大きさの選択肢を 2×2 に並べる。答えの枚は同じ版で、正解の 1 枚だけを強調色にして出す",
    "en": "One question, then four equal choices in a 2×2 grid; the answer slide is the same layout with only the correct choice in the accent"
  },
  "capturedAt": "2026-10-19",
  "categories": [
    "presentation"
  ],
  "tags": [
    "bold",
    "typography"
  ],
  "useCases": [
    "learning"
  ],
  "format": "slide-16x9",
  "density": "low",
  "layout": {
    "kind": "grid",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 88,
      "right": 140,
      "bottom": 56,
      "left": 140
    }
  },
  "type": {
    "kicker": {
      "size": 24,
      "weight": 700,
      "numeric": "tabular"
    },
    "title": {
      "size": 54,
      "weight": 700,
      "leading": 1.35,
      "numeric": "tabular"
    },
    "question": {
      "size": 40,
      "weight": 700,
      "leading": 1.45,
      "numeric": "tabular"
    },
    "letter": {
      "size": 36,
      "weight": 700,
      "numeric": "tabular"
    },
    "choice": {
      "size": 32,
      "weight": 500,
      "leading": 1.5,
      "numeric": "tabular"
    },
    "hint": {
      "size": 24,
      "weight": 400,
      "numeric": "tabular"
    },
    "folio": {
      "size": 16,
      "weight": 400,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#F5EFE4",
    "surface": "#FFFBF4",
    "ink": "#2B2620",
    "muted": "#776E62",
    "accent": "#B4502B",
    "rule": "#E3D9C8",
    "series": []
  },
  "rules": [
    {
      "ja": "選択肢は同じ大きさ・同じ書式にする。正解だけ長いと、文の長さで当てられる",
      "en": "All choices the same size and style — if the right one is longer, length gives it away"
    },
    {
      "ja": "答えの枚は同じ版の色違いにする。位置が動かないので、どれが正解かだけが目に入る",
      "en": "The answer slide is this layout recoloured, so only the correct choice changes"
    },
    {
      "ja": "考える時間と、答え合わせの仕方を下に書く",
      "en": "State the thinking time and how answers will be checked"
    },
    {
      "ja": "問いは 1 文。条件は選択肢に入れない",
      "en": "One-sentence question; no conditions hidden in the choices"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.DH1CfHEa.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "matrix-2x2-priority-plot",
      "faq-question-answer-pairs",
      "offering-grid-six-cards"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "low",
      "layout": {
        "kind": "grid",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 88,
          "right": 140,
          "bottom": 56,
          "left": 140
        }
      },
      "type": {
        "kicker": {
          "size": 24,
          "weight": 700,
          "numeric": "tabular"
        },
        "title": {
          "size": 54,
          "weight": 700,
          "leading": 1.35,
          "numeric": "tabular"
        },
        "question": {
          "size": 40,
          "weight": 700,
          "leading": 1.45,
          "numeric": "tabular"
        },
        "letter": {
          "size": 36,
          "weight": 700,
          "numeric": "tabular"
        },
        "choice": {
          "size": 32,
          "weight": 500,
          "leading": 1.5,
          "numeric": "tabular"
        },
        "hint": {
          "size": 24,
          "weight": 400,
          "numeric": "tabular"
        },
        "folio": {
          "size": 16,
          "weight": 400,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#F5EFE4",
        "surface": "#FFFBF4",
        "ink": "#2B2620",
        "muted": "#776E62",
        "accent": "#B4502B",
        "rule": "#E3D9C8"
      },
      "rules": [
        "All choices the same size and style — if the right one is longer, length gives it away",
        "The answer slide is this layout recoloured, so only the correct choice changes",
        "State the thinking time and how answers will be checked",
        "One-sentence question; no conditions hidden in the choices"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 88 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker  24px / 700 / 等幅数字\ntitle  54px / 700 / 行送り 1.35 / 等幅数字\nquestion  40px / 700 / 行送り 1.45 / 等幅数字\nletter  36px / 700 / 等幅数字\nchoice  32px / 500 / 行送り 1.5 / 等幅数字\nhint  24px / 400 / 等幅数字\nfolio  16px / 400 / 等幅数字\n\n## 配色\n地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8\n\n## 外すと崩れる点\n- 選択肢は同じ大きさ・同じ書式にする。正解だけ長いと、文の長さで当てられる\n- 答えの枚は同じ版の色違いにする。位置が動かないので、どれが正解かだけが目に入る\n- 考える時間と、答え合わせの仕方を下に書く\n- 問いは 1 文。条件は選択肢に入れない\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/quiz-four-choices/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 88 right 140 bottom 56 left 140\n\n## Type (px against a 1920px canvas)\nkicker  24px / 700 / tabular numerals\ntitle  54px / 700 / leading 1.35 / tabular numerals\nquestion  40px / 700 / leading 1.45 / tabular numerals\nletter  36px / 700 / tabular numerals\nchoice  32px / 500 / leading 1.5 / tabular numerals\nhint  24px / 400 / tabular numerals\nfolio  16px / 400 / tabular numerals\n\n## Colour\nGround #F5EFE4 / Surface #FFFBF4 / Ink #2B2620 / Muted #776E62 / Accent #B4502B / Rule #E3D9C8\n\n## Constraints — dropping these breaks it\n- All choices the same size and style — if the right one is longer, length gives it away\n- The answer slide is this layout recoloured, so only the correct choice changes\n- State the thinking time and how answers will be checked\n- One-sentence question; no conditions hidden in the choices\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/quiz-four-choices/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>確認問題 4 択 — 問い 1 行と、同じ大きさの選択肢 4 つ</title>\n<meta name=\"dv-font\" content=\"Zen Maru Gothic: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: #F5EFE4;\n    --surface: #FFFBF4;\n    --ink: #2B2620;\n    --muted: #776E62;\n    --accent: #B4502B;\n    --rule: #E3D9C8;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1920px; height: 1080px; }\n  body { font-family: \"Zen Maru Gothic\", \"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: 88px 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: 24px; font-weight: 700; color: var(--accent); }\n  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }\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  .quiz { display: grid; grid-template-rows: auto 1fr auto; row-gap: 32px; }\n  .q { font-size: 40px; font-weight: 700; line-height: 1.45; }\n  .q span { color: var(--accent); margin-right: 16px; }\n  /* 選択肢は同じ大きさの 2×2。答え合わせでは、正解の 1 つだけを強調色に変えて見せる */\n  .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 28px; }\n  .choice { background: var(--surface); border: 3px solid var(--rule); border-radius: 24px; padding: 0 40px; display: flex; align-items: center; gap: 32px; }\n  .letter { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 36px; font-weight: 700; }\n  .ct { font-size: 32px; font-weight: 500; line-height: 1.5; }\n  .hint { font-size: 24px; color: var(--muted); }\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\">確認問題 1</p>\n      <h1 class=\"title\" data-type=\"title\">どれが「開かれた質問」か</h1>\n    </div>\n    <div class=\"quiz\">\n      <p class=\"q\" data-type=\"question\"><span>Q.</span>次のうち、開かれた質問はどれか</p>\n      <div class=\"grid\">\n        <div class=\"choice\"><span class=\"letter\" data-type=\"letter\">A</span><p class=\"ct\" data-type=\"choice\">「この機能は便利だと思いますか」</p></div>\n        <div class=\"choice\"><span class=\"letter\">B</span><p class=\"ct\">「月末の作業は大変ですか」</p></div>\n        <div class=\"choice\"><span class=\"letter\">C</span><p class=\"ct\">「先月の締めの日、朝から順に何をしましたか」</p></div>\n        <div class=\"choice\"><span class=\"letter\">D</span><p class=\"ct\">「使うなら月いくらまで払えますか」</p></div>\n      </div>\n      <p class=\"hint\" data-type=\"hint\">考える時間は 1 分。隣の人と答えを見せ合ってから、全員で答え合わせ</p>\n    </div>\n    <div class=\"folio\">\n      <p data-type=\"folio\">はじめての顧客インタビュー　社内研修</p>\n      <p>04</p>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/quiz-four-choices/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/quiz-four-choices/font.css",
        "https://design-vault.pages.dev/designs/quiz-four-choices/font-0.woff2",
        "https://design-vault.pages.dev/designs/quiz-four-choices/font-1.woff2",
        "https://design-vault.pages.dev/designs/quiz-four-choices/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/quiz-four-choices",
    "en": "https://design-vault.pages.dev/en/designs/quiz-four-choices"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「研修・講義」の\n1 枚で、架空の社内研修「はじめての顧客インタビュー」として描いてある。研修の中身・人物・数値はすべて架空。\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 six training slides, drawn as a\nfictional in-house workshop on customer interviews; its content, people and figures are invented.\n\n### Techniques\n\n- 2×2 の格子を版面いっぱいに伸ばす\n- 記号は墨の丸に白抜き、答えの枚では正解の札だけ強調色の枠\n- 問いの頭に強調色の Q.\n\n### Apply to\n\n- 研修・講義の理解の確認\n- 説明会の参加型の問い"
}