Design Vault 用途・構成・配色・本文で検索 /
索引 カテゴリ タグ English

一式

研修・講義の 6 枚 — 目標から付箋のふりかえりまで、社内研修 90 分

学習目標・用語の定義と例・確認問題・演習の指示・手順書・付箋の壁の 6 枚を、架空の社内研修「はじめての顧客インタビュー」として通す

6 枚 · スライド 16:9

持ち帰る JSON 何枚あっても 1 回で。順に束ねて写すので、貼った先でも並びが残る。

読む順

  1. 01 学習・演習 学習目標 — この時間でできるようになることを、動詞から 4 つ 学習目標 — この時間でできるようになることを、動詞から 4 つ
  2. 02 学習・演習 概念の定義と例 — 定義、当てはまる例、当てはまらない例を並べる 概念の定義と例 — 定義、当てはまる例、当てはまらない例を並べる
  3. 03 学習・演習 確認問題 4 択 — 問い 1 行と、同じ大きさの選択肢 4 つ 確認問題 4 択 — 問い 1 行と、同じ大きさの選択肢 4 つ
  4. 04 学習・演習 演習の指示 — 手順は左、制限時間と作る物は右に大きく 演習の指示 — 手順は左、制限時間と作る物は右に大きく
  5. 05 業務プロセス 手順書 — 番号、画面の縮図、手順の 1 行を横に 4 つ 手順書 — 番号、画面の縮図、手順の 1 行を横に 4 つ
  6. 06 まとめ・要約 付箋の壁 — 意見を色のまとまりで並べ、まとまりに名前を付ける 付箋の壁 — 意見を色のまとまりで並べ、まとまりに名前を付ける

この一式について

この一式について / About this deck

講義を聞く枚より、受講者が手を動かす枚を集めた 6 枚。題材は架空の社内研修「はじめての顧客 インタビュー」で、目標 → 用語 → 確認問題 → 演習 → 聞いた後の手順 → ふりかえりの順に並ぶ。 研修の中身・人物・数値はすべて架空。

温かい砂色の地に丸みのある書体。強調色は焼き色の 1 つで、付箋の壁だけがまとまりを見分ける 4 色を持つ。表紙と締めは、基本の 10 枚から引く。

Six slides where participants do the work rather than listen, run through a fictional in-house workshop on customer interviews. Warm sand ground, rounded type, one terracotta accent; only the sticky wall carries four group colours. Take the cover and close from the basic ten.

持ち帰る

コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。

全部入り

training-workshop-everything.md

このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown

依頼文

7.9 KB 
# 学習目標 — この時間でできるようになることを、動詞から 4 つ
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 88 右 140 下 56 左 140

## 文字（版面 1920px に対する px）
kicker  24px / 700 / 等幅数字
title  54px / 700 / 行送り 1.35 / 等幅数字
verb  34px / 700 / 等幅数字
objective  32px / 500 / 行送り 1.5 / 等幅数字
infoLabel  22px / 700 / 等幅数字
info  28px / 500 / 行送り 1.5 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8

## 外すと崩れる点
- 目標は、やって見せられる動詞で書く。「理解する」「知る」は確かめようがない
- 動詞を左の列に抜き出し、強調色にする。拾い読みで 4 つが分かる
- 目標は 3〜4 つ。研修の最後に、同じ 4 つで振り返る
- 対象・時間・持ち物は札に分け、目標と混ぜない

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/learning-objectives/pattern.html

---

# 概念の定義と例 — 定義、当てはまる例、当てはまらない例を並べる
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 88 右 140 下 56 左 140

## 文字（版面 1920px に対する px）
kicker  24px / 700 / 等幅数字
title  54px / 700 / 行送り 1.35 / 等幅数字
term  40px / 700 / 等幅数字
definition  32px / 500 / 行送り 1.55 / 等幅数字
colHead  30px / 700 / 等幅数字
example  30px / 500 / 等幅数字
why  22px / 400 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8

## 外すと崩れる点
- 当てはまらない例を必ず置く。境目は、外れる例でしか伝わらない
- 例ごとに「なぜ当てはまるか」を 1 行で添える
- 当てはまらない側は灰色に落とし、印も白抜きにする
- 定義は 2 行まで。足りない分は例に語らせる

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/concept-definition-examples/pattern.html

---

# 確認問題 4 択 — 問い 1 行と、同じ大きさの選択肢 4 つ
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 88 右 140 下 56 左 140

## 文字（版面 1920px に対する px）
kicker  24px / 700 / 等幅数字
title  54px / 700 / 行送り 1.35 / 等幅数字
question  40px / 700 / 行送り 1.45 / 等幅数字
letter  36px / 700 / 等幅数字
choice  32px / 500 / 行送り 1.5 / 等幅数字
hint  24px / 400 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8

## 外すと崩れる点
- 選択肢は同じ大きさ・同じ書式にする。正解だけ長いと、文の長さで当てられる
- 答えの枚は同じ版の色違いにする。位置が動かないので、どれが正解かだけが目に入る
- 考える時間と、答え合わせの仕方を下に書く
- 問いは 1 文。条件は選択肢に入れない

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/quiz-four-choices/pattern.html

---

# 演習の指示 — 手順は左、制限時間と作る物は右に大きく
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 88 右 140 下 56 左 140

## 文字（版面 1920px に対する px）
kicker  24px / 700 / 等幅数字
title  54px / 700 / 行送り 1.35 / 等幅数字
stepNo  28px / 700 / 等幅数字
step  32px / 700 / 行送り 1.4 / 等幅数字
stepNote  24px / 400 / 等幅数字
timerLabel  24px / 500 / 等幅数字
timer  132px / 700 / 字間 0.02em / 行送り 1.05 / 等幅数字
timerNote  22px / 400 / 等幅数字
makeLabel  22px / 700 / 等幅数字
make  30px / 700 / 行送り 1.45 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8

## 外すと崩れる点
- 制限時間は遠くから読める大きさで、濃い面に置く。演習中に見返されるのはここ
- 作る物を 1 文で書く。何を作れば終わりかが分からない演習は、終わらない
- 手順は 4 つまで。各手順に、つまずきやすい点を 1 行添える
- 時間の内訳（7 分 × 2 回 ＋ 1 分）を書く

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/exercise-instructions-timer/pattern.html

---

# 手順書 — 番号、画面の縮図、手順の 1 行を横に 4 つ
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 88 右 140 下 56 左 140
- 4 カラム（等分）、間隔 40

## 文字（版面 1920px に対する px）
kicker  24px / 700 / 等幅数字
title  54px / 700 / 行送り 1.35 / 等幅数字
stepNo  32px / 700 / 等幅数字
step  32px / 700 / 等幅数字
stepNote  22px / 400 / 行送り 1.6 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8

## 外すと崩れる点
- 縮図は画面写真にせず、手順で触る所だけ形を残す
- 手順は動詞で終わる 1 行。補足は灰色で 1 行
- 番号どうしを線でつなぎ、最後の手順の後は線を出さない
- 手順は 4 つまで。それ以上は 2 枚に分ける

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/how-to-numbered-screens/pattern.html

---

# 付箋の壁 — 意見を色のまとまりで並べ、まとまりに名前を付ける
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 88 右 140 下 56 左 140
- 4 カラム（等分）、間隔 32

## 文字（版面 1920px に対する px）
kicker  24px / 700 / 等幅数字
title  54px / 700 / 行送り 1.35 / 等幅数字
cluster  28px / 700 / 等幅数字
count  20px / 500 / 等幅数字
note  26px / 500 / 行送り 1.5 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #F5EFE4 / 面 #FFFBF4 / 文字 #2B2620 / 補助 #776E62 / 強調 #B4502B / 罫 #E3D9C8 / #F2C66B / #A9CFA4 / #9DC1E3 / #EDB0AA

## 外すと崩れる点
- まとまりの名前は「〜が〜」の悩みの形で書く。「記録」のような名詞だけだと、何が問題か分からない
- まとまりごとに枚数を添える。多いところから話す
- 付箋の文は 1 行に収まる長さに直す。読めない手書きを写さない
- 色はまとまりの区別にだけ使い、良し悪しの意味を持たせない

内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。
正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/sticky-wall-clusters/pattern.html

仕様

7.3 KB 
# 学習目標 — この時間でできるようになることを、動詞から 4 つ
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
  verb:
    size: 34
    weight: 700
    numeric: tabular
  objective:
    size: 32
    weight: 500
    leading: 1.5
    numeric: tabular
  infoLabel:
    size: 22
    weight: 700
    numeric: tabular
  info:
    size: 28
    weight: 500
    leading: 1.5
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#F5EFE4"
  surface: "#FFFBF4"
  ink: "#2B2620"
  muted: "#776E62"
  accent: "#B4502B"
  rule: "#E3D9C8"
rules:
  - 目標は、やって見せられる動詞で書く。「理解する」「知る」は確かめようがない
  - 動詞を左の列に抜き出し、強調色にする。拾い読みで 4 つが分かる
  - 目標は 3〜4 つ。研修の最後に、同じ 4 つで振り返る
  - 対象・時間・持ち物は札に分け、目標と混ぜない

---

# 概念の定義と例 — 定義、当てはまる例、当てはまらない例を並べる
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:
  - 当てはまらない例を必ず置く。境目は、外れる例でしか伝わらない
  - 例ごとに「なぜ当てはまるか」を 1 行で添える
  - 当てはまらない側は灰色に落とし、印も白抜きにする
  - 定義は 2 行まで。足りない分は例に語らせる

---

# 確認問題 4 択 — 問い 1 行と、同じ大きさの選択肢 4 つ
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:
  - 選択肢は同じ大きさ・同じ書式にする。正解だけ長いと、文の長さで当てられる
  - 答えの枚は同じ版の色違いにする。位置が動かないので、どれが正解かだけが目に入る
  - 考える時間と、答え合わせの仕方を下に書く
  - 問いは 1 文。条件は選択肢に入れない

---

# 演習の指示 — 手順は左、制限時間と作る物は右に大きく
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
  stepNo:
    size: 28
    weight: 700
    numeric: tabular
  step:
    size: 32
    weight: 700
    leading: 1.4
    numeric: tabular
  stepNote:
    size: 24
    weight: 400
    numeric: tabular
  timerLabel:
    size: 24
    weight: 500
    numeric: tabular
  timer:
    size: 132
    weight: 700
    tracking: 0.02em
    leading: 1.05
    numeric: tabular
  timerNote:
    size: 22
    weight: 400
    numeric: tabular
  makeLabel:
    size: 22
    weight: 700
    numeric: tabular
  make:
    size: 30
    weight: 700
    leading: 1.45
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#F5EFE4"
  surface: "#FFFBF4"
  ink: "#2B2620"
  muted: "#776E62"
  accent: "#B4502B"
  rule: "#E3D9C8"
rules:
  - 制限時間は遠くから読める大きさで、濃い面に置く。演習中に見返されるのはここ
  - 作る物を 1 文で書く。何を作れば終わりかが分からない演習は、終わらない
  - 手順は 4 つまで。各手順に、つまずきやすい点を 1 行添える
  - 時間の内訳（7 分 × 2 回 ＋ 1 分）を書く

---

# 手順書 — 番号、画面の縮図、手順の 1 行を横に 4 つ
format: slide-16x9
density: medium
layout:
  kind: timeline
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
  columns:
    count: 4
    gap: 40
type:
  kicker:
    size: 24
    weight: 700
    numeric: tabular
  title:
    size: 54
    weight: 700
    leading: 1.35
    numeric: tabular
  stepNo:
    size: 32
    weight: 700
    numeric: tabular
  step:
    size: 32
    weight: 700
    numeric: tabular
  stepNote:
    size: 22
    weight: 400
    leading: 1.6
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#F5EFE4"
  surface: "#FFFBF4"
  ink: "#2B2620"
  muted: "#776E62"
  accent: "#B4502B"
  rule: "#E3D9C8"
rules:
  - 縮図は画面写真にせず、手順で触る所だけ形を残す
  - 手順は動詞で終わる 1 行。補足は灰色で 1 行
  - 番号どうしを線でつなぎ、最後の手順の後は線を出さない
  - 手順は 4 つまで。それ以上は 2 枚に分ける

---

# 付箋の壁 — 意見を色のまとまりで並べ、まとまりに名前を付ける
format: slide-16x9
density: medium
layout:
  kind: grid
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
  columns:
    count: 4
    gap: 32
type:
  kicker:
    size: 24
    weight: 700
    numeric: tabular
  title:
    size: 54
    weight: 700
    leading: 1.35
    numeric: tabular
  cluster:
    size: 28
    weight: 700
    numeric: tabular
  count:
    size: 20
    weight: 500
    numeric: tabular
  note:
    size: 26
    weight: 500
    leading: 1.5
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#F5EFE4"
  surface: "#FFFBF4"
  ink: "#2B2620"
  muted: "#776E62"
  accent: "#B4502B"
  rule: "#E3D9C8"
  series:
    - "#F2C66B"
    - "#A9CFA4"
    - "#9DC1E3"
    - "#EDB0AA"
rules:
  - まとまりの名前は「〜が〜」の悩みの形で書く。「記録」のような名詞だけだと、何が問題か分からない
  - まとまりごとに枚数を添える。多いところから話す
  - 付箋の文は 1 行に収まる長さに直す。読めない手書きを写さない
  - 色はまとまりの区別にだけ使い、良し悪しの意味を持たせない

ファイル

01 learning-objectives/pattern.html

3.9 KB

/designs/learning-objectives/pattern.html

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>学習目標 — この時間でできるようになることを、動詞から 4 つ</title>
<meta name="dv-font" content="Zen Maru Gothic:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研修の中身・人物・数値はすべて説明用の架空のもの。 */
  :root {
    --ground: #F5EFE4;
    --surface: #FFFBF4;
    --ink: #2B2620;
    --muted: #776E62;
    --accent: #B4502B;
    --rule: #E3D9C8;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Maru Gothic", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 88px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 24px; font-weight: 700; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  .split { display: grid; grid-template-columns: 1fr 440px; column-gap: 72px; align-items: center; }
  ol { list-style: none; padding: 0; }
  /* 目標は動詞を左の列に抜き出す。「理解する」ではなく、やって見せられる動詞にする */
  li { display: grid; grid-template-columns: 56px 150px 1fr; align-items: center; padding: 28px 0; border-bottom: 2px dashed var(--rule); }
  .box { width: 34px; height: 34px; border: 3px solid var(--accent); border-radius: 8px; }
  .verb { font-size: 34px; font-weight: 700; color: var(--accent); }
  .obj { font-size: 32px; font-weight: 500; line-height: 1.5; }
  .card { background: var(--surface); border-radius: 24px; padding: 40px 44px; }
  .row + .row { margin-top: 26px; }
  .k { font-size: 22px; font-weight: 700; color: var(--muted); }
  .v { font-size: 28px; font-weight: 500; margin-top: 4px; line-height: 1.5; }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">この 90 分のゴール</p>
      <h1 class="title" data-type="title">終わったとき、この 4 つができるようになっている</h1>
    </div>
    <div class="split">
      <ol>
        <li><span class="box" aria-hidden="true"></span><p class="verb" data-type="verb">聞く</p><p class="obj" data-type="objective">相手の過去の行動を、具体的な場面で聞き出せる</p></li>
        <li><span class="box" aria-hidden="true"></span><p class="verb">避ける</p><p class="obj">「欲しいですか」のような答えの決まった質問を避けられる</p></li>
        <li><span class="box" aria-hidden="true"></span><p class="verb">記録する</p><p class="obj">発言と自分の解釈を分けて書き留められる</p></li>
        <li><span class="box" aria-hidden="true"></span><p class="verb">まとめる</p><p class="obj">似た発言をまとめて、悩みに名前を付けられる</p></li>
      </ol>
      <div class="card">
        <div class="row"><p class="k" data-type="infoLabel">対象</p><p class="v" data-type="info">入社 1〜3 年目の企画・営業</p></div>
        <div class="row"><p class="k">時間</p><p class="v">90 分（演習 2 回）</p></div>
        <div class="row"><p class="k">持ち物</p><p class="v">付箋とペン、最近の顧客との会話 1 つ</p></div>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">はじめての顧客インタビュー　社内研修</p>
      <p>02</p>
    </div>
  </div>
</div>

02 concept-definition-examples/pattern.html

4.3 KB

/designs/concept-definition-examples/pattern.html

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>概念の定義と例 — 定義、当てはまる例、当てはまらない例を 3 列で</title>
<meta name="dv-font" content="Zen Maru Gothic:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研修の中身・人物・数値はすべて説明用の架空のもの。 */
  :root {
    --ground: #F5EFE4;
    --surface: #FFFBF4;
    --ink: #2B2620;
    --muted: #776E62;
    --accent: #B4502B;
    --rule: #E3D9C8;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Maru Gothic", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 88px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 24px; font-weight: 700; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  .def { background: var(--surface); border-radius: 24px; padding: 32px 44px; display: grid; grid-template-columns: auto 1fr; column-gap: 40px; align-items: baseline; }
  .term { font-size: 40px; font-weight: 700; color: var(--accent); }
  .defText { font-size: 32px; font-weight: 500; line-height: 1.55; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 36px; }
  .colHead { display: flex; align-items: center; gap: 14px; font-size: 30px; font-weight: 700; padding-bottom: 14px; border-bottom: 4px solid var(--ink); }
  .colHead.no { color: var(--muted); border-bottom-color: var(--rule); }
  .mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 26px; }
  .colHead.no .mark { background: transparent; border: 3px solid var(--muted); color: var(--muted); }
  ul { list-style: none; padding: 0; }
  li { padding: 22px 0; border-bottom: 2px dashed var(--rule); }
  .q { font-size: 30px; font-weight: 500; }
  .colHead.no + ul .q { color: var(--muted); }
  .why { font-size: 22px; color: var(--muted); margin-top: 6px; }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">ことばの確認</p>
      <h1 class="title" data-type="title">「開かれた質問」とは、場面を話してもらう質問</h1>
    </div>
    <div>
      <div class="def"><p class="term" data-type="term">開かれた質問</p><p class="defText" data-type="definition">相手が自分の言葉で、場面や理由を話すしかない質問。はい・いいえや、選択肢では答えられない</p></div>
      <div class="cols">
        <div>
          <p class="colHead" data-type="colHead"><span class="mark">○</span>当てはまる例</p>
          <ul>
            <li><p class="q" data-type="example">「最後に請求書を作ったときの話を聞かせてください」</p><p class="why" data-type="why">過去の 1 回の場面を聞いている</p></li>
            <li><p class="q">「そのとき、いちばん時間がかかったのはどこですか」</p><p class="why">相手の言葉で答えるしかない</p></li>
          </ul>
        </div>
        <div>
          <p class="colHead no"><span class="mark">×</span>当てはまらない例</p>
          <ul>
            <li><p class="q">「請求書づくりは面倒ですか」</p><p class="why">はい・いいえで終わる</p></li>
            <li><p class="q">「自動で作れる道具があったら使いますか」</p><p class="why">未来の仮定には、誰でも「使う」と答える</p></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">はじめての顧客インタビュー　社内研修</p>
      <p>03</p>
    </div>
  </div>
</div>

03 quiz-four-choices/pattern.html

3.5 KB

/designs/quiz-four-choices/pattern.html

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>確認問題 4 択 — 問い 1 行と、同じ大きさの選択肢 4 つ</title>
<meta name="dv-font" content="Zen Maru Gothic:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研修の中身・人物・数値はすべて説明用の架空のもの。 */
  :root {
    --ground: #F5EFE4;
    --surface: #FFFBF4;
    --ink: #2B2620;
    --muted: #776E62;
    --accent: #B4502B;
    --rule: #E3D9C8;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Maru Gothic", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 88px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 24px; font-weight: 700; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  .quiz { display: grid; grid-template-rows: auto 1fr auto; row-gap: 32px; }
  .q { font-size: 40px; font-weight: 700; line-height: 1.45; }
  .q span { color: var(--accent); margin-right: 16px; }
  /* 選択肢は同じ大きさの 2×2。答え合わせでは、正解の 1 つだけを強調色に変えて見せる */
  .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 28px; }
  .choice { background: var(--surface); border: 3px solid var(--rule); border-radius: 24px; padding: 0 40px; display: flex; align-items: center; gap: 32px; }
  .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; }
  .ct { font-size: 32px; font-weight: 500; line-height: 1.5; }
  .hint { font-size: 24px; color: var(--muted); }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">確認問題 1</p>
      <h1 class="title" data-type="title">どれが「開かれた質問」か</h1>
    </div>
    <div class="quiz">
      <p class="q" data-type="question"><span>Q.</span>次のうち、開かれた質問はどれか</p>
      <div class="grid">
        <div class="choice"><span class="letter" data-type="letter">A</span><p class="ct" data-type="choice">「この機能は便利だと思いますか」</p></div>
        <div class="choice"><span class="letter">B</span><p class="ct">「月末の作業は大変ですか」</p></div>
        <div class="choice"><span class="letter">C</span><p class="ct">「先月の締めの日、朝から順に何をしましたか」</p></div>
        <div class="choice"><span class="letter">D</span><p class="ct">「使うなら月いくらまで払えますか」</p></div>
      </div>
      <p class="hint" data-type="hint">考える時間は 1 分。隣の人と答えを見せ合ってから、全員で答え合わせ</p>
    </div>
    <div class="folio">
      <p data-type="folio">はじめての顧客インタビュー　社内研修</p>
      <p>04</p>
    </div>
  </div>
</div>

04 exercise-instructions-timer/pattern.html

4.3 KB

/designs/exercise-instructions-timer/pattern.html

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>演習の指示 — 手順は左、制限時間と作る物は右に大きく</title>
<meta name="dv-font" content="Zen Maru Gothic:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研修の中身・人物・数値はすべて説明用の架空のもの。 */
  :root {
    --ground: #F5EFE4;
    --surface: #FFFBF4;
    --ink: #2B2620;
    --muted: #776E62;
    --accent: #B4502B;
    --rule: #E3D9C8;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Maru Gothic", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 88px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 24px; font-weight: 700; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  .split { display: grid; grid-template-columns: 1fr 520px; column-gap: 72px; align-items: center; }
  ol { list-style: none; padding: 0; }
  li { display: grid; grid-template-columns: 76px 1fr; padding: 22px 0; border-bottom: 2px dashed var(--rule); }
  .n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 28px; font-weight: 700; }
  .sh { font-size: 32px; font-weight: 700; line-height: 1.4; }
  .sb { font-size: 24px; color: var(--muted); margin-top: 6px; }
  /* 時間と作る物は、演習中ずっと映しておく前提で右に大きく置く */
  .side { display: grid; row-gap: 28px; }
  .timer { background: var(--ink); color: var(--surface); border-radius: 32px; padding: 36px 40px; text-align: center; }
  .tl { font-size: 24px; font-weight: 500; }
  .tv { font-size: 132px; font-weight: 700; line-height: 1.05; letter-spacing: .02em; }
  .ts { font-size: 22px; color: var(--rule); }
  .make { background: var(--surface); border: 3px solid var(--accent); border-radius: 24px; padding: 28px 36px; }
  .ml { font-size: 22px; font-weight: 700; color: var(--accent); }
  .mv { font-size: 30px; font-weight: 700; margin-top: 6px; line-height: 1.45; }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">演習 1　ペアで聞く</p>
      <h1 class="title" data-type="title">相手の最近の買い物を、場面から聞き出す</h1>
    </div>
    <div class="split">
      <ol>
        <li><span class="n" data-type="stepNo">1</span><div><p class="sh" data-type="step">ペアになり、聞く側と話す側を決める</p><p class="sb" data-type="stepNote">話す側は、最近の買い物を 1 つ思い浮かべる</p></div></li>
        <li><span class="n">2</span><div><p class="sh">聞く側は、その買い物の場面を聞き出す</p><p class="sb">「なぜ」より「そのとき何をしたか」を先に聞く</p></div></li>
        <li><span class="n">3</span><div><p class="sh">聞きながら、発言をそのまま付箋に書く</p><p class="sb">自分の解釈は書かない。1 枚に 1 つの発言</p></div></li>
        <li><span class="n">4</span><div><p class="sh">7 分で交代し、同じことを繰り返す</p><p class="sb">最後の 1 分で、付箋の数を数える</p></div></li>
      </ol>
      <div class="side">
        <div class="timer"><p class="tl" data-type="timerLabel">制限時間</p><p class="tv" data-type="timer">15:00</p><p class="ts" data-type="timerNote">7 分 × 2 回 ＋ 数える 1 分</p></div>
        <div class="make"><p class="ml" data-type="makeLabel">作る物</p><p class="mv" data-type="make">1 人あたり付箋 10 枚以上の発言の記録</p></div>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">はじめての顧客インタビュー　社内研修</p>
      <p>05</p>
    </div>
  </div>
</div>

05 how-to-numbered-screens/pattern.html

6.1 KB

/designs/how-to-numbered-screens/pattern.html

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>手順書 — 番号、画面の縮図、手順の 1 行を横に 4 つ</title>
<meta name="dv-font" content="Zen Maru Gothic:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研修の中身・人物・数値はすべて説明用の架空のもの。 */
  :root {
    --ground: #F5EFE4;
    --surface: #FFFBF4;
    --ink: #2B2620;
    --muted: #776E62;
    --accent: #B4502B;
    --rule: #E3D9C8;
    --scr-1: color-mix(in srgb, var(--ink) 14%, var(--surface));
    --scr-2: color-mix(in srgb, var(--ink) 30%, var(--surface));
    --st-1: color-mix(in srgb, var(--accent) 30%, var(--surface));
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Maru Gothic", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 88px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 24px; font-weight: 700; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  .steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; align-content: center; }
  .top { display: flex; align-items: center; }
  .n { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 32px; font-weight: 700; }
  /* 番号どうしを線でつなぎ、最後の手順の後は線を出さない */
  .line { flex: 1; height: 4px; background: var(--rule); margin-left: 16px; }
  .step:last-child .line { visibility: hidden; }
  .screen { margin-top: 28px; background: var(--surface); border: 3px solid var(--ink); border-radius: 18px; aspect-ratio: 5 / 3; padding: 10px; }
  .screen svg { display: block; width: 100%; height: 100%; }
  .sh { font-size: 32px; font-weight: 700; margin-top: 24px; }
  .sb { font-size: 22px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">手順　聞いた後にやること</p>
      <h1 class="title" data-type="title">聞いた内容は、4 つの手順で悩みのまとまりにする</h1>
    </div>
    <div class="steps">
      <div class="step" data-col="1">
        <div class="top"><span class="n" data-type="stepNo">1</span><span class="line"></span></div>
        <div class="screen"><svg viewBox="0 0 240 144" aria-hidden="true"><rect x="20" y="20" width="200" height="16" rx="4" fill="var(--scr-2)"/><rect x="20" y="52" width="160" height="10" rx="3" fill="var(--scr-1)"/><rect x="20" y="72" width="180" height="10" rx="3" fill="var(--scr-1)"/><rect x="20" y="92" width="140" height="10" rx="3" fill="var(--scr-1)"/><rect x="20" y="112" width="170" height="10" rx="3" fill="var(--scr-1)"/></svg></div>
        <p class="sh" data-type="step">録音を文字にする</p>
        <p class="sb" data-type="stepNote">その日のうちに。1 時間で 30 分ぶん</p>
      </div>
      <div class="step" data-col="2">
        <div class="top"><span class="n">2</span><span class="line"></span></div>
        <div class="screen"><svg viewBox="0 0 240 144" aria-hidden="true"><rect x="20" y="22" width="60" height="44" rx="4" fill="var(--st-1)"/><rect x="90" y="22" width="60" height="44" rx="4" fill="var(--st-1)"/><rect x="160" y="22" width="60" height="44" rx="4" fill="var(--st-1)"/><rect x="20" y="76" width="60" height="44" rx="4" fill="var(--st-1)"/><rect x="90" y="76" width="60" height="44" rx="4" fill="var(--st-1)"/></svg></div>
        <p class="sh">発言を付箋に書き出す</p>
        <p class="sb">1 枚に 1 つ、相手の言葉のまま</p>
      </div>
      <div class="step" data-col="3">
        <div class="top"><span class="n">3</span><span class="line"></span></div>
        <div class="screen"><svg viewBox="0 0 240 144" aria-hidden="true"><rect x="20" y="20" width="94" height="104" rx="8" fill="none" stroke="var(--scr-2)" stroke-width="3" stroke-dasharray="6 5"/><rect x="30" y="32" width="34" height="26" rx="3" fill="var(--st-1)"/><rect x="72" y="32" width="34" height="26" rx="3" fill="var(--st-1)"/><rect x="30" y="66" width="34" height="26" rx="3" fill="var(--st-1)"/><rect x="126" y="20" width="94" height="104" rx="8" fill="none" stroke="var(--scr-2)" stroke-width="3" stroke-dasharray="6 5"/><rect x="136" y="32" width="34" height="26" rx="3" fill="var(--st-1)"/><rect x="178" y="32" width="34" height="26" rx="3" fill="var(--st-1)"/></svg></div>
        <p class="sh">似た発言をまとめる</p>
        <p class="sb">枠を決めず、近いものを寄せる</p>
      </div>
      <div class="step" data-col="4">
        <div class="top"><span class="n">4</span><span class="line"></span></div>
        <div class="screen"><svg viewBox="0 0 240 144" aria-hidden="true"><rect x="20" y="20" width="94" height="104" rx="8" fill="none" stroke="var(--scr-2)" stroke-width="3"/><rect x="20" y="20" width="94" height="22" rx="8" fill="var(--accent)"/><rect x="126" y="20" width="94" height="104" rx="8" fill="none" stroke="var(--scr-2)" stroke-width="3"/><rect x="126" y="20" width="94" height="22" rx="8" fill="var(--accent)"/><rect x="34" y="56" width="66" height="10" rx="3" fill="var(--scr-1)"/><rect x="140" y="56" width="66" height="10" rx="3" fill="var(--scr-1)"/></svg></div>
        <p class="sh">まとまりに名前を付ける</p>
        <p class="sb">「〜で困っている」の形で書く</p>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">はじめての顧客インタビュー　社内研修</p>
      <p>06</p>
    </div>
  </div>
</div>

06 sticky-wall-clusters/pattern.html

4.9 KB

/designs/sticky-wall-clusters/pattern.html

中身を見る 
<!doctype html>
<meta charset="utf-8">
<title>付箋の壁 — 意見を色のまとまりで並べ、まとまりに名前を付ける</title>
<meta name="dv-font" content="Zen Maru Gothic:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研修の中身・人物・数値はすべて説明用の架空のもの。 */
  :root {
    --ground: #F5EFE4;
    --surface: #FFFBF4;
    --ink: #2B2620;
    --muted: #776E62;
    --accent: #B4502B;
    --rule: #E3D9C8;
    --series-1: #F2C66B;
    --series-2: #A9CFA4;
    --series-3: #9DC1E3;
    --series-4: #EDB0AA;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Maru Gothic", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 88px 140px 56px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 24px; font-weight: 700; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .folio { display: flex; justify-content: space-between; font-size: 16px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 16px; }

  .wall { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; align-content: start; background: var(--surface); border-radius: 24px; padding: 36px 36px 44px; }
  .cname { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; padding-bottom: 14px; border-bottom: 3px solid var(--ink); }
  .cname i { flex: none; width: 22px; height: 22px; border-radius: 6px; }
  .cname span { margin-left: auto; font-size: 20px; font-weight: 500; color: var(--muted); }
  .notes { display: grid; row-gap: 20px; margin-top: 24px; }
  /* 付箋は少しだけ傾ける。揃えすぎると、議論の途中の壁に見えなくなる */
  .note { font-size: 26px; font-weight: 500; line-height: 1.5; padding: 20px 24px; min-height: 132px; display: flex; align-items: center; box-shadow: 0 2px 0 var(--rule); }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div>
      <p class="kicker" data-type="kicker">ふりかえり　受講者の付箋</p>
      <h1 class="title" data-type="title">つまずきは、4 つのまとまりに分かれた</h1>
    </div>
    <div class="wall">
      <div class="cluster" data-col="1">
        <p class="cname" data-type="cluster"><i style="background: var(--series-1)"></i>記録が追いつかない<span data-type="count">3 枚</span></p>
        <div class="notes"><p class="note" style="background: var(--series-1); transform: rotate(-1.2deg)" data-type="note">書くと次の質問が出ない</p><p class="note" style="background: var(--series-1); transform: rotate(0.9deg)">聞き直す時間がない</p><p class="note" style="background: var(--series-1); transform: rotate(-0.6deg)">付箋が解釈になっている</p></div>
      </div>
      <div class="cluster" data-col="2">
        <p class="cname"><i style="background: var(--series-2)"></i>話が広がりすぎる<span>3 枚</span></p>
        <div class="notes"><p class="note" style="background: var(--series-2); transform: rotate(-1.2deg)">雑談のまま 30 分たった</p><p class="note" style="background: var(--series-2); transform: rotate(0.9deg)">不満を聞くだけで終わる</p><p class="note" style="background: var(--series-2); transform: rotate(-0.6deg)">聞く目的を途中で忘れる</p></div>
      </div>
      <div class="cluster" data-col="3">
        <p class="cname"><i style="background: var(--series-3)"></i>相手が答えに困る<span>2 枚</span></p>
        <div class="notes"><p class="note" style="background: var(--series-3); transform: rotate(-1.2deg)">「なぜ」で黙ってしまう</p><p class="note" style="background: var(--series-3); transform: rotate(0.9deg)">昔のことは覚えていない</p></div>
      </div>
      <div class="cluster" data-col="4">
        <p class="cname"><i style="background: var(--series-4)"></i>まとめ方が分からない<span>3 枚</span></p>
        <div class="notes"><p class="note" style="background: var(--series-4); transform: rotate(-1.2deg)">付箋が多すぎて止まる</p><p class="note" style="background: var(--series-4); transform: rotate(0.9deg)">似ているかが人で違う</p><p class="note" style="background: var(--series-4); transform: rotate(-0.6deg)">名前が全部同じになる</p></div>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">はじめての顧客インタビュー　社内研修</p>
      <p>07</p>
    </div>
  </div>
</div>