{
  "id": "quote-testimonial-bleed",
  "schemaVersion": 2,
  "title": {
    "ja": "引用 1 枚 — 明朝で言葉、ゴシックで出どころ",
    "en": "Testimonial — Mincho for the Words, Gothic for the Source"
  },
  "summary": {
    "ja": "他人の言葉を明朝で組み、出どころだけをゴシックに落とす濃地の 1 枚",
    "en": "Someone else’s words set in mincho on a dark ground, the attribution dropped to gothic"
  },
  "capturedAt": "2026-09-15",
  "categories": [
    "presentation"
  ],
  "tags": [
    "typography",
    "bold"
  ],
  "useCases": [
    "quote",
    "case-study"
  ],
  "format": "slide-16x9",
  "density": "low",
  "layout": {
    "kind": "full-bleed",
    "canvas": {
      "w": 1920,
      "h": 1080
    },
    "margin": {
      "top": 120,
      "right": 180,
      "bottom": 120,
      "left": 180
    }
  },
  "type": {
    "kicker": {
      "size": 16,
      "weight": 500,
      "tracking": "0.22em"
    },
    "quote": {
      "size": 66,
      "weight": 400,
      "tracking": "0.02em",
      "leading": 1.72
    },
    "name": {
      "size": 24,
      "weight": 500
    },
    "affiliation": {
      "size": 17,
      "weight": 400,
      "leading": 1.7
    },
    "when": {
      "size": 16,
      "weight": 400,
      "numeric": "tabular"
    },
    "scale": {
      "size": 16,
      "weight": 500,
      "numeric": "tabular"
    }
  },
  "colors": {
    "ground": "#1A1714",
    "surface": "#24201C",
    "ink": "#F4F0EA",
    "muted": "#9A9188",
    "accent": "#C9A227",
    "rule": "#332D27",
    "series": []
  },
  "rules": [
    {
      "ja": "書体の違いが「本人の言葉」と「こちらの注記」を分ける唯一の手段",
      "en": "The change of face is the only thing separating their words from our note"
    },
    {
      "ja": "引用符は図版。版面の外へ逃がし、読む文字と取り違えさせない",
      "en": "The quotation mark is artwork — bleed it off so it is never read as text"
    },
    {
      "ja": "発言を編集しない。強調したい句に色を置くところまでに留める",
      "en": "Never edit the quote — colouring one clause is as far as it goes"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BnFY8W8v.png",
  "assets": [],
  "shortlist": false,
  "status": "published",
  "relations": {
    "similar": [
      "2026-04-17-monochrome-editorial-magazine",
      "case-study-2col-single-figure",
      "section-divider-number-bleed"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "format": "slide-16x9",
      "density": "low",
      "layout": {
        "kind": "full-bleed",
        "canvas": {
          "w": 1920,
          "h": 1080
        },
        "margin": {
          "top": 120,
          "right": 180,
          "bottom": 120,
          "left": 180
        }
      },
      "type": {
        "kicker": {
          "size": 16,
          "weight": 500,
          "tracking": "0.22em"
        },
        "quote": {
          "size": 66,
          "weight": 400,
          "tracking": "0.02em",
          "leading": 1.72
        },
        "name": {
          "size": 24,
          "weight": 500
        },
        "affiliation": {
          "size": 17,
          "weight": 400,
          "leading": 1.7
        },
        "when": {
          "size": 16,
          "weight": 400,
          "numeric": "tabular"
        },
        "scale": {
          "size": 16,
          "weight": 500,
          "numeric": "tabular"
        }
      },
      "colors": {
        "ground": "#1A1714",
        "surface": "#24201C",
        "ink": "#F4F0EA",
        "muted": "#9A9188",
        "accent": "#C9A227",
        "rule": "#332D27"
      },
      "rules": [
        "The change of face is the only thing separating their words from our note",
        "The quotation mark is artwork — bleed it off so it is never read as text",
        "Never edit the quote — colouring one clause is as far as it goes"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 120 右 180 下 120 左 180\n\n## 文字（版面 1920px に対する px）\nkicker  16px / 500 / 字間 0.22em\nquote  66px / 400 / 字間 0.02em / 行送り 1.72\nname  24px / 500\naffiliation  17px / 400 / 行送り 1.7\nwhen  16px / 400 / 等幅数字\nscale  16px / 500 / 等幅数字\n\n## 配色\n地 #1A1714 / 面 #24201C / 文字 #F4F0EA / 補助 #9A9188 / 強調 #C9A227 / 罫 #332D27\n\n## 外すと崩れる点\n- 書体の違いが「本人の言葉」と「こちらの注記」を分ける唯一の手段\n- 引用符は図版。版面の外へ逃がし、読む文字と取り違えさせない\n- 発言を編集しない。強調したい句に色を置くところまでに留める\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/quote-testimonial-bleed/pattern.html",
      "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 120 right 180 bottom 120 left 180\n\n## Type (px against a 1920px canvas)\nkicker  16px / 500 / tracking 0.22em\nquote  66px / 400 / tracking 0.02em / leading 1.72\nname  24px / 500\naffiliation  17px / 400 / leading 1.7\nwhen  16px / 400 / tabular numerals\nscale  16px / 500 / tabular numerals\n\n## Colour\nGround #1A1714 / Surface #24201C / Ink #F4F0EA / Muted #9A9188 / Accent #C9A227 / Rule #332D27\n\n## Constraints — dropping these breaks it\n- The change of face is the only thing separating their words from our note\n- The quotation mark is artwork — bleed it off so it is never read as text\n- Never edit the quote — colouring one clause is as far as it goes\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/quote-testimonial-bleed/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>引用 1 枚 — 明朝で言葉、ゴシックで出どころ</title>\n<meta name=\"dv-font\" content=\"Zen Old Mincho:400;700\">\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  :root {\n    --ground: #1A1714;\n    --surface: #24201C;\n    --ink: #F4F0EA;\n    --muted: #9A9188;\n    --accent: #C9A227;\n    --rule: #332D27;\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: 120px 180px;\n    position: relative; overflow: hidden;\n  }\n  /* 引用符は図版。版面の外へ逃がして、読む文字と見る形を取り違えさせない。 */\n  .mark {\n    position: absolute; left: 60px; top: -120px;\n    font-family: \"Zen Old Mincho\", \"IPAMincho\", serif;\n    font-size: 560px; font-weight: 700; line-height: 1;\n    color: color-mix(in srgb, var(--accent) 14%, transparent);\n  }\n  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; position: relative; }\n\n  .kicker { font-size: 16px; font-weight: 500; letter-spacing: .22em; color: var(--accent); }\n\n  /* 言葉は明朝、出どころはゴシック。書体の違いが\n     「本人の言葉」と「こちらの注記」を分ける唯一の手段になる。 */\n  .quote {\n    align-self: center;\n    font-family: \"Zen Old Mincho\", \"IPAMincho\", serif;\n    font-size: 66px; font-weight: 400; line-height: 1.72; letter-spacing: .02em;\n    max-width: 1420px;\n  }\n  .quote b { font-weight: 700; color: var(--accent); }\n\n  .foot { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end;\n          border-top: 1px solid var(--rule); padding-top: 30px; }\n  .who { display: grid; gap: 10px; }\n  .name { font-size: 24px; font-weight: 500; }\n  .affiliation { font-size: 17px; font-weight: 400; color: var(--muted); line-height: 1.7; }\n  .meta { text-align: right; display: grid; gap: 8px; }\n  .when { font-size: 16px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }\n  .scale { font-size: 16px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }\n</style>\n\n<div class=\"artboard\" data-artboard>\n  <p class=\"mark\">&#8220;</p>\n  <div class=\"content\" data-content>\n    <p class=\"kicker\" data-type=\"kicker\">VOICE FROM THE FLOOR</p>\n\n    <blockquote class=\"quote\" data-type=\"quote\">移行の当日、いちばん驚いたのは<b>いつもどおり出荷できたこと</b>でした。<br>説明を受けたときは信じていませんでしたが、現場は前の日と同じ手順で動いていました。</blockquote>\n\n    <div class=\"foot\">\n      <div class=\"who\">\n        <p class=\"name\" data-type=\"name\">大場 志保</p>\n        <p class=\"affiliation\" data-type=\"affiliation\">株式会社サカエ物流 / 東日本センター 所長<br>2025 年に同じ方式で移行（拠点 11 / 端末 340 台）</p>\n      </div>\n      <div class=\"meta\">\n        <p class=\"when\" data-type=\"when\">2026 年 6 月 導入後インタビュー</p>\n        <p class=\"scale\" data-type=\"scale\">停止時間 0 分 / 出荷遅延 0 件</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/quote-testimonial-bleed/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/quote-testimonial-bleed/font.css",
        "https://design-vault.pages.dev/designs/quote-testimonial-bleed/font-0.woff2",
        "https://design-vault.pages.dev/designs/quote-testimonial-bleed/font-1.woff2",
        "https://design-vault.pages.dev/designs/quote-testimonial-bleed/font-2.woff2",
        "https://design-vault.pages.dev/designs/quote-testimonial-bleed/font-3.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/quote-testimonial-bleed",
    "en": "https://design-vault.pages.dev/en/designs/quote-testimonial-bleed"
  },
  "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- 明朝 66px / 行送り 1.72。濃地では行送りを広めに取らないと字が潰れる\n- 肩書と規模（拠点 11 / 端末 340 台）を添え、「誰の言葉か」を検証可能にする\n- 右下に検証できる数値（停止時間 0 分）を置き、感想を実績に接続する\n\n### Apply to\n\n- 導入事例の紹介ページ\n- 第三者の評価を引く 1 枚"
}