As measured
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 104 right 140 bottom 104 left 140 ## Emphasis row 2 only, by fill + rule and nothing else ## Type (px against a 1920px canvas) title 46px / 700 / tracking 0.01em / leading 1.3 lede 19px / 400 / leading 1.8 tname 24px / 700 / leading 1.4 tnote 15px / 400 / leading 1.6 bname 19px / 500 / leading 1.4 btag 14px / 400 fkey 14px / 500 / tracking 0.14em fval 17px / 500 / leading 1.6 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building - Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there - Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts - Five boxes per tier. From the sixth on, what the room remembers is the count, not the names - State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/architecture-3tier-stack/pattern.html.
/ai/designs/architecture-3tier-stack.json
format: slide-16x9
density: high
layout:
kind: stack
canvas:
w: 1920
h: 1080
margin:
top: 104
right: 140
bottom: 104
left: 140
emphasis:
row: 2
via:
- fill
- rule
type:
title:
size: 46
weight: 700
tracking: 0.01em
leading: 1.3
lede:
size: 19
weight: 400
leading: 1.8
tname:
size: 24
weight: 700
leading: 1.4
tnote:
size: 15
weight: 400
leading: 1.6
bname:
size: 19
weight: 500
leading: 1.4
btag:
size: 14
weight: 400
fkey:
size: 14
weight: 500
tracking: 0.14em
fval:
size: 17
weight: 500
leading: 1.6
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building
- Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there
- Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts
- Five boxes per tier. From the sixth on, what the room remembers is the count, not the names
- State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves{
"format": "slide-16x9",
"density": "high",
"layout": {
"kind": "stack",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 104,
"right": 140,
"bottom": 104,
"left": 140
},
"emphasis": {
"row": 2,
"via": [
"fill",
"rule"
]
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"lede": {
"size": 19,
"weight": 400,
"leading": 1.8
},
"tname": {
"size": 24,
"weight": 700,
"leading": 1.4
},
"tnote": {
"size": 15,
"weight": 400,
"leading": 1.6
},
"bname": {
"size": 19,
"weight": 500,
"leading": 1.4
},
"btag": {
"size": 14,
"weight": 400
},
"fkey": {
"size": 14,
"weight": 500,
"tracking": "0.14em"
},
"fval": {
"size": 17,
"weight": 500,
"leading": 1.6
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Three tiers at most — a fourth makes the room memorise names instead of hearing which part you are building",
"Fill only the tier that is new throughout; mark additions elsewhere on the boxes. Filling every tier reads as a full rebuild, and the cost conversation starts there",
"Never dash the existing systems — a dashed box reads as undecided. Dim the label instead; these are the settled parts",
"Five boxes per tier. From the sixth on, what the room remembers is the count, not the names",
"State the integration style in one line at the foot; drawn as arrows it costs more time to explain than it saves"
]
} /designs/architecture-3tier-stack/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!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>
/designs/architecture-3tier-stack/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 142 (6bcd2fc58a03af5a)
*
* pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
* 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
* その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
*/
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+31-33, U+2014, U+3001-3002, U+3044, U+3046, U+304f-3054, U+3057-305a, U+305d-3060, U+3064-3069, U+306b, U+306e-3071, U+3078-307a, U+307e-307f, U+308a-308b, U+3092, U+3094, U+3099-309a, U+30a2, U+30a4, U+30a6, U+30af-30b0, U+30b7-30ba, U+30bf-30c3, U+30c6-30c9, U+30cf-30de, U+30e0, U+30e5, U+30e9-30eb, U+30ed, U+30f4, U+30fb-30fc, U+4e0a-4e0b, U+4e2d, U+4e57, U+4f1a, U+4f5c, U+4f7f, U+50cd, U+5165, U+5185, U+51fa, U+5224, U+5229, U+524d, U+529b, U+52d9, U+53d7, U+53ef, U+540c, U+5426, U+5728, U+57fa, U+5857, U+5883, U+5b58, U+5c64, U+5e33, U+5eab, U+5f0f, U+5f15, U+5f53, U+5fc3, U+6210, U+6307, U+63d0, U+643a, U+65ad, U+65b0, U+65b9, U+65e2, U+65e5, U+671f, U+672b, U+67fb, U+696d, U+69cb, U+6b21, U+6bb5, U+6ce8, U+7167, U+7406, U+74b0, U+7523, U+7528, U+7531, U+753b, U+7573, U+767a, U+76e3-76e4, U+76f8, U+793a, U+793e, U+7968, U+7a3c, U+7ae0, U+7aef, U+7b2c, U+7ba1, U+7d4c, U+8005, U+8377, U+898f, U+8a08, U+8a2d, U+8a3c, U+8a8d, U+8cc7, U+8db3, U+9023, U+958b, U+9650, U+9762, U+ff08-ff09;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-1.woff2) format('woff2');
unicode-range: U+31-33, U+2014, U+3001-3002, U+3044, U+3046, U+304f-3054, U+3057-305a, U+305d-3060, U+3064-3069, U+306b, U+306e-3071, U+3078-307a, U+307e-307f, U+308a-308b, U+3092, U+3094, U+3099-309a, U+30a2, U+30a4, U+30a6, U+30af-30b0, U+30b7-30ba, U+30bf-30c3, U+30c6-30c9, U+30cf-30de, U+30e0, U+30e5, U+30e9-30eb, U+30ed, U+30f4, U+30fb-30fc, U+4e0a-4e0b, U+4e2d, U+4e57, U+4f1a, U+4f5c, U+4f7f, U+50cd, U+5165, U+5185, U+51fa, U+5224, U+5229, U+524d, U+529b, U+52d9, U+53d7, U+53ef, U+540c, U+5426, U+5728, U+57fa, U+5857, U+5883, U+5b58, U+5c64, U+5e33, U+5eab, U+5f0f, U+5f15, U+5f53, U+5fc3, U+6210, U+6307, U+63d0, U+643a, U+65ad, U+65b0, U+65b9, U+65e2, U+65e5, U+671f, U+672b, U+67fb, U+696d, U+69cb, U+6b21, U+6bb5, U+6ce8, U+7167, U+7406, U+74b0, U+7523, U+7528, U+7531, U+753b, U+7573, U+767a, U+76e3-76e4, U+76f8, U+793a, U+793e, U+7968, U+7a3c, U+7ae0, U+7aef, U+7b2c, U+7ba1, U+7d4c, U+8005, U+8377, U+898f, U+8a08, U+8a2d, U+8a3c, U+8a8d, U+8cc7, U+8db3, U+9023, U+958b, U+9650, U+9762, U+ff08-ff09;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-2.woff2) format('woff2');
unicode-range: U+31-33, U+2014, U+3001-3002, U+3044, U+3046, U+304f-3054, U+3057-305a, U+305d-3060, U+3064-3069, U+306b, U+306e-3071, U+3078-307a, U+307e-307f, U+308a-308b, U+3092, U+3094, U+3099-309a, U+30a2, U+30a4, U+30a6, U+30af-30b0, U+30b7-30ba, U+30bf-30c3, U+30c6-30c9, U+30cf-30de, U+30e0, U+30e5, U+30e9-30eb, U+30ed, U+30f4, U+30fb-30fc, U+4e0a-4e0b, U+4e2d, U+4e57, U+4f1a, U+4f5c, U+4f7f, U+50cd, U+5165, U+5185, U+51fa, U+5224, U+5229, U+524d, U+529b, U+52d9, U+53d7, U+53ef, U+540c, U+5426, U+5728, U+57fa, U+5857, U+5883, U+5b58, U+5c64, U+5e33, U+5eab, U+5f0f, U+5f15, U+5f53, U+5fc3, U+6210, U+6307, U+63d0, U+643a, U+65ad, U+65b0, U+65b9, U+65e2, U+65e5, U+671f, U+672b, U+67fb, U+696d, U+69cb, U+6b21, U+6bb5, U+6ce8, U+7167, U+7406, U+74b0, U+7523, U+7528, U+7531, U+753b, U+7573, U+767a, U+76e3-76e4, U+76f8, U+793a, U+793e, U+7968, U+7a3c, U+7ae0, U+7aef, U+7b2c, U+7ba1, U+7d4c, U+8005, U+8377, U+898f, U+8a08, U+8a2d, U+8a3c, U+8a8d, U+8cc7, U+8db3, U+9023, U+958b, U+9650, U+9762, U+ff08-ff09;
}
第 1 期で作る範囲を構成図の上で示すための版。pattern.html が版そのもので、cover.png と
frontmatter の寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。
The architecture slide that shows which part of the estate this phase touches. pattern.html is
the artboard itself; both cover.png and the measurements come from it, so the three cannot
drift apart.
btag の 2 文字だけで足りる。凡例を別に置くと凡例を読む時間が要るbtag で示す — 足す箱があるたびに層を塗ると、塗りが「どこを作るか」を言わなくなるbtag を「継続／廃止」に読み替える）