版の配色
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 rank 20px / 500 month 20px / 500 endpoint 20px / 700 takeaway 28px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1F5FA8 / #147D73 / #A85A2E / #6750A4 / #B34D3A / #567A63 ## 外すと崩れる点 - 1月から6月までの要望順位を示し、1位は最上段、6位は最下段 - データ出力は1/2/3/3/2/1位、検索は4/3/2/1/1/2位、オンボーディングは2/1/1/2/3/4位 - 自動化は5/5/4/4/4/3位、モバイルは3/4/5/5/5/5位、外部連携は6位を維持 - 順位の架空例。線間の距離を要望数の差として解釈しない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/bump-chart-feature-request-rankings/pattern.html
/ai/designs/bump-chart-feature-request-rankings.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
rank:
size: 20
weight: 500
month:
size: 20
weight: 500
endpoint:
size: 20
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"
- "#147D73"
- "#A85A2E"
- "#6750A4"
- "#B34D3A"
- "#567A63"
rules:
- 1月から6月までの要望順位を示し、1位は最上段、6位は最下段
- データ出力は1/2/3/3/2/1位、検索は4/3/2/1/1/2位、オンボーディングは2/1/1/2/3/4位
- 自動化は5/5/4/4/4/3位、モバイルは3/4/5/5/5/5位、外部連携は6位を維持
- 順位の架空例。線間の距離を要望数の差として解釈しない{
"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
},
"rank": {
"size": 20,
"weight": 500
},
"month": {
"size": 20,
"weight": 500
},
"endpoint": {
"size": 20,
"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",
"#147D73",
"#A85A2E",
"#6750A4",
"#B34D3A",
"#567A63"
]
},
"rules": [
"1月から6月までの要望順位を示し、1位は最上段、6位は最下段",
"データ出力は1/2/3/3/2/1位、検索は4/3/2/1/1/2位、オンボーディングは2/1/1/2/3/4位",
"自動化は5/5/4/4/4/3位、モバイルは3/4/5/5/5/5位、外部連携は6位を維持",
"順位の架空例。線間の距離を要望数の差として解釈しない"
]
} /designs/bump-chart-feature-request-rankings/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:#1F5FA8;--series-2:#147D73;--series-3:#A85A2E;--series-4:#6750A4;--series-5:#B34D3A;--series-6:#567A63;}*{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="六つの機能要望について、月ごとの順位を1位が上になる縦軸で結んだbump chart。データ出力は6月に1位へ上昇。">
<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}.rank,.month{font-size:20px;font-weight:500;fill:var(--muted)}.grid{stroke:var(--rule);stroke-width:1.5}.line{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.dot{stroke:var(--ground);stroke-width:3}.endpoint,.final{font-size:20px;font-weight:700}.takeaway{font-size:28px;font-weight:500;fill:var(--ink)}.note{font-size:20px;font-weight:400;fill:var(--muted)}.s0{stroke:var(--series-1);fill:var(--series-1)}.s1{stroke:var(--series-2);fill:var(--series-2)}.s2{stroke:var(--series-3);fill:var(--series-3)}.s3{stroke:var(--series-4);fill:var(--series-4)}.s4{stroke:var(--series-5);fill:var(--series-5)}.s5{stroke:var(--series-6);fill:var(--series-6)}.line.s0,.line.s1,.line.s2,.line.s3,.line.s4,.line.s5{fill:none}.endpoint,.final{fill:currentColor}.endpoint.s0,.final.s0{fill:var(--series-1)}.endpoint.s1,.final.s1{fill:var(--series-2)}.endpoint.s2,.final.s2{fill:var(--series-3)}.endpoint.s3,.final.s3{fill:var(--series-4)}.endpoint.s4,.final.s4{fill:var(--series-5)}.endpoint.s5,.final.s5{fill:var(--series-6)}</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">6機能の月間順位 / 1位を上、順位変化を線で追う</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">順位（上ほど上位）</text><line class="grid" x1="520" y1="365" x2="1360" y2="365"/><text class="rank" x="486" y="365" text-anchor="end" dominant-baseline="central">1</text><line class="grid" x1="520" y1="437" x2="1360" y2="437"/><text class="rank" x="486" y="437" text-anchor="end" dominant-baseline="central">2</text><line class="grid" x1="520" y1="509" x2="1360" y2="509"/><text class="rank" x="486" y="509" text-anchor="end" dominant-baseline="central">3</text><line class="grid" x1="520" y1="581" x2="1360" y2="581"/><text class="rank" x="486" y="581" text-anchor="end" dominant-baseline="central">4</text><line class="grid" x1="520" y1="653" x2="1360" y2="653"/><text class="rank" x="486" y="653" text-anchor="end" dominant-baseline="central">5</text><line class="grid" x1="520" y1="725" x2="1360" y2="725"/><text class="rank" x="486" y="725" text-anchor="end" dominant-baseline="central">6</text><text class="month" x="520" y="790" text-anchor="middle">1月</text><text class="month" x="688" y="790" text-anchor="middle">2月</text><text class="month" x="856" y="790" text-anchor="middle">3月</text><text class="month" x="1024" y="790" text-anchor="middle">4月</text><text class="month" x="1192" y="790" text-anchor="middle">5月</text><text class="month" x="1360" y="790" text-anchor="middle">6月</text><text class="endpoint s0" x="160" y="437" dominant-baseline="central">オンボーディング</text><text class="final s0" x="1400" y="581" dominant-baseline="central">4位 オンボーディング</text><text class="endpoint s1" x="160" y="581" dominant-baseline="central">検索</text><text class="final s1" x="1400" y="437" dominant-baseline="central">2位 検索</text><text class="endpoint s2" x="160" y="365" dominant-baseline="central">データ出力</text><text class="final s2" x="1400" y="365" dominant-baseline="central">1位 データ出力</text><text class="endpoint s3" x="160" y="653" dominant-baseline="central">自動化</text><text class="final s3" x="1400" y="509" dominant-baseline="central">3位 自動化</text><text class="endpoint s4" x="160" y="509" dominant-baseline="central">モバイル</text><text class="final s4" x="1400" y="653" dominant-baseline="central">5位 モバイル</text><text class="endpoint s5" x="160" y="725" dominant-baseline="central">外部連携</text><text class="final s5" x="1400" y="725" dominant-baseline="central">6位 外部連携</text><path class="line s0" d="M 520 437 L 688 365 L 856 365 L 1024 437 L 1192 509 L 1360 581"/><circle class="dot s0" cx="520" cy="437" r="8"/><circle class="dot s0" cx="688" cy="365" r="8"/><circle class="dot s0" cx="856" cy="365" r="8"/><circle class="dot s0" cx="1024" cy="437" r="8"/><circle class="dot s0" cx="1192" cy="509" r="8"/><circle class="dot s0" cx="1360" cy="581" r="8"/><path class="line s1" d="M 520 581 L 688 509 L 856 437 L 1024 365 L 1192 365 L 1360 437"/><circle class="dot s1" cx="520" cy="581" r="8"/><circle class="dot s1" cx="688" cy="509" r="8"/><circle class="dot s1" cx="856" cy="437" r="8"/><circle class="dot s1" cx="1024" cy="365" r="8"/><circle class="dot s1" cx="1192" cy="365" r="8"/><circle class="dot s1" cx="1360" cy="437" r="8"/><path class="line s2" d="M 520 365 L 688 437 L 856 509 L 1024 509 L 1192 437 L 1360 365"/><circle class="dot s2" cx="520" cy="365" r="8"/><circle class="dot s2" cx="688" cy="437" r="8"/><circle class="dot s2" cx="856" cy="509" r="8"/><circle class="dot s2" cx="1024" cy="509" r="8"/><circle class="dot s2" cx="1192" cy="437" r="8"/><circle class="dot s2" cx="1360" cy="365" r="8"/><path class="line s3" d="M 520 653 L 688 653 L 856 581 L 1024 581 L 1192 581 L 1360 509"/><circle class="dot s3" cx="520" cy="653" r="8"/><circle class="dot s3" cx="688" cy="653" r="8"/><circle class="dot s3" cx="856" cy="581" r="8"/><circle class="dot s3" cx="1024" cy="581" r="8"/><circle class="dot s3" cx="1192" cy="581" r="8"/><circle class="dot s3" cx="1360" cy="509" r="8"/><path class="line s4" d="M 520 509 L 688 581 L 856 653 L 1024 653 L 1192 653 L 1360 653"/><circle class="dot s4" cx="520" cy="509" r="8"/><circle class="dot s4" cx="688" cy="581" r="8"/><circle class="dot s4" cx="856" cy="653" r="8"/><circle class="dot s4" cx="1024" cy="653" r="8"/><circle class="dot s4" cx="1192" cy="653" r="8"/><circle class="dot s4" cx="1360" cy="653" r="8"/><path class="line s5" d="M 520 725 L 688 725 L 856 725 L 1024 725 L 1192 725 L 1360 725"/><circle class="dot s5" cx="520" cy="725" r="8"/><circle class="dot s5" cx="688" cy="725" r="8"/><circle class="dot s5" cx="856" cy="725" r="8"/><circle class="dot s5" cx="1024" cy="725" r="8"/><circle class="dot s5" cx="1192" cy="725" r="8"/><circle class="dot s5" cx="1360" cy="725" r="8"/><text class="ink takeaway" data-type="takeaway" x="960" y="927" text-anchor="middle">データ出力は1月1位から一時後退し、6月に再び首位へ</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/bump-chart-feature-request-rankings/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 84 (15ffca0c94da82d3)
*
* 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-36, U+2014, U+3001-3002, U+3044, U+3046, U+304b-304c, U+3057-305a, U+3066-306b, U+306e-3070, U+3072-3073, U+3078-3079, U+307b-307c, U+307f, U+3089, U+3092, U+3094, U+3099, U+30a3-30a4, U+30aa, U+30af-30b0, U+30bf-30c0, U+30c6-30c7, U+30cf-30d0, U+30db-30dc, U+30e2, U+30eb, U+30f3, U+30fc, U+4e00, U+4e0a, U+4f4d, U+5024, U+518d, U+51fa, U+529b, U+52d5, U+5316, U+5909, U+5916, U+5b9f, U+5dee, U+5e8f, U+5f8c, U+63a5, U+63a8, U+643a, U+6570, U+6642, U+6708, U+671b, U+691c, U+6a5f, U+793a, U+79fb, U+7b49, U+7d22, U+7dda, U+80fd, U+81ea, U+8981, U+8ffd, U+9000, U+9023, U+90e8, U+91cf, U+9593, U+9694, U+96a3, U+9806, U+9996, 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+2f, U+31-36, U+2014, U+3001-3002, U+3044, U+3046, U+304b-304c, U+3057-305a, U+3066-306b, U+306e-3070, U+3072-3073, U+3078-3079, U+307b-307c, U+307f, U+3089, U+3092, U+3094, U+3099, U+30a3-30a4, U+30aa, U+30af-30b0, U+30bf-30c0, U+30c6-30c7, U+30cf-30d0, U+30db-30dc, U+30e2, U+30eb, U+30f3, U+30fc, U+4e00, U+4e0a, U+4f4d, U+5024, U+518d, U+51fa, U+529b, U+52d5, U+5316, U+5909, U+5916, U+5b9f, U+5dee, U+5e8f, U+5f8c, U+63a5, U+63a8, U+643a, U+6570, U+6642, U+6708, U+671b, U+691c, U+6a5f, U+793a, U+79fb, U+7b49, U+7d22, U+7dda, U+80fd, U+81ea, U+8981, U+8ffd, U+9000, U+9023, U+90e8, U+91cf, U+9593, U+9694, U+96a3, U+9806, U+9996, 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+2f, U+31-36, U+2014, U+3001-3002, U+3044, U+3046, U+304b-304c, U+3057-305a, U+3066-306b, U+306e-3070, U+3072-3073, U+3078-3079, U+307b-307c, U+307f, U+3089, U+3092, U+3094, U+3099, U+30a3-30a4, U+30aa, U+30af-30b0, U+30bf-30c0, U+30c6-30c7, U+30cf-30d0, U+30db-30dc, U+30e2, U+30eb, U+30f3, U+30fc, U+4e00, U+4e0a, U+4f4d, U+5024, U+518d, U+51fa, U+529b, U+52d5, U+5316, U+5909, U+5916, U+5b9f, U+5dee, U+5e8f, U+5f8c, U+63a5, U+63a8, U+643a, U+6570, U+6642, U+6708, U+671b, U+691c, U+6a5f, U+793a, U+79fb, U+7b49, U+7d22, U+7dda, U+80fd, U+81ea, U+8981, U+8ffd, U+9000, U+9023, U+90e8, U+91cf, U+9593, U+9694, U+96a3, U+9806, U+9996, U+ff08-ff09;
}
月を追うと、機能要望の相対順位はどう入れ替わり、どの要望が上位へ伸びるか。
カテゴリごとの順位を月単位の点として配置し、1位を上にした順序軸で点を結ぶ。線の交差が順位逆転を表し、同順位の水平区間は維持を表す。連続量の2時点差を比較するslopegraphとは異なり、この図は6時点にわたる順序尺度の軌跡に焦点を置く。各月の機能要望数からカテゴリ順位を独立に作るため、全対象の重複しない順位表を期間横断で追うrank-flowのentity単位の順位移動とは異なる。順位間隔は等順位ステップであり、実際の要望数の差を表さない。
架空の月次順位ではデータ出力が1月に1位、4月には3位まで下がり、6月に再び首位へ戻る。検索は4月と5月に1位となり、オンボーディングは1月から2月に上昇した後に4位へ下がる。