Deck

The Research Nine — From the Title to the References, One Talk and Its Poster

Title, question and method, participant flow, results table, figure, limitations, references and a code slide, plus an A0 poster of the same study

9 slides

Take it with you JSON However many slides, one action. They are joined in order, so the sequence survives the paste.

Reading order

01 Cover / Title Research Title — Title, Authors and Affiliations Tied by Superscript Numbers
02 Method Question, Hypothesis, Method — The Study's Frame in Three Bands
03 Method Participant Flow — Numbers at Every Stage, and Why People Were Dropped
04 Comparison Results Table — Mean ± SD and p, Significant Rows in Bold
05 Article Figure With Caption — One Large Figure, a Numbered Caption Beside It
06 Summary Limitations and Next Steps — What We Don't Know, and How to Find Out
07 Appendix References — Numbered in Order of Citation, With Author, Year, Title and Venue
08 Article Code Slide — Line Numbers, Highlighted Lines, Notes Tied by Number
09 Article Conference Poster (A0 Portrait) — Title, One-Line Finding, Three Columns

About this deck

この一式について / 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.

# Research Title — Title, Authors and Affiliations Tied by Superscript Numbers Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 96 right 140 bottom 72 left 140 ## Type (px against a 1920px canvas) venue 24px / 400 / tracking 0.06em / tabular numerals title 68px / 700 / leading 1.45 / tabular numerals subtitle 32px / 500 / tabular numerals authors 34px / 500 / tabular numerals affiliation 24px / 400 / leading 1.7 / tabular numerals contact 22px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Phrase the title as the question or the finding — 'a study on X' tells nobody what was learned - The subtitle names the design and the sample (randomised trial, 148 people) - Tie authors to affiliations with superscripts; do not repeat an affiliation per author - Serif for the title only; gothic from the authors down Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/research-title-authors/pattern.html. --- # Question, Hypothesis, Method — The Study's Frame in Three Bands Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 500 / tracking 0.12em / tabular numerals title 50px / 700 / leading 1.4 / tabular numerals label 40px / 700 / tabular numerals text 32px / 500 / leading 1.6 / tabular numerals itemLabel 24px / 700 / tabular numerals item 26px / 400 / leading 1.5 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Put a number in the hypothesis (a 30% drop, within 30 minutes) — otherwise the results cannot be checked against it - Write the method as four items — design, sample, period, main measure — not prose - Labels share one column width so all content starts on one line - Question and hypothesis, two lines each at most Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/question-hypothesis-method/pattern.html. --- # Participant Flow — Numbers at Every Stage, and Why People Were Dropped Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 500 / tracking 0.12em / tabular numerals title 50px / 700 / leading 1.4 / tabular numerals stage 20px / 700 / tracking 0.08em / tabular numerals n 32px / 700 / tabular numerals why 20px / 400 / leading 1.6 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Give the count at every stage, and make each drop match the excluded number - State every exclusion reason with its count — unexplained exclusions look like cherry-picking - Main path shaded, exclusions outlined, so the eye can follow the path - Lines bend at right angles and never cross Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/participant-flow-exclusions/pattern.html. --- # Results Table — Mean ± SD and p, Significant Rows in Bold Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 500 / tracking 0.12em / tabular numerals title 50px / 700 / leading 1.4 / tabular numerals tableCaption 26px / 400 / tabular numerals colHead 22px / 500 / tabular numerals item 26px / 700 / tabular numerals value 26px / 700 / tabular numerals diff 26px / 700 / tabular numerals p 26px / 700 / tabular numerals note 20px / 400 / leading 1.7 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Three rules — top, under the header, bottom — and no vertical rules - Bold the significant rows and state the threshold (p < .05) under the table - Give the difference its direction and confidence interval - Put the table number and each group's n in the title above Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/results-table-significance/pattern.html. --- # Figure With Caption — One Large Figure, a Numbered Caption Beside It Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 500 / tracking 0.12em / tabular numerals title 50px / 700 / leading 1.4 / tabular numerals captionNo 30px / 700 / tabular numerals caption 24px / 400 / leading 1.75 / tabular numerals captionNote 20px / 400 / leading 1.7 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Start the caption with the figure number, then what was measured, then what it shows - Label series at the line ends, not in a legend - Two annotations at most — only the points the caption refers to - Method and sample size go small under the caption Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/figure-with-caption/pattern.html. --- # Limitations and Next Steps — What We Don't Know, and How to Find Out Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 500 / tracking 0.12em / tabular numerals title 50px / 700 / leading 1.4 / tabular numerals colHead 36px / 700 / tabular numerals num 30px / 700 / tabular numerals itemHead 30px / 700 / tabular numerals itemBody 24px / 400 / leading 1.6 / tabular numerals bottom 26px / 500 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Pair by number: next step 1 addresses limitation 1 - Each limitation is a heading and one line — no long excuses - Only the next-steps heading takes the accent - End with one line on what the result already means in practice Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/limitations-future-work/pattern.html. --- # References — Numbered in Order of Citation, With Author, Year, Title and Venue Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 500 / tracking 0.12em / tabular numerals title 50px / 700 / leading 1.4 / tabular numerals refNo 26px / 700 / tabular numerals ref 26px / 400 / leading 1.6 / tabular numerals note 20px / 400 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Number in order of citation — alphabetical order makes the reader hunt for [3] - One citation style throughout - Fix the number column so wrapped lines align with the text - Only the venue in bold Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/references-numbered/pattern.html. --- # Code Slide — Line Numbers, Highlighted Lines, Notes Tied by Number Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 88 right 140 bottom 56 left 140 ## Type (px against a 1920px canvas) kicker 22px / 500 / tracking 0.12em / tabular numerals title 50px / 700 / leading 1.4 / tabular numerals lineNo 20px / 400 / leading 1.5 / tabular numerals code 24px / 400 / leading 1.5 / tabular numerals markNo 24px / 700 / tabular numerals noteLine 20px / 400 / tabular numerals noteHead 28px / 700 / tabular numerals noteBody 22px / 400 / leading 1.6 / tabular numerals folio 16px / 400 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Highlight three lines at most — explain everything and nothing stands out - Notes say what the line does and why — not a reading of the code - Twenty lines at most, at 24px or more; elide the rest with an ellipsis - Show the line number on both sides so the eye can travel back and forth Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/code-highlight-lines/pattern.html. --- # Conference Poster (A0 Portrait) — Title, One-Line Finding, Three Columns Produce one A4 page to the following specification. - Canvas 1191 × 1684 - Margin top 72 right 66 bottom 60 left 66 - 3 equal columns, gap 42 ## Type (px against a 1191px canvas) venue 16px / 400 / tracking 0.06em / tabular numerals title 57px / 700 / leading 1.35 / tabular numerals authors 24px / 500 / tabular numerals affiliation 18px / 400 / tabular numerals finding 33px / 700 / leading 1.45 / tabular numerals secHead 32px / 700 / tabular numerals body 20px / 400 / leading 1.75 / tabular numerals item 20px / 400 / leading 1.55 / tabular numerals flow 20px / 400 / tabular numerals miniHead 20px / 700 / tabular numerals miniLabel 16px / 400 / tabular numerals miniValue 20px / 700 / tabular numerals small 15px / 400 / leading 1.6 / tabular numerals refs 14px / 400 / leading 1.7 / tabular numerals qrText 15px / 400 / leading 1.6 / tabular numerals ## Colour Ground #FBFAF6 / Surface #F1EFE8 / Ink #1E1E1C / Muted #6B6A64 / Accent #8A2B1E / Rule #DCD8CC ## Constraints — dropping these breaks it - Put the finding right under the title in one line — it is all a passer-by takes away - Number the sections so the three columns read from top left to bottom right - Show numbers as figures; do not restate them in prose - A-series sizes share one ratio: compose at A4 portrait proportions and scale to A0 when printing Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/poster-a0-three-column/pattern.html.

# Research Title — Title, Authors and Affiliations Tied by Superscript Numbers 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: - Phrase the title as the question or the finding — 'a study on X' tells nobody what was learned - The subtitle names the design and the sample (randomised trial, 148 people) - Tie authors to affiliations with superscripts; do not repeat an affiliation per author - Serif for the title only; gothic from the authors down --- # Question, Hypothesis, Method — The Study's Frame in Three Bands 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: - Put a number in the hypothesis (a 30% drop, within 30 minutes) — otherwise the results cannot be checked against it - Write the method as four items — design, sample, period, main measure — not prose - Labels share one column width so all content starts on one line - Question and hypothesis, two lines each at most --- # Participant Flow — Numbers at Every Stage, and Why People Were Dropped 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: - Give the count at every stage, and make each drop match the excluded number - State every exclusion reason with its count — unexplained exclusions look like cherry-picking - Main path shaded, exclusions outlined, so the eye can follow the path - Lines bend at right angles and never cross --- # Results Table — Mean ± SD and p, Significant Rows in Bold 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: - Three rules — top, under the header, bottom — and no vertical rules - Bold the significant rows and state the threshold (p < .05) under the table - Give the difference its direction and confidence interval - Put the table number and each group's n in the title above --- # Figure With Caption — One Large Figure, a Numbered Caption Beside It 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: - Start the caption with the figure number, then what was measured, then what it shows - Label series at the line ends, not in a legend - Two annotations at most — only the points the caption refers to - Method and sample size go small under the caption --- # Limitations and Next Steps — What We Don't Know, and How to Find Out 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: - "Pair by number: next step 1 addresses limitation 1" - Each limitation is a heading and one line — no long excuses - Only the next-steps heading takes the accent - End with one line on what the result already means in practice --- # References — Numbered in Order of Citation, With Author, Year, Title and Venue 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: - Number in order of citation — alphabetical order makes the reader hunt for [3] - One citation style throughout - Fix the number column so wrapped lines align with the text - Only the venue in bold --- # Code Slide — Line Numbers, Highlighted Lines, Notes Tied by Number 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: - Highlight three lines at most — explain everything and nothing stands out - Notes say what the line does and why — not a reading of the code - Twenty lines at most, at 24px or more; elide the rest with an ellipsis - Show the line number on both sides so the eye can travel back and forth --- # Conference Poster (A0 Portrait) — Title, One-Line Finding, Three Columns 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: - Put the finding right under the title in one line — it is all a passer-by takes away - Number the sections so the three columns read from top left to bottom right - Show numbers as figures; do not restate them in prose - "A-series sizes share one ratio: compose at A4 portrait proportions and scale to A0 when printing"

<!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>

<!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>

<!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>

<!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">< .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>< .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>< .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 < .05。数値は説明用の架空のもの</p> </div> <div class="folio"> <p data-type="folio">山野ほか　通知の束ね配信と作業の中断</p> <p>04</p> </div> </div> </div>

<!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>

<!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>

<!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>

<!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[]) => 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(() => {</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(() => 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>

<!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 < .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 < .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>

The Research Nine — From the Title to the References, One Talk and Its Poster

Reading order

About this deck

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

Take it with you

Everything

Prompt

Spec

Files

01 research-title-authors/pattern.html

02 question-hypothesis-method/pattern.html

03 participant-flow-exclusions/pattern.html

04 results-table-significance/pattern.html

05 figure-with-caption/pattern.html

06 limitations-future-work/pattern.html

07 references-numbered/pattern.html

08 code-highlight-lines/pattern.html

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