版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 90 右 120 下 40 左 120 ## 文字（版面 1920px に対する px） title 46px / 700 / 字間 0.01em dek 22px / 400 stamp 20px / 500 station 22px / 500 destination 24px / 700 transfer 20px / 400 routeName 22px / 700 routeMetric 20px / 500 finding 24px / 700 recommendation 24px / 500 legend 20px / 500 note 20px / 400 ## 配色 地 #F7F8F5 / 面 #FFFFFF / 文字 #18232D / 補助 #586875 / 強調 #C64E32 / 罫 #D7DEE1 / #236B9A / #167968 / #A66019 ## 外すと崩れる点 - 線の接続と乗換駅で経路を比較し、駅間隔は地理距離として読まない - 所要時間と定時率は同じ平日朝の対象期間・集計方法で比較する - 色は路線名を区別するだけで、混雑度や優先度を表さない - 架空の模式図と想定値。実在の時刻表・運行実績に基づく経路案内ではない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/metro-schematic-commuter-reliability/pattern.html
/ai/designs/metro-schematic-commuter-reliability.json
format: slide-16x9
density: medium
layout:
kind: map
canvas:
w: 1920
h: 1080
margin:
top: 90
right: 120
bottom: 40
left: 120
type:
title:
size: 46
weight: 700
tracking: 0.01em
dek:
size: 22
weight: 400
stamp:
size: 20
weight: 500
station:
size: 22
weight: 500
destination:
size: 24
weight: 700
transfer:
size: 20
weight: 400
routeName:
size: 22
weight: 700
routeMetric:
size: 20
weight: 500
finding:
size: 24
weight: 700
recommendation:
size: 24
weight: 500
legend:
size: 20
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#F7F8F5"
surface: "#FFFFFF"
ink: "#18232D"
muted: "#586875"
accent: "#C64E32"
rule: "#D7DEE1"
series:
- "#236B9A"
- "#167968"
- "#A66019"
rules:
- 線の接続と乗換駅で経路を比較し、駅間隔は地理距離として読まない
- 所要時間と定時率は同じ平日朝の対象期間・集計方法で比較する
- 色は路線名を区別するだけで、混雑度や優先度を表さない
- 架空の模式図と想定値。実在の時刻表・運行実績に基づく経路案内ではない{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "map",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 90,
"right": 120,
"bottom": 40,
"left": 120
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"dek": {
"size": 22,
"weight": 400
},
"stamp": {
"size": 20,
"weight": 500
},
"station": {
"size": 22,
"weight": 500
},
"destination": {
"size": 24,
"weight": 700
},
"transfer": {
"size": 20,
"weight": 400
},
"routeName": {
"size": 22,
"weight": 700
},
"routeMetric": {
"size": 20,
"weight": 500
},
"finding": {
"size": 24,
"weight": 700
},
"recommendation": {
"size": 24,
"weight": 500
},
"legend": {
"size": 20,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#F7F8F5",
"surface": "#FFFFFF",
"ink": "#18232D",
"muted": "#586875",
"accent": "#C64E32",
"rule": "#D7DEE1",
"series": [
"#236B9A",
"#167968",
"#A66019"
]
},
"rules": [
"線の接続と乗換駅で経路を比較し、駅間隔は地理距離として読まない",
"所要時間と定時率は同じ平日朝の対象期間・集計方法で比較する",
"色は路線名を区別するだけで、混雑度や優先度を表さない",
"架空の模式図と想定値。実在の時刻表・運行実績に基づく経路案内ではない"
]
} /designs/metro-schematic-commuter-reliability/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>空港から中央駅 — 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;
--rule: #D7DEE1;
--series-1: #236B9A;
--series-2: #167968;
--series-3: #A66019;
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 1920px; height: 1080px; }
body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" role="img" aria-labelledby="map-title map-desc" data-artboard="true">
<title id="map-title">空港から中央駅への3路線</title>
<desc id="map-desc">青線は31分で定時率96パーセント。緑線は乗換1回で28分、橙線は34分。線の交点は乗換駅。</desc>
<style>
text { font-family: "Zen Kaku Gothic New", "IPAGothic", 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; }
.dek { font-size: 22px; font-weight: 400; }
.stamp { font-size: 20px; font-weight: 500; }
.route { fill: none; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.station { fill: var(--surface); stroke: var(--ink); stroke-width: 4; }
.interchange { fill: var(--surface); stroke-width: 8; }
.station-label { font-size: 22px; font-weight: 500; fill: var(--ink); }
.destination { font-size: 24px; font-weight: 700; fill: var(--ink); }
.minor-label { font-size: 20px; font-weight: 400; fill: var(--muted); }
.route-tag { fill: var(--surface); stroke: var(--rule); stroke-width: 2; }
.tag-name { font-size: 22px; font-weight: 700; fill: var(--ink); }
.tag-time { font-size: 20px; font-weight: 500; fill: var(--muted); }
.finding { font-size: 24px; font-weight: 700; fill: var(--series-1); }
.recommendation { font-size: 24px; font-weight: 500; fill: var(--ink); }
.legend { font-size: 20px; font-weight: 500; fill: var(--muted); }
</style>
<rect class="ground" width="1920" height="1080"/>
<g data-content="true">
<rect x="120" y="90" width="1680" height="950" fill="transparent" aria-hidden="true"/>
<text class="ink title" data-type="title" x="120" y="137">空港から中央駅 — 青線が最も安定</text>
<text class="muted dek" data-type="dek" x="120" y="181">所要時間だけでなく、平日朝の定時率も見て経路を選ぶ</text>
<text class="muted stamp" data-type="stamp" x="1790" y="130" text-anchor="end">平日 7–9 時 · 空港 → 中央駅</text>
<line class="rule" x1="120" y1="218" x2="1800" y2="218" stroke-width="2"/>
<g transform="translate(120 235)">
<g opacity=".72">
<path class="route" stroke="var(--series-1)" d="M140 535 H390 L570 355 H920 L1110 535 H1500"/>
<path class="route" stroke="var(--series-2)" d="M140 535 H390 L570 355 H760 L940 175 H1280 L1500 355"/>
<path class="route" stroke="var(--series-3)" d="M140 535 H390 L570 355 H760 L940 535 H1280 L1500 355"/>
</g>
<g>
<circle class="station" cx="140" cy="535" r="17"/><circle class="station" cx="390" cy="535" r="13"/>
<circle class="station" cx="570" cy="355" r="19" stroke="var(--series-1)"/><circle class="station" cx="920" cy="355" r="13"/>
<circle class="station" cx="1110" cy="535" r="13"/><circle class="station" cx="1500" cy="535" r="19" stroke="var(--series-1)"/>
</g>
<circle class="interchange" cx="570" cy="355" r="28" stroke="var(--series-2)"/>
<circle class="interchange" cx="760" cy="355" r="28" stroke="var(--series-3)"/>
<circle class="station" cx="940" cy="175" r="15"/><circle class="station" cx="1280" cy="175" r="15"/>
<circle class="station" cx="940" cy="535" r="15"/><circle class="station" cx="1280" cy="535" r="15"/>
<g class="station-label">
<text x="140" y="602" text-anchor="middle" data-type="station">空港</text>
<text x="390" y="585" text-anchor="middle" data-type="station">西埠頭</text>
<text x="570" y="300" text-anchor="middle" data-type="station">港中央</text>
<text x="760" y="420" text-anchor="middle" data-type="station">市庁前</text>
<text x="920" y="318" text-anchor="middle" data-type="station">美術館</text>
<text x="1110" y="585" text-anchor="middle" data-type="station">公園東</text>
<text x="1500" y="602" text-anchor="middle" class="destination" data-type="destination">中央駅</text>
<text x="940" y="130" text-anchor="middle" data-type="station">旧市街</text>
<text x="1280" y="130" text-anchor="middle" data-type="station">北門</text>
<text x="940" y="590" text-anchor="middle" data-type="station">物流区</text>
<text x="1280" y="590" text-anchor="middle" data-type="station">大学前</text>
</g>
<g class="minor-label">
<text x="570" y="398" text-anchor="middle" data-type="transfer">乗換</text>
<text x="760" y="398" text-anchor="middle" data-type="transfer">乗換</text>
<text x="818" y="218" text-anchor="middle">旧市街経由</text>
<text x="1090" y="490" text-anchor="middle">物流区経由</text>
</g>
<g transform="translate(220 66)">
<rect class="route-tag" width="345" height="92" rx="12"/>
<rect width="9" height="92" rx="4" fill="var(--series-1)"/>
<text class="tag-name" x="28" y="37" data-type="routeName">青線 · 直通</text>
<text class="tag-time" x="28" y="70" data-type="routeMetric">31分 / 定時率 96%</text>
</g>
<g transform="translate(668 66)">
<rect class="route-tag" width="345" height="92" rx="12"/>
<rect width="9" height="92" rx="4" fill="var(--series-2)"/>
<text class="tag-name" x="28" y="37" data-type="routeName">緑線 · 港中央で乗換</text>
<text class="tag-time" x="28" y="70" data-type="routeMetric">28分 / 定時率 89%</text>
</g>
<g transform="translate(1116 66)">
<rect class="route-tag" width="345" height="92" rx="12"/>
<rect width="9" height="92" rx="4" fill="var(--series-3)"/>
<text class="tag-name" x="28" y="37" data-type="routeName">橙線 · 市庁前で乗換</text>
<text class="tag-time" x="28" y="70" data-type="routeMetric">34分 / 定時率 94%</text>
</g>
</g>
<line class="rule" x1="120" y1="927" x2="1800" y2="927" stroke-width="2"/>
<text class="finding" data-type="finding" x="120" y="980">推奨</text>
<text class="recommendation" data-type="recommendation" x="225" y="980">青線 — 緑線より3分遅いが、定時率は7ポイント高い</text>
<g class="legend" data-type="legend">
<line x1="1210" y1="973" x2="1240" y2="973" stroke="var(--series-1)" stroke-width="9" stroke-linecap="round"/>
<text x="1254" y="980">青線</text>
<line x1="1360" y1="973" x2="1390" y2="973" stroke="var(--series-2)" stroke-width="9" stroke-linecap="round"/>
<text x="1404" y="980">緑線</text>
<line x1="1510" y1="973" x2="1540" y2="973" stroke="var(--series-3)" stroke-width="9" stroke-linecap="round"/>
<text x="1554" y="980">橙線</text>
</g>
<text class="muted" data-type="note" x="120" y="1030" font-size="20">模式図・架空データ。駅間隔は地理距離ではなく路線の接続を示す。定時率は同一期間の運行実績に基づく想定値。</text>
</g>
</svg>
/designs/metro-schematic-commuter-reliability/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 128 (90c32b7c563627ad)
*
* 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, U+31-34, U+36-39, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+304b-304c, U+304f-3052, U+3059-305a, U+305f-3060, U+3064-306b, U+306e-3071, U+3075-307a, U+3082, U+3088-308a, U+3092, U+3099-309a, U+30a4, U+30bb-30bc, U+30bf-30c0, U+30c6-30c9, U+30cf-30d1, U+30db-30dd, U+30f3, U+30fb-30fc, U+4e00, U+4e2d, U+4e57, U+4ea4, U+5024, U+516c, U+5206, U+524d, U+5317, U+533a, U+540c, U+56de, U+56f3, U+5712, U+5730, U+57e0, U+57fa, U+5927, U+592e, U+5968, U+5b66, U+5b89, U+5b9a, U+5b9f, U+5e02, U+5e73, U+5e81, U+5f0f, U+60f3, U+6240, U+63a5, U+63a8, U+63db, U+65e5, U+65e7, U+6642, U+6700, U+671d, U+671f, U+6771, U+67b6, U+6a21, U+6a59, U+6d41, U+6e2f, U+70b9, U+7269, U+7387, U+7406, U+7531, U+76f4, U+793a, U+7a7a, U+7d4c, U+7d9a, U+7dd1, U+7dda, U+7e3e, U+7f8e, U+884c, U+8853, U+8857, U+897f, U+8981, U+898b, U+8ddd, U+8def, U+901a, U+9045, U+904b, U+9078, U+9580, U+9593, U+9694, U+96e2, U+9752, U+982d, U+9928, U+99c5, U+9ad8;
}
@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, U+31-34, U+36-39, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+304b-304c, U+304f-3052, U+3059-305a, U+305f-3060, U+3064-306b, U+306e-3071, U+3075-307a, U+3082, U+3088-308a, U+3092, U+3099-309a, U+30a4, U+30bb-30bc, U+30bf-30c0, U+30c6-30c9, U+30cf-30d1, U+30db-30dd, U+30f3, U+30fb-30fc, U+4e00, U+4e2d, U+4e57, U+4ea4, U+5024, U+516c, U+5206, U+524d, U+5317, U+533a, U+540c, U+56de, U+56f3, U+5712, U+5730, U+57e0, U+57fa, U+5927, U+592e, U+5968, U+5b66, U+5b89, U+5b9a, U+5b9f, U+5e02, U+5e73, U+5e81, U+5f0f, U+60f3, U+6240, U+63a5, U+63a8, U+63db, U+65e5, U+65e7, U+6642, U+6700, U+671d, U+671f, U+6771, U+67b6, U+6a21, U+6a59, U+6d41, U+6e2f, U+70b9, U+7269, U+7387, U+7406, U+7531, U+76f4, U+793a, U+7a7a, U+7d4c, U+7d9a, U+7dd1, U+7dda, U+7e3e, U+7f8e, U+884c, U+8853, U+8857, U+897f, U+8981, U+898b, U+8ddd, U+8def, U+901a, U+9045, U+904b, U+9078, U+9580, U+9593, U+9694, U+96e2, U+9752, U+982d, U+9928, U+99c5, U+9ad8;
}
@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, U+31-34, U+36-39, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+304b-304c, U+304f-3052, U+3059-305a, U+305f-3060, U+3064-306b, U+306e-3071, U+3075-307a, U+3082, U+3088-308a, U+3092, U+3099-309a, U+30a4, U+30bb-30bc, U+30bf-30c0, U+30c6-30c9, U+30cf-30d1, U+30db-30dd, U+30f3, U+30fb-30fc, U+4e00, U+4e2d, U+4e57, U+4ea4, U+5024, U+516c, U+5206, U+524d, U+5317, U+533a, U+540c, U+56de, U+56f3, U+5712, U+5730, U+57e0, U+57fa, U+5927, U+592e, U+5968, U+5b66, U+5b89, U+5b9a, U+5b9f, U+5e02, U+5e73, U+5e81, U+5f0f, U+60f3, U+6240, U+63a5, U+63a8, U+63db, U+65e5, U+65e7, U+6642, U+6700, U+671d, U+671f, U+6771, U+67b6, U+6a21, U+6a59, U+6d41, U+6e2f, U+70b9, U+7269, U+7387, U+7406, U+7531, U+76f4, U+793a, U+7a7a, U+7d4c, U+7d9a, U+7dd1, U+7dda, U+7e3e, U+7f8e, U+884c, U+8853, U+8857, U+897f, U+8981, U+898b, U+8ddd, U+8def, U+901a, U+9045, U+904b, U+9078, U+9580, U+9593, U+9694, U+96e2, U+9752, U+982d, U+9928, U+99c5, U+9ad8;
}
空港から中央駅へ向かうとき、数分の速さと遅延の少なさのどちらを優先すべきか。
3路線を同じ起点と終点の間に引き、駅の接続と乗換位置を保った模式図にした。青線は31分、定時率96%で直通する。緑線は28分で最短だが港中央で乗換があり定時率89%、橙線は34分で定時率94%。緑線と比べて青線は3分遅い一方、定時率が7ポイント高いため、定時性を優先する判断を示す。
路線の色は接続を追うための識別に限る。線の折れ方と駅間隔は読みやすさのために配置しており、実際の地理や走行距離を表さない。時刻と定時率は同一条件で比べる架空の想定値である。