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 label 20px / 500 team 24px / 500 value 24px / 700 takeaway 28px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1F5FA8 / #A85A2E / #8D99A8 ## 外すと崩れる点 - 5部門の継続率を同じ0〜100%指標のうち40〜90%の共通表示範囲で比較する - 左右の位置は2時点、縦位置は継続率、線の傾きは値の変化方向と幅を表す - 端点の並び替わりは部門間の相対順位変化を示す。線の交差は順位の逆転を表す - 架空データ。2時点の対象・定義を揃え、傾きから因果を推定しない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/slopegraph-service-retention-shift/pattern.html
/ai/designs/slopegraph-service-retention-shift.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
label:
size: 20
weight: 500
team:
size: 24
weight: 500
value:
size: 24
weight: 700
takeaway:
size: 28
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
series:
- "#1F5FA8"
- "#A85A2E"
- "#8D99A8"
rules:
- 5部門の継続率を同じ0〜100%指標のうち40〜90%の共通表示範囲で比較する
- 左右の位置は2時点、縦位置は継続率、線の傾きは値の変化方向と幅を表す
- 端点の並び替わりは部門間の相対順位変化を示す。線の交差は順位の逆転を表す
- 架空データ。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
},
"label": {
"size": 20,
"weight": 500
},
"team": {
"size": 24,
"weight": 500
},
"value": {
"size": 24,
"weight": 700
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#1F5FA8",
"#A85A2E",
"#8D99A8"
]
},
"rules": [
"5部門の継続率を同じ0〜100%指標のうち40〜90%の共通表示範囲で比較する",
"左右の位置は2時点、縦位置は継続率、線の傾きは値の変化方向と幅を表す",
"端点の並び替わりは部門間の相対順位変化を示す。線の交差は順位の逆転を表す",
"架空データ。2時点の対象・定義を揃え、傾きから因果を推定しない"
]
} /designs/slopegraph-service-retention-shift/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>継続率の逆転 — サポートが最下位から2位へ</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:#1F5FA8;--series-2:#A85A2E;--series-3:#8D99A8;}
*{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="架空の5部門の継続率を2023年と2025年で比較。サポートは51%から74%へ上昇し、最下位から2位になった。">
<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}.team{font-size:24px;font-weight:500}.value{font-size:24px;font-weight:700}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}.label{font-size:20px;font-weight:500}
.line{fill:none;stroke-width:5;stroke-linecap:round}.line-muted{stroke:var(--rule)}.line-accent{stroke:var(--accent)}.line-up{stroke:var(--series-2)}.dot{stroke:var(--ground);stroke-width:4}.dot-muted{fill:var(--muted)}.dot-accent{fill:var(--accent)}.dot-up{fill:var(--series-2)}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">継続率の逆転 — サポートが最下位から2位へ</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">部門別・2年間の継続率比較 / 架空データ / 同一尺度 40〜90%</text>
<line class="rule" x1="140" y1="238" x2="1780" y2="238" stroke-width="2"/>
<text class="ink axis-title" data-type="axisTitle" x="960" y="294" text-anchor="middle">値の変化と部門順位の入れ替わりを、2時点だけで読む</text>
<text class="muted label" x="530" y="347" text-anchor="middle">2023年</text><text class="muted label" x="1370" y="347" text-anchor="middle">2025年</text>
<g class="rule" fill="none" stroke-width="1.5"><line x1="590" y1="390" x2="1310" y2="390"/><line x1="590" y1="470" x2="1310" y2="470"/><line x1="590" y1="550" x2="1310" y2="550"/><line x1="590" y1="630" x2="1310" y2="630"/><line x1="590" y1="710" x2="1310" y2="710"/><line x1="590" y1="790" x2="1310" y2="790"/></g>
<g class="muted tick" text-anchor="end" dominant-baseline="central"><text data-type="tick" x="560" y="790">40%</text><text x="560" y="710">50%</text><text x="560" y="630">60%</text><text x="560" y="550">70%</text><text x="560" y="470">80%</text><text x="560" y="390">90%</text></g>
<!-- Endpoints are categorical snapshots; line slope encodes the direction and magnitude of change. -->
<path class="line line-muted" d="M590 478 L1310 454"/><circle class="dot dot-muted" cx="590" cy="478" r="9"/><circle class="dot dot-muted" cx="1310" cy="454" r="9"/>
<path class="line line-muted" d="M590 534 L1310 486"/><circle class="dot dot-muted" cx="590" cy="534" r="9"/><circle class="dot dot-muted" cx="1310" cy="486" r="9"/>
<path class="line line-muted" d="M590 598 L1310 550"/><circle class="dot dot-muted" cx="590" cy="598" r="9"/><circle class="dot dot-muted" cx="1310" cy="550" r="9"/>
<path class="line line-muted" d="M590 566 L1310 606"/><circle class="dot dot-muted" cx="590" cy="566" r="9"/><circle class="dot dot-muted" cx="1310" cy="606" r="9"/>
<path class="line line-up" d="M590 702 L1310 518"/><circle class="dot dot-up" cx="590" cy="702" r="11"/><circle class="dot dot-up" cx="1310" cy="518" r="11"/>
<g class="ink team" text-anchor="end" dominant-baseline="central"><text data-type="team" x="520" y="478">研究</text><text x="520" y="534">製品</text><text x="520" y="566">運用</text><text x="520" y="598">営業</text><text x="520" y="702" fill="var(--series-2)" font-weight="700">サポート</text></g>
<g class="ink value" text-anchor="start" dominant-baseline="central"><text data-type="value" x="1380" y="454">82%</text><text x="1380" y="486">78%</text><text x="1380" y="518" fill="var(--series-2)">74%</text><text x="1380" y="550">70%</text><text x="1380" y="606">63%</text></g>
<rect x="1450" y="460" width="300" height="170" rx="18" fill="var(--surface)"/><text class="muted label" x="1480" y="500">サポート</text><text class="ink" x="1480" y="552" font-size="36" font-weight="700">+23 pt</text><text class="muted label" x="1480" y="596">5部門中 5位 → 2位</text>
<text class="ink takeaway" data-type="takeaway" x="960" y="900" text-anchor="middle">最大の改善はサポート — 51%から74%へ、+23ポイント</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">同じ対象・定義の2時点を比べる。順位は図中の値から読める相対順であり、因果関係を示さない。</text>
</svg></div></div>
/designs/slopegraph-service-retention-shift/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 105 (233940247223ef93)
*
* 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+2b, U+2f-39, U+70, U+74, U+2014, U+2192, U+3001-3002, U+301c, U+3042, U+3044, U+304b-304c, U+3051-3052, U+3055-3058, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+3080-3081, U+3089-308c, U+308f, U+3092, U+3099-309a, U+30a4, U+30b5-30b6, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30f3, U+30fb-30fc, U+4e00, U+4e0b, U+4e2d, U+4f4d, U+4fc2, U+5024, U+5165, U+5225, U+5316, U+540c, U+54c1, U+5584, U+55b6, U+56e0, U+56f3, U+5909, U+5927, U+5b9a, U+5bfe, U+5c3a, U+5e74, U+5ea6, U+6539, U+6642, U+66ff-6700, U+679c, U+67b6, U+696d, U+6bd4, U+70b9, U+7387, U+7528, U+76f8, U+7814, U+793a, U+7a76, U+7a7a, U+7d99-7d9a, U+7fa9, U+88fd, U+8aad, U+8c61, U+8ee2, U+8f03, U+9006, U+904b, U+90e8, U+9580, U+9593, U+95a2, U+9806;
}
@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+2b, U+2f-39, U+70, U+74, U+2014, U+2192, U+3001-3002, U+301c, U+3042, U+3044, U+304b-304c, U+3051-3052, U+3055-3058, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+3080-3081, U+3089-308c, U+308f, U+3092, U+3099-309a, U+30a4, U+30b5-30b6, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30f3, U+30fb-30fc, U+4e00, U+4e0b, U+4e2d, U+4f4d, U+4fc2, U+5024, U+5165, U+5225, U+5316, U+540c, U+54c1, U+5584, U+55b6, U+56e0, U+56f3, U+5909, U+5927, U+5b9a, U+5bfe, U+5c3a, U+5e74, U+5ea6, U+6539, U+6642, U+66ff-6700, U+679c, U+67b6, U+696d, U+6bd4, U+70b9, U+7387, U+7528, U+76f8, U+7814, U+793a, U+7a76, U+7a7a, U+7d99-7d9a, U+7fa9, U+88fd, U+8aad, U+8c61, U+8ee2, U+8f03, U+9006, U+904b, U+90e8, U+9580, U+9593, U+95a2, U+9806;
}
@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+2b, U+2f-39, U+70, U+74, U+2014, U+2192, U+3001-3002, U+301c, U+3042, U+3044, U+304b-304c, U+3051-3052, U+3055-3058, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+3080-3081, U+3089-308c, U+308f, U+3092, U+3099-309a, U+30a4, U+30b5-30b6, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30f3, U+30fb-30fc, U+4e00, U+4e0b, U+4e2d, U+4f4d, U+4fc2, U+5024, U+5165, U+5225, U+5316, U+540c, U+54c1, U+5584, U+55b6, U+56e0, U+56f3, U+5909, U+5927, U+5b9a, U+5bfe, U+5c3a, U+5e74, U+5ea6, U+6539, U+6642, U+66ff-6700, U+679c, U+67b6, U+696d, U+6bd4, U+70b9, U+7387, U+7528, U+76f8, U+7814, U+793a, U+7a76, U+7a7a, U+7d99-7d9a, U+7fa9, U+88fd, U+8aad, U+8c61, U+8ee2, U+8f03, U+9006, U+904b, U+90e8, U+9580, U+9593, U+95a2, U+9806;
}
継続率の変化幅が最も大きい部門はどこか。また、2時点で部門の相対順位はどう入れ替わったか。
横方向の2列を2023年と2025年に割り当て、縦位置に継続率を置く。各部門の端点を直線で結ぶため、傾きが変化方向と幅を表し、左右の端点の並び替わりが相対順位の変化を示す。
架空の5部門ではサポートが51%から74%へ23ポイント改善し、最下位から2位へ上がった。これはスロープグラフ固有の「少数カテゴリ×2時点」の対応比較であり、複数期間の推移を追う折れ線グラフや、分布形状を比較するバイオリン図とは問いと幾何が異なる。値・順位は記述的比較で、因果関係は示さない。