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

一式

研究・技術発表の 9 枚 — 表紙から文献まで、研究会の発表 1 回ぶんとポスター

表紙・問いと方法・対象者の流れ・結果の表・図と説明・限界と今後・参考文献・コードの 8 枚に、同じ研究の A0 ポスターを添える

9 枚

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

読む順

  1. 01 表紙・扉 研究発表の表紙 — 題・著者・所属を上付きの番号で結ぶ 研究発表の表紙 — 題・著者・所属を上付きの番号で結ぶ
  2. 02 研究の方法 問い・仮説・方法 — 研究の骨組みを 3 段で上から読ませる 問い・仮説・方法 — 研究の骨組みを 3 段で上から読ませる
  3. 03 研究の方法 対象者の流れ — 募集から解析まで、各段の人数と除いた理由 対象者の流れ — 募集から解析まで、各段の人数と除いた理由
  4. 04 比較・選定 結果の表 — 平均 ± 標準偏差と p 値、有意な行だけ太字 結果の表 — 平均 ± 標準偏差と p 値、有意な行だけ太字
  5. 05 記事・読み物 図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える 図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える
  6. 06 まとめ・要約 限界と今後 — 左に分からないこと、右にそれを確かめる次の研究 限界と今後 — 左に分からないこと、右にそれを確かめる次の研究
  7. 07 付録・参考資料 参考文献 — 本文に出た順の番号と、著者・年・題・掲載先 参考文献 — 本文に出た順の番号と、著者・年・題・掲載先
  8. 08 記事・読み物 コードの 1 枚 — 行番号、強調する行、右の注記を番号で結ぶ コードの 1 枚 — 行番号、強調する行、右の注記を番号で結ぶ
  9. 09 記事・読み物 学会ポスター(A0 縦)— 題の帯、結論の 1 行、3 段組の本文 学会ポスター(A0 縦)— 題の帯、結論の 1 行、3 段組の本文

この一式について

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

研究会の口頭発表で出てくる枚を、架空の研究「通知を 1 時間ごとに束ねて届けると、作業の中断は減るか」の 発表 1 回ぶんとして通し、最後に同じ研究の A0 ポスターを添えたもの。研究・著者・所属・数値・文献は すべて架空だが、頁どうしの数字(対象者の人数、表の値、図、ポスター)は一致させてある。

紙のような白地に、見出しだけ明朝。図番号・表番号・出典・文献の書き方を規則に入れてある。 ポスターは A4 縦と同じ比で組んであり、印刷で A0 に拡げる。

The slides of a research talk, run through one fictional study on batching notifications, closing with an A0 poster of the same study. Every study detail is invented, but the numbers agree across pages. Paper-white ground with serif headings only; figure, table and reference conventions are written into the rules. The poster is composed at A4 portrait proportions and scales to A0.

持ち帰る

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

全部入り

research-talk-everything.md

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

依頼文

11.9 KB
# 研究発表の表紙 — 題・著者・所属を上付きの番号で結ぶ
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 96 右 140 下 72 左 140

## 文字(版面 1920px に対する px)
venue  24px / 400 / 字間 0.06em / 等幅数字
title  68px / 700 / 行送り 1.45 / 等幅数字
subtitle  32px / 500 / 等幅数字
authors  34px / 500 / 等幅数字
affiliation  24px / 400 / 行送り 1.7 / 等幅数字
contact  22px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 題は問いの形か結論の形で書く。「〜に関する研究」では何が分かったか伝わらない
- 副題に研究の種類と対象の数を書く(無作為化比較試験、148 名)
- 著者と所属は上付きの番号で結ぶ。所属を著者ごとに繰り返さない
- 明朝は題にだけ使い、著者以下はゴシック

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

---

# 問い・仮説・方法 — 研究の骨組みを 3 段で上から読ませる
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
label  40px / 700 / 等幅数字
text  32px / 500 / 行送り 1.6 / 等幅数字
itemLabel  24px / 700 / 等幅数字
item  26px / 400 / 行送り 1.5 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 仮説には数字を入れる(3 割減る、30 分以内)。数字の無い仮説は、結果と照らせない
- 方法は文章にせず、設計・対象・期間・主な指標の 4 項目で書く
- 3 段の見出しは同じ幅の列に揃え、中身の左端を 1 本にする
- 問いと仮説は 2 行まで

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

---

# 対象者の流れ — 募集から解析まで、各段の人数と除いた理由
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
stage  20px / 700 / 字間 0.08em / 等幅数字
n  32px / 700 / 等幅数字
why  20px / 400 / 行送り 1.6 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 各段に人数を書き、前の段との差が除いた人数と一致するようにする
- 除いた理由は人数つきで書く。理由の無い除外は、選り好みを疑われる
- 本流は面つき、除外は枠線だけ。本流を目で追えるようにする
- 線は直角に折り、交差させない

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

---

# 結果の表 — 平均 ± 標準偏差と p 値、有意な行だけ太字
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
tableCaption  26px / 400 / 等幅数字
colHead  22px / 500 / 等幅数字
item  26px / 700 / 等幅数字
value  26px / 700 / 等幅数字
diff  26px / 700 / 等幅数字
p  26px / 700 / 等幅数字
note  20px / 400 / 行送り 1.7 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 罫は 3 本(上・見出しの下・下)。縦の罫は引かない
- 有意な行は太字にし、基準(p < .05)を表の下に書く
- 差には向き(どちらからどちらを引いたか)と信頼区間を添える
- 表番号と、各群の人数を表の上の題に入れる

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

---

# 図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
captionNo  30px / 700 / 等幅数字
caption  24px / 400 / 行送り 1.75 / 等幅数字
captionNote  20px / 400 / 行送り 1.7 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 説明文は図番号から始め、何を測った図か → 何が読めるかの順に書く
- 系列名は凡例にせず、線の端に直接書く
- 注記は 2 か所まで。図の中で言うのは、説明文が指す点だけ
- 測り方と人数は説明文の下に小さく

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

---

# 限界と今後 — 左に分からないこと、右にそれを確かめる次の研究
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
colHead  36px / 700 / 等幅数字
num  30px / 700 / 等幅数字
itemHead  30px / 700 / 等幅数字
itemBody  24px / 400 / 行送り 1.6 / 等幅数字
bottom  26px / 500 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 左右の同じ番号を対にする。限界 1 を確かめるのが今後 1
- 限界は見出し 1 行と説明 1 行。言い訳を長く書かない
- 今後の側だけ見出しを強調色にする
- 下端に、今の結果で言える実務への示唆を 1 行

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

---

# 参考文献 — 本文に出た順の番号と、著者・年・題・掲載先
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
refNo  26px / 700 / 等幅数字
ref  26px / 400 / 行送り 1.6 / 等幅数字
note  20px / 400 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 番号は本文に出た順。著者名の順にすると、本文の [3] を探させる
- 書き方を 1 つに揃える(著者(年)題.掲載先,巻(号),頁.)
- 番号の列を固定幅にし、2 行目以降を本文の頭に揃える
- 掲載先だけ太字にする

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

---

# コードの 1 枚 — 行番号、強調する行、右の注記を番号で結ぶ
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  22px / 500 / 字間 0.12em / 等幅数字
title  50px / 700 / 行送り 1.4 / 等幅数字
lineNo  20px / 400 / 行送り 1.5 / 等幅数字
code  24px / 400 / 行送り 1.5 / 等幅数字
markNo  24px / 700 / 等幅数字
noteLine  20px / 400 / 等幅数字
noteHead  28px / 700 / 等幅数字
noteBody  22px / 400 / 行送り 1.6 / 等幅数字
folio  16px / 400 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 強調する行は 3 行まで。全部を説明すると、どこが要か分からない
- 注記は「何をするか」と「なぜそう書くか」の 2 段。コードの読み上げにしない
- コードは 20 行まで、24px 以上。それ以上は省略して「…」で示す
- 行番号と注記の両方に行番号を書き、目で往復できるようにする

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

---

# 学会ポスター(A0 縦)— 題の帯、結論の 1 行、3 段組の本文
以下の仕様でA4 の資料を 1 枚作ってください。

- 版面 1191 × 1684
- 余白 上 72 右 66 下 60 左 66
- 3 カラム(等分)、間隔 42

## 文字(版面 1191px に対する px)
venue  16px / 400 / 字間 0.06em / 等幅数字
title  57px / 700 / 行送り 1.35 / 等幅数字
authors  24px / 500 / 等幅数字
affiliation  18px / 400 / 等幅数字
finding  33px / 700 / 行送り 1.45 / 等幅数字
secHead  32px / 700 / 等幅数字
body  20px / 400 / 行送り 1.75 / 等幅数字
item  20px / 400 / 行送り 1.55 / 等幅数字
flow  20px / 400 / 等幅数字
miniHead  20px / 700 / 等幅数字
miniLabel  16px / 400 / 等幅数字
miniValue  20px / 700 / 等幅数字
small  15px / 400 / 行送り 1.6 / 等幅数字
refs  14px / 400 / 行送り 1.7 / 等幅数字
qrText  15px / 400 / 行送り 1.6 / 等幅数字

## 配色
地 #FBFAF6 / 面 #F1EFE8 / 文字 #1E1E1C / 補助 #6B6A64 / 強調 #8A2B1E / 罫 #DCD8CC

## 外すと崩れる点
- 結論を題のすぐ下に 1 行で置く。前を通り過ぎる人が持ち帰るのはそこだけ
- 節に番号を振り、3 段組を左上から右下へ読ませる
- 数字は図で見せ、本文では言い換えない
- A 判は縦横比が同じ。版面は A4 縦の比で組み、印刷で A0 に拡げる

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

仕様

11.2 KB
# 研究発表の表紙 — 題・著者・所属を上付きの番号で結ぶ
format: slide-16x9
density: low
layout:
  kind: centered
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 96
    right: 140
    bottom: 72
    left: 140
type:
  venue:
    size: 24
    weight: 400
    tracking: 0.06em
    numeric: tabular
  title:
    size: 68
    weight: 700
    leading: 1.45
    numeric: tabular
  subtitle:
    size: 32
    weight: 500
    numeric: tabular
  authors:
    size: 34
    weight: 500
    numeric: tabular
  affiliation:
    size: 24
    weight: 400
    leading: 1.7
    numeric: tabular
  contact:
    size: 22
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 題は問いの形か結論の形で書く。「〜に関する研究」では何が分かったか伝わらない
  - 副題に研究の種類と対象の数を書く(無作為化比較試験、148 名)
  - 著者と所属は上付きの番号で結ぶ。所属を著者ごとに繰り返さない
  - 明朝は題にだけ使い、著者以下はゴシック

---

# 問い・仮説・方法 — 研究の骨組みを 3 段で上から読ませる
format: slide-16x9
density: medium
layout:
  kind: stack
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
type:
  kicker:
    size: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  label:
    size: 40
    weight: 700
    numeric: tabular
  text:
    size: 32
    weight: 500
    leading: 1.6
    numeric: tabular
  itemLabel:
    size: 24
    weight: 700
    numeric: tabular
  item:
    size: 26
    weight: 400
    leading: 1.5
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 仮説には数字を入れる(3 割減る、30 分以内)。数字の無い仮説は、結果と照らせない
  - 方法は文章にせず、設計・対象・期間・主な指標の 4 項目で書く
  - 3 段の見出しは同じ幅の列に揃え、中身の左端を 1 本にする
  - 問いと仮説は 2 行まで

---

# 対象者の流れ — 募集から解析まで、各段の人数と除いた理由
format: slide-16x9
density: medium
layout:
  kind: flow
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
type:
  kicker:
    size: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  stage:
    size: 20
    weight: 700
    tracking: 0.08em
    numeric: tabular
  n:
    size: 32
    weight: 700
    numeric: tabular
  why:
    size: 20
    weight: 400
    leading: 1.6
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 各段に人数を書き、前の段との差が除いた人数と一致するようにする
  - 除いた理由は人数つきで書く。理由の無い除外は、選り好みを疑われる
  - 本流は面つき、除外は枠線だけ。本流を目で追えるようにする
  - 線は直角に折り、交差させない

---

# 結果の表 — 平均 ± 標準偏差と p 値、有意な行だけ太字
format: slide-16x9
density: high
layout:
  kind: table
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
type:
  kicker:
    size: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  tableCaption:
    size: 26
    weight: 400
    numeric: tabular
  colHead:
    size: 22
    weight: 500
    numeric: tabular
  item:
    size: 26
    weight: 700
    numeric: tabular
  value:
    size: 26
    weight: 700
    numeric: tabular
  diff:
    size: 26
    weight: 700
    numeric: tabular
  p:
    size: 26
    weight: 700
    numeric: tabular
  note:
    size: 20
    weight: 400
    leading: 1.7
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 罫は 3 本(上・見出しの下・下)。縦の罫は引かない
  - 有意な行は太字にし、基準(p < .05)を表の下に書く
  - 差には向き(どちらからどちらを引いたか)と信頼区間を添える
  - 表番号と、各群の人数を表の上の題に入れる

---

# 図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える
format: slide-16x9
density: medium
layout:
  kind: annotated
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
type:
  kicker:
    size: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  captionNo:
    size: 30
    weight: 700
    numeric: tabular
  caption:
    size: 24
    weight: 400
    leading: 1.75
    numeric: tabular
  captionNote:
    size: 20
    weight: 400
    leading: 1.7
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 説明文は図番号から始め、何を測った図か → 何が読めるかの順に書く
  - 系列名は凡例にせず、線の端に直接書く
  - 注記は 2 か所まで。図の中で言うのは、説明文が指す点だけ
  - 測り方と人数は説明文の下に小さく

---

# 限界と今後 — 左に分からないこと、右にそれを確かめる次の研究
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: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  colHead:
    size: 36
    weight: 700
    numeric: tabular
  num:
    size: 30
    weight: 700
    numeric: tabular
  itemHead:
    size: 30
    weight: 700
    numeric: tabular
  itemBody:
    size: 24
    weight: 400
    leading: 1.6
    numeric: tabular
  bottom:
    size: 26
    weight: 500
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 左右の同じ番号を対にする。限界 1 を確かめるのが今後 1
  - 限界は見出し 1 行と説明 1 行。言い訳を長く書かない
  - 今後の側だけ見出しを強調色にする
  - 下端に、今の結果で言える実務への示唆を 1 行

---

# 参考文献 — 本文に出た順の番号と、著者・年・題・掲載先
format: slide-16x9
density: high
layout:
  kind: stack
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
type:
  kicker:
    size: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  refNo:
    size: 26
    weight: 700
    numeric: tabular
  ref:
    size: 26
    weight: 400
    leading: 1.6
    numeric: tabular
  note:
    size: 20
    weight: 400
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 番号は本文に出た順。著者名の順にすると、本文の [3] を探させる
  - 書き方を 1 つに揃える(著者(年)題.掲載先,巻(号),頁.)
  - 番号の列を固定幅にし、2 行目以降を本文の頭に揃える
  - 掲載先だけ太字にする

---

# コードの 1 枚 — 行番号、強調する行、右の注記を番号で結ぶ
format: slide-16x9
density: medium
layout:
  kind: annotated
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 88
    right: 140
    bottom: 56
    left: 140
type:
  kicker:
    size: 22
    weight: 500
    tracking: 0.12em
    numeric: tabular
  title:
    size: 50
    weight: 700
    leading: 1.4
    numeric: tabular
  lineNo:
    size: 20
    weight: 400
    leading: 1.5
    numeric: tabular
  code:
    size: 24
    weight: 400
    leading: 1.5
    numeric: tabular
  markNo:
    size: 24
    weight: 700
    numeric: tabular
  noteLine:
    size: 20
    weight: 400
    numeric: tabular
  noteHead:
    size: 28
    weight: 700
    numeric: tabular
  noteBody:
    size: 22
    weight: 400
    leading: 1.6
    numeric: tabular
  folio:
    size: 16
    weight: 400
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 強調する行は 3 行まで。全部を説明すると、どこが要か分からない
  - 注記は「何をするか」と「なぜそう書くか」の 2 段。コードの読み上げにしない
  - コードは 20 行まで、24px 以上。それ以上は省略して「…」で示す
  - 行番号と注記の両方に行番号を書き、目で往復できるようにする

---

# 学会ポスター(A0 縦)— 題の帯、結論の 1 行、3 段組の本文
format: a4-portrait
density: high
layout:
  kind: 3-column
  canvas:
    w: 1191
    h: 1684
  margin:
    top: 72
    right: 66
    bottom: 60
    left: 66
  columns:
    count: 3
    gap: 42
type:
  venue:
    size: 16
    weight: 400
    tracking: 0.06em
    numeric: tabular
  title:
    size: 57
    weight: 700
    leading: 1.35
    numeric: tabular
  authors:
    size: 24
    weight: 500
    numeric: tabular
  affiliation:
    size: 18
    weight: 400
    numeric: tabular
  finding:
    size: 33
    weight: 700
    leading: 1.45
    numeric: tabular
  secHead:
    size: 32
    weight: 700
    numeric: tabular
  body:
    size: 20
    weight: 400
    leading: 1.75
    numeric: tabular
  item:
    size: 20
    weight: 400
    leading: 1.55
    numeric: tabular
  flow:
    size: 20
    weight: 400
    numeric: tabular
  miniHead:
    size: 20
    weight: 700
    numeric: tabular
  miniLabel:
    size: 16
    weight: 400
    numeric: tabular
  miniValue:
    size: 20
    weight: 700
    numeric: tabular
  small:
    size: 15
    weight: 400
    leading: 1.6
    numeric: tabular
  refs:
    size: 14
    weight: 400
    leading: 1.7
    numeric: tabular
  qrText:
    size: 15
    weight: 400
    leading: 1.6
    numeric: tabular
colors:
  ground: "#FBFAF6"
  surface: "#F1EFE8"
  ink: "#1E1E1C"
  muted: "#6B6A64"
  accent: "#8A2B1E"
  rule: "#DCD8CC"
rules:
  - 結論を題のすぐ下に 1 行で置く。前を通り過ぎる人が持ち帰るのはそこだけ
  - 節に番号を振り、3 段組を左上から右下へ読ませる
  - 数字は図で見せ、本文では言い換えない
  - A 判は縦横比が同じ。版面は A4 縦の比で組み、印刷で A0 に拡げる

ファイル

01 research-title-authors/pattern.html

3.4 KB

/designs/research-title-authors/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>研究発表の表紙 — 題・著者・所属を上付きの番号で結ぶ</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

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

  .kicker { font-size: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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; }

  .venue { font-size: 24px; color: var(--muted); text-align: center; letter-spacing: .06em; }
  .main { align-self: center; text-align: center; }
  .rtitle { font-size: 68px; font-weight: 700; line-height: 1.45; }
  .sub { font-size: 32px; font-weight: 500; color: var(--muted); margin-top: 24px; }
  .authors { font-size: 34px; font-weight: 500; margin-top: 72px; }
  .authors span + span { margin-left: 1.2em; }
  .authors sup, .affs sup { font-size: .6em; color: var(--accent); font-weight: 700; margin-left: 2px; }
  .affs { font-size: 24px; color: var(--muted); margin-top: 20px; line-height: 1.7; }
  .affs span + span { margin-left: 2em; }
  .contact { font-size: 22px; color: var(--muted); text-align: center; border-top: 1px solid var(--rule); padding-top: 24px; }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <p class="venue" data-type="venue">第 12 回 働き方と情報の研究会 2026 年 12 月 5 日</p>
    <div class="main">
      <h1 class="rtitle mincho" data-type="title">通知を 1 時間ごとに束ねて届けると、<br>作業の中断は減るか</h1>
      <p class="sub" data-type="subtitle">事務職 148 名を対象とした無作為化比較試験</p>
      <p class="authors" data-type="authors"><span>山野 葵<sup>1</sup></span><span>佐伯 亮<sup>2</sup></span><span>森下 千夏<sup>1</sup></span></p>
      <p class="affs" data-type="affiliation"><span><sup>1</sup> 北陵大学 情報学部</span><span><sup>2</sup> みなと働き方研究所</span></p>
    </div>
    <p class="contact" data-type="contact">連絡先:山野 葵(責任著者) 研究・著者・所属はすべて説明用の架空のもの</p>
  </div>
</div>

02 question-hypothesis-method/pattern.html

3.9 KB

/designs/question-hypothesis-method/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>問い・仮説・方法 — 研究の骨組みを 3 段で上から読ませる</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .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: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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; }

  .bands { display: grid; grid-template-rows: auto auto 1fr; border-top: 3px solid var(--ink); }
  .band { display: grid; grid-template-columns: 220px 1fr; column-gap: 48px; padding: 32px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .label { font-size: 40px; font-weight: 700; color: var(--accent); }
  .text { font-size: 32px; font-weight: 500; line-height: 1.6; }
  /* 方法は項目と中身の 2 列。文章にすると、どこに何があるか探させる */
  .items { display: grid; grid-template-columns: 160px 1fr; row-gap: 14px; column-gap: 32px; }
  .items dt { font-size: 24px; font-weight: 700; color: var(--muted); }
  .items dd { font-size: 26px; margin: 0; line-height: 1.5; }

</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 class="bands">
      <div class="band">
        <p class="label mincho" data-type="label">問い</p>
        <p class="text" data-type="text">通知をまとめて届けると、作業の中断は減るか。減るなら、急ぎの連絡はどれだけ遅れるか</p>
      </div>
      <div class="band">
        <p class="label mincho">仮説</p>
        <p class="text">1 時間ごとに束ねて届けると、即時に届ける場合より 1 日の中断が 3 割減る。急ぎの返信の遅れは 30 分以内に収まる</p>
      </div>
      <div class="band">
        <p class="label mincho">方法</p>
        <dl class="items"><dt data-type="itemLabel">設計</dt><dd data-type="item">2 群の無作為化比較試験(束ね配信 / 即時配信)</dd><dt>対象</dt><dd>事務職 148 名。社内チャットとメールを 1 日 20 件以上受ける人</dd><dt>期間</dt><dd>平日 10 日間。2026 年 6 月</dd><dt>主な指標</dt><dd>1 日の中断の回数(画面の切り替えの記録から数える)</dd></dl>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">山野ほか 通知の束ね配信と作業の中断</p>
      <p>02</p>
    </div>
  </div>
</div>

03 participant-flow-exclusions/pattern.html

4.8 KB

/designs/participant-flow-exclusions/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>対象者の流れ — 募集から解析まで、各段の人数と除いた理由</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .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: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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; }

  .flow { position: relative; align-self: center; height: 670px; }
  .flow svg { position: absolute; inset: 0; }
  /* 本流の箱は面つき、除いた人の箱は枠線だけ。本流を目で追えるようにする */
  .box { position: absolute; height: 110px; display: flex; flex-direction: column; justify-content: center; background: var(--surface); border: 2px solid var(--ink); padding: 0 24px; text-align: center; }
  .box.side { background: var(--ground); border: 1.5px solid var(--muted); text-align: left; height: 134px; }
  .box.tall { height: 150px; }
  .stage { font-size: 20px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }
  .n { font-size: 32px; font-weight: 700; margin-top: 2px; }
  .why { font-size: 20px; color: var(--muted); line-height: 1.6; margin-top: 4px; }

</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">212 名を募り、条件に合う 148 名を 2 群に分けた</h1>
    </div>
    <div class="flow">
      <svg width="1640" height="670" viewBox="0 0 1640 670" aria-hidden="true">
        <defs><marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto"><path d="M0 0 L10 5 L0 10 Z" fill="var(--ink)"/></marker></defs>
        <g stroke="var(--ink)" stroke-width="2" fill="none">
          <path d="M640 110 L640 188" marker-end="url(#a)"/>
          <path d="M640 150 L958 150" marker-end="url(#a)"/>
          <path d="M640 300 L640 330 L400 330 L400 358" marker-end="url(#a)"/>
          <path d="M640 330 L880 330 L880 358" marker-end="url(#a)"/>
          <path d="M400 470 L400 518" marker-end="url(#a)"/>
          <path d="M880 470 L880 518" marker-end="url(#a)"/>
        </g>
      </svg>
      <div class="box" style="left: 440px; top: 0; width: 400px"><p class="stage" data-type="stage">募集</p><p class="n" data-type="n">212 名</p></div>
      <div class="box side" style="left: 960px; top: 83px; width: 560px"><p class="stage">除外 64 名</p><p class="why" data-type="why">条件に合わない 41 名(受信が 1 日 20 件未満)<br>参加の辞退 23 名</p></div>
      <div class="box" style="left: 440px; top: 190px; width: 400px"><p class="stage">無作為に割り付け</p><p class="n">148 名</p></div>
      <div class="box" style="left: 200px; top: 360px; width: 400px"><p class="stage">束ね配信</p><p class="n">74 名</p></div>
      <div class="box" style="left: 680px; top: 360px; width: 400px"><p class="stage">即時配信</p><p class="n">74 名</p></div>
      <div class="box tall" style="left: 200px; top: 520px; width: 400px"><p class="stage">解析</p><p class="n">71 名</p><p class="why">離脱 3 名(異動・長期の休み)</p></div>
      <div class="box tall" style="left: 680px; top: 520px; width: 400px"><p class="stage">解析</p><p class="n">69 名</p><p class="why">離脱 5 名(異動・長期の休み)</p></div>
    </div>
    <div class="folio">
      <p data-type="folio">山野ほか 通知の束ね配信と作業の中断</p>
      <p>03</p>
    </div>
  </div>
</div>

04 results-table-significance/pattern.html

4.4 KB

/designs/results-table-significance/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>結果の表 — 平均 ± 標準偏差と p 値、有意な行だけ太字</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .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: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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; }

  .wrap { align-self: center; }
  .cap { font-size: 26px; margin-bottom: 18px; }
  .cap b { font-family: "Zen Old Mincho", "IPAMincho", serif; font-weight: 700; margin-right: 16px; }
  table { width: 100%; border-collapse: collapse; }
  /* 罫は上・見出しの下・下の 3 本だけ。縦の罫は引かない */
  thead tr { border-top: 3px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
  tbody tr:last-child { border-bottom: 3px solid var(--ink); }
  thead th { font-size: 22px; font-weight: 500; color: var(--muted); text-align: right; padding: 16px 20px; }
  thead th:first-child { text-align: left; padding-left: 0; }
  tbody th { font-size: 26px; font-weight: 400; text-align: left; padding: 22px 0; }
  tbody td { font-size: 26px; text-align: right; padding: 22px 20px; }
  tbody tr.sig th, tbody tr.sig td { font-weight: 700; }
  .note { font-size: 20px; color: var(--muted); line-height: 1.7; margin-top: 16px; }

</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">中断は 3 割減り、急ぎの返信は 17 分遅れた</h1>
    </div>
    <div class="wrap">
      <p class="cap" data-type="tableCaption"><b>表 1</b>主な結果(束ね配信 71 名、即時配信 69 名)</p>
      <table>
        <thead><tr><th data-type="colHead">指標</th><th>束ね配信</th><th>即時配信</th><th>差 [95% 信頼区間]</th><th>p</th></tr></thead>
        <tbody>
          <tr class="sig"><th data-type="item">中断の回数(回/日)</th><td data-type="value">18.4 ± 5.1</td><td>27.9 ± 6.3</td><td data-type="diff">−9.5 [−11.4, −7.6]</td><td data-type="p">&lt; .001</td></tr>
          <tr class="sig"><th>続けて作業できた最長時間(分)</th><td>52.3 ± 14.8</td><td>38.6 ± 12.2</td><td>+13.7 [9.2, 18.2]</td><td>&lt; .001</td></tr>
          <tr class=""><th>作業の負担(NASA-TLX, 0–100)</th><td>46.2 ± 11.9</td><td>49.8 ± 12.4</td><td>−3.6 [−7.6, 0.4]</td><td>.082</td></tr>
          <tr class="sig"><th>急ぎの連絡への返信(分)</th><td>24.1 ± 9.7</td><td>6.8 ± 4.2</td><td>+17.3 [14.8, 19.8]</td><td>&lt; .001</td></tr>
          <tr class=""><th>見逃した急ぎの連絡(件/10 日)</th><td>0.6 ± 0.9</td><td>0.4 ± 0.7</td><td>+0.2 [−0.1, 0.5]</td><td>.14</td></tr>
        </tbody>
      </table>
      <p class="note" data-type="note">平均 ± 標準偏差。差は束ね配信から即時配信を引いた値。太字は p &lt; .05。数値は説明用の架空のもの</p>
    </div>
    <div class="folio">
      <p data-type="folio">山野ほか 通知の束ね配信と作業の中断</p>
      <p>04</p>
    </div>
  </div>
</div>

05 figure-with-caption/pattern.html

5.8 KB

/designs/figure-with-caption/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>図と説明文 — 大きな図 1 枚に、図番号つきの説明を右に添える</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .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: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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; }

  .fig { display: grid; grid-template-columns: 1120px 1fr; column-gap: 64px; align-items: start; }
  svg text { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
  .ax { font-size: 20px; fill: var(--muted); }
  .axt { font-size: 20px; fill: var(--muted); font-weight: 500; }
  .lineLabel { font-size: 22px; font-weight: 700; }
  .ann { font-size: 20px; font-weight: 500; fill: var(--accent); }
  /* 説明文は図番号から始め、何を測った図か → 何が読めるか の順に書く */
  .cap { border-top: 3px solid var(--ink); padding-top: 24px; }
  .capNo { font-size: 30px; font-weight: 700; }
  .capText { font-size: 24px; line-height: 1.75; margin-top: 16px; }
  .capNote { font-size: 20px; line-height: 1.7; color: var(--muted); margin-top: 20px; }

</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 class="fig">
      <svg width="1120" height="540" viewBox="0 0 1120 540" aria-label="30 分ごとの作業の中断の回数">
        <text class="axt" x="80" y="20">回</text>
        <g stroke="var(--rule)" stroke-width="1"><line x1="80" y1="333.3" x2="990" y2="333.3"/><line x1="80" y1="186.7" x2="990" y2="186.7"/><line x1="80" y1="40.0" x2="990" y2="40.0"/></g>
        <line x1="80" y1="480" x2="990" y2="480" stroke="var(--ink)" stroke-width="2"/>
        <g><text class="ax" x="64" y="487.0" text-anchor="end">0</text><text class="ax" x="64" y="340.3" text-anchor="end">0.5</text><text class="ax" x="64" y="193.7" text-anchor="end">1.0</text><text class="ax" x="64" y="47.0" text-anchor="end">1.5</text></g><g><text class="ax" x="90" y="516" text-anchor="middle">9:00</text><text class="ax" x="194" y="516" text-anchor="middle">10:00</text><text class="ax" x="298" y="516" text-anchor="middle">11:00</text><text class="ax" x="402" y="516" text-anchor="middle">12:00</text><text class="ax" x="506" y="516" text-anchor="middle">13:00</text><text class="ax" x="610" y="516" text-anchor="middle">14:00</text><text class="ax" x="714" y="516" text-anchor="middle">15:00</text><text class="ax" x="818" y="516" text-anchor="middle">16:00</text><text class="ax" x="922" y="516" text-anchor="middle">17:00</text></g>
        <polyline points="90 128.0 142 98.7 194 113.3 246 142.7 298 157.3 350 186.7 402 245.3 454 216.0 506 142.7 558 113.3 610 128.0 662 98.7 714 142.7 766 157.3 818 128.0 870 172.0 922 201.3 974 230.7" fill="none" stroke="var(--muted)" stroke-width="3"/>
        <polyline points="90 201.3 142 392.0 194 186.7 246 406.7 298 216.0 350 392.0 402 274.7 454 406.7 506 201.3 558 377.3 610 186.7 662 392.0 714 216.0 766 406.7 818 201.3 870 392.0 922 245.3 974 406.7" fill="none" stroke="var(--accent)" stroke-width="4" stroke-linejoin="round"/>
        <text class="lineLabel" x="990" y="238.7" fill="var(--muted)">即時配信</text>
        <text class="lineLabel" x="990" y="414.7" fill="var(--accent)">束ね配信</text>
        <line x1="610" y1="176.7" x2="610" y2="96" stroke="var(--accent)" stroke-width="1.5"/>
        <text class="ann" x="610" y="84" text-anchor="middle">毎正時の直後に集まる</text>
        <line x1="454" y1="416.7" x2="454" y2="430" stroke="var(--accent)" stroke-width="1.5"/>
        <text class="ann" x="466" y="458">あいだは即時の 4 分の 1</text>
      </svg>
      <div class="cap">
        <p class="capNo mincho" data-type="captionNo">図 2</p>
        <p class="capText" data-type="caption">30 分ごとの作業の中断の回数(1 人あたり、平日 10 日間の平均)。束ね配信では、通知が届く毎正時の直後に中断が集まり、そのあいだの 30 分は即時配信の 4 分の 1 ほどに減る。</p>
        <p class="capNote" data-type="captionNote">中断は、作業中の画面から通知の画面への切り替えとして数えた。束ね配信 71 名、即時配信 69 名。</p>
      </div>
    </div>
    <div class="folio">
      <p data-type="folio">山野ほか 通知の束ね配信と作業の中断</p>
      <p>05</p>
    </div>
  </div>
</div>

06 limitations-future-work/pattern.html

4.2 KB

/designs/limitations-future-work/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>限界と今後 — 左に分からないこと、右にそれを確かめる次の研究</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .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 auto; row-gap: 40px; }

  .kicker { font-size: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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; }

  .cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; align-content: start; }
  .colHead { font-size: 36px; font-weight: 700; border-bottom: 3px solid var(--ink); padding-bottom: 14px; }
  .colHead.next { color: var(--accent); border-bottom-color: var(--accent); }
  ol { list-style: none; padding: 0; }
  li { display: grid; grid-template-columns: 56px 1fr; padding: 26px 0; border-bottom: 1px solid var(--rule); }
  .num { font-size: 30px; font-weight: 700; color: var(--muted); }
  .h { font-size: 30px; font-weight: 700; }
  .b { font-size: 24px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
  /* 左右の同じ番号が対になる。限界 1 を確かめるのが今後 1 */
  .bottom { font-size: 26px; font-weight: 500; background: var(--surface); padding: 22px 32px; }

</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">分かったのは 10 日間の事務職のことまで</h1>
    </div>
    <div class="cols">
      <div><p class="colHead mincho" data-type="colHead">限界</p><ol><li><span class="num" data-type="num">1</span><div><p class="h" data-type="itemHead">期間が 10 日と短い</p><p class="b" data-type="itemBody">慣れて効果が薄れるかどうかを見ていない</p></div></li><li><span class="num">2</span><div><p class="h">対象が事務職だけ</p><p class="b">顧客対応の多い職種には当てはめられない</p></div></li><li><span class="num">3</span><div><p class="h">数えたのは画面の切り替え</p><p class="b">頭の中で起きる中断は数えていない</p></div></li></ol></div>
      <div><p class="colHead next mincho">今後</p><ol><li><span class="num">1</span><div><p class="h">3 か月追跡する</p><p class="b">効果が続くか、慣れで薄れるかを見る</p></div></li><li><span class="num">2</span><div><p class="h">急ぎだけ即時に通す</p><p class="b">例外の通り道を足し、返信の遅れが消えるか比べる</p></div></li><li><span class="num">3</span><div><p class="h">束ねる間隔を変える</p><p class="b">30 分・1 時間・2 時間で、ちょうどよい長さを探す</p></div></li></ol></div>
    </div>
    <p class="bottom" data-type="bottom">導入するなら、急ぎの連絡だけを即時に通す例外の通り道と組みにする</p>
    <div class="folio">
      <p data-type="folio">山野ほか 通知の束ね配信と作業の中断</p>
      <p>06</p>
    </div>
  </div>
</div>

07 references-numbered/pattern.html

4.0 KB

/designs/references-numbered/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>参考文献 — 本文に出た順の番号と、著者・年・題・掲載先</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .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 auto 1fr auto; row-gap: 40px; }

  .kicker { font-size: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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; }

  ol { list-style: none; padding: 0; border-top: 3px solid var(--ink); }
  /* 番号の列を固定幅にして、2 行目以降を本文の頭に揃える(ぶら下げ) */
  li { display: grid; grid-template-columns: 88px 1fr; padding: 20px 0; border-bottom: 1px solid var(--rule); }
  .no { font-size: 26px; font-weight: 700; color: var(--accent); }
  .ref { font-size: 26px; line-height: 1.6; }
  .venue { font-weight: 700; }
  .note { font-size: 20px; color: var(--muted); }

</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>
    <ol>
      <li><span class="no" data-type="refNo">[1]</span><p class="ref" data-type="ref">佐伯 亮・山野 葵(2024)通知が届いてから作業に戻るまでの時間.<span class="venue">働き方情報学会誌</span>,18(2), 41–52.</p></li>
      <li><span class="no">[2]</span><p class="ref">森下 千夏(2023)画面の切り替えの記録から作業の中断を数える方法.<span class="venue">北陵大学情報学部紀要</span>,9, 113–128.</p></li>
      <li><span class="no">[3]</span><p class="ref">青木 透・西村 真理(2022)チャットの即時性と仕事の満足.<span class="venue">情報と組織</span>,31(4), 207–219.</p></li>
      <li><span class="no">[4]</span><p class="ref">山野 葵・森下 千夏(2025)通知の束ね配信の予備調査:12 名の 2 週間.<span class="venue">第 11 回 働き方と情報の研究会 予稿集</span>,55–58.</p></li>
      <li><span class="no">[5]</span><p class="ref">小松 一樹(2021)割り込みのある作業を再開するまでの負担.<span class="venue">認知と作業</span>,14(1), 3–19.</p></li>
      <li><span class="no">[6]</span><p class="ref">働き方情報学会(2024)業務用チャットの使い方の手引き 第 2 版.<span class="venue">働き方情報学会</span>.</p></li>
    </ol>
    <p class="note" data-type="note">本文の [ ] の番号は、この一覧の順。文献はすべて説明用の架空のもの</p>
    <div class="folio">
      <p data-type="folio">山野ほか 通知の束ね配信と作業の中断</p>
      <p>07</p>
    </div>
  </div>
</div>

08 code-highlight-lines/pattern.html

5.8 KB

/designs/code-highlight-lines/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>コードの 1 枚 — 行番号、強調する行、右の注記を番号で結ぶ</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<meta name="dv-font" content="IBM Plex Mono:400;600">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
    --hl: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .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: 22px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 50px; font-weight: 700; line-height: 1.4; 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: 1100px 1fr; column-gap: 56px; align-items: start; }
  .code { background: var(--surface); padding: 24px 0; font-family: "IBM Plex Mono", "Zen Kaku Gothic New", monospace; }
  .ln { display: grid; grid-template-columns: 72px 1fr 48px; align-items: center; font-size: 24px; line-height: 1.5; }
  .ln .no { text-align: right; padding-right: 24px; color: var(--muted); font-size: 20px; }
  .ln code { font-family: inherit; white-space: pre; }
  /* 強調する行だけ面を敷き、行番号も強調色にする。注記の番号と同じ印を行末に置く */
  .ln.hl { background: var(--hl); }
  .ln.hl .no { color: var(--accent); font-weight: 600; }
  .mk { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--ground); font-family: "Zen Kaku Gothic New", sans-serif; font-size: 20px; font-weight: 700; }
  .mk.big { width: 44px; height: 44px; font-size: 24px; }
  ol { list-style: none; padding: 0; }
  li { display: grid; grid-template-columns: 64px 1fr; padding: 22px 0; border-bottom: 1px solid var(--rule); }
  li:first-child { padding-top: 0; }
  .nl { font-size: 20px; color: var(--muted); }
  .nh { font-size: 28px; font-weight: 700; margin-top: 2px; }
  .nb { font-size: 22px; color: var(--muted); line-height: 1.6; 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 class="split">
      <div class="code">
<p class="ln"><span class="no" data-type="lineNo">1</span><code data-type="code">type Notice = { id: string; from: string; at: Date };</code></p>
<p class="ln"><span class="no">2</span><code> </code></p>
<p class="ln"><span class="no">3</span><code>const HOUR = 60 * 60 * 1000;</code></p>
<p class="ln"><span class="no">4</span><code>const queue: Notice[] = [];</code></p>
<p class="ln"><span class="no">5</span><code> </code></p>
<p class="ln"><span class="no">6</span><code>// 届いた通知は渡さずに、列にためる</code></p>
<p class="ln"><span class="no">7</span><code>export function receive(n: Notice) {</code></p>
<p class="ln"><span class="no">8</span><code>  queue.push(n);</code></p>
<p class="ln"><span class="no">9</span><code>}</code></p>
<p class="ln"><span class="no">10</span><code> </code></p>
<p class="ln"><span class="no">11</span><code>export function startBatching(deliver: (ns: Notice[]) =&gt; void) {</code></p>
<p class="ln hl"><span class="no">12</span><code>  const wait = HOUR - (Date.now() % HOUR);</code><span class="mk">1</span></p>
<p class="ln"><span class="no">13</span><code>  setTimeout(() =&gt; {</code></p>
<p class="ln hl"><span class="no">14</span><code>    deliver(queue.splice(0));</code><span class="mk">2</span></p>
<p class="ln hl"><span class="no">15</span><code>    setInterval(() =&gt; deliver(queue.splice(0)), HOUR);</code><span class="mk">3</span></p>
<p class="ln"><span class="no">16</span><code>  }, wait);</code></p>
<p class="ln"><span class="no">17</span><code>}</code></p>
      </div>
      <ol><li><span class="mk big" data-type="markNo">1</span><div><p class="nl" data-type="noteLine">12 行目</p><p class="nh" data-type="noteHead">次の正時までの待ち時間を出す</p><p class="nb" data-type="noteBody">起動した時刻によらず、配信を毎時 0 分に揃える</p></div></li><li><span class="mk big">2</span><div><p class="nl">14 行目</p><p class="nh">たまった分を一度に渡す</p><p class="nb">splice(0) で列を空にし、同じ通知を二度渡さない</p></div></li><li><span class="mk big">3</span><div><p class="nl">15 行目</p><p class="nh">以後は 1 時間ごと</p><p class="nb">最初の 1 回だけ待ち時間がずれ、2 回目からは等間隔</p></div></li></ol>
    </div>
    <div class="folio">
      <p data-type="folio">山野ほか 通知の束ね配信と作業の中断</p>
      <p>08</p>
    </div>
  </div>
</div>

09 poster-a0-three-column/pattern.html

9.5 KB

/designs/poster-a0-three-column/pattern.html

中身を見る
<!doctype html>
<meta charset="utf-8">
<title>学会ポスター(A0 縦)— 題の帯、結論の 1 行、3 段組の本文</title>
<meta name="dv-font" content="Zen Old Mincho:700">
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。
     研究・著者・所属・数値・文献はすべて説明用の架空のもの。 */
  :root {
    --ground: #FBFAF6;
    --surface: #F1EFE8;
    --ink: #1E1E1C;
    --muted: #6B6A64;
    --accent: #8A2B1E;
    --rule: #DCD8CC;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1191px; height: 1684px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; font-variant-numeric: tabular-nums; }
  /* 明朝は見出しにだけ使う。本文まで明朝にすると、投影したとき細い線が飛ぶ */
  .mincho, .title { font-family: "Zen Old Mincho", "IPAMincho", serif; }

  .artboard {
    width: 1191px; height: 1684px;
    background: var(--ground); color: var(--ink);
    padding: 72px 66px 60px;             /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 30px; }

  .kicker { font-size: 16px; font-weight: 500; letter-spacing: .12em; color: var(--accent); }
  .title { font-size: 38px; font-weight: 700; line-height: 1.4; margin-top: 8px; }
  .folio { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 12px; }

  .content { row-gap: 30px; }
  .head { border-bottom: 3px solid var(--ink); padding-bottom: 27px; }
  .venue { font-size: 16px; color: var(--muted); letter-spacing: .06em; }
  .ptitle { font-size: 57px; font-weight: 700; line-height: 1.35; margin-top: 12px; }
  .authors { font-size: 24px; font-weight: 500; margin-top: 21px; }
  .authors span + span { margin-left: 1.2em; }
  .authors sup, .affs sup { font-size: .6em; color: var(--accent); font-weight: 700; margin-left: 2px; }
  .affs { font-size: 18px; color: var(--muted); margin-top: 8px; }
  .affs span + span { margin-left: 2em; }
  /* 結論を題のすぐ下に 1 行で。ポスターの前を通り過ぎる人が持ち帰るのはここだけ */
  .finding { background: var(--accent); color: var(--ground); padding: 27px 36px; font-size: 33px; font-weight: 700; line-height: 1.45; }
  .cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 42px; align-content: start; }
  .sec + .sec { margin-top: 54px; }
  .secHead { font-size: 32px; font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
  .secHead span { color: var(--accent); margin-right: 10px; }
  .p { font-size: 20px; line-height: 1.75; margin-top: 15px; }
  .p b { color: var(--accent); }
  .list { list-style: none; padding: 0; margin-top: 10px; }
  .list li { display: grid; grid-template-columns: 3.6em 1fr; font-size: 20px; line-height: 1.55; padding: 9px 0; border-bottom: 1px solid var(--rule); }
  .list li b { color: var(--muted); font-weight: 700; }
  .stair { margin-top: 14px; display: grid; row-gap: 6px; }
  .stair p { font-size: 20px; background: var(--surface); padding: 10px 15px; display: flex; justify-content: space-between; }
  .stair p.out { background: transparent; color: var(--muted); padding-left: 36px; font-size: 16px; }
  .mini { margin-top: 24px; }
  .miniHead { font-size: 20px; font-weight: 700; }
  .mrow { display: grid; grid-template-columns: 54px 1fr 66px; align-items: center; column-gap: 9px; margin-top: 10px; }
  .mlab { font-size: 16px; color: var(--muted); }
  .mbar { display: block; height: 36px; background: var(--muted); }
  .mbar.hi { background: var(--accent); }
  .mval { font-size: 20px; font-weight: 700; text-align: right; }
  .small { font-size: 15px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
  .foot { display: grid; grid-template-columns: 1fr 270px; column-gap: 42px; border-top: 2px solid var(--ink); padding-top: 21px; }
  .refs { font-size: 14px; color: var(--muted); line-height: 1.7; }
  .refs b { color: var(--ink); }
  .qr { display: flex; gap: 15px; align-items: center; }
  .qrBox { width: 90px; height: 90px; border: 2px solid var(--ink); position: relative; flex: none; }
  .qrBox i { position: absolute; width: 26px; height: 26px; border: 5px solid var(--ink); }
  .qrText { font-size: 15px; line-height: 1.6; }

</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <p class="venue" data-type="venue">第 12 回 働き方と情報の研究会 ポスター発表 P-14</p>
      <h1 class="ptitle mincho" data-type="title">通知を 1 時間ごとに束ねて届けると、<br>作業の中断は減るか</h1>
      <p class="authors" data-type="authors"><span>山野 葵<sup>1</sup></span><span>佐伯 亮<sup>2</sup></span><span>森下 千夏<sup>1</sup></span></p>
      <p class="affs" data-type="affiliation"><span><sup>1</sup> 北陵大学 情報学部</span><span><sup>2</sup> みなと働き方研究所</span></p>
    </div>
    <p class="finding" data-type="finding">束ねて届けると、1 日の中断は 34% 減った。<br>ただし急ぎの返信は 17 分遅れた。</p>
    <div class="cols">
      <div data-col="1">
        <div class="sec">
          <p class="secHead mincho" data-type="secHead"><span>1</span>背景と問い</p>
          <p class="p" data-type="body">事務職は 1 日に 30 回ほど通知で作業を中断し、戻るたびに数分を失う。通知を<b>まとめて届ける</b>と中断は減るか。減るなら、急ぎの連絡はどれだけ遅れるか。</p>
        </div>
        <div class="sec">
          <p class="secHead mincho"><span>2</span>方法</p>
          <ul class="list">
            <li data-type="item"><b>設計</b>2 群の無作為化比較試験</li>
            <li><b>対象</b>事務職 148 名</li>
            <li><b>期間</b>平日 10 日間</li>
            <li><b>指標</b>画面の切り替えの回数</li>
          </ul>
          <div class="stair">
            <p data-type="flow"><span>募集</span><span>212 名</span></p>
            <p class="out">除外 64 名</p>
            <p><span>割り付け</span><span>148 名</span></p>
            <p class="out">離脱 8 名</p>
            <p><span>解析</span><span>140 名</span></p>
          </div>
        </div>
      </div>
      <div data-col="2">
        <div class="sec">
          <p class="secHead mincho"><span>3</span>結果</p>
          <div class="mini">
            <p class="miniHead" data-type="miniHead">中断の回数(回/日)</p>
            <div class="mrow"><span class="mlab" data-type="miniLabel">束ね</span><span class="mbar hi" style="width: 61%"></span><span class="mval" data-type="miniValue">18.4</span></div>
            <div class="mrow"><span class="mlab">即時</span><span class="mbar" style="width: 93%"></span><span class="mval">27.9</span></div>
          </div>
          <div class="mini">
            <p class="miniHead">続けて作業できた最長時間(分)</p>
            <div class="mrow"><span class="mlab">束ね</span><span class="mbar hi" style="width: 87%"></span><span class="mval">52.3</span></div>
            <div class="mrow"><span class="mlab">即時</span><span class="mbar" style="width: 64%"></span><span class="mval">38.6</span></div>
          </div>
          <p class="small" data-type="small">10 日間の平均。差はどちらも p &lt; .001</p>
          <p class="p">中断は毎正時の直後に集まり、あいだの 30 分は即時配信の 4 分の 1 になった。作業の負担(NASA-TLX)は差がなかった(p = .082)。</p>
        </div>
      </div>
      <div data-col="3">
        <div class="sec">
          <p class="secHead mincho"><span>4</span>代わりに失ったもの</p>
          <div class="mini">
            <p class="miniHead">急ぎの連絡への返信(分)</p>
            <div class="mrow"><span class="mlab">束ね</span><span class="mbar hi" style="width: 80%"></span><span class="mval">24.1</span></div>
            <div class="mrow"><span class="mlab">即時</span><span class="mbar" style="width: 23%"></span><span class="mval">6.8</span></div>
          </div>
          <p class="p">返信は <b>17 分遅れた</b>(p &lt; .001)。毎正時まで届かないぶんが、そのまま遅れになる。見逃した件数に差はなかった(p = .14)。</p>
        </div>
        <div class="sec">
          <p class="secHead mincho"><span>5</span>結論と今後</p>
          <p class="p">束ね配信は中断を減らすが、急ぎの連絡だけは即時に通す例外の通り道と組みにする必要がある。今後は 3 か月の追跡で効果が続くかを確かめ、束ねる間隔(30 分・1 時間・2 時間)を比べる。</p>
        </div>
      </div>
    </div>
    <div class="foot">
      <p class="refs" data-type="refs"><b>文献</b> [1] 佐伯・山野(2024)働き方情報学会誌 18(2) / [2] 森下(2023)北陵大学情報学部紀要 9 / [3] 青木・西村(2022)情報と組織 31(4)。研究・著者・所属・数値・文献はすべて説明用の架空のもの</p>
      <div class="qr"><div class="qrBox"><i style="left: 6px; top: 6px"></i><i style="right: 6px; top: 6px"></i><i style="left: 6px; bottom: 6px"></i></div><p class="qrText" data-type="qrText">予稿と<br>データの置き場</p></div>
    </div>
  </div>
</div>