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

一式

システム開発案件の資料一式 — RFP から切替まで

表紙から付録の扉まで 16 枚。並べて 1 冊になる前提で、配色を淡地と濃地の 2 組に揃えてある

16 枚 · スライド 16:9

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

読む順

  1. 01 表紙・扉 案件資料の表紙 — 件名の下に発行情報を並べる 案件資料の表紙 — 件名の下に発行情報を並べる
  2. 02 目次・アジェンダ 目次 — 章ごとに「決めたいこと」を添える 目次 — 章ごとに「決めたいこと」を添える
  3. 03 スコープの線引き スコープの線引き — 対象と対象外を同じ大きさで並べる スコープの線引き — 対象と対象外を同じ大きさで並べる
  4. 04 中扉・章の区切り 工程の中扉 — 全工程の並びの上に現在地を打つ 工程の中扉 — 全工程の並びの上に現在地を打つ
  5. 05 システム構成 システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る
  6. 06 要求・要件の一覧 要求一覧への回答 — 代替提案の行だけを塗る 要求一覧への回答 — 代替提案の行だけを塗る
  7. 07 体制・座組の説明 体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る 体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る
  8. 08 計画・ロードマップ 工程表 — 帯の長さを期間に、重なりを引き継ぎに使う 工程表 — 帯の長さを期間に、重なりを引き継ぎに使う
  9. 09 価格・料金の提示 見積の内訳 — 総額より先に構成比を読ませる 見積の内訳 — 総額より先に構成比を読ませる
  10. 10 テスト・品質の計画 テスト計画 — 作る工程と受け入れる試験を行で対にする テスト計画 — 作る工程と受け入れる試験を行で対にする
  11. 11 変更管理 変更管理 — 各段に営業日を与え、否認の行き先まで描く 変更管理 — 各段に営業日を与え、否認の行き先まで描く
  12. 12 進捗・状況報告 進捗報告 — 信号の色を使わず、手当ての欄で危険を示す 進捗報告 — 信号の色を使わず、手当ての欄で危険を示す
  13. 13 テスト・品質の計画 品質状況 — 残件の合計ではなく、出荷を止める区画を読む 品質状況 — 残件の合計ではなく、出荷を止める区画を読む
  14. 14 移行・切替 切替当日の手順 — 戻す判断の時刻を手順の中に置く 切替当日の手順 — 戻す判断の時刻を手順の中に置く
  15. 15 まとめ・要約 締めの 1 枚 — お願いする判断を期限つきで 3 件だけ 締めの 1 枚 — お願いする判断を期限つきで 3 件だけ
  16. 16 付録・参考資料 付録の扉 — 収録物を番号つきの格子で見せる 付録の扉 — 収録物を番号つきの格子で見せる

この一式について

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

持ち帰る

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

全部入り

system-project-everything.md

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

依頼文

27.0 KB
# 案件資料の表紙 — 件名の下に発行情報を並べる
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
doctype  20px / 700 / 字間 0.08em
edition  17px / 400 / 字間 0.04em / 等幅数字
kicker  15px / 500 / 字間 0.3em / 大文字
title  84px / 700 / 字間 0.01em / 行送り 1.28
lede  20px / 400 / 行送り 1.9
label  14px / 500 / 字間 0.14em
value  21px / 500 / 等幅数字

## 配色
地 #111722 / 面 #1A2231 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445

## 外すと崩れる点
- 発行情報は 4 つで固定する。案件資料は同じ件名で何度も出るので、版・日付・宛先が表紙に無いと現物を特定できない
- 文書種別は件名より先に読ませてよい唯一の情報。塗った小さな箱に入れ、件名とは級数で差をつける
- 色は件名の 2 行目だけに置く。1 行目は案件、2 行目はその資料が扱う範囲、という読み順がそれで付く
- 濃地では文字を純白にしない。表紙は会議中いちばん長く映される 1 枚になる

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

---

# 目次 — 章ごとに「決めたいこと」を添える
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 112 右 140 下 112 左 140
- 2 カラム(等分)、間隔 104

## 文字(版面 1920px に対する px)
kicker  15px / 500 / 字間 0.28em / 大文字
title  56px / 700 / 字間 0.01em / 行送り 1.3
mkey  15px / 500 / 字間 0.12em
mval  17px / 500 / 行送り 1.65 / 等幅数字
note  17px / 400 / 行送り 1.9
num  30px / 700 / 等幅数字
name  30px / 500 / 行送り 1.45
goal  16px / 400 / 行送り 1.7

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 章名の隣に「この章で決めたいこと」を置く。それが無い目次は予定表で、読み手は聞く姿勢を決められない
- 今日扱わない章は消さずに薄くする。消すと「資料に無い」と読まれ、後で付録を探させることになる
- 日時・場所・出席を目次と同じ面に置く。別紙にすると、何時までの会かが分からないまま章が進む
- 番号は 2 桁で揃える。1 桁と 2 桁が混ざると章名の頭が縦に揃わず、一覧として読めなくなる

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

---

# スコープの線引き — 対象と対象外を同じ大きさで並べる
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 108 右 140 下 108 左 140
- 2 カラム(等分)、間隔 64

## 強調
1 列目のみ。手段は 罫 だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  48px / 700 / 字間 0.01em / 行送り 1.3
lede  19px / 400 / 行送り 1.8
side  16px / 500 / 字間 0.18em / 大文字
heading  34px / 700 / 行送り 1.35
item  20px / 500 / 行送り 1.5
why  16px / 400 / 行送り 1.75
foot  17px / 500

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 2 面は等幅にする。対象外を小さくすると「大した話ではない」と読まれ、後で必ず「入っていると思っていた」に化ける
- 件数も揃える。片側だけ 3 件だと、少ない側が検討されていないように見える
- 対象外の各項目に「いつやるか」を添える。日付の無い対象外は、断りとしてしか読まれない
- 強調は罫の色 1 手段。どちらの面も塗ってしまうと、線がどこにあるのか分からなくなる

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

---

# 工程の中扉 — 全工程の並びの上に現在地を打つ
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 124 右 140 下 124 左 140
- 7 カラム(等分)、間隔 24

## 強調
4 列目のみ。手段は 罫 + 太さ だけ。ほかは変えない

## 文字(版面 1920px に対する px)
chapter  15px / 500 / 字間 0.3em / 大文字
of  15px / 400 / 字間 0.12em / 等幅数字
num  136px / 700 / 行送り 1 / 等幅数字
title  68px / 700 / 字間 0.01em / 行送り 1.3
lede  20px / 400 / 行送り 1.9
phase  18px / 500
when  14px / 400 / 等幅数字

## 配色
地 #111722 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445

## 外すと崩れる点
- 工程は等幅で並べる。期間の長さを幅で表すと、長い工程が「遅れている」と読まれる
- 現在地は罫の色と太字の 2 手段まで。塗りを足すと工程表と見分けがつかなくなり、中扉として働かない
- 終わった工程も薄くしない。全工程が同じ濃さで並んでいることが「まだ全部ある」という合図になる
- 章番号と工程は別の軸。番号は資料の章、帯は案件の工程で、たまたま一致していても揃えない

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

---

# システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る
以下の仕様でスライドを 1 枚作ってください。

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

## 強調
2 行目のみ。手段は 塗り + 罫 だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  46px / 700 / 字間 0.01em / 行送り 1.3
lede  19px / 400 / 行送り 1.8
tname  24px / 700 / 行送り 1.4
tnote  15px / 400 / 行送り 1.6
bname  19px / 500 / 行送り 1.4
btag  14px / 400
fkey  14px / 500 / 字間 0.14em
fval  17px / 500 / 行送り 1.6

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 層は 3 つまで。4 つ目を足した瞬間、聞き手は層の名前を覚えるほうに気を取られ、どこを作るのかを聞き逃す
- すべて新規の層だけを塗る。一部だけ足す層は箱の「新規」で示す。全層を塗ると「全部作り直す」と読まれ、費用の話がその前提で始まる
- 既存システムは点線にしない。点線は「未確定」と読まれる。示したいのは確定していることなので、文字色だけを落とす
- 1 層に置く箱は 5 個まで。6 個目からは、箱の名前ではなく箱の数が印象に残る
- 連携方式を下端に 1 行で書く。構成図に矢印で書き込むと、線の意味を説明する時間のほうが長くなる

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

---

# 要求一覧への回答 — 代替提案の行だけを塗る
以下の仕様でスライドを 1 枚作ってください。

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

## 強調
3 行目のみ。手段は 塗り + 太さ だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  44px / 700 / 字間 0.01em / 行送り 1.3
count  17px / 400 / 等幅数字
col  15px / 500 / 字間 0.12em
rid  19px / 500 / 等幅数字
req  21px / 500 / 行送り 1.5
verdict  17px / 500
how  17px / 400 / 行送り 1.7
when  17px / 400
foot  16px / 400 / 行送り 1.8

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 判定は「満たす/代替提案/第 2 期」の 3 値だけにする。「条件付きで満たす」は条件が読まれないまま合意された扱いになる
- 塗るのは代替提案の行だけ。満たす行を塗ると表全体が強調になり、議論すべき 1 行が沈む
- 実現方式を同じ行に置く。別紙に送ると「代替提案」の 3 文字だけが残り、何が違うのか分からないまま持ち帰られる
- 抜粋なら件数を見出しの隣に書く。全 48 件のうち 6 件だと分かって初めて、この 1 枚が議題になる
- 要求番号は発注側の採番をそのまま使う。振り直すと、以後すべての質疑で番号の突き合わせが要る

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

---

# 体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る
以下の仕様でスライドを 1 枚作ってください。

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

## 強調
2 行目のみ。手段は 塗り + 罫 だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  46px / 700 / 字間 0.01em / 行送り 1.3
lede  19px / 400 / 行送り 1.8
role  15px / 500 / 字間 0.12em
who  26px / 700 / 行送り 1.35
cadence  15px / 400 / 等幅数字
tname  22px / 700 / 行送り 1.4
tside  14px / 500 / 字間 0.12em
heads  15px / 400 / 行送り 1.8 / 等幅数字
foot  16px / 400 / 行送り 1.8

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 節には人名ではなく会議体を置く。人を書いた体制図は、要員が 1 人替わるたびに古くなる
- 窓口は 1 つだけ塗る。2 つ塗ると、実際には窓口が無いのと同じになる
- 各節に開催頻度を書く。月 1 回の決裁と週 2 回の相談は、体制図の中で別の性格を持つ
- 枝の渡り線は端のチームの中心で止める。版面の端まで引くと、外側にも何かあるように読まれる
- チームの主管(御社/弊社/合同)を必ず書く。主管の書かれていない箱は、後で誰も引き取らない

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

---

# 工程表 — 帯の長さを期間に、重なりを引き継ぎに使う
以下の仕様でスライドを 1 枚作ってください。

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

## 強調
2 行目のみ。手段は 塗り だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  46px / 700 / 字間 0.01em / 行送り 1.3
basis  16px / 400 / 等幅数字
m  14px / 500 / 等幅数字
effort  17px / 500 / 等幅数字
pname  21px / 700 / 行送り 1.4
powner  14px / 400
foot  16px / 400 / 行送り 1.8

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 月の境界を罫で引く。目盛りの無いガントは「だいたい 3 月ごろ」としか読めず、合意の材料にならない
- 帯の重なりは引き継ぎ期間として意図的に残す。詰めて描くと、後工程の立ち上がりが読めなくなる
- 発注側の作業は塗らずに罫で囲む。同じ塗りにすると、どちらがどれだけ動くのかが図から消える
- accent を置くのは現在地の 1 本だけ。塗り分けを増やすと、色で「今」を言う手段が無くなる
- 人月を右端に置く。帯の隣に置くと期間と工数が混ざり、長い帯=重い工程と誤読される

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

---

# 見積の内訳 — 総額より先に構成比を読ませる
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 92 右 140 下 92 左 140
- 5 カラム(等分)、間隔 3

## 強調
3 列目のみ。手段は 塗り だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  44px / 700 / 字間 0.01em / 行送り 1.3
total  17px / 500 / 等幅数字
segName  16px / 500
segPct  20px / 700 / 等幅数字
col  15px / 500 / 字間 0.12em
pname  20px / 700 / 行送り 1.4
num  19px / 500 / 等幅数字
fkey  14px / 500 / 字間 0.14em
fval  16px / 400 / 行送り 1.75 / 等幅数字

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 積み上げの帯を表より上に置く。総額から読ませると「高い/安い」の話になり、どこに費用が乗っているかの話にならない
- 単価は工程ごとに出す。平均単価 1 つだと、工程を削ったときの再計算が合わず、値引き交渉が算数の話になる
- 発注側の工数は金額に入れず、行としては残す。消すと「こちらは何もしなくてよい」と読まれる
- 前提と変動要因を同じ面に置く。別紙に送ると総額だけが独り歩きし、範囲が変わっても金額は据え置きだと思われる
- 有効期限を書く。要員の確保が前提の金額なので、期限の無い見積は約束として扱われる
- 塗るのはいちばん重い工程 1 つだけ。2 つ塗ると「重い」が意味を失う

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

---

# テスト計画 — 作る工程と受け入れる試験を行で対にする
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 100 右 140 下 100 左 140
- 2 カラム(等分)、間隔 56

## 強調
2 列目のみ。手段は 塗り だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  46px / 700 / 字間 0.01em / 行送り 1.3
lede  19px / 400 / 行送り 1.8
label  16px / 500 / 字間 0.18em / 大文字
lv  16px / 700 / 等幅数字
sname  24px / 700 / 行送り 1.4
sdoc  15px / 400 / 行送り 1.7
fkey  14px / 500 / 字間 0.14em
fval  17px / 500 / 行送り 1.6 / 等幅数字

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- V 字を斜めに描かない。斜めにすると対応関係が図の形の話になり、L2 と T2 が対だという肝心の点が読み落とされる
- 左右は同じ行数にする。試験のほうが少ない計画は、受け入れられない成果物があるということ
- 各試験に実施者を書く。「総合テスト」だけでは、立ち会うのか判定するのかが決まらない
- 受入基準は左の工程を書いた時点で作る。試験の直前に決めると、作ったものに合わせた基準になる
- 面を敷くのは受け入れる側だけ。両側を敷くと、どちらが判定の主体か分からなくなる

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

---

# 変更管理 — 各段に営業日を与え、否認の行き先まで描く
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 92 右 140 下 92 左 140
- 5 カラム(等分)、間隔 34

## 強調
3 列目のみ。手段は 塗り + 罫 だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  46px / 700 / 字間 0.01em / 行送り 1.3
lede  19px / 400 / 行送り 1.8
days  14px / 500 / 字間 0.14em / 等幅数字
sname  28px / 700 / 行送り 1.4
who  15px / 500
out  15px / 400 / 行送り 1.7
rname  20px / 700
rtext  16px / 400 / 行送り 1.75
fkey  14px / 500 / 字間 0.14em
fval  17px / 500 / 行送り 1.65 / 等幅数字

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 各段に営業日を書く。日数の無いフローは「いつ決まるか」を答えないので、現場は待たずに先に作り始める
- 否認の行き先を描く。行き先の無い否認は、同じ要求が翌月また受付に戻ってくる
- 判定者を金額や規模で分ける。1 つの会議体に全部持ち込むと、小さな変更が月 1 回の決裁を待つことになる
- 「計画の改訂」を独立した段にする。ここが段になっていないから、小さな変更が工程表に反映されないまま積み上がる
- 塗るのは止まる段 1 つだけ。他は作業の段なので、塗ると「どこで待つのか」が読めなくなる
- 枝は判定の段の左端から L 字で落とす。渡り線の途中に落とすと、その左に置いた見出しが分岐の出どころに見える

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

---

# 進捗報告 — 信号の色を使わず、手当ての欄で危険を示す
以下の仕様でスライドを 1 枚作ってください。

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

## 強調
3 行目のみ。手段は 塗り + 太さ だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  44px / 700 / 字間 0.01em / 行送り 1.3
period  17px / 400 / 等幅数字
col  15px / 500 / 字間 0.12em
pname  21px / 700 / 行送り 1.4
pct  20px / 500 / 等幅数字
state  18px / 500
fix  16px / 400 / 行送り 1.7
fkey  14px / 500 / 字間 0.14em
fval  18px / 500 / 行送り 1.6 / 等幅数字

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 信号の色を使わない。役割色は 6 つで赤も黄も無く、代わりに状態を語で書く。語で書いたほうが議事録に残る
- 遅れている行には必ず手当てを書く。手当ての無い遅延は、報告ではなく告知になる
- 予定は帯の中の目盛り、実績は塗り。2 本の帯を上下に並べると、凡例を読むまでどちらがどちらか決まらない
- 面を敷くのは判断をお願いする 1 行だけ。遅延も塗ると、決めてほしい行と報告だけの行が同じ重さになる
- 溝は面ではなく ink の薄い混色にする。塗った行の上で面と同じ色になると、帯の伸びしろが消える

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

---

# 品質状況 — 残件の合計ではなく、出荷を止める区画を読む
以下の仕様でスライドを 1 枚作ってください。

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

## 強調
1 行目のみ。手段は 塗り + 太さ だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  44px / 700 / 字間 0.01em / 行送り 1.3
period  17px / 400 / 等幅数字
col  15px / 500 / 字間 0.12em
sev  27px / 700 / 行送り 1.4
sevNote  14px / 400
n  42px / 700 / 等幅数字
nSoft  31px / 400 / 等幅数字
fkey  14px / 500 / 字間 0.14em
wn  18px / 700 / 等幅数字
wk  13px / 400 / 等幅数字
rule  16px / 400 / 行送り 1.8

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 残件の合計を大きく出さない。「残 37 件」は安全とも危険とも決めない。決めるのは重要度「高」の未解決の区画
- 重要度の定義を行の下に 1 行ずつ書く。定義の無い高・中・低は、報告のたびに基準がずれる
- 未解決 3 列と完了列の間に太い罫を引く。完了を隣に並べるだけだと、大きい完了件数が未解決を小さく見せる
- 完了列は消さない。分母が消えると、収束しているのか始まってもいないのかが読めない
- 推移は残存 1 本だけにする。検出と解決を重ねると、「収束しているか」より先に内訳の議論になる
- 次工程へ進む条件を同じ面に書く。条件が別紙にあると、この表は「今の様子」で終わり、判断の材料にならない

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

---

# 切替当日の手順 — 戻す判断の時刻を手順の中に置く
以下の仕様でスライドを 1 枚作ってください。

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

## 強調
5 行目のみ。手段は 塗り + 罫 だけ。ほかは変えない

## 文字(版面 1920px に対する px)
title  44px / 700 / 字間 0.01em / 行送り 1.3
window  17px / 500 / 等幅数字
time  24px / 700 / 等幅数字
task  22px / 500 / 行送り 1.5
owner  16px / 400
note  16px / 400 / 行送り 1.7
fkey  14px / 500 / 字間 0.14em
fval  18px / 500 / 行送り 1.6 / 等幅数字

## 配色
地 #111722 / 面 #1A2231 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445

## 外すと崩れる点
- 戻す判断に時刻を与え、手順の 1 行として並びの中に置く。別枠に書いた切戻し基準は、当日その紙が開かれない
- 各行に担当を書く。当日は連絡がつかない前提で組むので、名前ではなくチームで書く
- 所要時間は備考に書き、時刻から引き算させない。深夜に暗算をさせる手順書は読み間違えられる
- 業務停止の時間幅を見出しの隣に置く。手順の総和ではなく、止まる長さのほうが合意の対象になる
- 予備日を必ず載せる。当日に切戻した場合の次の日程が決まっていないと、判断そのものが先送りされる

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

---

# 締めの 1 枚 — お願いする判断を期限つきで 3 件だけ
以下の仕様でスライドを 1 枚作ってください。

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

## 文字(版面 1920px に対する px)
kicker  15px / 500 / 字間 0.3em / 大文字
title  54px / 700 / 字間 0.01em / 行送り 1.35
lede  19px / 400 / 行送り 1.9
n  30px / 700 / 等幅数字
what  27px / 700 / 行送り 1.45
why  16px / 400 / 行送り 1.7
due  20px / 500 / 等幅数字
dueNote  14px / 400
next  18px / 500 / 行送り 1.7 / 等幅数字

## 配色
地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9

## 外すと崩れる点
- 判断は 3 件まで。4 件目を足すと、どれも「持ち帰って検討」に送られる
- 期限には「遅れると何が動くか」を必ず添える。日付だけでは、それが守るべき日付かどうか読み手に分からない
- 各件に本編の章番号を書く。締めの 1 枚だけを見た人が、根拠を探して資料を往復せずに済む
- 下端に次回の日時を置く。締めの紙に次の予定が無いと、判断の期限だけが宙に浮く
- 中央寄せにするのは、この 1 枚が読み物ではなく合図だから。左揃えにすると本編の続きとして流される

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

---

# 付録の扉 — 収録物を番号つきの格子で見せる
以下の仕様でスライドを 1 枚作ってください。

- 版面 1920 × 1080
- 余白 上 108 右 140 下 108 左 140
- 3 カラム(等分)、間隔 24

## 文字(版面 1920px に対する px)
kicker  15px / 500 / 字間 0.3em / 大文字
title  54px / 700 / 字間 0.01em / 行送り 1.3
count  17px / 400 / 等幅数字
id  16px / 700 / 字間 0.14em / 等幅数字
name  25px / 700 / 行送り 1.4
about  16px / 400 / 行送り 1.7
pages  14px / 400 / 等幅数字
foot  16px / 400 / 行送り 1.8

## 配色
地 #111722 / 面 #1A2231 / 文字 #E9EDF4 / 補助 #8894A6 / 強調 #5AA2E8 / 罫 #2B3445

## 外すと崩れる点
- 格子にする。縦の一覧にすると付録が「読み物の続き」に見え、通し読みの姿勢のまま入られる
- 各編に中身の 1 行説明と頁数を書く。表題だけの目録は、結局その付録を開かせる
- その場で参照する編だけ罫を立てる。全部立てると索引として使えない
- 番号は本編の章とは別系統(A/B/C)にする。同じ番号にすると、質疑で指した先が毎回ずれる
- 「本編には含みません」と明記する。付録の扉は、ここから先は読み上げないという合図でもある

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

仕様

25.3 KB
# 案件資料の表紙 — 件名の下に発行情報を並べる
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:
  - 発行情報は 4 つで固定する。案件資料は同じ件名で何度も出るので、版・日付・宛先が表紙に無いと現物を特定できない
  - 文書種別は件名より先に読ませてよい唯一の情報。塗った小さな箱に入れ、件名とは級数で差をつける
  - 色は件名の 2 行目だけに置く。1 行目は案件、2 行目はその資料が扱う範囲、という読み順がそれで付く
  - 濃地では文字を純白にしない。表紙は会議中いちばん長く映される 1 枚になる

---

# 目次 — 章ごとに「決めたいこと」を添える
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:
  - 章名の隣に「この章で決めたいこと」を置く。それが無い目次は予定表で、読み手は聞く姿勢を決められない
  - 今日扱わない章は消さずに薄くする。消すと「資料に無い」と読まれ、後で付録を探させることになる
  - 日時・場所・出席を目次と同じ面に置く。別紙にすると、何時までの会かが分からないまま章が進む
  - 番号は 2 桁で揃える。1 桁と 2 桁が混ざると章名の頭が縦に揃わず、一覧として読めなくなる

---

# スコープの線引き — 対象と対象外を同じ大きさで並べる
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:
  - 2 面は等幅にする。対象外を小さくすると「大した話ではない」と読まれ、後で必ず「入っていると思っていた」に化ける
  - 件数も揃える。片側だけ 3 件だと、少ない側が検討されていないように見える
  - 対象外の各項目に「いつやるか」を添える。日付の無い対象外は、断りとしてしか読まれない
  - 強調は罫の色 1 手段。どちらの面も塗ってしまうと、線がどこにあるのか分からなくなる

---

# 工程の中扉 — 全工程の並びの上に現在地を打つ
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:
  - 工程は等幅で並べる。期間の長さを幅で表すと、長い工程が「遅れている」と読まれる
  - 現在地は罫の色と太字の 2 手段まで。塗りを足すと工程表と見分けがつかなくなり、中扉として働かない
  - 終わった工程も薄くしない。全工程が同じ濃さで並んでいることが「まだ全部ある」という合図になる
  - 章番号と工程は別の軸。番号は資料の章、帯は案件の工程で、たまたま一致していても揃えない

---

# システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る
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:
  - 層は 3 つまで。4 つ目を足した瞬間、聞き手は層の名前を覚えるほうに気を取られ、どこを作るのかを聞き逃す
  - すべて新規の層だけを塗る。一部だけ足す層は箱の「新規」で示す。全層を塗ると「全部作り直す」と読まれ、費用の話がその前提で始まる
  - 既存システムは点線にしない。点線は「未確定」と読まれる。示したいのは確定していることなので、文字色だけを落とす
  - 1 層に置く箱は 5 個まで。6 個目からは、箱の名前ではなく箱の数が印象に残る
  - 連携方式を下端に 1 行で書く。構成図に矢印で書き込むと、線の意味を説明する時間のほうが長くなる

---

# 要求一覧への回答 — 代替提案の行だけを塗る
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:
  - 判定は「満たす/代替提案/第 2 期」の 3 値だけにする。「条件付きで満たす」は条件が読まれないまま合意された扱いになる
  - 塗るのは代替提案の行だけ。満たす行を塗ると表全体が強調になり、議論すべき 1 行が沈む
  - 実現方式を同じ行に置く。別紙に送ると「代替提案」の 3 文字だけが残り、何が違うのか分からないまま持ち帰られる
  - 抜粋なら件数を見出しの隣に書く。全 48 件のうち 6 件だと分かって初めて、この 1 枚が議題になる
  - 要求番号は発注側の採番をそのまま使う。振り直すと、以後すべての質疑で番号の突き合わせが要る

---

# 体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る
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:
  - 節には人名ではなく会議体を置く。人を書いた体制図は、要員が 1 人替わるたびに古くなる
  - 窓口は 1 つだけ塗る。2 つ塗ると、実際には窓口が無いのと同じになる
  - 各節に開催頻度を書く。月 1 回の決裁と週 2 回の相談は、体制図の中で別の性格を持つ
  - 枝の渡り線は端のチームの中心で止める。版面の端まで引くと、外側にも何かあるように読まれる
  - チームの主管(御社/弊社/合同)を必ず書く。主管の書かれていない箱は、後で誰も引き取らない

---

# 工程表 — 帯の長さを期間に、重なりを引き継ぎに使う
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:
  - 月の境界を罫で引く。目盛りの無いガントは「だいたい 3 月ごろ」としか読めず、合意の材料にならない
  - 帯の重なりは引き継ぎ期間として意図的に残す。詰めて描くと、後工程の立ち上がりが読めなくなる
  - 発注側の作業は塗らずに罫で囲む。同じ塗りにすると、どちらがどれだけ動くのかが図から消える
  - accent を置くのは現在地の 1 本だけ。塗り分けを増やすと、色で「今」を言う手段が無くなる
  - 人月を右端に置く。帯の隣に置くと期間と工数が混ざり、長い帯=重い工程と誤読される

---

# 見積の内訳 — 総額より先に構成比を読ませる
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:
  - 積み上げの帯を表より上に置く。総額から読ませると「高い/安い」の話になり、どこに費用が乗っているかの話にならない
  - 単価は工程ごとに出す。平均単価 1 つだと、工程を削ったときの再計算が合わず、値引き交渉が算数の話になる
  - 発注側の工数は金額に入れず、行としては残す。消すと「こちらは何もしなくてよい」と読まれる
  - 前提と変動要因を同じ面に置く。別紙に送ると総額だけが独り歩きし、範囲が変わっても金額は据え置きだと思われる
  - 有効期限を書く。要員の確保が前提の金額なので、期限の無い見積は約束として扱われる
  - 塗るのはいちばん重い工程 1 つだけ。2 つ塗ると「重い」が意味を失う

---

# テスト計画 — 作る工程と受け入れる試験を行で対にする
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:
  - V 字を斜めに描かない。斜めにすると対応関係が図の形の話になり、L2 と T2 が対だという肝心の点が読み落とされる
  - 左右は同じ行数にする。試験のほうが少ない計画は、受け入れられない成果物があるということ
  - 各試験に実施者を書く。「総合テスト」だけでは、立ち会うのか判定するのかが決まらない
  - 受入基準は左の工程を書いた時点で作る。試験の直前に決めると、作ったものに合わせた基準になる
  - 面を敷くのは受け入れる側だけ。両側を敷くと、どちらが判定の主体か分からなくなる

---

# 変更管理 — 各段に営業日を与え、否認の行き先まで描く
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:
  - 各段に営業日を書く。日数の無いフローは「いつ決まるか」を答えないので、現場は待たずに先に作り始める
  - 否認の行き先を描く。行き先の無い否認は、同じ要求が翌月また受付に戻ってくる
  - 判定者を金額や規模で分ける。1 つの会議体に全部持ち込むと、小さな変更が月 1 回の決裁を待つことになる
  - 「計画の改訂」を独立した段にする。ここが段になっていないから、小さな変更が工程表に反映されないまま積み上がる
  - 塗るのは止まる段 1 つだけ。他は作業の段なので、塗ると「どこで待つのか」が読めなくなる
  - 枝は判定の段の左端から L 字で落とす。渡り線の途中に落とすと、その左に置いた見出しが分岐の出どころに見える

---

# 進捗報告 — 信号の色を使わず、手当ての欄で危険を示す
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:
  - 信号の色を使わない。役割色は 6 つで赤も黄も無く、代わりに状態を語で書く。語で書いたほうが議事録に残る
  - 遅れている行には必ず手当てを書く。手当ての無い遅延は、報告ではなく告知になる
  - 予定は帯の中の目盛り、実績は塗り。2 本の帯を上下に並べると、凡例を読むまでどちらがどちらか決まらない
  - 面を敷くのは判断をお願いする 1 行だけ。遅延も塗ると、決めてほしい行と報告だけの行が同じ重さになる
  - 溝は面ではなく ink の薄い混色にする。塗った行の上で面と同じ色になると、帯の伸びしろが消える

---

# 品質状況 — 残件の合計ではなく、出荷を止める区画を読む
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:
  - 残件の合計を大きく出さない。「残 37 件」は安全とも危険とも決めない。決めるのは重要度「高」の未解決の区画
  - 重要度の定義を行の下に 1 行ずつ書く。定義の無い高・中・低は、報告のたびに基準がずれる
  - 未解決 3 列と完了列の間に太い罫を引く。完了を隣に並べるだけだと、大きい完了件数が未解決を小さく見せる
  - 完了列は消さない。分母が消えると、収束しているのか始まってもいないのかが読めない
  - 推移は残存 1 本だけにする。検出と解決を重ねると、「収束しているか」より先に内訳の議論になる
  - 次工程へ進む条件を同じ面に書く。条件が別紙にあると、この表は「今の様子」で終わり、判断の材料にならない

---

# 切替当日の手順 — 戻す判断の時刻を手順の中に置く
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:
  - 戻す判断に時刻を与え、手順の 1 行として並びの中に置く。別枠に書いた切戻し基準は、当日その紙が開かれない
  - 各行に担当を書く。当日は連絡がつかない前提で組むので、名前ではなくチームで書く
  - 所要時間は備考に書き、時刻から引き算させない。深夜に暗算をさせる手順書は読み間違えられる
  - 業務停止の時間幅を見出しの隣に置く。手順の総和ではなく、止まる長さのほうが合意の対象になる
  - 予備日を必ず載せる。当日に切戻した場合の次の日程が決まっていないと、判断そのものが先送りされる

---

# 締めの 1 枚 — お願いする判断を期限つきで 3 件だけ
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:
  - 判断は 3 件まで。4 件目を足すと、どれも「持ち帰って検討」に送られる
  - 期限には「遅れると何が動くか」を必ず添える。日付だけでは、それが守るべき日付かどうか読み手に分からない
  - 各件に本編の章番号を書く。締めの 1 枚だけを見た人が、根拠を探して資料を往復せずに済む
  - 下端に次回の日時を置く。締めの紙に次の予定が無いと、判断の期限だけが宙に浮く
  - 中央寄せにするのは、この 1 枚が読み物ではなく合図だから。左揃えにすると本編の続きとして流される

---

# 付録の扉 — 収録物を番号つきの格子で見せる
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:
  - 格子にする。縦の一覧にすると付録が「読み物の続き」に見え、通し読みの姿勢のまま入られる
  - 各編に中身の 1 行説明と頁数を書く。表題だけの目録は、結局その付録を開かせる
  - その場で参照する編だけ罫を立てる。全部立てると索引として使えない
  - 番号は本編の章とは別系統(A/B/C)にする。同じ番号にすると、質疑で指した先が毎回ずれる
  - 「本編には含みません」と明記する。付録の扉は、ここから先は読み上げないという合図でもある

ファイル

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

3.9 KB

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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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

中身を見る
<!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>