1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 100 右 140 下 100 左 140 ## 文字（版面 1920px に対する px） title 46px / 700 / 字間 0.01em subtitle 22px / 500 axisTitle 22px / 700 tick 20px / 500 legend 20px / 500 takeaway 28px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #5D8FB8 / #96B9D4 / #C8DBEA / #E8F0F7 ## 外すと崩れる点 - 横軸は同時接続数0–500、縦軸はキャッシュ命中率0–100% - 等値線100/110/120/130msは応答面z=70+0.0005(x−250)^2+0.04(y−70)^2の境界 - 色面は内側が低遅延、外側が高遅延となるように入れ子で塗り分ける - 架空モデルの応答面であり、実環境計測や容量保証を示さない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/contour-plot-latency-capacity-surface/pattern.html
/ai/designs/contour-plot-latency-capacity-surface.json
format: slide-16x9
density: medium
layout:
kind: axis
canvas:
w: 1920
h: 1080
margin:
top: 100
right: 140
bottom: 100
left: 140
type:
title:
size: 46
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 500
axisTitle:
size: 22
weight: 700
tick:
size: 20
weight: 500
legend:
size: 20
weight: 500
takeaway:
size: 28
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
series:
- "#5D8FB8"
- "#96B9D4"
- "#C8DBEA"
- "#E8F0F7"
rules:
- 横軸は同時接続数0–500、縦軸はキャッシュ命中率0–100%
- 等値線100/110/120/130msは応答面z=70+0.0005(x−250)^2+0.04(y−70)^2の境界
- 色面は内側が低遅延、外側が高遅延となるように入れ子で塗り分ける
- 架空モデルの応答面であり、実環境計測や容量保証を示さない{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 100,
"left": 140
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"tick": {
"size": 20,
"weight": 500
},
"legend": {
"size": 20,
"weight": 500
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#5D8FB8",
"#96B9D4",
"#C8DBEA",
"#E8F0F7"
]
},
"rules": [
"横軸は同時接続数0–500、縦軸はキャッシュ命中率0–100%",
"等値線100/110/120/130msは応答面z=70+0.0005(x−250)^2+0.04(y−70)^2の境界",
"色面は内側が低遅延、外側が高遅延となるように入れ子で塗り分ける",
"架空モデルの応答面であり、実環境計測や容量保証を示さない"
]
} /designs/contour-plot-latency-capacity-surface/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"><style>:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;--series-1:#5D8FB8;--series-2:#96B9D4;--series-3:#C8DBEA;--series-4:#E8F0F7;
--plot-color-1: #244B6C;
}*{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:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}</style><div class="artboard" data-artboard><div class="content" data-content><svg class="figure" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="同時接続数とキャッシュ命中率の二次元応答面について、p95応答時間が100、110、120、130ミリ秒になる等値線を楕円で示すcontour plot。">
<style>.figure{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.tick{font-size:20px;font-weight:500;fill:var(--muted)}.grid{stroke:var(--ground);stroke-width:1.5}.plot-border{fill:none;stroke:var(--rule);stroke-width:2}.contour{fill:none;stroke:var(--plot-color-1);stroke-width:3}.legend-title{font-size:22px;font-weight:700;fill:var(--ink)}.legend{font-size:20px;font-weight:500;fill:var(--muted)}.takeaway{font-size:28px;font-weight:500;fill:var(--ink)}.note{font-size:20px;font-weight:400;fill:var(--muted)}</style><rect class="ground" width="1920" height="1080"/><text class="ink title" data-type="title" x="140" y="153">同時接続数とキャッシュ命中率 — 応答遅延の等値線</text><text class="muted subtitle" data-type="subtitle" x="140" y="201">p95応答時間の連続応答面 / 架空の性能モデル</text><line class="rule" x1="140" y1="238" x2="1780" y2="238" stroke-width="2"/><text class="ink axis-title" data-type="axisTitle" x="810" y="294" text-anchor="middle">p95応答時間（ms）— 等しい遅延の境界を追う</text><defs><clipPath id="plot-clip"><rect x="360" y="360" width="900" height="400"/></clipPath></defs><g clip-path="url(#plot-clip)"><ellipse cx="810" cy="480" rx="623.5382907247957" ry="154.91933384829667" fill="var(--series-4)"/><ellipse cx="810" cy="480" rx="569.2099788303083" ry="141.4213562373095" fill="var(--series-3)"/><ellipse cx="810" cy="480" rx="509.11688245431424" ry="126.49110640673516" fill="var(--series-2)"/><ellipse cx="810" cy="480" rx="440.9081537009721" ry="109.54451150103323" fill="var(--series-1)"/><line class="grid" x1="360" y1="360" x2="360" y2="760"/><text class="tick" x="360" y="793" text-anchor="middle">0</text><line class="grid" x1="540" y1="360" x2="540" y2="760"/><text class="tick" x="540" y="793" text-anchor="middle">100</text><line class="grid" x1="720" y1="360" x2="720" y2="760"/><text class="tick" x="720" y="793" text-anchor="middle">200</text><line class="grid" x1="900" y1="360" x2="900" y2="760"/><text class="tick" x="900" y="793" text-anchor="middle">300</text><line class="grid" x1="1080" y1="360" x2="1080" y2="760"/><text class="tick" x="1080" y="793" text-anchor="middle">400</text><line class="grid" x1="1260" y1="360" x2="1260" y2="760"/><text class="tick" x="1260" y="793" text-anchor="middle">500</text><line class="grid" x1="360" y1="760" x2="1260" y2="760"/><text class="tick" x="340" y="760" text-anchor="end" dominant-baseline="central">0%</text><line class="grid" x1="360" y1="660" x2="1260" y2="660"/><text class="tick" x="340" y="660" text-anchor="end" dominant-baseline="central">25%</text><line class="grid" x1="360" y1="560" x2="1260" y2="560"/><text class="tick" x="340" y="560" text-anchor="end" dominant-baseline="central">50%</text><line class="grid" x1="360" y1="460" x2="1260" y2="460"/><text class="tick" x="340" y="460" text-anchor="end" dominant-baseline="central">75%</text><line class="grid" x1="360" y1="360" x2="1260" y2="360"/><text class="tick" x="340" y="360" text-anchor="end" dominant-baseline="central">100%</text><ellipse class="contour" cx="810" cy="480" rx="440.9081537009721" ry="109.54451150103323"/><ellipse class="contour" cx="810" cy="480" rx="509.11688245431424" ry="126.49110640673516"/><ellipse class="contour" cx="810" cy="480" rx="569.2099788303083" ry="141.4213562373095"/><ellipse class="contour" cx="810" cy="480" rx="623.5382907247957" ry="154.91933384829667"/></g><rect class="plot-border" x="360" y="360" width="900" height="400"/><text class="ink axis-title" x="810" y="832" text-anchor="middle">同時接続数</text><text class="ink axis-title" x="240" y="560" text-anchor="middle" transform="rotate(-90 240 560)">キャッシュ命中率</text><line class="rule" x1="1360" y1="370" x2="1360" y2="760" stroke-width="1.5"/><text class="legend-title" x="1400" y="405">等遅延線（ms）</text><rect x="1400" y="438" width="32" height="24" rx="4" fill="var(--series-1)"/><text class="legend" x="1450" y="458">100 ms</text><rect x="1400" y="486" width="32" height="24" rx="4" fill="var(--series-2)"/><text class="legend" x="1450" y="506">110 ms</text><rect x="1400" y="534" width="32" height="24" rx="4" fill="var(--series-3)"/><text class="legend" x="1450" y="554">120 ms</text><rect x="1400" y="582" width="32" height="24" rx="4" fill="var(--series-4)"/><text class="legend" x="1450" y="602">130 ms</text><text class="muted" x="1400" y="665" font-size="20">低遅延域</text><text class="ink" x="1400" y="705" font-size="22" font-weight="700">250同時接続</text><text class="ink" x="1400" y="737" font-size="22" font-weight="700">命中率70%</text><text class="ink takeaway" data-type="takeaway" x="960" y="927" text-anchor="middle">命中率70%付近なら、250接続でもp95は約70ms</text><line class="rule" x1="140" y1="974" x2="1780" y2="974" stroke-width="1"/><text class="muted note" data-type="note" x="140" y="1013">等値線はモデルの近似出力。実環境の計測・容量保証ではない。</text></svg></div></div> /designs/contour-plot-latency-capacity-surface/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 79 (bdbaaba98d4a1ae2)
*
* 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+25, U+2f-35, U+37, U+39, U+6d, U+70, U+73, U+2014, U+3001-3002, U+3044, U+3046, U+3057-3058, U+3066-306a, U+306e-3070, U+3082, U+3089, U+3092, U+3094, U+3099, U+30ad-30ae, U+30b7-30b8, U+30c3, U+30c6-30c7, U+30e2-30e3, U+30e5, U+30eb, U+30fb, U+4e2d, U+4ed8, U+4f3c, U+4f4e, U+4fdd, U+5024, U+51fa, U+529b, U+540c, U+547d, U+57df, U+5883, U+5b9f, U+5bb9, U+5ef6, U+5fdc, U+6027, U+63a5, U+6570, U+6642, U+67b6, U+6e2c, U+7387, U+74b0, U+754c, U+7a7a, U+7b49, U+7b54, U+7d04, U+7d9a, U+7dda, U+80fd, U+8a08, U+8a3c, U+8fd1, U+8ffd, U+9023, U+9045, U+91cf, U+9593, 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+25, U+2f-35, U+37, U+39, U+6d, U+70, U+73, U+2014, U+3001-3002, U+3044, U+3046, U+3057-3058, U+3066-306a, U+306e-3070, U+3082, U+3089, U+3092, U+3094, U+3099, U+30ad-30ae, U+30b7-30b8, U+30c3, U+30c6-30c7, U+30e2-30e3, U+30e5, U+30eb, U+30fb, U+4e2d, U+4ed8, U+4f3c, U+4f4e, U+4fdd, U+5024, U+51fa, U+529b, U+540c, U+547d, U+57df, U+5883, U+5b9f, U+5bb9, U+5ef6, U+5fdc, U+6027, U+63a5, U+6570, U+6642, U+67b6, U+6e2c, U+7387, U+74b0, U+754c, U+7a7a, U+7b49, U+7b54, U+7d04, U+7d9a, U+7dda, U+80fd, U+8a08, U+8a3c, U+8fd1, U+8ffd, U+9023, U+9045, U+91cf, U+9593, 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+25, U+2f-35, U+37, U+39, U+6d, U+70, U+73, U+2014, U+3001-3002, U+3044, U+3046, U+3057-3058, U+3066-306a, U+306e-3070, U+3082, U+3089, U+3092, U+3094, U+3099, U+30ad-30ae, U+30b7-30b8, U+30c3, U+30c6-30c7, U+30e2-30e3, U+30e5, U+30eb, U+30fb, U+4e2d, U+4ed8, U+4f3c, U+4f4e, U+4fdd, U+5024, U+51fa, U+529b, U+540c, U+547d, U+57df, U+5883, U+5b9f, U+5bb9, U+5ef6, U+5fdc, U+6027, U+63a5, U+6570, U+6642, U+67b6, U+6e2c, U+7387, U+74b0, U+754c, U+7a7a, U+7b49, U+7b54, U+7d04, U+7d9a, U+7dda, U+80fd, U+8a08, U+8a3c, U+8fd1, U+8ffd, U+9023, U+9045, U+91cf, U+9593, U+9762, U+ff08-ff09;
}
同時接続数とキャッシュ命中率の組み合わせを変えると、p95応答時間が同じになる境界や低遅延域はどこに現れるか。
横軸に同時接続数、縦軸にキャッシュ命中率を置いた連続な二変数平面を描く。曲線は同じp95応答時間となる等値線で、内側へ進むほど低遅延になる。塗り分けた帯と等値線を一緒に追うことで、二入力の組み合わせに対する応答面の形と閾値の境界を読む。点を六角形ビンへ集約して点密度を比較するhexbinとは異なり、観測点頻度ではなく連続した応答値の高さを示す。
架空モデルでは同時接続250、キャッシュ命中率70%が約70msの中心低遅延域で、そこから変数を離すと遅延等値線が高くなる。実測ではないため、実環境の性能予測には利用しない。