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 90 right 120 bottom 60 left 120 ## Type (px against a 1920px canvas) title 44px / 700 / tracking 0.01em subtitle 22px / 500 phase 20px / 700 / tracking 0.06em cause 22px / 700 barrier 20px / 500 event 24px / 700 consequence 22px / 700 takeaway 26px / 500 note 20px / 400 ## Colour Ground #F7F8F5 / Surface #FFFFFF / Ink #18232D / Muted #586875 / Accent #C64E32 / Rule #D7DEE1 ## Constraints — dropping these breaks it - The central top event is a temperature outside the defined range, not a generic warehouse emergency. - Barriers on the left prevent the excursion; barriers on the right limit consequences after it occurs. - Verify barrier effectiveness and ownership onsite; this diagram alone does not assure safety. - Fictional example; replace temperature limits, alarm delays and discard criteria with actual quality standards. 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/bowtie-cold-storage-temperature-excursion/pattern.html.
/ai/designs/bowtie-cold-storage-temperature-excursion.json
format: slide-16x9
density: medium
layout:
kind: network
canvas:
w: 1920
h: 1080
margin:
top: 90
right: 120
bottom: 60
left: 120
type:
title:
size: 44
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 500
phase:
size: 20
weight: 700
tracking: 0.06em
cause:
size: 22
weight: 700
barrier:
size: 20
weight: 500
event:
size: 24
weight: 700
consequence:
size: 22
weight: 700
takeaway:
size: 26
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#F7F8F5"
surface: "#FFFFFF"
ink: "#18232D"
muted: "#586875"
accent: "#C64E32"
rule: "#D7DEE1"
rules:
- The central top event is a temperature outside the defined range, not a generic warehouse emergency.
- Barriers on the left prevent the excursion; barriers on the right limit consequences after it occurs.
- Verify barrier effectiveness and ownership onsite; this diagram alone does not assure safety.
- Fictional example; replace temperature limits, alarm delays and discard criteria with actual quality standards.{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "network",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 90,
"right": 120,
"bottom": 60,
"left": 120
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"phase": {
"size": 20,
"weight": 700,
"tracking": "0.06em"
},
"cause": {
"size": 22,
"weight": 700
},
"barrier": {
"size": 20,
"weight": 500
},
"event": {
"size": 24,
"weight": 700
},
"consequence": {
"size": 22,
"weight": 700
},
"takeaway": {
"size": 26,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#F7F8F5",
"surface": "#FFFFFF",
"ink": "#18232D",
"muted": "#586875",
"accent": "#C64E32",
"rule": "#D7DEE1"
},
"rules": [
"The central top event is a temperature outside the defined range, not a generic warehouse emergency.",
"Barriers on the left prevent the excursion; barriers on the right limit consequences after it occurs.",
"Verify barrier effectiveness and ownership onsite; this diagram alone does not assure safety.",
"Fictional example; replace temperature limits, alarm delays and discard criteria with actual quality standards."
]
} /designs/bowtie-cold-storage-temperature-excursion/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>冷蔵倉庫の温度逸脱 — 3つの予防と3つの影響緩和</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
:root{--ground:#F7F8F5;--surface:#FFFFFF;--ink:#18232D;--muted:#586875;--accent:#C64E32;--prevent:#236B9A;--mitigate:#A66019;--rule:#D7DEE1;
--plot-color-1: #EAF2F7;
--plot-color-2: #F7EFE4;
--plot-color-3: #FCEBE7;
}
*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}
.artboard{width:1920px;height:1080px;padding:90px 120px 60px;background:var(--ground);color:var(--ink);position:relative}.content{width:100%;height:100%}.content>svg{position:absolute;left:0;top:0}
</style>
<div class="artboard" data-artboard><div class="content" data-content>
<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="冷蔵倉庫の温度が8度を超えるトップ事象を中央に置き、扉開放、冷凍機停止、積み込み過多の3脅威と予防バリアを左に、品質確認、代替保管、連絡の影響緩和策を右に示すボウタイ図。">
<style>
text{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.title{font-size:44px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.phase{font-size:20px;font-weight:700;letter-spacing:.06em}.cause{font-size:22px;font-weight:700}.barrier{font-size:20px;font-weight:500}.event{font-size:24px;font-weight:700}.consequence{font-size:22px;font-weight:700}.takeaway{font-size:26px;font-weight:500}.note{font-size:20px;font-weight:400}.rule{stroke:var(--rule)}.prevent-line{fill:none;stroke:var(--prevent);stroke-width:3}.mitigate-line{fill:none;stroke:var(--mitigate);stroke-width:3}.cause-box,.consequence-box{fill:var(--surface);stroke:var(--rule);stroke-width:2}.prevent-box{fill:var(--plot-color-1);stroke:var(--prevent);stroke-width:2}.mitigate-box{fill:var(--plot-color-2);stroke:var(--mitigate);stroke-width:2}.event-box{fill:var(--plot-color-3);stroke:var(--accent);stroke-width:3}.threat{fill:var(--muted)}
</style>
<rect width="1920" height="1080" fill="var(--ground)"/>
<g transform="translate(120 90)">
<text class="ink title" data-type="title" x="0" y="58">冷蔵倉庫の温度逸脱 — 3つの予防と3つの影響緩和</text>
<text class="muted subtitle" data-type="subtitle" x="0" y="100">トップ事象: 保管温度が8°Cを超える / 架空のリスク例</text>
<line class="rule" x1="0" y1="128" x2="1680" y2="128" stroke-width="2"/>
<text class="prevent phase" data-type="phase" x="310" y="175" text-anchor="middle" fill="var(--prevent)">発生前 — 予防バリア</text>
<text class="muted phase" x="840" y="175" text-anchor="middle">トップ事象</text>
<text class="mitigate phase" x="1370" y="175" text-anchor="middle" fill="var(--mitigate)">発生後 — 影響緩和バリア</text>
<!-- Three threat paths converge on one precisely defined top event. -->
<path class="prevent-line" d="M300 290 C420 290 440 340 510 340 M770 340 C820 340 820 390 840 420"/>
<path class="prevent-line" d="M300 460 H510 M770 460 H840"/>
<path class="prevent-line" d="M300 630 C420 630 440 580 510 580 M770 580 C820 580 820 530 840 500"/>
<!-- The top event opens into three distinct consequence paths. -->
<path class="mitigate-line" d="M1040 420 C1070 390 1080 340 1110 340 M1370 340 C1430 340 1430 290 1490 290"/>
<path class="mitigate-line" d="M1040 460 H1110 M1370 460 H1490"/>
<path class="mitigate-line" d="M1040 500 C1070 530 1080 580 1110 580 M1370 580 C1430 580 1430 630 1490 630"/>
<g class="threat">
<circle cx="320" cy="290" r="6"/><circle cx="320" cy="460" r="6"/><circle cx="320" cy="630" r="6"/>
</g>
<rect class="cause-box" x="20" y="250" width="280" height="80" rx="8"/><text class="ink cause" data-type="cause" x="160" y="300" text-anchor="middle">扉の長時間開放</text>
<rect class="cause-box" x="20" y="420" width="280" height="80" rx="8"/><text class="ink cause" x="160" y="470" text-anchor="middle">冷凍機の停止</text>
<rect class="cause-box" x="20" y="590" width="280" height="80" rx="8"/><text class="ink cause" x="160" y="640" text-anchor="middle">積み込み過多</text>
<rect class="prevent-box" x="510" y="300" width="260" height="80" rx="8"/><text class="ink barrier" data-type="barrier" x="640" y="335" text-anchor="middle"><tspan x="640">自動閉扉と</tspan><tspan x="640" dy="27">開放アラーム</tspan></text>
<rect class="prevent-box" x="510" y="420" width="260" height="80" rx="8"/><text class="ink barrier" x="640" y="455" text-anchor="middle"><tspan x="640">予防保全と</tspan><tspan x="640" dy="27">予備機切替</tspan></text>
<rect class="prevent-box" x="510" y="540" width="260" height="80" rx="8"/><text class="ink barrier" x="640" y="575" text-anchor="middle"><tspan x="640">入庫上限と</tspan><tspan x="640" dy="27">通風間隔</tspan></text>
<rect class="event-box" x="840" y="390" width="200" height="140" rx="12"/>
<text class="ink event" data-type="event" x="940" y="445" text-anchor="middle"><tspan x="940">温度が</tspan><tspan x="940" dy="36">8°Cを超える</tspan></text>
<text class="muted" x="940" y="505" text-anchor="middle" font-size="20">許容範囲から逸脱</text>
<rect class="mitigate-box" x="1110" y="300" width="260" height="80" rx="8"/><text class="ink barrier" x="1240" y="335" text-anchor="middle"><tspan x="1240">ロット隔離と</tspan><tspan x="1240" dy="27">品質判定</tspan></text>
<rect class="mitigate-box" x="1110" y="420" width="260" height="80" rx="8"/><text class="ink barrier" x="1240" y="455" text-anchor="middle"><tspan x="1240">代替冷蔵庫へ</tspan><tspan x="1240" dy="27">優先移送</tspan></text>
<rect class="mitigate-box" x="1110" y="540" width="260" height="80" rx="8"/><text class="ink barrier" x="1240" y="575" text-anchor="middle"><tspan x="1240">出荷先へ即時</tspan><tspan x="1240" dy="27">状況連絡</tspan></text>
<rect class="consequence-box" x="1490" y="250" width="170" height="80" rx="8"/><text class="ink consequence" data-type="consequence" x="1575" y="300" text-anchor="middle">製品廃棄</text>
<rect class="consequence-box" x="1490" y="420" width="170" height="80" rx="8"/><text class="ink consequence" x="1575" y="470" text-anchor="middle">納期遅延</text>
<rect class="consequence-box" x="1490" y="590" width="170" height="80" rx="8"/><text class="ink consequence" x="1575" y="640" text-anchor="middle">顧客欠品</text>
<rect x="250" y="715" width="1180" height="72" rx="10" fill="var(--surface)"/>
<line x1="250" y1="715" x2="250" y2="787" stroke="var(--accent)" stroke-width="6"/>
<text class="ink takeaway" data-type="takeaway" x="840" y="760" text-anchor="middle">予防策と回復策は別々に点検し、各バリアの担当を決める</text>
<line class="rule" x1="0" y1="818" x2="1680" y2="818" stroke-width="1"/>
<text class="muted note" data-type="note" x="0" y="858">8°C・対応策は説明用の仮定。製品ごとの品質限界、警報時間、隔離・廃棄基準に置き換える。</text>
</g></svg></div></div>
/designs/bowtie-cold-storage-temperature-excursion/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 147 (b3277e23c8d4a71a)
*
* 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+33, U+38, U+3a, U+43, U+b0, U+2014, U+3001-3002, U+3005, U+3048, U+304b-304e, U+3053-3054, U+3057-3058, U+3064-3065, U+3068-3069, U+306b, U+306e-3071, U+3078-307a, U+307f, U+3081, U+3089, U+308b, U+3092, U+3099-309a, U+30a2, U+30af-30b0, U+30b9-30ba, U+30c3, U+30c8-30c9, U+30cf-30d1, U+30d5-30d7, U+30e0, U+30e9-30ea, U+30ed, U+30fb-30fc, U+4e0a, U+4e88, U+4e8b, U+4ee3, U+4eee, U+4f8b, U+4fdd, U+5009, U+505c, U+5099, U+512a, U+5148, U+5165, U+5168, U+51b7, U+51cd, U+51fa, U+5207, U+5224-5225, U+524d, U+52d5, U+5373, U+5404, U+548c, U+54c1, U+56de, U+56f2, U+57fa, U+5831, U+591a, U+5b9a, U+5ba2, U+5bb9, U+5bfe, U+5ea6, U+5eab, U+5ec3, U+5ef6, U+5f53, U+5f71, U+5f8c, U+5fa9, U+5fdc, U+6249, U+62c5, U+63db, U+653e, U+660e, U+6642, U+66ff, U+671f, U+67b6, U+68c4, U+691c, U+6a5f, U+6b20, U+6b62, U+6c7a, U+6cc1, U+6e29, U+6e96, U+70b9, U+72b6, U+751f, U+7528, U+754c, U+767a, U+79fb, U+7a4d, U+7a7a, U+7b56, U+7ba1, U+7bc4, U+7d0d, U+7d61, U+7de9, U+7f6e, U+8131, U+81ea, U+8377, U+8535, U+88fd, U+8a31, U+8aac, U+8b66, U+8c61, U+8cea, U+8d85, U+8fbc, U+9001, U+901a, U+9023, U+9038, U+9045, U+904e, U+9577, U+9589, U+958b, U+9593, U+9632, U+9650, U+9694, U+96e2, U+97ff, U+9867, U+98a8;
}
@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+33, U+38, U+3a, U+43, U+b0, U+2014, U+3001-3002, U+3005, U+3048, U+304b-304e, U+3053-3054, U+3057-3058, U+3064-3065, U+3068-3069, U+306b, U+306e-3071, U+3078-307a, U+307f, U+3081, U+3089, U+308b, U+3092, U+3099-309a, U+30a2, U+30af-30b0, U+30b9-30ba, U+30c3, U+30c8-30c9, U+30cf-30d1, U+30d5-30d7, U+30e0, U+30e9-30ea, U+30ed, U+30fb-30fc, U+4e0a, U+4e88, U+4e8b, U+4ee3, U+4eee, U+4f8b, U+4fdd, U+5009, U+505c, U+5099, U+512a, U+5148, U+5165, U+5168, U+51b7, U+51cd, U+51fa, U+5207, U+5224-5225, U+524d, U+52d5, U+5373, U+5404, U+548c, U+54c1, U+56de, U+56f2, U+57fa, U+5831, U+591a, U+5b9a, U+5ba2, U+5bb9, U+5bfe, U+5ea6, U+5eab, U+5ec3, U+5ef6, U+5f53, U+5f71, U+5f8c, U+5fa9, U+5fdc, U+6249, U+62c5, U+63db, U+653e, U+660e, U+6642, U+66ff, U+671f, U+67b6, U+68c4, U+691c, U+6a5f, U+6b20, U+6b62, U+6c7a, U+6cc1, U+6e29, U+6e96, U+70b9, U+72b6, U+751f, U+7528, U+754c, U+767a, U+79fb, U+7a4d, U+7a7a, U+7b56, U+7ba1, U+7bc4, U+7d0d, U+7d61, U+7de9, U+7f6e, U+8131, U+81ea, U+8377, U+8535, U+88fd, U+8a31, U+8aac, U+8b66, U+8c61, U+8cea, U+8d85, U+8fbc, U+9001, U+901a, U+9023, U+9038, U+9045, U+904e, U+9577, U+9589, U+958b, U+9593, U+9632, U+9650, U+9694, U+96e2, U+97ff, U+9867, U+98a8;
}
@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+33, U+38, U+3a, U+43, U+b0, U+2014, U+3001-3002, U+3005, U+3048, U+304b-304e, U+3053-3054, U+3057-3058, U+3064-3065, U+3068-3069, U+306b, U+306e-3071, U+3078-307a, U+307f, U+3081, U+3089, U+308b, U+3092, U+3099-309a, U+30a2, U+30af-30b0, U+30b9-30ba, U+30c3, U+30c8-30c9, U+30cf-30d1, U+30d5-30d7, U+30e0, U+30e9-30ea, U+30ed, U+30fb-30fc, U+4e0a, U+4e88, U+4e8b, U+4ee3, U+4eee, U+4f8b, U+4fdd, U+5009, U+505c, U+5099, U+512a, U+5148, U+5165, U+5168, U+51b7, U+51cd, U+51fa, U+5207, U+5224-5225, U+524d, U+52d5, U+5373, U+5404, U+548c, U+54c1, U+56de, U+56f2, U+57fa, U+5831, U+591a, U+5b9a, U+5ba2, U+5bb9, U+5bfe, U+5ea6, U+5eab, U+5ec3, U+5ef6, U+5f53, U+5f71, U+5f8c, U+5fa9, U+5fdc, U+6249, U+62c5, U+63db, U+653e, U+660e, U+6642, U+66ff, U+671f, U+67b6, U+68c4, U+691c, U+6a5f, U+6b20, U+6b62, U+6c7a, U+6cc1, U+6e29, U+6e96, U+70b9, U+72b6, U+751f, U+7528, U+754c, U+767a, U+79fb, U+7a4d, U+7a7a, U+7b56, U+7ba1, U+7bc4, U+7d0d, U+7d61, U+7de9, U+7f6e, U+8131, U+81ea, U+8377, U+8535, U+88fd, U+8a31, U+8aac, U+8b66, U+8c61, U+8cea, U+8d85, U+8fbc, U+9001, U+901a, U+9023, U+9038, U+9045, U+904e, U+9577, U+9589, U+958b, U+9593, U+9632, U+9650, U+9694, U+96e2, U+97ff, U+9867, U+98a8;
}
冷蔵倉庫の温度が許容範囲を外れたとき、どの仕組みが逸脱を防ぎ、起きた場合の損失を小さくするか。
ボウタイ図の中央に「温度が8°Cを超える」をトップ事象として置く。左から、扉の開放・冷凍機の停止・積み込み過多という脅威が事象へ向かい、それぞれの経路に予防バリアを挟む。右側では、品質確認、代替保管、出荷先への連絡を影響緩和バリアとして、廃棄・納期遅延・顧客欠品につながる経路上に置く。
予防と緩和を左右に分けることで、「起こさない管理」と「起きた後の回復」を混同しない。温度限界や対応時間は架空の例なので、運用に使う場合は製品別の品質基準、警報連絡網、バリアの担当と実効性を確認する。