Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Participant Flow — Numbers at Every Stage, and Why People Were Dropped

Flow
Design
Participant Flow — Numbers at Every Stage, and Why People Were Dropped
140 88

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

participant-flow-exclusions-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.1 KB 
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.

Spec

1.3 KB

/ai/designs/participant-flow-exclusions.json 

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

Files

pattern.html

4.8 KB

/designs/participant-flow-exclusions/pattern.html — The artboard itself, font subset included — open it and this picture draws.

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

font.css

3.7 KB

/designs/participant-flow-exclusions/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Old Mincho 700
 * font    Zen Kaku Gothic New 400;500;700
 * chars   91 (16bdba8be25c5467)
 *
 * pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
 * 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
 * その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
 */

@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-0.woff2) format('woff2');
  unicode-range: U+20, U+30-39, U+2014, U+3000-3001, U+3044, U+3046, U+304b-304c, U+3051-3052, U+305f-3060, U+3066-306b, U+306d-306e, U+307b-307c, U+307e-307f, U+3089-308a, U+308c, U+308f, U+3092, U+3094, U+3099, U+30fb, U+4e2d, U+4eba, U+4ed8, U+4ef6, U+4f11, U+4f5c, U+4fe1, U+5206, U+5272, U+52a0, U+52d5, U+52df, U+5373, U+53c2, U+53d7, U+5404, U+5408, U+540d, U+5916, U+5bfe, U+5c71, U+6570, U+65ad, U+65e5, U+6642, U+671f, U+672a, U+675f, U+6761, U+6790, U+696d, U+6bb5, U+6d41, U+6e80, U+70ba, U+7121, U+7406, U+7531, U+7570, U+77e5, U+7fa4, U+8005, U+8131, U+89e3, U+8c61, U+8f9e, U+9000, U+901a, U+914d, U+91ce, U+9577, U+9664, U+96c6, U+96e2, U+ff08-ff09;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+20, U+30-39, U+2014, U+3000-3001, U+3044, U+3046, U+304b-304c, U+3051-3052, U+305f-3060, U+3066-306b, U+306d-306e, U+307b-307c, U+307e-307f, U+3089-308a, U+308c, U+308f, U+3092, U+3094, U+3099, U+30fb, U+4e2d, U+4eba, U+4ed8, U+4ef6, U+4f11, U+4f5c, U+4fe1, U+5206, U+5272, U+52a0, U+52d5, U+52df, U+5373, U+53c2, U+53d7, U+5404, U+5408, U+540d, U+5916, U+5bfe, U+5c71, U+6570, U+65ad, U+65e5, U+6642, U+671f, U+672a, U+675f, U+6761, U+6790, U+696d, U+6bb5, U+6d41, U+6e80, U+70ba, U+7121, U+7406, U+7531, U+7570, U+77e5, U+7fa4, U+8005, U+8131, U+89e3, U+8c61, U+8f9e, U+9000, U+901a, U+914d, U+91ce, U+9577, U+9664, U+96c6, U+96e2, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+20, U+30-39, U+2014, U+3000-3001, U+3044, U+3046, U+304b-304c, U+3051-3052, U+305f-3060, U+3066-306b, U+306d-306e, U+307b-307c, U+307e-307f, U+3089-308a, U+308c, U+308f, U+3092, U+3094, U+3099, U+30fb, U+4e2d, U+4eba, U+4ed8, U+4ef6, U+4f11, U+4f5c, U+4fe1, U+5206, U+5272, U+52a0, U+52d5, U+52df, U+5373, U+53c2, U+53d7, U+5404, U+5408, U+540d, U+5916, U+5bfe, U+5c71, U+6570, U+65ad, U+65e5, U+6642, U+671f, U+672a, U+675f, U+6761, U+6790, U+696d, U+6bb5, U+6d41, U+6e80, U+70ba, U+7121, U+7406, U+7531, U+7570, U+77e5, U+7fa4, U+8005, U+8131, U+89e3, U+8c61, U+8f9e, U+9000, U+901a, U+914d, U+91ce, U+9577, U+9664, U+96c6, U+96e2, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-3.woff2) format('woff2');
  unicode-range: U+20, U+30-39, U+2014, U+3000-3001, U+3044, U+3046, U+304b-304c, U+3051-3052, U+305f-3060, U+3066-306b, U+306d-306e, U+307b-307c, U+307e-307f, U+3089-308a, U+308c, U+308f, U+3092, U+3094, U+3099, U+30fb, U+4e2d, U+4eba, U+4ed8, U+4ef6, U+4f11, U+4f5c, U+4fe1, U+5206, U+5272, U+52a0, U+52d5, U+52df, U+5373, U+53c2, U+53d7, U+5404, U+5408, U+540d, U+5916, U+5bfe, U+5c71, U+6570, U+65ad, U+65e5, U+6642, U+671f, U+672a, U+675f, U+6761, U+6790, U+696d, U+6bb5, U+6d41, U+6e80, U+70ba, U+7121, U+7406, U+7531, U+7570, U+77e5, U+7fa4, U+8005, U+8131, U+89e3, U+8c61, U+8f9e, U+9000, U+901a, U+914d, U+91ce, U+9577, U+9664, U+96c6, U+96e2, U+ff08-ff09;
}

Notes

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「研究・技術発表」の 1 枚で、架空の研究「通知の束ね配信と作業の中断」の発表として描いてある。研究・著者・所属・数値・文献はすべて架空。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it. One of the nine research-talk pieces, drawn as the talk for a fictional study; the study, authors, affiliations, figures and references are all invented.

Techniques

Apply to