{ "id": "concept-definition-examples", "schemaVersion": 2, "title": { "ja": "概念の定義と例 — 定義、当てはまる例、当てはまらない例を並べる", "en": "Concept, Examples, Non-Examples — A Definition Followed by What Fits and What Doesn't" }, "summary": { "ja": "上の札に用語と定義を置き、下に当てはまる例と当てはまらない例を 2 列で並べる。例ごとに、なぜそうかを 1 行添える", "en": "A card with the term and its definition on top, then examples and non-examples in two columns, each with a line on why" }, "capturedAt": "2026-10-19", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "learning" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "2-column", "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" }, "term": { "size": 40, "weight": 700, "numeric": "tabular" }, "definition": { "size": 32, "weight": 500, "leading": 1.55, "numeric": "tabular" }, "colHead": { "size": 30, "weight": 700, "numeric": "tabular" }, "example": { "size": 30, "weight": 500, "numeric": "tabular" }, "why": { "size": 22, "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": "Always include non-examples — the boundary only shows through what falls outside" }, { "ja": "例ごとに「なぜ当てはまるか」を 1 行で添える", "en": "Give each example one line on why it fits or not" }, { "ja": "当てはまらない側は灰色に落とし、印も白抜きにする", "en": "Grey out the non-example side and hollow its mark" }, { "ja": "定義は 2 行まで。足りない分は例に語らせる", "en": "Two lines of definition at most; let the examples carry the rest" } ], "cover": "https://design-vault.pages.dev/_astro/cover.CMoofO3O.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "do-dont-paired", "glossary-term-definition", "comparison-before-after" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "2-column", "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" }, "term": { "size": 40, "weight": 700, "numeric": "tabular" }, "definition": { "size": 32, "weight": 500, "leading": 1.55, "numeric": "tabular" }, "colHead": { "size": 30, "weight": 700, "numeric": "tabular" }, "example": { "size": 30, "weight": 500, "numeric": "tabular" }, "why": { "size": 22, "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": [ "Always include non-examples — the boundary only shows through what falls outside", "Give each example one line on why it fits or not", "Grey out the non-example side and hollow its mark", "Two lines of definition at most; let the examples carry the rest" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 88 右 140 下 56 左 140\n\n## 文字（版面 1920px に対する px）\nkicker 24px / 700 / 等幅数字\ntitle 54px / 700 / 行送り 1.35 / 等幅数字\nterm 40px / 700 / 等幅数字\ndefinition 32px / 500 / 行送り 1.55 / 等幅数字\ncolHead 30px / 700 / 等幅数字\nexample 30px / 500 / 等幅数字\nwhy 22px / 400 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8\n\n## 外すと崩れる点\n- 当てはまらない例を必ず置く。境目は、外れる例でしか伝わらない\n- 例ごとに「なぜ当てはまるか」を 1 行で添える\n- 当てはまらない側は灰色に落とし、印も白抜きにする\n- 定義は 2 行まで。足りない分は例に語らせる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/concept-definition-examples/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\nterm 40px / 700 / tabular numerals\ndefinition 32px / 500 / leading 1.55 / tabular numerals\ncolHead 30px / 700 / tabular numerals\nexample 30px / 500 / tabular numerals\nwhy 22px / 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- Always include non-examples — the boundary only shows through what falls outside\n- Give each example one line on why it fits or not\n- Grey out the non-example side and hollow its mark\n- Two lines of definition at most; let the examples carry the rest\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/concept-definition-examples/pattern.html." }, "code": { "html": "\n\n概念の定義と例 — 定義、当てはまる例、当てはまらない例を 3 列で\n\n\n\n\n
\n
\n
\n

ことばの確認

\n

「開かれた質問」とは、場面を話してもらう質問

\n
\n
\n

開かれた質問

相手が自分の言葉で、場面や理由を話すしかない質問。はい・いいえや、選択肢では答えられない

\n
\n
\n

○当てはまる例

\n
    \n

  • 「最後に請求書を作ったときの話を聞かせてください」

    過去の 1 回の場面を聞いている

    • \n

  • 「そのとき、いちばん時間がかかったのはどこですか」

    相手の言葉で答えるしかない

    • \n
\n
\n
\n

×当てはまらない例

\n
    \n

  • 「請求書づくりは面倒ですか」

    はい・いいえで終わる

    • \n

  • 「自動で作れる道具があったら使いますか」

    未来の仮定には、誰でも「使う」と答える

    • \n
\n
\n
\n
\n
\n

はじめての顧客インタビュー　社内研修

\n

03

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/concept-definition-examples/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/concept-definition-examples/font.css", "https://design-vault.pages.dev/designs/concept-definition-examples/font-0.woff2", "https://design-vault.pages.dev/designs/concept-definition-examples/font-1.woff2", "https://design-vault.pages.dev/designs/concept-definition-examples/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/concept-definition-examples", "en": "https://design-vault.pages.dev/en/designs/concept-definition-examples" }, "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- 定義は角丸の白い札、用語は強調色\n- ○ は塗り、× は輪郭だけ\n- 例は鉤括弧つきの実際の言い回し\n\n### Apply to\n\n- 研修で新しい用語を導入する 1 枚\n- 社内の判断基準の説明（当てはまる・当てはまらないを可否に替える）" }