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

Deck

System Project Deck — From RFP to Cutover

Sixteen slides from the cover to the appendix door, drawn to sit together — two palettes, light and dark, and nothing else

16 slides · Slide 16:9

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

Reading order

  1. 01 Cover / Title Project Deck Cover — Subject Above the Issue Record Project Deck Cover — Subject Above the Issue Record
  2. 02 Agenda Agenda — Each Section Carries What It Asks For Agenda — Each Section Carries What It Asks For
  3. 03 Scope Scope Boundary — In and Out at the Same Size Scope Boundary — In and Out at the Same Size
  4. 04 Section divider Phase Divider — The Whole Process, With a Mark on Now Phase Divider — The Whole Process, With a Mark on Now
  5. 05 Architecture System Architecture — Three Tiers, One of Them New System Architecture — Three Tiers, One of Them New
  6. 06 Requirements Requirement Responses — Only the Alternative Is Filled Requirement Responses — Only the Alternative Is Filled
  7. 07 Team / Structure Team Structure — One Place to Decide, One Joint Desk Team Structure — One Place to Decide, One Joint Desk
  8. 08 Roadmap Phase Schedule — Length Is Duration, Overlap Is Hand-off Phase Schedule — Length Is Duration, Overlap Is Hand-off
  9. 09 Pricing Estimate Breakdown — Share of Cost Before the Total Estimate Breakdown — Share of Cost Before the Total
  10. 10 Testing / Quality Test Plan — Each Phase Paired With What Accepts It Test Plan — Each Phase Paired With What Accepts It
  11. 11 Change Control Change Control — Business Days on Every Step, and Where a Refusal Goes Change Control — Business Days on Every Step, and Where a Refusal Goes
  12. 12 Status Report Status Report — No Traffic Lights, a Remedy Column Instead Status Report — No Traffic Lights, a Remedy Column Instead
  13. 13 Testing / Quality Defect Status — Read the Blocking Cell, Not the Total Defect Status — Read the Blocking Cell, Not the Total
  14. 14 Migration / Cutover Cutover Runbook — The Rollback Call Has a Clock Time Cutover Runbook — The Rollback Call Has a Clock Time
  15. 15 Summary Closing Slide — Three Decisions, Each With a Date Closing Slide — Three Decisions, Each With a Date
  16. 16 Appendix Appendix Door — What Is Inside, as a Numbered Grid Appendix Door — What Is Inside, as a Numbered Grid

About this deck

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

システム開発案件で、提案から本番切替までに出す資料の骨格を 16 枚で通したもの。並びは 目次の版が言う章の順 —— 範囲の線引き、構成と実現方式、体制・工程・費用、移行 —— に 沿っていて、定例で出す進捗と品質の 2 枚は工程の後ろ、切替の前に置いてある。

濃地は 4 枚だけ。表紙・中扉・付録扉という話の区切りと、投影せず手元で読む切替手順。 それ以外は淡地で、配色は 2 組のどちらかに揃っているので、どの 1 枚を差し替えても 隣と喧嘩しない。

The skeleton of a system-development engagement, from proposal to cutover, in sixteen slides. The order follows the chapters the agenda slide names — scope, architecture, team and schedule and cost, migration — with the two recurring reports (status, quality) placed after the plan and before the cutover.

Four slides sit on the dark ground: the cover, the section divider and the appendix door, which mark where the talk turns, and the cutover runbook, which is read on paper rather than projected. Everything else is light, and every slide wears one of the same two palettes, so any one of them can be swapped without arguing with its neighbours.

入っていないもの / What is not here

リスク一覧・課題管理・RACI・方式選定・出荷判定は型で引く（risk-matrix-register、 action-register、raci-matrix、options-tradeoff、release-readiness）。差し替わるのが データで、組版の取り決めは毎回同じなので、版にする意味がない。

Risk register, action log, RACI, option selection and release readiness are executable layouts, not artboards: what changes between projects is the data, never the typesetting.

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

system-project-everything.md

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

Prompt

23.6 KB 
# Project Deck Cover — Subject Above the Issue Record
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 116 right 140 bottom 116 left 140

## Type (px against a 1920px canvas)
doctype  20px / 700 / tracking 0.08em
edition  17px / 400 / tracking 0.04em / tabular numerals
kicker  15px / 500 / tracking 0.3em / uppercase
title  84px / 700 / tracking 0.01em / leading 1.28
lede  20px / 400 / leading 1.9
label  14px / 500 / tracking 0.14em
value  21px / 500 / tabular numerals

## Colour
Ground #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445

## Constraints — dropping these breaks it
- Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold
- The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position
- Colour only the second line of the subject — the first names the project, the second names what this deck covers
- Never pure white on a dark ground — the cover stays on screen longer than any other slide

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/deck-cover-project-brief/pattern.html.

---

# Agenda — Each Section Carries What It Asks For
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 112 right 140 bottom 112 left 140
- 2 equal columns, gap 104

## Type (px against a 1920px canvas)
kicker  15px / 500 / tracking 0.28em / uppercase
title  56px / 700 / tracking 0.01em / leading 1.3
mkey  15px / 500 / tracking 0.12em
mval  17px / 500 / leading 1.65 / tabular numerals
note  17px / 400 / leading 1.9
num  30px / 700 / tabular numerals
name  30px / 500 / leading 1.45
goal  16px / 400 / leading 1.7

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Put the decision each section seeks beside its name — an agenda without it is a timetable, and the room cannot tell how to listen
- Dim the sections you will not cover rather than removing them — removed reads as absent, and sends people hunting in the appendix
- Keep the session facts on the same page as the sections; on a separate slide nobody remembers when the meeting ends
- Two-digit numbers throughout — mixing one and two digits breaks the left edge the list is read 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/agenda-numbered-sections/pattern.html.

---

# Scope Boundary — In and Out at the Same Size
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 108 right 140 bottom 108 left 140
- 2 equal columns, gap 64

## Emphasis
column 1 only, by rule and nothing else

## Type (px against a 1920px canvas)
title  48px / 700 / tracking 0.01em / leading 1.3
lede  19px / 400 / leading 1.8
side  16px / 500 / tracking 0.18em / uppercase
heading  34px / 700 / leading 1.35
item  20px / 500 / leading 1.5
why  16px / 400 / leading 1.75
foot  17px / 500

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Keep the two fields equal — a smaller out-of-scope reads as unimportant and comes back later as "we assumed it was included"
- Match the counts too; three items against seven looks like one side was not thought about
- Give every out-of-scope item a when — without a date it reads as a refusal, not a sequence
- Emphasis is the rule colour alone — fill both fields and the boundary, which is the whole point, disappears

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/scope-in-out-two-fields/pattern.html.

---

# Phase Divider — The Whole Process, With a Mark on Now
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 124 right 140 bottom 124 left 140
- 7 equal columns, gap 24

## Emphasis
column 4 only, by rule + weight and nothing else

## Type (px against a 1920px canvas)
chapter  15px / 500 / tracking 0.3em / uppercase
of  15px / 400 / tracking 0.12em / tabular numerals
num  136px / 700 / leading 1 / tabular numerals
title  68px / 700 / tracking 0.01em / leading 1.3
lede  20px / 400 / leading 1.9
phase  18px / 500
when  14px / 400 / tabular numerals

## Colour
Ground #111722 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445

## Constraints — dropping these breaks it
- Keep the phases equal in width — encoding duration as width reads as slippage
- Mark the current phase with the rule and the weight, no fill — a filled band makes this read as a schedule rather than a divider
- Do not dim the finished phases; an unbroken row is what says the whole process is still in view
- The section number and the phase rail are different axes — never renumber one to match the other

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/phase-divider-step-rail/pattern.html.

---

# System Architecture — Three Tiers, One of Them New
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 104 right 140 bottom 104 left 140

## Emphasis
row 2 only, by fill + rule and nothing else

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 0.01em / leading 1.3
lede  19px / 400 / leading 1.8
tname  24px / 700 / leading 1.4
tnote  15px / 400 / leading 1.6
bname  19px / 500 / leading 1.4
btag  14px / 400
fkey  14px / 500 / tracking 0.14em
fval  17px / 500 / leading 1.6

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building
- Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there
- Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts
- Five boxes per tier. From the sixth on, what the room remembers is the count, not the names
- State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves

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/architecture-3tier-stack/pattern.html.

---

# Requirement Responses — Only the Alternative Is Filled
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 104 right 140 bottom 104 left 140

## Emphasis
row 3 only, by fill + weight and nothing else

## Type (px against a 1920px canvas)
title  44px / 700 / tracking 0.01em / leading 1.3
count  17px / 400 / tabular numerals
col  15px / 500 / tracking 0.12em
rid  19px / 500 / tabular numerals
req  21px / 500 / leading 1.5
verdict  17px / 500
how  17px / 400 / leading 1.7
when  17px / 400
foot  16px / 400 / leading 1.8

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Three verdicts only — met, alternative, next phase. "Met with conditions" gets agreed to without the conditions ever being read
- Fill only the alternative row; filling the met rows makes the whole table emphasis and buries the one row worth discussing
- Keep the means in the same row — sent to an annex, "alternative" travels alone and nobody can say what changed
- If it is an extract, say so beside the title — six of forty-eight is a different slide from six of six
- Carry the client's own requirement IDs unchanged; renumbering costs a lookup in every later exchange

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/requirements-response-table/pattern.html.

---

# Team Structure — One Place to Decide, One Joint Desk
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 100 right 140 bottom 100 left 140

## Emphasis
row 2 only, by fill + rule and nothing else

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 0.01em / leading 1.3
lede  19px / 400 / leading 1.8
role  15px / 500 / tracking 0.12em
who  26px / 700 / leading 1.35
cadence  15px / 400 / tabular numerals
tname  22px / 700 / leading 1.4
tside  14px / 500 / tracking 0.12em
heads  15px / 400 / leading 1.8 / tabular numerals
foot  16px / 400 / leading 1.8

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Name forums, not people — an org chart made of names goes stale the first time someone rotates off
- Fill exactly one desk. Two filled desks means there is no desk
- Give each node its cadence: a monthly decision and a twice-weekly consultation are different organs
- Stop the connector at the outermost team's centre — run it to the margin and the chart implies more teams off-page
- Say who leads each team. A box with no lead is the one nobody claims when it matters

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/team-structure-joint-pmo/pattern.html.

---

# Phase Schedule — Length Is Duration, Overlap Is Hand-off
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 100 right 140 bottom 100 left 140

## Emphasis
row 2 only, by fill and nothing else

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 0.01em / leading 1.3
basis  16px / 400 / tabular numerals
m  14px / 500 / tabular numerals
effort  17px / 500 / tabular numerals
pname  21px / 700 / leading 1.4
powner  14px / 400
foot  16px / 400 / leading 1.8

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Rule every month boundary — a gantt without a scale can only be read as "around March", which is not something anyone can agree to
- Keep the overlaps: they are the hand-off. Butted bars hide the time a later phase needs to start moving
- Outline the client's own work instead of filling it — one fill for both sides erases who is carrying what
- One accent bar, the current one. Add a second colour meaning and you lose the ability to say "now" in colour
- Put the effort figure at the far right; beside the bar it merges with duration, and a long bar reads as a heavy one

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/wbs-gantt-six-phases/pattern.html.

---

# Estimate Breakdown — Share of Cost Before the Total
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 92 right 140 bottom 92 left 140
- 5 equal columns, gap 3

## Emphasis
column 3 only, by fill and nothing else

## Type (px against a 1920px canvas)
title  44px / 700 / tracking 0.01em / leading 1.3
total  17px / 500 / tabular numerals
segName  16px / 500
segPct  20px / 700 / tabular numerals
col  15px / 500 / tracking 0.12em
pname  20px / 700 / leading 1.4
num  19px / 500 / tabular numerals
fkey  14px / 500 / tracking 0.14em
fval  16px / 400 / leading 1.75 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Put the proportional bar above the table — read from the total first, the conversation is about the price, not about where the cost sits
- Give every phase its own rate: with a single blended rate, removing a phase does not recompute, and the negotiation turns into arithmetic
- Keep the client's own effort as a row with no amount — deleted, it reads as "nothing is asked of us"
- Assumptions and swing factors belong on this page; on an annex the total travels alone and is taken as fixed whatever the scope does
- State the expiry — the figure assumes people are held, and an estimate with no expiry is read as a commitment
- Fill one segment, the heaviest. Fill two and "heaviest" stops meaning anything

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/estimate-breakdown-by-phase/pattern.html.

---

# Test Plan — Each Phase Paired With What Accepts It
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 100 right 140 bottom 100 left 140
- 2 equal columns, gap 56

## Emphasis
column 2 only, by fill and nothing else

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 0.01em / leading 1.3
lede  19px / 400 / leading 1.8
label  16px / 500 / tracking 0.18em / uppercase
lv  16px / 700 / tabular numerals
sname  24px / 700 / leading 1.4
sdoc  15px / 400 / leading 1.7
fkey  14px / 500 / tracking 0.14em
fval  17px / 500 / leading 1.6 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Do not draw the V as a diagonal — the shape becomes the subject and the pairing of L2 with T2, which is the point, gets missed
- Equal row counts on both sides; fewer tests than phases means some deliverable has nothing to accept it
- Name who runs each test — "system test" alone does not say who attends and who judges
- Write the acceptance criteria when the left-hand phase is written; decided just before the test, they describe what was built
- Fill only the accepting side; fill both and the slide stops saying who decides

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/test-v-model-paired/pattern.html.

---

# Change Control — Business Days on Every Step, and Where a Refusal Goes
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 92 right 140 bottom 92 left 140
- 5 equal columns, gap 34

## Emphasis
column 3 only, by fill + rule and nothing else

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 0.01em / leading 1.3
lede  19px / 400 / leading 1.8
days  14px / 500 / tracking 0.14em / tabular numerals
sname  28px / 700 / leading 1.4
who  15px / 500
out  15px / 400 / leading 1.7
rname  20px / 700
rtext  16px / 400 / leading 1.75
fkey  14px / 500 / tracking 0.14em
fval  17px / 500 / leading 1.65 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Put business days on every step — a flow with no clock never answers "when", so the team starts building before the answer arrives
- Draw where a refusal goes; with nowhere to go, the same request comes back through intake next month
- Split the judge by size — send everything to one forum and a two-day change waits for a monthly meeting
- Make replanning its own step; when it is not a step, small changes accumulate without ever reaching the schedule
- Fill the one step that stops. The others are work; filling them hides where the waiting happens
- Drop the branch from the judging step's left edge — landing mid-rule makes the heading to its left look like the source

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/change-request-flow-gates/pattern.html.

---

# Status Report — No Traffic Lights, a Remedy Column Instead
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 96 right 140 bottom 96 left 140

## Emphasis
row 3 only, by fill + weight and nothing else

## Type (px against a 1920px canvas)
title  44px / 700 / tracking 0.01em / leading 1.3
period  17px / 400 / tabular numerals
col  15px / 500 / tracking 0.12em
pname  21px / 700 / leading 1.4
pct  20px / 500 / tabular numerals
state  18px / 500
fix  16px / 400 / leading 1.7
fkey  14px / 500 / tracking 0.14em
fval  18px / 500 / leading 1.6 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- No traffic lights — there are six roles and neither red nor amber among them. A word for the state is what survives into the minutes anyway
- Every late row carries its remedy; a delay with no remedy is an announcement, not a report
- Plan as a tick inside the track, actual as the fill — two stacked bars cannot be told apart without reading a legend
- Fill only the row that asks for a decision; filling the late ones too makes "please decide" and "for your information" weigh the same
- Make the track a faint mix of ink, not the surface colour — on a filled row the two would match and the bar would lose its scale

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/status-report-rag-rows/pattern.html.

---

# Defect Status — Read the Blocking Cell, Not the Total
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 92 right 140 bottom 92 left 140

## Emphasis
row 1 only, by fill + weight and nothing else

## Type (px against a 1920px canvas)
title  44px / 700 / tracking 0.01em / leading 1.3
period  17px / 400 / tabular numerals
col  15px / 500 / tracking 0.12em
sev  27px / 700 / leading 1.4
sevNote  14px / 400
n  42px / 700 / tabular numerals
nSoft  31px / 400 / tabular numerals
fkey  14px / 500 / tracking 0.14em
wn  18px / 700 / tabular numerals
wk  13px / 400 / tabular numerals
rule  16px / 400 / leading 1.8

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Never headline the total: "37 open" decides nothing. What decides is the unresolved cell at the top severity
- Define each severity in one line beside it — undefined, high and medium drift between reports
- Rule between the unresolved columns and done; merely adjacent, a large done count makes the unresolved look small
- Keep the done column — without the denominator there is no telling convergence from a test that has barely started
- Trend the open count alone; overlay found and fixed and the room debates the breakdown before answering whether it is converging
- State the gate on this page — kept elsewhere, the table reports a situation rather than supporting a decision

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/defect-severity-status-matrix/pattern.html.

---

# Cutover Runbook — The Rollback Call Has a Clock Time
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 96 right 140 bottom 96 left 140

## Emphasis
row 5 only, by fill + rule and nothing else

## Type (px against a 1920px canvas)
title  44px / 700 / tracking 0.01em / leading 1.3
window  17px / 500 / tabular numerals
time  24px / 700 / tabular numerals
task  22px / 500 / leading 1.5
owner  16px / 400
note  16px / 400 / leading 1.7
fkey  14px / 500 / tracking 0.14em
fval  18px / 500 / leading 1.6 / tabular numerals

## Colour
Ground #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445

## Constraints — dropping these breaks it
- Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night
- Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached
- Put durations in the note instead of making the reader subtract clock times at three in the morning
- State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps
- Always show the fallback date; without one, the rollback decision itself gets postponed

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/cutover-runbook-timeline/pattern.html.

---

# Closing Slide — Three Decisions, Each With a Date
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 120 right 140 bottom 120 left 140

## Type (px against a 1920px canvas)
kicker  15px / 500 / tracking 0.3em / uppercase
title  54px / 700 / tracking 0.01em / leading 1.35
lede  19px / 400 / leading 1.9
n  30px / 700 / tabular numerals
what  27px / 700 / leading 1.45
why  16px / 400 / leading 1.7
due  20px / 500 / tabular numerals
dueNote  14px / 400
next  18px / 500 / leading 1.7 / tabular numerals

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9

## Constraints — dropping these breaks it
- Three asks at most — add a fourth and all of them go home to be considered
- Every date carries what slips if it is missed; a bare date does not tell the reader whether it is a real one
- Cite the chapter for each ask, so someone reading only this page can find the argument without paging back and forth
- Put the next meeting at the foot — a closing page with no next date leaves the deadlines with nothing to land on
- Centre it: this page is a signal rather than a reading. Left-aligned, it reads as one more content slide and gets skimmed

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/closing-decision-request/pattern.html.

---

# Appendix Door — What Is Inside, as a Numbered Grid
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 108 right 140 bottom 108 left 140
- 3 equal columns, gap 24

## Type (px against a 1920px canvas)
kicker  15px / 500 / tracking 0.3em / uppercase
title  54px / 700 / tracking 0.01em / leading 1.3
count  17px / 400 / tabular numerals
id  16px / 700 / tracking 0.14em / tabular numerals
name  25px / 700 / leading 1.4
about  16px / 400 / leading 1.7
pages  14px / 400 / tabular numerals
foot  16px / 400 / leading 1.8

## Colour
Ground #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445

## Constraints — dropping these breaks it
- Tile it. A vertical list makes the appendix look like more reading, and people enter it the way they left the main deck
- One line of contents and a page count per item — a list of titles alone makes people open every one
- Raise the rule only on the items you will actually open; raised everywhere it stops being an index
- Number the appendices on their own series, apart from the chapters — shared numbers send every question to the wrong page
- Say plainly that this is outside the main deck — the appendix door is also the signal that nothing after it gets read aloud

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/appendix-index-grid/pattern.html.

Spec

23.3 KB 
# Project Deck Cover — Subject Above the Issue Record
format: slide-16x9
density: low
layout:
  kind: stack
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 116
    right: 140
    bottom: 116
    left: 140
type:
  doctype:
    size: 20
    weight: 700
    tracking: 0.08em
  edition:
    size: 17
    weight: 400
    tracking: 0.04em
    numeric: tabular
  kicker:
    size: 15
    weight: 500
    tracking: 0.3em
    transform: upper
  title:
    size: 84
    weight: 700
    tracking: 0.01em
    leading: 1.28
  lede:
    size: 20
    weight: 400
    leading: 1.9
  label:
    size: 14
    weight: 500
    tracking: 0.14em
  value:
    size: 21
    weight: 500
    numeric: tabular
colors:
  ground: "#111722"
  surface: "#1A2231"
  ink: "#E9EDF4"
  muted: "#8894A6"
  accent: "#5AA2E8"
  rule: "#2B3445"
rules:
  - Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold
  - "The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position"
  - Colour only the second line of the subject — the first names the project, the second names what this deck covers
  - Never pure white on a dark ground — the cover stays on screen longer than any other slide

---

# Agenda — Each Section Carries What It Asks For
format: slide-16x9
density: medium
layout:
  kind: 2-column
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 112
    right: 140
    bottom: 112
    left: 140
  columns:
    count: 2
    gap: 104
type:
  kicker:
    size: 15
    weight: 500
    tracking: 0.28em
    transform: upper
  title:
    size: 56
    weight: 700
    tracking: 0.01em
    leading: 1.3
  mkey:
    size: 15
    weight: 500
    tracking: 0.12em
  mval:
    size: 17
    weight: 500
    leading: 1.65
    numeric: tabular
  note:
    size: 17
    weight: 400
    leading: 1.9
  num:
    size: 30
    weight: 700
    numeric: tabular
  name:
    size: 30
    weight: 500
    leading: 1.45
  goal:
    size: 16
    weight: 400
    leading: 1.7
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Put the decision each section seeks beside its name — an agenda without it is a timetable, and the room cannot tell how to listen
  - Dim the sections you will not cover rather than removing them — removed reads as absent, and sends people hunting in the appendix
  - Keep the session facts on the same page as the sections; on a separate slide nobody remembers when the meeting ends
  - Two-digit numbers throughout — mixing one and two digits breaks the left edge the list is read down

---

# Scope Boundary — In and Out at the Same Size
format: slide-16x9
density: medium
layout:
  kind: 2-column
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 108
    right: 140
    bottom: 108
    left: 140
  columns:
    count: 2
    gap: 64
  emphasis:
    column: 1
    via:
      - rule
type:
  title:
    size: 48
    weight: 700
    tracking: 0.01em
    leading: 1.3
  lede:
    size: 19
    weight: 400
    leading: 1.8
  side:
    size: 16
    weight: 500
    tracking: 0.18em
    transform: upper
  heading:
    size: 34
    weight: 700
    leading: 1.35
  item:
    size: 20
    weight: 500
    leading: 1.5
  why:
    size: 16
    weight: 400
    leading: 1.75
  foot:
    size: 17
    weight: 500
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Keep the two fields equal — a smaller out-of-scope reads as unimportant and comes back later as "we assumed it was included"
  - Match the counts too; three items against seven looks like one side was not thought about
  - Give every out-of-scope item a when — without a date it reads as a refusal, not a sequence
  - Emphasis is the rule colour alone — fill both fields and the boundary, which is the whole point, disappears

---

# Phase Divider — The Whole Process, With a Mark on Now
format: slide-16x9
density: low
layout:
  kind: timeline
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 124
    right: 140
    bottom: 124
    left: 140
  columns:
    count: 7
    gap: 24
  emphasis:
    column: 4
    via:
      - rule
      - weight
type:
  chapter:
    size: 15
    weight: 500
    tracking: 0.3em
    transform: upper
  of:
    size: 15
    weight: 400
    tracking: 0.12em
    numeric: tabular
  num:
    size: 136
    weight: 700
    leading: 1
    numeric: tabular
  title:
    size: 68
    weight: 700
    tracking: 0.01em
    leading: 1.3
  lede:
    size: 20
    weight: 400
    leading: 1.9
  phase:
    size: 18
    weight: 500
  when:
    size: 14
    weight: 400
    numeric: tabular
colors:
  ground: "#111722"
  ink: "#E9EDF4"
  muted: "#8894A6"
  accent: "#5AA2E8"
  rule: "#2B3445"
rules:
  - Keep the phases equal in width — encoding duration as width reads as slippage
  - Mark the current phase with the rule and the weight, no fill — a filled band makes this read as a schedule rather than a divider
  - Do not dim the finished phases; an unbroken row is what says the whole process is still in view
  - The section number and the phase rail are different axes — never renumber one to match the other

---

# System Architecture — Three Tiers, One of Them New
format: slide-16x9
density: high
layout:
  kind: stack
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 104
    right: 140
    bottom: 104
    left: 140
  emphasis:
    row: 2
    via:
      - fill
      - rule
type:
  title:
    size: 46
    weight: 700
    tracking: 0.01em
    leading: 1.3
  lede:
    size: 19
    weight: 400
    leading: 1.8
  tname:
    size: 24
    weight: 700
    leading: 1.4
  tnote:
    size: 15
    weight: 400
    leading: 1.6
  bname:
    size: 19
    weight: 500
    leading: 1.4
  btag:
    size: 14
    weight: 400
  fkey:
    size: 14
    weight: 500
    tracking: 0.14em
  fval:
    size: 17
    weight: 500
    leading: 1.6
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building
  - Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there
  - Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts
  - Five boxes per tier. From the sixth on, what the room remembers is the count, not the names
  - State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves

---

# Requirement Responses — Only the Alternative Is Filled
format: slide-16x9
density: high
layout:
  kind: table
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 104
    right: 140
    bottom: 104
    left: 140
  emphasis:
    row: 3
    via:
      - fill
      - weight
type:
  title:
    size: 44
    weight: 700
    tracking: 0.01em
    leading: 1.3
  count:
    size: 17
    weight: 400
    numeric: tabular
  col:
    size: 15
    weight: 500
    tracking: 0.12em
  rid:
    size: 19
    weight: 500
    numeric: tabular
  req:
    size: 21
    weight: 500
    leading: 1.5
  verdict:
    size: 17
    weight: 500
  how:
    size: 17
    weight: 400
    leading: 1.7
  when:
    size: 17
    weight: 400
  foot:
    size: 16
    weight: 400
    leading: 1.8
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Three verdicts only — met, alternative, next phase. "Met with conditions" gets agreed to without the conditions ever being read
  - Fill only the alternative row; filling the met rows makes the whole table emphasis and buries the one row worth discussing
  - Keep the means in the same row — sent to an annex, "alternative" travels alone and nobody can say what changed
  - If it is an extract, say so beside the title — six of forty-eight is a different slide from six of six
  - Carry the client's own requirement IDs unchanged; renumbering costs a lookup in every later exchange

---

# Team Structure — One Place to Decide, One Joint Desk
format: slide-16x9
density: medium
layout:
  kind: tree
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 100
    right: 140
    bottom: 100
    left: 140
  emphasis:
    row: 2
    via:
      - fill
      - rule
type:
  title:
    size: 46
    weight: 700
    tracking: 0.01em
    leading: 1.3
  lede:
    size: 19
    weight: 400
    leading: 1.8
  role:
    size: 15
    weight: 500
    tracking: 0.12em
  who:
    size: 26
    weight: 700
    leading: 1.35
  cadence:
    size: 15
    weight: 400
    numeric: tabular
  tname:
    size: 22
    weight: 700
    leading: 1.4
  tside:
    size: 14
    weight: 500
    tracking: 0.12em
  heads:
    size: 15
    weight: 400
    leading: 1.8
    numeric: tabular
  foot:
    size: 16
    weight: 400
    leading: 1.8
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Name forums, not people — an org chart made of names goes stale the first time someone rotates off
  - Fill exactly one desk. Two filled desks means there is no desk
  - "Give each node its cadence: a monthly decision and a twice-weekly consultation are different organs"
  - Stop the connector at the outermost team's centre — run it to the margin and the chart implies more teams off-page
  - Say who leads each team. A box with no lead is the one nobody claims when it matters

---

# Phase Schedule — Length Is Duration, Overlap Is Hand-off
format: slide-16x9
density: high
layout:
  kind: gantt
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 100
    right: 140
    bottom: 100
    left: 140
  emphasis:
    row: 2
    via:
      - fill
type:
  title:
    size: 46
    weight: 700
    tracking: 0.01em
    leading: 1.3
  basis:
    size: 16
    weight: 400
    numeric: tabular
  m:
    size: 14
    weight: 500
    numeric: tabular
  effort:
    size: 17
    weight: 500
    numeric: tabular
  pname:
    size: 21
    weight: 700
    leading: 1.4
  powner:
    size: 14
    weight: 400
  foot:
    size: 16
    weight: 400
    leading: 1.8
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Rule every month boundary — a gantt without a scale can only be read as "around March", which is not something anyone can agree to
  - "Keep the overlaps: they are the hand-off. Butted bars hide the time a later phase needs to start moving"
  - Outline the client's own work instead of filling it — one fill for both sides erases who is carrying what
  - One accent bar, the current one. Add a second colour meaning and you lose the ability to say "now" in colour
  - Put the effort figure at the far right; beside the bar it merges with duration, and a long bar reads as a heavy one

---

# Estimate Breakdown — Share of Cost Before the Total
format: slide-16x9
density: high
layout:
  kind: waterfall
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 92
    right: 140
    bottom: 92
    left: 140
  columns:
    count: 5
    gap: 3
  emphasis:
    column: 3
    via:
      - fill
type:
  title:
    size: 44
    weight: 700
    tracking: 0.01em
    leading: 1.3
  total:
    size: 17
    weight: 500
    numeric: tabular
  segName:
    size: 16
    weight: 500
  segPct:
    size: 20
    weight: 700
    numeric: tabular
  col:
    size: 15
    weight: 500
    tracking: 0.12em
  pname:
    size: 20
    weight: 700
    leading: 1.4
  num:
    size: 19
    weight: 500
    numeric: tabular
  fkey:
    size: 14
    weight: 500
    tracking: 0.14em
  fval:
    size: 16
    weight: 400
    leading: 1.75
    numeric: tabular
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Put the proportional bar above the table — read from the total first, the conversation is about the price, not about where the cost sits
  - "Give every phase its own rate: with a single blended rate, removing a phase does not recompute, and the negotiation turns into arithmetic"
  - Keep the client's own effort as a row with no amount — deleted, it reads as "nothing is asked of us"
  - Assumptions and swing factors belong on this page; on an annex the total travels alone and is taken as fixed whatever the scope does
  - State the expiry — the figure assumes people are held, and an estimate with no expiry is read as a commitment
  - Fill one segment, the heaviest. Fill two and "heaviest" stops meaning anything

---

# Test Plan — Each Phase Paired With What Accepts It
format: slide-16x9
density: medium
layout:
  kind: 2-column
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 100
    right: 140
    bottom: 100
    left: 140
  columns:
    count: 2
    gap: 56
  emphasis:
    column: 2
    via:
      - fill
type:
  title:
    size: 46
    weight: 700
    tracking: 0.01em
    leading: 1.3
  lede:
    size: 19
    weight: 400
    leading: 1.8
  label:
    size: 16
    weight: 500
    tracking: 0.18em
    transform: upper
  lv:
    size: 16
    weight: 700
    numeric: tabular
  sname:
    size: 24
    weight: 700
    leading: 1.4
  sdoc:
    size: 15
    weight: 400
    leading: 1.7
  fkey:
    size: 14
    weight: 500
    tracking: 0.14em
  fval:
    size: 17
    weight: 500
    leading: 1.6
    numeric: tabular
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Do not draw the V as a diagonal — the shape becomes the subject and the pairing of L2 with T2, which is the point, gets missed
  - Equal row counts on both sides; fewer tests than phases means some deliverable has nothing to accept it
  - Name who runs each test — "system test" alone does not say who attends and who judges
  - Write the acceptance criteria when the left-hand phase is written; decided just before the test, they describe what was built
  - Fill only the accepting side; fill both and the slide stops saying who decides

---

# Change Control — Business Days on Every Step, and Where a Refusal Goes
format: slide-16x9
density: medium
layout:
  kind: flow
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 92
    right: 140
    bottom: 92
    left: 140
  columns:
    count: 5
    gap: 34
  emphasis:
    column: 3
    via:
      - fill
      - rule
type:
  title:
    size: 46
    weight: 700
    tracking: 0.01em
    leading: 1.3
  lede:
    size: 19
    weight: 400
    leading: 1.8
  days:
    size: 14
    weight: 500
    tracking: 0.14em
    numeric: tabular
  sname:
    size: 28
    weight: 700
    leading: 1.4
  who:
    size: 15
    weight: 500
  out:
    size: 15
    weight: 400
    leading: 1.7
  rname:
    size: 20
    weight: 700
  rtext:
    size: 16
    weight: 400
    leading: 1.75
  fkey:
    size: 14
    weight: 500
    tracking: 0.14em
  fval:
    size: 17
    weight: 500
    leading: 1.65
    numeric: tabular
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Put business days on every step — a flow with no clock never answers "when", so the team starts building before the answer arrives
  - Draw where a refusal goes; with nowhere to go, the same request comes back through intake next month
  - Split the judge by size — send everything to one forum and a two-day change waits for a monthly meeting
  - Make replanning its own step; when it is not a step, small changes accumulate without ever reaching the schedule
  - Fill the one step that stops. The others are work; filling them hides where the waiting happens
  - Drop the branch from the judging step's left edge — landing mid-rule makes the heading to its left look like the source

---

# Status Report — No Traffic Lights, a Remedy Column Instead
format: slide-16x9
density: high
layout:
  kind: table
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 96
    right: 140
    bottom: 96
    left: 140
  emphasis:
    row: 3
    via:
      - fill
      - weight
type:
  title:
    size: 44
    weight: 700
    tracking: 0.01em
    leading: 1.3
  period:
    size: 17
    weight: 400
    numeric: tabular
  col:
    size: 15
    weight: 500
    tracking: 0.12em
  pname:
    size: 21
    weight: 700
    leading: 1.4
  pct:
    size: 20
    weight: 500
    numeric: tabular
  state:
    size: 18
    weight: 500
  fix:
    size: 16
    weight: 400
    leading: 1.7
  fkey:
    size: 14
    weight: 500
    tracking: 0.14em
  fval:
    size: 18
    weight: 500
    leading: 1.6
    numeric: tabular
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - No traffic lights — there are six roles and neither red nor amber among them. A word for the state is what survives into the minutes anyway
  - Every late row carries its remedy; a delay with no remedy is an announcement, not a report
  - Plan as a tick inside the track, actual as the fill — two stacked bars cannot be told apart without reading a legend
  - Fill only the row that asks for a decision; filling the late ones too makes "please decide" and "for your information" weigh the same
  - Make the track a faint mix of ink, not the surface colour — on a filled row the two would match and the bar would lose its scale

---

# Defect Status — Read the Blocking Cell, Not the Total
format: slide-16x9
density: high
layout:
  kind: matrix
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 92
    right: 140
    bottom: 92
    left: 140
  emphasis:
    row: 1
    via:
      - fill
      - weight
type:
  title:
    size: 44
    weight: 700
    tracking: 0.01em
    leading: 1.3
  period:
    size: 17
    weight: 400
    numeric: tabular
  col:
    size: 15
    weight: 500
    tracking: 0.12em
  sev:
    size: 27
    weight: 700
    leading: 1.4
  sevNote:
    size: 14
    weight: 400
  n:
    size: 42
    weight: 700
    numeric: tabular
  nSoft:
    size: 31
    weight: 400
    numeric: tabular
  fkey:
    size: 14
    weight: 500
    tracking: 0.14em
  wn:
    size: 18
    weight: 700
    numeric: tabular
  wk:
    size: 13
    weight: 400
    numeric: tabular
  rule:
    size: 16
    weight: 400
    leading: 1.8
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - 'Never headline the total: "37 open" decides nothing. What decides is the unresolved cell at the top severity'
  - Define each severity in one line beside it — undefined, high and medium drift between reports
  - Rule between the unresolved columns and done; merely adjacent, a large done count makes the unresolved look small
  - Keep the done column — without the denominator there is no telling convergence from a test that has barely started
  - Trend the open count alone; overlay found and fixed and the room debates the breakdown before answering whether it is converging
  - State the gate on this page — kept elsewhere, the table reports a situation rather than supporting a decision

---

# Cutover Runbook — The Rollback Call Has a Clock Time
format: slide-16x9
density: high
layout:
  kind: timeline
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 96
    right: 140
    bottom: 96
    left: 140
  emphasis:
    row: 5
    via:
      - fill
      - rule
type:
  title:
    size: 44
    weight: 700
    tracking: 0.01em
    leading: 1.3
  window:
    size: 17
    weight: 500
    numeric: tabular
  time:
    size: 24
    weight: 700
    numeric: tabular
  task:
    size: 22
    weight: 500
    leading: 1.5
  owner:
    size: 16
    weight: 400
  note:
    size: 16
    weight: 400
    leading: 1.7
  fkey:
    size: 14
    weight: 500
    tracking: 0.14em
  fval:
    size: 18
    weight: 500
    leading: 1.6
    numeric: tabular
colors:
  ground: "#111722"
  surface: "#1A2231"
  ink: "#E9EDF4"
  muted: "#8894A6"
  accent: "#5AA2E8"
  rule: "#2B3445"
rules:
  - Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night
  - Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached
  - Put durations in the note instead of making the reader subtract clock times at three in the morning
  - State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps
  - Always show the fallback date; without one, the rollback decision itself gets postponed

---

# Closing Slide — Three Decisions, Each With a Date
format: slide-16x9
density: low
layout:
  kind: centered
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 120
    right: 140
    bottom: 120
    left: 140
type:
  kicker:
    size: 15
    weight: 500
    tracking: 0.3em
    transform: upper
  title:
    size: 54
    weight: 700
    tracking: 0.01em
    leading: 1.35
  lede:
    size: 19
    weight: 400
    leading: 1.9
  n:
    size: 30
    weight: 700
    numeric: tabular
  what:
    size: 27
    weight: 700
    leading: 1.45
  why:
    size: 16
    weight: 400
    leading: 1.7
  due:
    size: 20
    weight: 500
    numeric: tabular
  dueNote:
    size: 14
    weight: 400
  next:
    size: 18
    weight: 500
    leading: 1.7
    numeric: tabular
colors:
  ground: "#FFFFFF"
  surface: "#F4F6F9"
  ink: "#131820"
  muted: "#667183"
  accent: "#1F5FA8"
  rule: "#DBE1E9"
rules:
  - Three asks at most — add a fourth and all of them go home to be considered
  - Every date carries what slips if it is missed; a bare date does not tell the reader whether it is a real one
  - Cite the chapter for each ask, so someone reading only this page can find the argument without paging back and forth
  - Put the next meeting at the foot — a closing page with no next date leaves the deadlines with nothing to land on
  - "Centre it: this page is a signal rather than a reading. Left-aligned, it reads as one more content slide and gets skimmed"

---

# Appendix Door — What Is Inside, as a Numbered Grid
format: slide-16x9
density: medium
layout:
  kind: grid
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 108
    right: 140
    bottom: 108
    left: 140
  columns:
    count: 3
    gap: 24
type:
  kicker:
    size: 15
    weight: 500
    tracking: 0.3em
    transform: upper
  title:
    size: 54
    weight: 700
    tracking: 0.01em
    leading: 1.3
  count:
    size: 17
    weight: 400
    numeric: tabular
  id:
    size: 16
    weight: 700
    tracking: 0.14em
    numeric: tabular
  name:
    size: 25
    weight: 700
    leading: 1.4
  about:
    size: 16
    weight: 400
    leading: 1.7
  pages:
    size: 14
    weight: 400
    numeric: tabular
  foot:
    size: 16
    weight: 400
    leading: 1.8
colors:
  ground: "#111722"
  surface: "#1A2231"
  ink: "#E9EDF4"
  muted: "#8894A6"
  accent: "#5AA2E8"
  rule: "#2B3445"
rules:
  - Tile it. A vertical list makes the appendix look like more reading, and people enter it the way they left the main deck
  - One line of contents and a page count per item — a list of titles alone makes people open every one
  - Raise the rule only on the items you will actually open; raised everywhere it stops being an index
  - Number the appendices on their own series, apart from the chapters — shared numbers send every question to the wrong page
  - Say plainly that this is outside the main deck — the appendix door is also the signal that nothing after it gets read aloud

Files

01 deck-cover-project-brief/pattern.html

3.9 KB

/designs/deck-cover-project-brief/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>案件資料の表紙 — 件名の下に発行情報を並べる</title>
<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: #111722;
    --surface: #1A2231;
    --ink: #E9EDF4;      /* 純白にしない — 表紙は最も長く映される 1 枚 */
    --muted: #8894A6;
    --accent: #5AA2E8;
    --rule: #2B3445;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 116px 140px;                 /* → layout.margin */
  }
  /* [data-content] は版面（安全領域）そのもので、中身の外接矩形ではない。
     height:100% で余白と一対一に対応させる。 */
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }

  /* 上端は「この紙が何か」だけ。件名より先に読まれてよい唯一の情報。 */
  .head { display: flex; align-items: baseline; gap: 28px; }
  .doctype {
    font-size: 20px; font-weight: 700; letter-spacing: .08em;
    background: var(--surface); border: 1px solid var(--rule); padding: 12px 26px;
  }
  .edition { font-size: 17px; font-weight: 400; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }

  .subject { align-self: center; display: grid; gap: 34px; max-width: 1180px; }
  .kicker { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
  .title { font-size: 84px; font-weight: 700; line-height: 1.28; letter-spacing: .01em; }
  /* 色は件名の 2 行目だけ。1 行目にも置くとどちらが主語か分からなくなる。 */
  .title em { font-style: normal; color: var(--accent); }
  .lede { font-size: 20px; font-weight: 400; line-height: 1.9; color: var(--muted); }

  /* 発行情報は 4 つで固定する。案件資料は同じ件名で何度も出るので、
     どの版をいつ誰に出したかが表紙で分からないと現物が特定できない。 */
  .foot { border-top: 1px solid var(--rule); padding-top: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; }
  .label { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .value { font-size: 21px; font-weight: 500; margin-top: 14px; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <p class="doctype" data-type="doctype">提案書</p>
      <p class="edition" data-type="edition">第 1.2 版 ／ 2026.09.15 改訂</p>
    </div>

    <div class="subject">
      <p class="kicker" data-type="kicker">RFP RESPONSE</p>
      <h1 class="title" data-type="title">受発注システムの刷新<br><em>第 1 期 実施方針</em></h1>
      <p class="lede" data-type="lede">現行の受注業務を止めないことを前提に、対象範囲・体制・工程・移行手順をまとめています。</p>
    </div>

    <div class="foot">
      <div>
        <p class="label" data-type="label">提出先</p>
        <p class="value" data-type="value">株式会社 ○○商事 御中</p>
      </div>
      <div>
        <p class="label">提出日</p>
        <p class="value">2026 年 9 月 15 日</p>
      </div>
      <div>
        <p class="label">文書番号</p>
        <p class="value">PRP-2026-0915-02</p>
      </div>
      <div>
        <p class="label">作成</p>
        <p class="value">システム開発本部</p>
      </div>
    </div>
  </div>
</div>

02 agenda-numbered-sections/pattern.html

5.2 KB

/designs/agenda-numbered-sections/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>目次 — 章ごとに「決めたいこと」を添える</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

  .artboard {
    width: 1920px; height: 1080px;
    background: var(--ground); color: var(--ink);
    padding: 112px 140px;                 /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-columns: 1fr 2.4fr; gap: 104px; }

  /* 左は「この場で何をするか」。右の一覧より先に読ませたいので列を分ける。 */
  .side { display: grid; grid-template-rows: auto 1fr auto; gap: 56px; }
  /* 開催条件は目次と同じ面に置く。別紙にすると「何時までの会か」が
     分からないまま章が進み、付録に入れた章まで読み上げることになる。 */
  .meta { align-self: center; display: grid; grid-template-columns: 88px 1fr; gap: 18px 24px; margin: 0; }
  .mkey { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
  .mval { font-size: 17px; font-weight: 500; line-height: 1.65; margin: 0; font-variant-numeric: tabular-nums; }
  .kicker { font-size: 15px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); }
  .title { font-size: 56px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; margin-top: 26px; }
  .note {
    font-size: 17px; font-weight: 400; line-height: 1.9; color: var(--muted);
    background: var(--surface); padding: 30px 32px; border-left: 3px solid var(--accent);
  }

  /* 右は章の一覧。番号・章名・決めたいことの 3 列で、行の高さを揃える。 */
  .list { display: grid; align-content: center; }
  .item { display: grid; grid-template-columns: 96px 1fr 420px; align-items: baseline; gap: 36px; padding: 30px 0; border-bottom: 1px solid var(--rule); }
  .item:first-child { border-top: 1px solid var(--rule); }
  .num { font-size: 30px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
  .name { font-size: 30px; font-weight: 500; line-height: 1.45; }
  /* 章ごとに「この章で決めたいこと」を添える。目次が予定表ではなく議事の骨格になる。 */
  .goal { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); }
  /* 今日扱わない章は薄くする。消すと「資料に無い」と読まれるので、残したまま沈める。 */
  .item[data-later] .num,
  .item[data-later] .name { color: var(--muted); }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="side" data-col="1">
      <div>
        <p class="kicker" data-type="kicker">AGENDA</p>
        <h1 class="title" data-type="title">本日<br>ご説明する範囲</h1>
      </div>
      <dl class="meta">
        <dt class="mkey" data-type="mkey">日時</dt>
        <dd class="mval" data-type="mval">2026.09.15 ／ 14:00 - 15:15</dd>
        <dt class="mkey">場所</dt>
        <dd class="mval">御社 会議室 B ／ 遠隔併用</dd>
        <dt class="mkey">出席</dt>
        <dd class="mval">情報システム部・営業推進部<br>弊社 3 名</dd>
      </dl>
      <p class="note" data-type="note">1 〜 4 章を本編として 60 分、5 章以降は付録に収めています。ご質問は章の切れ目で伺います。</p>
    </div>

    <div class="list" data-col="2">
      <div class="item">
        <p class="num" data-type="num">01</p>
        <p class="name" data-type="name">現行業務の課題と前提</p>
        <p class="goal" data-type="goal">課題の認識が合っているかを確認します</p>
      </div>
      <div class="item">
        <p class="num">02</p>
        <p class="name">対象範囲の線引き</p>
        <p class="goal">第 1 期に含める業務をここで確定します</p>
      </div>
      <div class="item">
        <p class="num">03</p>
        <p class="name">システム構成と実現方式</p>
        <p class="goal">既存連携の方式についてご意見をいただきます</p>
      </div>
      <div class="item">
        <p class="num">04</p>
        <p class="name">体制・工程・費用</p>
        <p class="goal">要員の確保時期についてご判断をお願いします</p>
      </div>
      <div class="item" data-later>
        <p class="num">05</p>
        <p class="name">移行方針（参考）</p>
        <p class="goal">次回、移行計画として改めてご説明します</p>
      </div>
      <div class="item" data-later>
        <p class="num">06</p>
        <p class="name">付録：要求一覧への回答</p>
        <p class="goal">お渡しのみ。この場では読み上げません</p>
      </div>
    </div>
  </div>
</div>

03 scope-in-out-two-fields/pattern.html

4.3 KB

/designs/scope-in-out-two-fields/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>スコープの線引き — 対象と対象外を同じ大きさで並べる</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: grid; gap: 18px; }
  .title { font-size: 48px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }

  /* 2 面を等幅にする。対象外を小さくすると「大した話ではない」と読まれ、
     後から必ず「入っていると思っていた」に化ける。 */
  .fields { align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .field { border-top: 3px solid var(--rule); padding-top: 34px; }
  .field[data-emphasis] { border-top-color: var(--accent); }

  .side { font-size: 16px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .field[data-emphasis] .side { color: var(--accent); }
  .heading { font-size: 34px; font-weight: 700; line-height: 1.35; margin-top: 16px; }

  .items { list-style: none; padding: 0; margin-top: 30px; display: grid; gap: 2px; }
  .items li { background: var(--surface); padding: 22px 26px; font-size: 20px; font-weight: 500; line-height: 1.5; }
  .field[data-out] .items li { background: transparent; border-bottom: 1px solid var(--rule); color: var(--muted); }
  .why { font-size: 16px; font-weight: 400; line-height: 1.75; color: var(--muted); margin-top: 26px; }

  .foot { border-top: 1px solid var(--rule); padding-top: 26px; font-size: 17px; font-weight: 500; }
  .foot em { font-style: normal; color: var(--accent); }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">第 1 期の対象範囲</h1>
      <p class="lede" data-type="lede">この 1 枚で合意いただきたいのは、どちらの面に何が載るかではなく、その間に線が引かれていることです。</p>
    </div>

    <div class="fields">
      <section class="field" data-col="1" data-emphasis="rule">
        <p class="side" data-type="side">IN SCOPE</p>
        <h2 class="heading" data-type="heading">第 1 期で作るもの</h2>
        <ul class="items">
          <li data-type="item">受注登録・受注照会</li>
          <li>出荷指示までの一連の処理</li>
          <li>在庫システムとの即時連携</li>
          <li>主要 9 帳票の出力</li>
          <li>現行データの初期移行</li>
        </ul>
        <p class="why" data-type="why">受注業務を止めずに移せる最小の単位。ここを切ると移行の山が 1 回で済みます。</p>
      </section>

      <section class="field" data-col="2" data-out>
        <p class="side">OUT OF SCOPE</p>
        <h2 class="heading">第 1 期では作らないもの</h2>
        <ul class="items">
          <li>モバイルからの受注登録</li>
          <li>請求・入金の消込</li>
          <li>販売実績の分析画面</li>
          <li>統合対象の 4 帳票</li>
          <li>倉庫側の作業端末</li>
        </ul>
        <p class="why">やらないのではなく、第 1 期に含めません。第 2 期の計画に日付付きで載せています。</p>
      </section>
    </div>

    <p class="foot" data-type="foot">この線を動かす依頼は、<em>工程・費用の再見積とあわせて</em>ご相談させてください。</p>
  </div>
</div>

04 phase-divider-step-rail/pattern.html

3.8 KB

/designs/phase-divider-step-rail/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>工程の中扉 — 全工程の並びの上に現在地を打つ</title>
<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: #111722;
    --ink: #E9EDF4;
    --muted: #8894A6;
    --accent: #5AA2E8;
    --rule: #2B3445;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .top { display: flex; align-items: baseline; gap: 30px; }
  .chapter { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
  .of { font-size: 15px; font-weight: 400; letter-spacing: .12em; color: var(--muted); font-variant-numeric: tabular-nums; }

  .subject { align-self: center; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 56px; }
  .num { font-size: 136px; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
  .title { font-size: 68px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .lede { font-size: 20px; font-weight: 400; line-height: 1.9; color: var(--muted); margin-top: 24px; max-width: 980px; }

  /* 全工程を等幅で並べ、現在地の 1 つだけを塗る。中扉が「章の切れ目」ではなく
     「工程のどこにいるか」を答える紙になる。 */
  .rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; }
  .step { border-top: 2px solid var(--rule); padding-top: 22px; }
  .step[data-here] { border-top-color: var(--accent); }
  .phase { font-size: 18px; font-weight: 500; color: var(--muted); }
  .step[data-here] .phase { color: var(--accent); font-weight: 700; }
  .when { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 10px; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="top">
      <p class="chapter" data-type="chapter">SECTION</p>
      <p class="of" data-type="of">03 / 06</p>
    </div>

    <div class="subject">
      <p class="num" data-type="num">03</p>
      <div>
        <h1 class="title" data-type="title">システム構成と実現方式</h1>
        <p class="lede" data-type="lede">要件定義で固めた業務要件を、どの構成で実現するかをご説明します。既存の在庫システムとの連携方式が、この章でご判断いただきたい点です。</p>
      </div>
    </div>

    <div class="rail">
      <div class="step" data-col="1"><p class="phase" data-type="phase">企画</p><p class="when" data-type="when">〜 2026.06</p></div>
      <div class="step" data-col="2"><p class="phase">RFP・提案</p><p class="when">2026.07 - 09</p></div>
      <div class="step" data-col="3"><p class="phase">要件定義</p><p class="when">2026.10 - 12</p></div>
      <div class="step" data-col="4" data-here data-emphasis="rule weight"><p class="phase">設計</p><p class="when">2027.01 - 03</p></div>
      <div class="step" data-col="5"><p class="phase">開発・テスト</p><p class="when">2027.04 - 09</p></div>
      <div class="step" data-col="6"><p class="phase">移行</p><p class="when">2027.10 - 11</p></div>
      <div class="step" data-col="7"><p class="phase">運用</p><p class="when">2027.12 〜</p></div>
    </div>
  </div>
</div>

05 architecture-3tier-stack/pattern.html

6.0 KB

/designs/architecture-3tier-stack/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: grid; gap: 16px; }
  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }

  /* 層は 3 つまで。4 つ目を足した瞬間、聞き手は層の名前を覚えるほうに気を取られる。 */
  .stack { align-self: center; display: grid; gap: 22px; }
  .tier { display: grid; grid-template-columns: 236px 1fr; align-items: center; gap: 40px; border: 1px solid var(--rule); padding: 32px 36px; }
  /* 新しく作る層だけを塗る。既存を塗ると「全部作り直す」と読まれる。 */
  .tier[data-emphasis] { background: var(--surface); border-color: var(--accent); }

  .tname { font-size: 24px; font-weight: 700; line-height: 1.4; }
  .tnote { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--muted); margin-top: 8px; }
  .tier[data-emphasis] .tname { color: var(--accent); }

  .boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .box { border: 1px solid var(--rule); background: var(--ground); padding: 22px 20px; }
  /* 既存システムは点線にしない — 点線は「未確定」と読まれる。文字色だけ落とす。 */
  .box[data-keep] .bname { color: var(--muted); }
  .bname { font-size: 19px; font-weight: 500; line-height: 1.4; }
  .btag { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 10px; }

  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 26px; }
  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .fval { font-size: 17px; font-weight: 500; line-height: 1.6; margin-top: 10px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">システム構成（第 1 期）</h1>
      <p class="lede" data-type="lede">すべて新しく作るのは中段の 1 層だけです。上下は既存の資産を使い、足すのは受注の画面 2 つとデータベースに限ります。</p>
    </div>

    <div class="stack">
      <section class="tier" data-row="1">
        <div>
          <p class="tname" data-type="tname">利用者層</p>
          <p class="tnote" data-type="tnote">既存の端末・認証をそのまま使う</p>
        </div>
        <div class="boxes">
          <div class="box"><p class="bname" data-type="bname">受注入力画面</p><p class="btag" data-type="btag">新規</p></div>
          <div class="box"><p class="bname">受注照会画面</p><p class="btag">新規</p></div>
          <div class="box" data-keep><p class="bname">社内ポータル</p><p class="btag">既存</p></div>
          <div class="box" data-keep><p class="bname">認証基盤</p><p class="btag">既存</p></div>
          <div class="box" data-keep><p class="bname">帳票ビューア</p><p class="btag">既存</p></div>
        </div>
      </section>

      <section class="tier" data-row="2" data-emphasis="fill rule">
        <div>
          <p class="tname">業務アプリ層</p>
          <p class="tnote">第 1 期の開発の中心</p>
        </div>
        <div class="boxes">
          <div class="box"><p class="bname">受注管理</p><p class="btag">新規</p></div>
          <div class="box"><p class="bname">出荷指示</p><p class="btag">新規</p></div>
          <div class="box"><p class="bname">在庫引当</p><p class="btag">新規</p></div>
          <div class="box"><p class="bname">帳票出力</p><p class="btag">新規</p></div>
          <div class="box"><p class="bname">監査ログ</p><p class="btag">新規</p></div>
        </div>
      </section>

      <section class="tier" data-row="3">
        <div>
          <p class="tname">データ・連携層</p>
          <p class="tnote">既存の連携基盤を経由する</p>
        </div>
        <div class="boxes">
          <div class="box"><p class="bname">受注データベース</p><p class="btag">新規</p></div>
          <div class="box" data-keep><p class="bname">在庫システム</p><p class="btag">既存</p></div>
          <div class="box" data-keep><p class="bname">会計システム</p><p class="btag">既存</p></div>
          <div class="box" data-keep><p class="bname">連携基盤</p><p class="btag">既存</p></div>
          <div class="box" data-keep><p class="bname">マスタ管理</p><p class="btag">既存</p></div>
        </div>
      </section>
    </div>

    <div class="foot">
      <div>
        <p class="fkey" data-type="fkey">連携方式</p>
        <p class="fval" data-type="fval">在庫は同期、会計は日次バッチ</p>
      </div>
      <div>
        <p class="fkey">稼働環境</p>
        <p class="fval">既存のプライベートクラウドに相乗り</p>
      </div>
      <div>
        <p class="fkey">この章でのご判断</p>
        <p class="fval">在庫連携を同期にする前提の可否</p>
      </div>
    </div>
  </div>
</div>

06 requirements-response-table/pattern.html

5.5 KB

/designs/requirements-response-table/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>要求一覧への回答 — 代替提案の行だけを塗る</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .count { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

  .table { align-self: center; width: 100%; }
  /* 要求番号・要求事項・判定・実現方式・工程。判定列は固定幅にして、
     縦に読んだとき「満たす／代替」の並びが揃って見えるようにする。 */
  .row { display: grid; grid-template-columns: 132px 1fr 132px 1.15fr 168px; align-items: baseline; gap: 34px; padding: 26px 22px; border-bottom: 1px solid var(--rule); }
  .row:first-child { border-top: 1px solid var(--rule); }
  .row.head-row { padding-top: 18px; padding-bottom: 18px; border-bottom-color: var(--ink); }
  .col { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }

  .rid { font-size: 19px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
  .req { font-size: 21px; font-weight: 500; line-height: 1.5; }
  .how { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--muted); }
  .when { font-size: 17px; font-weight: 400; color: var(--muted); }
  /* 判定は 3 値。「満たす」を塗ると表が真っ青になって読み所を失うので、
     塗るのは代替提案の行だけにする。 */
  .verdict { font-size: 17px; font-weight: 500; }
  .row[data-alt] { background: var(--surface); }
  .row[data-alt] .verdict { color: var(--accent); font-weight: 700; }
  .row[data-out] .req,
  .row[data-out] .verdict { color: var(--muted); }

  .foot { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 24px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">要求一覧への回答（抜粋）</h1>
      <p class="count" data-type="count">全 48 件中 6 件を抜粋 ／ 全件は付録 A-1</p>
    </div>

    <div class="table">
      <div class="row head-row">
        <p class="col" data-type="col">要求番号</p>
        <p class="col">要求事項</p>
        <p class="col">判定</p>
        <p class="col">実現方式</p>
        <p class="col">対応工程</p>
      </div>

      <div class="row" data-row="1">
        <p class="rid" data-type="rid">RQ-012</p>
        <p class="req" data-type="req">受注登録を 3 画面以内で完了できること</p>
        <p class="verdict" data-type="verdict">満たす</p>
        <p class="how" data-type="how">入力の 2 画面化＋確認 1 画面</p>
        <p class="when" data-type="when">基本設計</p>
      </div>
      <div class="row" data-row="2">
        <p class="rid">RQ-018</p>
        <p class="req">既存の在庫システムと即時に連携すること</p>
        <p class="verdict">満たす</p>
        <p class="how">連携基盤経由の同期呼び出し</p>
        <p class="when">基本設計</p>
      </div>
      <div class="row" data-row="3" data-alt data-emphasis="fill weight">
        <p class="rid">RQ-023</p>
        <p class="req">帳票をすべて現行と同一の様式で出力すること</p>
        <p class="verdict">代替提案</p>
        <p class="how">主要 9 帳票は同一。残り 4 帳票は統合を提案</p>
        <p class="when">要件定義</p>
      </div>
      <div class="row" data-row="4">
        <p class="rid">RQ-031</p>
        <p class="req">同時接続 400 名で応答 2 秒以内</p>
        <p class="verdict">満たす</p>
        <p class="how">性能試験で確認、結果を報告</p>
        <p class="when">総合テスト</p>
      </div>
      <div class="row" data-row="5">
        <p class="rid">RQ-040</p>
        <p class="req">操作履歴を 5 年間保持すること</p>
        <p class="verdict">満たす</p>
        <p class="how">監査ログを別領域へ日次で退避</p>
        <p class="when">基本設計</p>
      </div>
      <div class="row" data-row="6" data-out>
        <p class="rid">RQ-044</p>
        <p class="req">モバイル端末からの受注登録</p>
        <p class="verdict">第 2 期</p>
        <p class="how">第 1 期は参照のみ。登録は次期で対応</p>
        <p class="when">対象外</p>
      </div>
    </div>

    <p class="foot" data-type="foot">判定は「満たす／代替提案／第 2 期」の 3 値のみ。条件付きで満たす、は使いません — 条件が読まれないまま合意された扱いになるためです。</p>
  </div>
</div>

07 team-structure-joint-pmo/pattern.html

5.7 KB

/designs/team-structure-joint-pmo/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: grid; gap: 16px; }
  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }

  .chart { align-self: center; display: grid; justify-items: center; }

  .node { border: 1px solid var(--rule); padding: 24px 34px; text-align: center; background: var(--ground); }
  .role { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
  .who { font-size: 26px; font-weight: 700; line-height: 1.35; margin-top: 10px; }
  .cadence { font-size: 15px; font-weight: 400; color: var(--muted); margin-top: 10px; font-variant-numeric: tabular-nums; }

  /* 頂点は「決める場」。人の名前ではなく、決議が出る会議体を置く。 */
  .top { min-width: 520px; }
  /* 合同 PMO は 1 つだけ。窓口が 2 つある体制図は、実際には窓口が無い。 */
  .joint { min-width: 720px; background: var(--surface); border-color: var(--accent); }
  .joint .role,
  .joint .who { color: var(--accent); }

  .drop { width: 1px; height: 46px; background: var(--rule); }
  /* 渡り線は端の枝の中心で止める。版面の端まで引くと、4 つの外側にも
     何かあるように読まれる。列幅は (100% - gap*3)/4 なので、
     両端の半分ぶん = その列幅ちょうどを引いた長さが端から端になる。 */
  .bar { width: calc(75% + 24px); height: 1px; background: var(--rule); }
  .legs { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; justify-items: center; }

  .teams { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  /* 枝はチーム名に直接刺す。ここに罫を足すと、渡り線と平行な線が 2 本になり
     どちらが枝でどちらが囲みなのか読めなくなる。 */
  .team { padding: 22px 4px 0; }
  .tname { font-size: 22px; font-weight: 700; line-height: 1.4; }
  .tside { font-size: 14px; font-weight: 500; letter-spacing: .12em; color: var(--muted); margin-top: 12px; }
  .heads { font-size: 15px; font-weight: 400; line-height: 1.8; color: var(--muted); margin-top: 14px; font-variant-numeric: tabular-nums; }

  .foot { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 24px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">推進体制</h1>
      <p class="lede" data-type="lede">決める場を 1 つ、合同の窓口を 1 つに絞っています。作業チームからの相談はすべて合同 PMO を通します。</p>
    </div>

    <div class="chart">
      <div class="node top" data-row="1">
        <p class="role" data-type="role">意思決定</p>
        <p class="who" data-type="who">ステアリングコミッティ</p>
        <p class="cadence" data-type="cadence">月 1 回 ／ 御社役員・弊社責任者</p>
      </div>
      <div class="drop"></div>
      <div class="node joint" data-row="2" data-emphasis="fill rule">
        <p class="role">日々の窓口・課題の一次受け</p>
        <p class="who">合同 PMO</p>
        <p class="cadence">週 2 回 ／ 御社 2 名・弊社 2 名</p>
      </div>
      <div class="drop"></div>
      <div class="bar"></div>
      <div class="legs">
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
      </div>
      <div class="teams">
        <section class="team" data-row="3">
          <p class="tname" data-type="tname">業務チーム</p>
          <p class="tside" data-type="tside">御社 主管</p>
          <p class="heads" data-type="heads">営業推進部 4 名<br>要件確定・受入判定</p>
        </section>
        <section class="team">
          <p class="tname">開発チーム</p>
          <p class="tside">弊社 主管</p>
          <p class="heads">設計 3 名・実装 8 名<br>設計から結合まで</p>
        </section>
        <section class="team">
          <p class="tname">基盤チーム</p>
          <p class="tside">合同</p>
          <p class="heads">御社 1 名・弊社 2 名<br>環境・連携・移行</p>
        </section>
        <section class="team">
          <p class="tname">品質チーム</p>
          <p class="tside">弊社 主管</p>
          <p class="heads">2 名<br>テスト計画・不具合管理</p>
        </section>
      </div>
    </div>

    <p class="foot" data-type="foot">要員の氏名と稼働率は付録 B に記載しています。この図には会議体と役割だけを載せ、人の入れ替えで図が古くならないようにしています。</p>
  </div>
</div>

08 wbs-gantt-six-phases/pattern.html

7.7 KB

/designs/wbs-gantt-six-phases/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>工程表 — 帯の長さを期間に、重なりを引き継ぎに使う</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .basis { font-size: 16px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

  .chart { align-self: center; display: grid; gap: 0; }
  /* 左に工程名と担当、右に 12 か月分の格子。月の境界は罫で引き、
     帯は格子の上に置く。目盛りの無いガントは「だいたい」にしか読めない。 */
  .line { display: grid; grid-template-columns: 300px 1fr 152px; align-items: center; gap: 28px; }
  .months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .m { font-size: 14px; font-weight: 500; color: var(--muted); text-align: center; padding-bottom: 14px; border-left: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
  .m:last-child { border-right: 1px solid var(--rule); }

  .row { padding: 15px 0; border-bottom: 1px solid var(--rule); }
  .row:first-of-type { border-top: 1px solid var(--rule); }
  .pname { font-size: 21px; font-weight: 700; line-height: 1.4; }
  .powner { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 6px; }
  .track { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; height: 44px; }
  .cell { height: 100%; border-left: 1px solid var(--rule); }
  .cell:last-child { border-right: 1px solid var(--rule); }
  .bar { grid-row: 1; height: 26px; background: var(--muted); align-self: center; margin: 0 3px; }
  /* 現在地の工程だけ accent。塗り分けを増やすと、どれが今かを色で言えなくなる。 */
  .bar[data-now] { background: var(--accent); }
  /* 御社側の作業は地に罫。弊社の帯と同じ塗りにすると、負荷の偏りが見えない。 */
  .bar[data-client] { background: var(--surface); border: 1px solid var(--muted); }
  .effort { font-size: 17px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

  .foot { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 24px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">工程表（第 1 期）</h1>
      <p class="basis" data-type="basis">2026.10 〜 2027.09 ／ 稼働は 2027.11 を想定</p>
    </div>

    <div class="chart">
      <div class="line">
        <div></div>
        <div class="months">
          <p class="m" data-type="m">10</p><p class="m">11</p><p class="m">12</p>
          <p class="m">01</p><p class="m">02</p><p class="m">03</p>
          <p class="m">04</p><p class="m">05</p><p class="m">06</p>
          <p class="m">07</p><p class="m">08</p><p class="m">09</p>
        </div>
        <p class="effort" data-type="effort">人月</p>
      </div>

      <div class="line row" data-row="1">
        <div><p class="pname" data-type="pname">要件定義</p><p class="powner" data-type="powner">合同 ／ 御社主管</p></div>
        <div class="track">
          <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
          <div class="bar" data-client style="grid-column: 1 / 4"></div>
        </div>
        <p class="effort">14</p>
      </div>

      <div class="line row" data-row="2" data-emphasis="fill">
        <div><p class="pname">基本設計</p><p class="powner">弊社 ／ 御社レビュー</p></div>
        <div class="track">
          <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
          <div class="bar" data-now style="grid-column: 3 / 7"></div>
        </div>
        <p class="effort">22</p>
      </div>

      <div class="line row" data-row="3">
        <div><p class="pname">詳細設計・実装</p><p class="powner">弊社</p></div>
        <div class="track">
          <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
          <div class="bar" style="grid-column: 6 / 11"></div>
        </div>
        <p class="effort">58</p>
      </div>

      <div class="line row" data-row="4">
        <div><p class="pname">結合・総合テスト</p><p class="powner">弊社 ／ 御社立会</p></div>
        <div class="track">
          <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
          <div class="bar" style="grid-column: 9 / 12"></div>
        </div>
        <p class="effort">26</p>
      </div>

      <div class="line row" data-row="5">
        <div><p class="pname">受入テスト</p><p class="powner">御社</p></div>
        <div class="track">
          <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
          <div class="bar" data-client style="grid-column: 11 / 13"></div>
        </div>
        <p class="effort">8</p>
      </div>

      <div class="line row" data-row="6">
        <div><p class="pname">移行・切替準備</p><p class="powner">合同</p></div>
        <div class="track">
          <div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
          <div class="bar" style="grid-column: 10 / 13"></div>
        </div>
        <p class="effort">12</p>
      </div>
    </div>

    <p class="foot" data-type="foot">帯の重なりは引き継ぎ期間です。設計と実装、テストと移行準備はそれぞれ 1 か月重ねています。重なりを削ると、後工程の立ち上がりがその分だけ遅れます。</p>
  </div>
</div>

09 estimate-breakdown-by-phase/pattern.html

7.6 KB

/designs/estimate-breakdown-by-phase/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>見積の内訳 — 総額より先に構成比を読ませる</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .total { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .total b { font-size: 30px; font-weight: 700; letter-spacing: .01em; }

  .body { align-self: center; display: grid; gap: 40px; }

  /* 積み上げの帯を表より先に置く。総額だけを読む紙にしないための順序で、
     どの工程が重いかが数字を追う前に決まる。 */
  .stack { display: grid; grid-template-columns: 12.33fr 19.38fr 40.46fr 18.14fr 9.69fr; gap: 3px; }
  .seg { height: 76px; background: color-mix(in srgb, var(--ink) 12%, transparent); display: grid; align-content: center; padding: 0 20px; }
  /* 塗るのはいちばん重い工程 1 つだけ。2 つ塗ると「重い」の意味が薄まる。 */
  .seg[data-emphasis] { background: var(--accent); }
  .segName { font-size: 16px; font-weight: 500; }
  .segPct { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .seg[data-emphasis] .segName,
  .seg[data-emphasis] .segPct { color: var(--ground); }

  .table { width: 100%; }
  /* 工程・人月・単価・金額・構成比。単価は工程ごとに出す —— 平均単価 1 つだと
     工程を削ったときの再計算が合わない。 */
  .row { display: grid; grid-template-columns: 1fr 130px 200px 240px 150px; align-items: baseline; gap: 34px; padding: 19px 22px; border-bottom: 1px solid var(--rule); }
  .row:first-child { border-top: 1px solid var(--rule); }
  .row.head-row { padding: 14px 22px; border-bottom-color: var(--ink); }
  .col { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); text-align: right; }
  .col:first-child { text-align: left; }

  .pname { font-size: 20px; font-weight: 700; line-height: 1.4; }
  .num { font-size: 19px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .num[data-soft] { color: var(--muted); font-weight: 400; }
  /* 御社側の工数は金額に入れないが、行としては残す。
     消すと「こちらは何もしなくてよい」と読まれる。 */
  .row[data-client] .pname { color: var(--muted); font-weight: 500; }
  .row.sum { border-bottom: 2px solid var(--ink); background: var(--surface); }
  .row.sum .pname,
  .row.sum .num { font-weight: 700; }

  .foot { display: grid; grid-template-columns: 1.25fr 1.25fr .9fr; gap: 56px; border-top: 1px solid var(--rule); padding-top: 24px; }
  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .fval { font-size: 16px; font-weight: 400; line-height: 1.75; color: var(--ink); margin-top: 10px; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">見積の内訳（第 1 期）</h1>
      <p class="total" data-type="total">弊社分 合計 <b>136,200</b> 千円（税別）／ 132 人月</p>
    </div>

    <div class="body">
      <div class="stack">
        <div class="seg" data-col="1">
          <p class="segName" data-type="segName">要件定義</p>
          <p class="segPct" data-type="segPct">12.3%</p>
        </div>
        <div class="seg" data-col="2">
          <p class="segName">基本設計</p>
          <p class="segPct">19.4%</p>
        </div>
        <div class="seg" data-col="3" data-emphasis="fill">
          <p class="segName">詳細設計・実装</p>
          <p class="segPct">40.5%</p>
        </div>
        <div class="seg" data-col="4">
          <p class="segName">結合・総合テスト</p>
          <p class="segPct">18.1%</p>
        </div>
        <div class="seg" data-col="5">
          <p class="segName">移行・切替</p>
          <p class="segPct">9.7%</p>
        </div>
      </div>

      <div class="table">
        <div class="row head-row">
          <p class="col" data-type="col">工程</p>
          <p class="col">人月</p>
          <p class="col">単価（千円／人月）</p>
          <p class="col">金額（千円）</p>
          <p class="col">構成比</p>
        </div>

        <div class="row">
          <p class="pname" data-type="pname">要件定義</p>
          <p class="num" data-type="num">14</p>
          <p class="num">1,200</p>
          <p class="num">16,800</p>
          <p class="num" data-soft>12.3%</p>
        </div>
        <div class="row">
          <p class="pname">基本設計</p>
          <p class="num">22</p>
          <p class="num">1,200</p>
          <p class="num">26,400</p>
          <p class="num" data-soft>19.4%</p>
        </div>
        <div class="row">
          <p class="pname">詳細設計・実装</p>
          <p class="num">58</p>
          <p class="num">950</p>
          <p class="num">55,100</p>
          <p class="num" data-soft>40.5%</p>
        </div>
        <div class="row">
          <p class="pname">結合・総合テスト</p>
          <p class="num">26</p>
          <p class="num">950</p>
          <p class="num">24,700</p>
          <p class="num" data-soft>18.1%</p>
        </div>
        <div class="row">
          <p class="pname">移行・切替</p>
          <p class="num">12</p>
          <p class="num">1,100</p>
          <p class="num">13,200</p>
          <p class="num" data-soft>9.7%</p>
        </div>
        <div class="row sum">
          <p class="pname">弊社分 合計</p>
          <p class="num">132</p>
          <p class="num" data-soft>—</p>
          <p class="num">136,200</p>
          <p class="num" data-soft>100.0%</p>
        </div>
        <div class="row" data-client>
          <p class="pname">受入テスト（御社ご担当）</p>
          <p class="num" data-soft>8</p>
          <p class="num" data-soft>—</p>
          <p class="num" data-soft>見積外</p>
          <p class="num" data-soft>—</p>
        </div>
      </div>
    </div>

    <div class="foot">
      <div>
        <p class="fkey" data-type="fkey">前提</p>
        <p class="fval" data-type="fval">対象範囲は 2 章の「第 1 期で作るもの」5 項目。帳票は主要 9 本、連携は在庫・会計の 2 系統。</p>
      </div>
      <div>
        <p class="fkey">この金額が動く要因</p>
        <p class="fval">統合対象 4 帳票を個別に残す判断（＋約 6,800 千円）／ 在庫連携を非同期に変更（△ 約 3,200 千円）。</p>
      </div>
      <div>
        <p class="fkey">有効期限</p>
        <p class="fval">2026.11.30 まで。要員の確保を前提とするため。</p>
      </div>
    </div>
  </div>
</div>

10 test-v-model-paired/pattern.html

5.7 KB

/designs/test-v-model-paired/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>テスト計画 — 作る工程と受け入れる試験を行で対にする</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: grid; gap: 16px; }
  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }

  /* 左右を等幅にし、同じ行に「作る工程」と「それを受け入れる試験」を置く。
     V 字を斜めに描くと、対応関係が図の形の話になって読み落とされる。 */
  .pairs { align-self: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
  .side { display: grid; align-content: start; }
  .label { font-size: 16px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-bottom: 20px; }
  .side[data-emphasis] .label { color: var(--accent); }

  .step { display: grid; grid-template-columns: 54px 1fr; gap: 24px; align-items: baseline; padding: 24px 26px; border-top: 1px solid var(--rule); }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .side[data-emphasis] .step { background: var(--surface); }
  .lv { font-size: 16px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
  .side[data-emphasis] .lv { color: var(--accent); }
  .sname { font-size: 24px; font-weight: 700; line-height: 1.4; }
  .sdoc { font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 8px; }

  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 26px; }
  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .fval { font-size: 17px; font-weight: 500; line-height: 1.6; margin-top: 10px; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">テスト計画 — 工程と試験の対応</h1>
      <p class="lede" data-type="lede">左で決めたことを、同じ行の試験で受け入れます。受入基準は左を書いた時点で作り、試験の直前に決めません。</p>
    </div>

    <div class="pairs">
      <section class="side" data-col="1">
        <p class="label" data-type="label">WHAT WE BUILD</p>
        <div class="step">
          <p class="lv" data-type="lv">L1</p>
          <div>
            <p class="sname" data-type="sname">要件定義</p>
            <p class="sdoc" data-type="sdoc">業務要件一覧・受入基準（御社承認）</p>
          </div>
        </div>
        <div class="step">
          <p class="lv">L2</p>
          <div>
            <p class="sname">基本設計</p>
            <p class="sdoc">画面・帳票・連携インタフェース定義</p>
          </div>
        </div>
        <div class="step">
          <p class="lv">L3</p>
          <div>
            <p class="sname">詳細設計</p>
            <p class="sdoc">処理仕様・データ設計</p>
          </div>
        </div>
        <div class="step">
          <p class="lv">L4</p>
          <div>
            <p class="sname">実装</p>
            <p class="sdoc">ソースコード・単体試験項目</p>
          </div>
        </div>
      </section>

      <section class="side" data-col="2" data-emphasis="fill">
        <p class="label">WHAT ACCEPTS IT</p>
        <div class="step">
          <p class="lv">T1</p>
          <div>
            <p class="sname">受入テスト</p>
            <p class="sdoc">御社実施 ／ 4 週間・判定は業務チーム</p>
          </div>
        </div>
        <div class="step">
          <p class="lv">T2</p>
          <div>
            <p class="sname">総合テスト</p>
            <p class="sdoc">弊社実施・御社立会 ／ 性能と連携を含む</p>
          </div>
        </div>
        <div class="step">
          <p class="lv">T3</p>
          <div>
            <p class="sname">結合テスト</p>
            <p class="sdoc">弊社実施 ／ 既存システムとの接続を含む</p>
          </div>
        </div>
        <div class="step">
          <p class="lv">T4</p>
          <div>
            <p class="sname">単体テスト</p>
            <p class="sdoc">弊社実施 ／ 網羅率は分岐 80% を基準</p>
          </div>
        </div>
      </section>
    </div>

    <div class="foot">
      <div>
        <p class="fkey" data-type="fkey">不具合の管理</p>
        <p class="fval" data-type="fval">合同 PMO が 1 本の台帳で管理</p>
      </div>
      <div>
        <p class="fkey">受入判定の期限</p>
        <p class="fval">2027.09.30 ／ 移行判断の 4 週間前</p>
      </div>
      <div>
        <p class="fkey">御社にお願いする稼働</p>
        <p class="fval">受入テスト 4 週間 ／ 実務担当 6 名</p>
      </div>
    </div>
  </div>
</div>

11 change-request-flow-gates/pattern.html

6.8 KB

/designs/change-request-flow-gates/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>変更管理 — 各段に営業日を与え、否認の行き先まで描く</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: grid; gap: 16px; }
  .title { font-size: 46px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .lede { font-size: 19px; font-weight: 400; line-height: 1.8; color: var(--muted); }

  .flow { align-self: center; display: grid; gap: 0; }

  /* 5 段を等幅で並べ、間に山形を挟む。段を大小に振ると、
     どの段で時間を使うかが幅の話になってしまう。 */
  .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; }
  .step { border: 1px solid var(--rule); padding: 34px 28px 38px; background: var(--ground); }
  /* 判定の段だけを塗る。ここが唯一「止まる」段で、他は作業の段だから。 */
  .step[data-emphasis] { background: var(--surface); border-color: var(--accent); }

  .days { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .step[data-emphasis] .days { color: var(--accent); }
  .sname { font-size: 28px; font-weight: 700; line-height: 1.4; margin-top: 14px; }
  .step[data-emphasis] .sname { color: var(--accent); }
  .who { font-size: 15px; font-weight: 500; color: var(--muted); margin-top: 14px; }
  .out { font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 10px; }

  /* 山形は段と段の隙間に描く。矢印を線で引くと、線の意味を説明する時間が要る。 */
  .chev { width: 0; height: 0; align-self: center; justify-self: center;
          border-top: 11px solid transparent; border-bottom: 11px solid transparent;
          border-left: 13px solid var(--rule); }
  .steps { grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr; }

  /* 否認の行き先。描かない否認は、同じ要求が翌月また受付に戻ってくる。 */
  .branch { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr 34px 1fr; }
  /* 枝は判定の段の左端から L 字で落とす。渡り線の途中に落とすと、
     その左に置いた見出しのほうが分岐の出どころに見える。 */
  .drop { grid-column: 5; justify-self: start; width: 1px; height: 44px; background: var(--rule); }
  .reject { grid-column: 5 / 10; border-top: 1px solid var(--rule); padding-top: 26px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: baseline; }
  .rname { font-size: 20px; font-weight: 700; }
  .rtext { font-size: 16px; font-weight: 400; line-height: 1.75; color: var(--muted); }

  .foot { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 56px; border-top: 1px solid var(--rule); padding-top: 24px; }
  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .fval { font-size: 17px; font-weight: 500; line-height: 1.65; margin-top: 10px; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">変更要求の扱い</h1>
      <p class="lede" data-type="lede">受付から反映まで、各段に営業日を置いています。合計 10 営業日で結論が出ない要求は、そのまま第 2 期の候補に送ります。</p>
    </div>

    <div class="flow">
      <div class="steps">
        <section class="step" data-col="1">
          <p class="days" data-type="days">1 営業日</p>
          <p class="sname" data-type="sname">受付</p>
          <p class="who" data-type="who">合同 PMO</p>
          <p class="out" data-type="out">要求票に採番し、台帳へ記載</p>
        </section>
        <div class="chev"></div>
        <section class="step" data-col="2">
          <p class="days">4 営業日</p>
          <p class="sname">影響評価</p>
          <p class="who">開発チーム・基盤チーム</p>
          <p class="out">工数・工程・他機能への影響を算定</p>
        </section>
        <div class="chev"></div>
        <section class="step" data-col="3" data-emphasis="fill rule">
          <p class="days">3 営業日</p>
          <p class="sname">判定</p>
          <p class="who">合同 PMO（20 人日以上はステアリングコミッティ）</p>
          <p class="out">承認・否認・保留のいずれかを記録</p>
        </section>
        <div class="chev"></div>
        <section class="step" data-col="4">
          <p class="days">2 営業日</p>
          <p class="sname">計画の改訂</p>
          <p class="who">合同 PMO</p>
          <p class="out">工程表と見積を改訂。版数を上げる</p>
        </section>
        <div class="chev"></div>
        <section class="step" data-col="5">
          <p class="days">工程に依存</p>
          <p class="sname">反映</p>
          <p class="who">担当チーム</p>
          <p class="out">設計書の改訂から実装・試験まで</p>
        </section>
      </div>

      <div class="branch">
        <div class="drop"></div>
        <div class="reject">
          <p class="rname" data-type="rname">否認・保留のとき</p>
          <p class="rtext" data-type="rtext">第 2 期の候補一覧へ、判定日と理由を付けて移します。差し戻しはしません —— 行き先の無い否認は、同じ要求が翌月また受付に戻ってくるためです。</p>
        </div>
      </div>
    </div>

    <div class="foot">
      <div>
        <p class="fkey" data-type="fkey">現在の受付状況</p>
        <p class="fval" data-type="fval">受付 3 件 ／ 評価中 2 件 ／ 判定待ち 1 件</p>
      </div>
      <div>
        <p class="fkey">承認済みの累計</p>
        <p class="fval">7 件 ／ 工期 +3 週・費用 +8,400 千円</p>
      </div>
      <div>
        <p class="fkey">この手順を通さない変更</p>
        <p class="fval">ありません。文言の修正も台帳に載せます</p>
      </div>
    </div>
  </div>
</div>

12 status-report-rag-rows/pattern.html

6.5 KB

/designs/status-report-rag-rows/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>進捗報告 — 信号の色を使わず、手当ての欄で危険を示す</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .period { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

  .table { align-self: center; width: 100%; }
  /* 工程・予定・実績・進み具合・状態・手当て。進み具合は帯で、状態は語で出す。 */
  .row { display: grid; grid-template-columns: 300px 104px 104px 1fr 148px 1.05fr; align-items: center; gap: 30px; padding: 24px 22px; border-bottom: 1px solid var(--rule); }
  .row:first-child { border-top: 1px solid var(--rule); }
  .row.head-row { padding: 16px 22px; border-bottom-color: var(--ink); }
  .col { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }

  .pname { font-size: 21px; font-weight: 700; line-height: 1.4; }
  .pct { font-size: 20px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .pct[data-plan] { color: var(--muted); }

  /* 予定を罫の枠、実績を塗りで重ねる。2 本の帯を上下に並べると、
     どちらがどちらか凡例を読まないと決まらない。 */
  /* 溝は面ではなく ink の薄い混色。塗った行の上でも面と同じ色にならず、
     帯がどこまで伸びうるのかが読める。 */
  .meter { position: relative; height: 22px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .meter i { position: absolute; top: 0; bottom: 0; left: 0; display: block; background: var(--muted); }
  .meter u { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
  .row[data-emphasis] .meter i { background: var(--accent); }

  /* 状態は 3 語だけ。信号の色は使わない — 役割色は 6 つで、赤も黄も無い。
     色が足りないから語で書くのではなく、語で書いたほうが議事録に残る。 */
  .state { font-size: 18px; font-weight: 500; }
  .row[data-emphasis] { background: var(--surface); }
  .row[data-emphasis] .state { color: var(--accent); font-weight: 700; }
  .fix { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); }
  .row[data-emphasis] .fix { color: var(--ink); }

  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 24px; }
  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .fval { font-size: 18px; font-weight: 500; line-height: 1.6; margin-top: 10px; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">進捗報告（第 18 週）</h1>
      <p class="period" data-type="period">2027.02.01 - 02.05 ／ 次回報告 02.12</p>
    </div>

    <div class="table">
      <div class="row head-row">
        <p class="col" data-type="col">工程</p>
        <p class="col">予定</p>
        <p class="col">実績</p>
        <p class="col">進み具合</p>
        <p class="col">状態</p>
        <p class="col">手当て</p>
      </div>

      <div class="row" data-row="1">
        <p class="pname" data-type="pname">基本設計</p>
        <p class="pct" data-plan data-type="pct">100%</p>
        <p class="pct">100%</p>
        <p class="meter"><i style="width: 100%"></i><u style="left: 100%"></u></p>
        <p class="state" data-type="state">完了</p>
        <p class="fix" data-type="fix">御社承認済（01.29）</p>
      </div>

      <div class="row" data-row="2">
        <p class="pname">詳細設計</p>
        <p class="pct" data-plan>78%</p>
        <p class="pct">74%</p>
        <p class="meter"><i style="width: 74%"></i><u style="left: 78%"></u></p>
        <p class="state">順調</p>
        <p class="fix">差の 4% は今週中に吸収</p>
      </div>

      <div class="row" data-row="3" data-emphasis="fill weight">
        <p class="pname">帳票の様式確定</p>
        <p class="pct" data-plan>60%</p>
        <p class="pct">31%</p>
        <p class="meter"><i style="width: 31%"></i><u style="left: 60%"></u></p>
        <p class="state">要ご判断</p>
        <p class="fix">統合対象 4 帳票の可否を 02.12 までにお願いします</p>
      </div>

      <div class="row" data-row="4">
        <p class="pname">実装（受注登録）</p>
        <p class="pct" data-plan>42%</p>
        <p class="pct">45%</p>
        <p class="meter"><i style="width: 45%"></i><u style="left: 42%"></u></p>
        <p class="state">順調</p>
        <p class="fix">先行分を単体試験へ</p>
      </div>

      <div class="row" data-row="5">
        <p class="pname">試験環境の構築</p>
        <p class="pct" data-plan>50%</p>
        <p class="pct">38%</p>
        <p class="meter"><i style="width: 38%"></i><u style="left: 50%"></u></p>
        <p class="state">遅延</p>
        <p class="fix">02.20 までに回復見込み。工程全体への影響なし</p>
      </div>
    </div>

    <div class="foot">
      <div>
        <p class="fkey" data-type="fkey">未解決の課題</p>
        <p class="fval" data-type="fval">8 件（うち期限超過 1 件）</p>
      </div>
      <div>
        <p class="fkey">全体工程への影響</p>
        <p class="fval">現時点でなし</p>
      </div>
      <div>
        <p class="fkey">本日お願いする決定</p>
        <p class="fval">帳票 4 件の統合可否</p>
      </div>
    </div>
  </div>
</div>

13 defect-severity-status-matrix/pattern.html

7.7 KB

/designs/defect-severity-status-matrix/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>品質状況 — 残件の合計ではなく、出荷を止める区画を読む</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .period { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

  .plate { align-self: center; width: 100%; }

  /* 重要度 × 状態の平面。未解決 3 列と完了 1 列の間に太い罫を引き、
     出荷を止める側とそうでない側を版面の上で分ける。 */
  .grid { display: grid; grid-template-columns: 300px repeat(3, minmax(0, 1fr)) 210px 210px; }
  .cell { padding: 36px 24px; border-bottom: 1px solid var(--rule); text-align: right; }
  .cell.rowhead { text-align: left; }
  /* 未解決 3 列と完了列の間に太い罫。表頭にも同じ位置で引かないと、
     境界が本体だけの飾りに見える。 */
  .grid > .cell:nth-child(6n + 5),
  .grid > .colhead:nth-child(5) { border-right: 2px solid var(--ink); }

  .colhead { padding: 16px 24px; border-bottom: 1px solid var(--ink); text-align: right; }
  .colhead.first { text-align: left; }
  .col { font-size: 15px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }

  .sev { font-size: 27px; font-weight: 700; line-height: 1.4; }
  .sevNote { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 6px; }
  .n { font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .n[data-zero] { color: var(--rule); font-weight: 500; }
  .n[data-soft] { font-size: 31px; font-weight: 400; color: var(--muted); }

  /* 塗るのは最上位の重要度の行だけ。ここの未解決が 0 にならないかぎり
     出荷判定に進めない、という 1 本の規則を版面で言う。 */
  .band[data-emphasis] .cell { background: var(--surface); }
  .band[data-emphasis] .n { color: var(--accent); }
  .band[data-emphasis] .n[data-zero] { color: var(--muted); font-weight: 500; }
  .band[data-emphasis] .n[data-soft] { color: var(--muted); }

  .foot { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; border-top: 1px solid var(--rule); padding-top: 24px; align-items: start; }
  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }

  /* 週次の残存だけを 4 本の帯にする。推移は「収束しているか」だけを答えればよく、
     検出と解決の 2 本を重ねると、その問いより先に内訳の話になる。 */
  .trend { display: grid; grid-template-columns: repeat(4, 96px); gap: 30px; margin-top: 16px; align-items: end; }
  .week { display: grid; justify-items: start; gap: 8px; }
  /* 高さは件数に比例（1 件 = 2.2px）。幅を狭く取らないと、差が
     「帯の高さ」ではなく「四角の大きさ」として読まれて比が効かない。 */
  .wbar { width: 96px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
  .week[data-now] .wbar { background: var(--accent); }
  .wn { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .wk { font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

  .rule { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--ink); margin-top: 14px; }
  .rule em { font-style: normal; font-weight: 700; color: var(--accent); }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">品質状況（結合テスト 第 4 週）</h1>
      <p class="period" data-type="period">2027.08.24 時点 ／ 検出累計 214 件・解決 177 件</p>
    </div>

    <div class="plate">
      <div class="grid">
        <div class="colhead first"><p class="col" data-type="col">重要度</p></div>
        <div class="colhead"><p class="col">未着手</p></div>
        <div class="colhead"><p class="col">調査中</p></div>
        <div class="colhead"><p class="col">確認待ち</p></div>
        <div class="colhead"><p class="col">未解決 計</p></div>
        <div class="colhead"><p class="col">完了</p></div>
      </div>

      <div class="grid band" data-row="1" data-emphasis="fill weight">
        <div class="cell rowhead">
          <p class="sev" data-type="sev">高</p>
          <p class="sevNote" data-type="sevNote">業務が止まる・データが壊れる</p>
        </div>
        <div class="cell"><p class="n" data-type="n">2</p></div>
        <div class="cell"><p class="n">3</p></div>
        <div class="cell"><p class="n">1</p></div>
        <div class="cell"><p class="n">6</p></div>
        <div class="cell"><p class="n" data-soft data-type="nSoft">41</p></div>
      </div>

      <div class="grid band" data-row="2">
        <div class="cell rowhead">
          <p class="sev">中</p>
          <p class="sevNote">回避手順があれば運用できる</p>
        </div>
        <div class="cell"><p class="n">7</p></div>
        <div class="cell"><p class="n">9</p></div>
        <div class="cell"><p class="n">5</p></div>
        <div class="cell"><p class="n">21</p></div>
        <div class="cell"><p class="n" data-soft>88</p></div>
      </div>

      <div class="grid band" data-row="3">
        <div class="cell rowhead">
          <p class="sev">低</p>
          <p class="sevNote">表記・見た目・利便性</p>
        </div>
        <div class="cell"><p class="n">6</p></div>
        <div class="cell"><p class="n">4</p></div>
        <div class="cell"><p class="n" data-zero>0</p></div>
        <div class="cell"><p class="n">10</p></div>
        <div class="cell"><p class="n" data-soft>48</p></div>
      </div>
    </div>

    <div class="foot">
      <div>
        <p class="fkey" data-type="fkey">未解決の推移（週末時点）</p>
        <div class="trend">
          <div class="week">
            <p class="wn" data-type="wn">52</p>
            <div class="wbar" style="height: 114px"></div>
            <p class="wk" data-type="wk">第 1 週</p>
          </div>
          <div class="week">
            <p class="wn">49</p>
            <div class="wbar" style="height: 108px"></div>
            <p class="wk">第 2 週</p>
          </div>
          <div class="week">
            <p class="wn">44</p>
            <div class="wbar" style="height: 97px"></div>
            <p class="wk">第 3 週</p>
          </div>
          <div class="week" data-now>
            <p class="wn">37</p>
            <div class="wbar" style="height: 81px"></div>
            <p class="wk">第 4 週</p>
          </div>
        </div>
      </div>
      <div>
        <p class="fkey">総合テストへ進む条件</p>
        <p class="rule" data-type="rule">重要度「高」の未解決が <em>0 件</em>。中・低の残件は、回避手順を添えて総合テストへ持ち越せます。</p>
      </div>
    </div>
  </div>
</div>

14 cutover-runbook-timeline/pattern.html

5.8 KB

/designs/cutover-runbook-timeline/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>切替当日の手順 — 戻す判断の時刻を先に置く</title>
<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: #111722;
    --surface: #1A2231;
    --ink: #E9EDF4;
    --muted: #8894A6;
    --accent: #5AA2E8;
    --rule: #2B3445;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .window { font-size: 17px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }

  .runbook { align-self: center; display: grid; }
  /* 時刻・工程・担当・判断の 4 列。時刻列を固定幅にして、
     左端を縦に読めば当日の時系列だけを追えるようにする。 */
  .step { display: grid; grid-template-columns: 190px 1fr 260px 300px; align-items: baseline; gap: 34px; padding: 22px 24px; border-left: 2px solid var(--rule); }
  .time { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .task { font-size: 22px; font-weight: 500; line-height: 1.5; }
  .owner { font-size: 16px; font-weight: 400; color: var(--muted); }
  .note { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); }

  /* 戻す判断の時刻だけを塗る。当日いちばん重い意思決定がどこかを、
     手順の並びの中で 1 回だけ言う。 */
  .step[data-emphasis] { background: var(--surface); border-left-color: var(--accent); }
  .step[data-emphasis] .time,
  .step[data-emphasis] .task { color: var(--accent); }
  .step[data-emphasis] .note { color: var(--ink); }
  /* 業務停止中の工程は時刻を太字のまま、担当と備考を沈める。 */
  .step[data-quiet] .task { color: var(--muted); }

  .foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 26px; }
  .fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
  .fval { font-size: 18px; font-weight: 500; line-height: 1.6; margin-top: 10px; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <h1 class="title" data-type="title">切替当日の手順</h1>
      <p class="window" data-type="window">2027.11.13（土）18:00 - 11.14（日）08:00 ／ 業務停止 14 時間</p>
    </div>

    <div class="runbook">
      <div class="step" data-row="1">
        <p class="time" data-type="time">18:00</p>
        <p class="task" data-type="task">現行システムの受付停止</p>
        <p class="owner" data-type="owner">御社 情報システム部</p>
        <p class="note" data-type="note">停止のお知らせは 11.06 に掲示</p>
      </div>
      <div class="step" data-row="2" data-quiet>
        <p class="time">18:30</p>
        <p class="task">最終バックアップの取得</p>
        <p class="owner">弊社 基盤チーム</p>
        <p class="note">所要 90 分。ここまでは戻せる</p>
      </div>
      <div class="step" data-row="3" data-quiet>
        <p class="time">20:00</p>
        <p class="task">データ移行の実行</p>
        <p class="owner">弊社 基盤チーム</p>
        <p class="note">所要 5 時間。件数照合まで含む</p>
      </div>
      <div class="step" data-row="4" data-quiet>
        <p class="time">01:00</p>
        <p class="task">移行結果の照合・確認</p>
        <p class="owner">合同</p>
        <p class="note">差分 0 件を確認して次へ</p>
      </div>
      <div class="step" data-row="5" data-emphasis="fill rule">
        <p class="time">03:00</p>
        <p class="task">続行か切戻しかの判断</p>
        <p class="owner">合同 PMO ／ 御社責任者</p>
        <p class="note">この時刻を過ぎると切戻しが翌営業日に間に合いません</p>
      </div>
      <div class="step" data-row="6">
        <p class="time">03:30</p>
        <p class="task">新システムの公開・疎通確認</p>
        <p class="owner">弊社 基盤チーム</p>
        <p class="note">連携先 4 系統の疎通まで</p>
      </div>
      <div class="step" data-row="7">
        <p class="time">06:00</p>
        <p class="task">業務確認（御社 6 名）</p>
        <p class="owner">御社 営業推進部</p>
        <p class="note">受注登録・照会・帳票の 3 経路</p>
      </div>
      <div class="step" data-row="8">
        <p class="time">08:00</p>
        <p class="task">受付再開</p>
        <p class="owner">御社 情報システム部</p>
        <p class="note">以後 2 週間は合同で監視</p>
      </div>
    </div>

    <div class="foot">
      <div>
        <p class="fkey" data-type="fkey">切戻しの所要</p>
        <p class="fval" data-type="fval">3 時間（03:00 判断なら 06:00 復旧）</p>
      </div>
      <div>
        <p class="fkey">当日の連絡手段</p>
        <p class="fval">合同 PMO の常設回線</p>
      </div>
      <div>
        <p class="fkey">予備日</p>
        <p class="fval">2027.11.20（土）同時刻</p>
      </div>
    </div>
  </div>
</div>

15 closing-decision-request/pattern.html

4.3 KB

/designs/closing-decision-request/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>締めの 1 枚 — お願いする判断を期限つきで 3 件だけ</title>
<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: #FFFFFF;
    --surface: #F4F6F9;
    --ink: #131820;
    --muted: #667183;
    --accent: #1F5FA8;
    --rule: #DBE1E9;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { text-align: center; display: grid; gap: 20px; max-width: 1080px; }
  .kicker { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.35; letter-spacing: .01em; }
  .lede { font-size: 19px; font-weight: 400; line-height: 1.9; color: var(--muted); }

  /* 3 件まで。4 件目を足すと、どれも「後で」に送られる。 */
  .asks { align-self: center; width: 100%; max-width: 1360px; display: grid; gap: 2px; }
  .ask { display: grid; grid-template-columns: 76px 1fr 300px; align-items: center; gap: 40px; background: var(--surface); padding: 34px 40px; }
  .n { font-size: 30px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
  .what { font-size: 27px; font-weight: 700; line-height: 1.45; }
  .why { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 10px; }
  .due { font-size: 20px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .dueNote { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 8px; }

  .foot { text-align: center; border-top: 1px solid var(--rule); padding-top: 28px; width: 100%; max-width: 1360px; }
  .next { font-size: 18px; font-weight: 500; line-height: 1.7; font-variant-numeric: tabular-nums; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <p class="kicker" data-type="kicker">NEXT STEPS</p>
      <h1 class="title" data-type="title">本日ご判断いただきたいこと</h1>
      <p class="lede" data-type="lede">3 件です。いずれも期限を過ぎると工程が動くため、期限のほうを先に書いています。</p>
    </div>

    <div class="asks">
      <div class="ask" data-row="1">
        <p class="n" data-type="n">01</p>
        <div>
          <p class="what" data-type="what">第 1 期の対象範囲（2 章）のご承認</p>
          <p class="why" data-type="why">要件定義の着手条件です。確定後に体制を組みます。</p>
        </div>
        <div>
          <p class="due" data-type="due">2026.09.30</p>
          <p class="dueNote" data-type="dueNote">1 週間の遅れで着手が 1 か月ずれます</p>
        </div>
      </div>

      <div class="ask" data-row="2">
        <p class="n">02</p>
        <div>
          <p class="what">在庫連携を同期方式とする前提（3 章）</p>
          <p class="why">既存システム側の改修有無がここで決まります。</p>
        </div>
        <div>
          <p class="due">2026.10.15</p>
          <p class="dueNote">基本設計の開始までに必要です</p>
        </div>
      </div>

      <div class="ask" data-row="3">
        <p class="n">03</p>
        <div>
          <p class="what">業務チーム 4 名の確保時期（4 章）</p>
          <p class="why">要件確定と受入判定を担っていただく方々です。</p>
        </div>
        <div>
          <p class="due">2026.10.31</p>
          <p class="dueNote">要件定義の 2 週目から参画をお願いします</p>
        </div>
      </div>
    </div>

    <p class="foot next" data-type="next">次回：2026.09.29（火）14:00 ／ ご承認いただいた範囲で要件定義計画をお持ちします。</p>
  </div>
</div>

16 appendix-index-grid/pattern.html

4.9 KB

/designs/appendix-index-grid/pattern.html

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>付録の扉 — 収録物を番号つきの格子で見せる</title>
<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: #111722;
    --surface: #1A2231;
    --ink: #E9EDF4;
    --muted: #8894A6;
    --accent: #5AA2E8;
    --rule: #2B3445;
  }
  * { box-sizing: border-box; margin: 0; }
  html, body { width: 1920px; height: 1080px; }
  body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }

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

  .head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
  .left { display: flex; align-items: baseline; gap: 30px; }
  .kicker { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
  .title { font-size: 54px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
  .count { font-size: 17px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* 格子にすると、付録が「読み物の続き」ではなく「引くもの」として見える。
     本編の流れを切った先なので、通し読みの姿勢のまま入らせない。 */
  .grid { align-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .card { background: var(--surface); border-top: 2px solid var(--rule); padding: 32px 34px 34px; }
  /* この場で参照する付録だけを立てる。全部立てると索引として使えない。 */
  .card[data-here] { border-top-color: var(--accent); }
  .id { font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .card[data-here] .id { color: var(--accent); }
  .name { font-size: 25px; font-weight: 700; line-height: 1.4; margin-top: 14px; }
  .about { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); margin-top: 14px; }
  .pages { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 18px; font-variant-numeric: tabular-nums; }

  .foot { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 26px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <div class="left">
        <p class="kicker" data-type="kicker">APPENDIX</p>
        <h1 class="title" data-type="title">付録</h1>
      </div>
      <p class="count" data-type="count">6 編 ／ 全 34 頁 ／ 本編には含みません</p>
    </div>

    <div class="grid">
      <section class="card" data-col="1" data-here>
        <p class="id" data-type="id">A-1</p>
        <p class="name" data-type="name">要求一覧への回答（全 48 件）</p>
        <p class="about" data-type="about">本編 3 章で抜粋した 6 件を含む全件。判定と実現方式を要求番号順に記載。</p>
        <p class="pages" data-type="pages">12 頁</p>
      </section>
      <section class="card" data-col="2">
        <p class="id">A-2</p>
        <p class="name">現行業務フローと課題の対応</p>
        <p class="about">1 章の課題が、現行フローのどの手順から出ているかの対応表。</p>
        <p class="pages">4 頁</p>
      </section>
      <section class="card" data-col="3">
        <p class="id">B-1</p>
        <p class="name">要員一覧と稼働率</p>
        <p class="about">体制図に載せなかった氏名・経歴・月別の稼働率。</p>
        <p class="pages">3 頁</p>
      </section>
      <section class="card">
        <p class="id">B-2</p>
        <p class="name">見積の内訳</p>
        <p class="about">工程別の人月と単価、前提条件および変動要因。</p>
        <p class="pages">5 頁</p>
      </section>
      <section class="card" data-here>
        <p class="id">C-1</p>
        <p class="name">移行方式の比較検討</p>
        <p class="about">一括・段階・並行の 3 案を比較し、一括を選んだ理由。</p>
        <p class="pages">6 頁</p>
      </section>
      <section class="card">
        <p class="id">C-2</p>
        <p class="name">用語集</p>
        <p class="about">本編と付録で使う業務用語・システム用語の定義。</p>
        <p class="pages">4 頁</p>
      </section>
    </div>

    <p class="foot" data-type="foot">罫を立てた 2 編は、本日のご説明中に参照します。それ以外はお持ち帰りいただく資料で、この場では読み上げません。</p>
  </div>
</div>