1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 82 右 120 下 82 左 120 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em subtitle 22px / 400 groupLabel 20px / 500 nodeLabel 23px / 700 singleLabel 24px / 700 singleMeta 20px / 500 edgeLabel 20px / 500 legendTitle 22px / 700 legendBody 20px / 400 conclusion 26px / 500 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #2F6FB5 / #A85A2E / #1C8C79 ## 外すと崩れる点 - 直列の要素は処理経路のすべてで必要である。1つが停止するとその経路は完了しない - 並列の要素はどれか1系統で役割を果たす構成として読む。共有する故障要因や切替不良は別途検証する - 複数の経路が共有する単一キューを強調する。後段の台数だけを数えると端から端の可用性を見誤る - 架空の構成例であり、稼働率や独立故障の数値を表していない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/reliability-block-single-queue/pattern.html
/ai/designs/reliability-block-single-queue.json
format: slide-16x9
density: medium
layout:
kind: flow
canvas:
w: 1920
h: 1080
margin:
top: 82
right: 120
bottom: 82
left: 120
type:
title:
size: 44
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 400
groupLabel:
size: 20
weight: 500
nodeLabel:
size: 23
weight: 700
singleLabel:
size: 24
weight: 700
singleMeta:
size: 20
weight: 500
edgeLabel:
size: 20
weight: 500
legendTitle:
size: 22
weight: 700
legendBody:
size: 20
weight: 400
conclusion:
size: 26
weight: 500
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
series:
- "#2F6FB5"
- "#A85A2E"
- "#1C8C79"
rules:
- 直列の要素は処理経路のすべてで必要である。1つが停止するとその経路は完了しない
- 並列の要素はどれか1系統で役割を果たす構成として読む。共有する故障要因や切替不良は別途検証する
- 複数の経路が共有する単一キューを強調する。後段の台数だけを数えると端から端の可用性を見誤る
- 架空の構成例であり、稼働率や独立故障の数値を表していない{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "flow",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 82,
"right": 120,
"bottom": 82,
"left": 120
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 400
},
"groupLabel": {
"size": 20,
"weight": 500
},
"nodeLabel": {
"size": 23,
"weight": 700
},
"singleLabel": {
"size": 24,
"weight": 700
},
"singleMeta": {
"size": 20,
"weight": 500
},
"edgeLabel": {
"size": 20,
"weight": 500
},
"legendTitle": {
"size": 22,
"weight": 700
},
"legendBody": {
"size": 20,
"weight": 400
},
"conclusion": {
"size": 26,
"weight": 500
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#2F6FB5",
"#A85A2E",
"#1C8C79"
]
},
"rules": [
"直列の要素は処理経路のすべてで必要である。1つが停止するとその経路は完了しない",
"並列の要素はどれか1系統で役割を果たす構成として読む。共有する故障要因や切替不良は別途検証する",
"複数の経路が共有する単一キューを強調する。後段の台数だけを数えると端から端の可用性を見誤る",
"架空の構成例であり、稼働率や独立故障の数値を表していない"
]
} /designs/reliability-block-single-queue/pattern.html — 版そのものの 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">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" data-artboard="true">
<style>
:root {
--ground: #FFFFFF; --surface: #F4F6F9; --ink: #131820;
--muted: #667183; --accent: #1F5FA8; --rule: #DBE1E9;
--series-1: #2F6FB5; --series-2: #A85A2E; --series-3: #1C8C79;
--plot-color-1: #FBF3EF;
}
svg { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; }
.ground { fill: var(--ground); }
.ink { fill: var(--ink); }
.muted { fill: var(--muted); }
.accent { fill: var(--accent); }
.rule { stroke: var(--rule); }
.title { font-size: 44px; font-weight: 700; letter-spacing: .01em; }
.subtitle { font-size: 22px; font-weight: 400; }
.group-label { font-size: 20px; font-weight: 500; }
.node-label { font-size: 23px; font-weight: 700; }
.node-meta { font-size: 20px; font-weight: 400; }
.single-label { font-size: 24px; font-weight: 700; }
.single-meta { font-size: 20px; font-weight: 500; }
.edge-label { font-size: 20px; font-weight: 500; }
.legend-title { font-size: 22px; font-weight: 700; }
.legend-body { font-size: 20px; font-weight: 400; }
.conclusion { font-size: 26px; font-weight: 500; }
.parallel-frame { fill: var(--ground); stroke: var(--rule); stroke-width: 2; }
.parallel-node { fill: var(--surface); stroke: var(--series-1); stroke-width: 2; }
.critical-node { fill: var(--plot-color-1); stroke: var(--series-2); stroke-width: 3; }
.edge { fill: none; stroke: var(--muted); stroke-width: 3; }
.arrow { fill: var(--muted); }
</style>
<defs>
<marker id="flow-arrowhead-main" markerWidth="12" markerHeight="12" refX="9" refY="6" orient="auto" markerUnits="userSpaceOnUse">
<path class="arrow" d="M1 1 L10 6 L1 11 z"/>
</marker>
</defs>
<rect class="ground" x="0" y="0" width="1920" height="1080"/>
<g transform="translate(120 82)" data-content="true">
<rect x="0" y="0" width="1680" height="916" fill="transparent"/>
<text class="title ink" data-type="title" x="0" y="56">並列化した入口とワーカー — 単一キューが全経路を止める</text>
<text class="subtitle muted" data-type="subtitle" x="0" y="106">架空のイベント処理基盤 / 直列の工程はすべて必要、並列の組はどれか1系統で通過</text>
<line class="rule" x1="0" y1="144" x2="1680" y2="144" stroke-width="2"/>
<text class="group-label muted" data-type="groupLabel" x="342" y="225" text-anchor="middle">入口プール · いずれか1台</text>
<text class="group-label muted" x="1066" y="225" text-anchor="middle">ワーカープール · いずれか1台</text>
<text class="group-label muted" x="0" y="505">イベント</text>
<!-- Event enters through either gateway. The bus makes the parallel choice explicit. -->
<path class="edge" d="M90 515 H162 M162 424 V606 M162 424 H220 M162 606 H220"/>
<path class="edge" d="M162 424 H220" marker-end="url(#flow-arrowhead-main)"/>
<path class="edge" d="M162 606 H220" marker-end="url(#flow-arrowhead-main)"/>
<rect class="parallel-frame" x="220" y="354" width="244" height="330" rx="14"/>
<rect class="parallel-node" x="247" y="386" width="190" height="76" rx="10"/>
<rect class="parallel-node" x="247" y="568" width="190" height="76" rx="10"/>
<text class="node-label ink" data-type="nodeLabel" x="342" y="432" text-anchor="middle">入口 A</text>
<text class="node-label ink" x="342" y="614" text-anchor="middle">入口 B</text>
<text class="edge-label accent" data-type="edgeLabel" x="342" y="500" text-anchor="middle">OR</text>
<!-- Both entry nodes converge on the same single queue. -->
<path class="edge" d="M437 424 H490 M437 606 H490 M490 424 V606 M490 515 H558"/>
<path class="edge" d="M490 515 H558" marker-end="url(#flow-arrowhead-main)"/>
<rect class="critical-node" x="558" y="465" width="200" height="100" rx="12"/>
<text class="single-label ink" data-type="singleLabel" x="658" y="510" text-anchor="middle">キュー</text>
<text class="single-meta" data-type="singleMeta" x="658" y="542" text-anchor="middle" fill="var(--series-2)">1系統 · 単一障害点</text>
<!-- A queued event can be processed by either stateless worker. -->
<path class="edge" d="M758 515 H808 M808 424 V606 M808 424 H858 M808 606 H858"/>
<path class="edge" d="M808 424 H858" marker-end="url(#flow-arrowhead-main)"/>
<path class="edge" d="M808 606 H858" marker-end="url(#flow-arrowhead-main)"/>
<rect class="parallel-frame" x="858" y="354" width="244" height="330" rx="14"/>
<rect class="parallel-node" x="885" y="386" width="190" height="76" rx="10"/>
<rect class="parallel-node" x="885" y="568" width="190" height="76" rx="10"/>
<text class="node-label ink" x="980" y="432" text-anchor="middle">ワーカー A</text>
<text class="node-label ink" x="980" y="614" text-anchor="middle">ワーカー B</text>
<text class="edge-label accent" x="980" y="500" text-anchor="middle">OR</text>
<!-- Either worker can complete the example job. -->
<path class="edge" d="M1075 424 H1140 M1075 606 H1140 M1140 424 V606 M1140 515 H1210"/>
<path class="edge" d="M1140 515 H1210" marker-end="url(#flow-arrowhead-main)"/>
<rect class="parallel-frame" x="1210" y="354" width="244" height="330" rx="14"/>
<rect class="parallel-node" x="1237" y="386" width="190" height="76" rx="10"/>
<rect class="parallel-node" x="1237" y="568" width="190" height="76" rx="10"/>
<text class="node-label ink" x="1332" y="432" text-anchor="middle">結果先 A</text>
<text class="node-label ink" x="1332" y="614" text-anchor="middle">結果先 B</text>
<text class="edge-label accent" x="1332" y="500" text-anchor="middle">OR</text>
<path class="edge" d="M1427 424 H1468 M1427 606 H1468 M1468 424 V606 M1468 515 H1530"/>
<path class="edge" d="M1468 515 H1530" marker-end="url(#flow-arrowhead-main)"/>
<rect x="1530" y="478" width="132" height="74" rx="37" fill="var(--accent)"/>
<text x="1596" y="524" text-anchor="middle" fill="var(--ground)" font-size="22" font-weight="700">応答</text>
<line class="rule" x1="0" y1="754" x2="1680" y2="754" stroke-width="2"/>
<text class="legend-title ink" data-type="legendTitle" x="0" y="802">読み方</text>
<rect class="critical-node" x="122" y="778" width="26" height="26" rx="5"/>
<text class="legend-body ink" data-type="legendBody" x="164" y="800">直列の1ブロックが停止すると、後段へ進めない</text>
<rect class="parallel-node" x="752" y="778" width="26" height="26" rx="5"/>
<text class="legend-body ink" x="794" y="800">並列の組はどれか1系統で処理を続けられる想定</text>
<text class="conclusion ink" data-type="conclusion" x="0" y="877">入口とワーカーを二重化しても、共有キューが止まればイベント処理は止まる。</text>
</g>
</svg>
/designs/reliability-block-single-queue/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 100 (0490a7f865e3a504)
*
* 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+2f, U+31, U+41-42, U+4f, U+52, U+b7, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3051-3052, U+3057-305a, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+307e-307f, U+3081-3082, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30ab-30b0, U+30c3, U+30c8-30c9, U+30d5-30da, U+30e5, U+30eb, U+30ed, U+30ef, U+30f3, U+30f7, U+30fc, U+4e00, U+4e26, U+4e8c, U+505c, U+5148, U+5165, U+5168, U+5171, U+51e6, U+5217, U+5316, U+5358, U+53e3, U+53f0, U+57fa, U+5b9a, U+5bb3, U+5de5, U+5f8c, U+5fc5, U+5fdc, U+60f3, U+65b9, U+6709, U+679c, U+67b6, U+6b62, U+6bb5, U+70b9, U+7406, U+76e4, U+76f4, U+7a0b, U+7a7a, U+7b54, U+7cfb, U+7d44, U+7d4c, U+7d50, U+7d71, U+7d9a, U+8981, U+8aad, U+8def, U+901a, U+9032, U+904e, U+91cd, U+969c;
}
@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+2f, U+31, U+41-42, U+4f, U+52, U+b7, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3051-3052, U+3057-305a, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+307e-307f, U+3081-3082, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30ab-30b0, U+30c3, U+30c8-30c9, U+30d5-30da, U+30e5, U+30eb, U+30ed, U+30ef, U+30f3, U+30f7, U+30fc, U+4e00, U+4e26, U+4e8c, U+505c, U+5148, U+5165, U+5168, U+5171, U+51e6, U+5217, U+5316, U+5358, U+53e3, U+53f0, U+57fa, U+5b9a, U+5bb3, U+5de5, U+5f8c, U+5fc5, U+5fdc, U+60f3, U+65b9, U+6709, U+679c, U+67b6, U+6b62, U+6bb5, U+70b9, U+7406, U+76e4, U+76f4, U+7a0b, U+7a7a, U+7b54, U+7cfb, U+7d44, U+7d4c, U+7d50, U+7d71, U+7d9a, U+8981, U+8aad, U+8def, U+901a, U+9032, U+904e, U+91cd, U+969c;
}
@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+2f, U+31, U+41-42, U+4f, U+52, U+b7, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3051-3052, U+3057-305a, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+307e-307f, U+3081-3082, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30ab-30b0, U+30c3, U+30c8-30c9, U+30d5-30da, U+30e5, U+30eb, U+30ed, U+30ef, U+30f3, U+30f7, U+30fc, U+4e00, U+4e26, U+4e8c, U+505c, U+5148, U+5165, U+5168, U+5171, U+51e6, U+5217, U+5316, U+5358, U+53e3, U+53f0, U+57fa, U+5b9a, U+5bb3, U+5de5, U+5f8c, U+5fc5, U+5fdc, U+60f3, U+65b9, U+6709, U+679c, U+67b6, U+6b62, U+6bb5, U+70b9, U+7406, U+76e4, U+76f4, U+7a0b, U+7a7a, U+7b54, U+7cfb, U+7d44, U+7d4c, U+7d50, U+7d71, U+7d9a, U+8981, U+8aad, U+8def, U+901a, U+9032, U+904e, U+91cd, U+969c;
}
この図はイベント処理の「成功経路」をブロックで表したもの。入口・ワーカー・結果先はそれぞれ どれか1台で処理できる並列群だが、すべての要求は同じキューを通る。
そのため入口やワーカーを増やしても、キューが止まれば後段へ進めない。現実の可用性を計算する には共通電源・ネットワーク・ソフトウェア障害や切替動作も確認する必要があり、この図は構造上の 単一障害点を読むための架空例に限る。