版の配色
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 axisLabel 22px / 500 legend 22px / 500 takeaway 28px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 ## 外すと崩れる点 - 同じ対象を2手法で測り、横軸に2値の平均、縦軸にA−Bの差を置く - 平均差は系統的な偏りを、一致限界(平均差 ± 1.96 × 標本標準偏差)は差の広がりを示す - 実用上の許容差は用途に応じて事前に定め、一致限界と照らして判断する - 架空の7組を使った例示。標本数が少ないため、実測の一致性を主張しない 内容は[ここに自分の内容を書く]に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/bland-altman-measurement-agreement/pattern.html
/ai/designs/bland-altman-measurement-agreement.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
axisLabel:
size: 22
weight: 500
legend:
size: 22
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"
rules:
- 同じ対象を2手法で測り、横軸に2値の平均、縦軸にA−Bの差を置く
- 平均差は系統的な偏りを、一致限界(平均差 ± 1.96 × 標本標準偏差)は差の広がりを示す
- 実用上の許容差は用途に応じて事前に定め、一致限界と照らして判断する
- 架空の7組を使った例示。標本数が少ないため、実測の一致性を主張しない{
"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
},
"axisLabel": {
"size": 22,
"weight": 500
},
"legend": {
"size": 22,
"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"
},
"rules": [
"同じ対象を2手法で測り、横軸に2値の平均、縦軸にA−Bの差を置く",
"平均差は系統的な偏りを、一致限界(平均差 ± 1.96 × 標本標準偏差)は差の広がりを示す",
"実用上の許容差は用途に応じて事前に定め、一致限界と照らして判断する",
"架空の7組を使った例示。標本数が少ないため、実測の一致性を主張しない"
]
} /designs/bland-altman-measurement-agreement/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>測定法の一致度 — 平均差0.0 mm、95%範囲は±3.6 mm</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; }
* { 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="架空の7組の測定値を用いたBland–Altmanプロット。平均差は0 mm、95%一致限界は約マイナス3.6からプラス3.6 mm。許容差±5 mm内に全点がある。">
<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}.legend{font-size:22px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}
.loa{stroke:var(--accent);stroke-width:4}.bias{stroke:var(--ink);stroke-width:3}.tolerance{stroke:var(--muted);stroke-width:2;stroke-dasharray:10 9}.point{fill:var(--accent);stroke:var(--ground);stroke-width:3}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">測定法の一致度 — 平均差0.0 mm、95%範囲は±3.6 mm</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">同じ7対象を機器A・Bで測定 / 架空データ / 差は A − B</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="300" text-anchor="middle">対象ごとの平均値に対して、2機器の測定差を確認する</text>
<g class="rule" fill="none" stroke-width="1.5">
<line x1="400" y1="330" x2="400" y2="750"/><line x1="624" y1="330" x2="624" y2="750"/><line x1="848" y1="330" x2="848" y2="750"/><line x1="1072" y1="330" x2="1072" y2="750"/><line x1="1296" y1="330" x2="1296" y2="750"/><line x1="1520" y1="330" x2="1520" y2="750"/>
<line x1="400" y1="330" x2="1520" y2="330"/><line x1="400" y1="400" x2="1520" y2="400"/><line x1="400" y1="470" x2="1520" y2="470"/><line x1="400" y1="540" x2="1520" y2="540"/><line x1="400" y1="610" x2="1520" y2="610"/><line x1="400" y1="680" x2="1520" y2="680"/><line x1="400" y1="750" x2="1520" y2="750"/>
</g>
<line class="tolerance" x1="400" y1="365" x2="1520" y2="365"/><line class="tolerance" x1="400" y1="715" x2="1520" y2="715"/>
<line class="loa" x1="400" y1="414" x2="1520" y2="414"/><line class="loa" x1="400" y1="666" x2="1520" y2="666"/><line class="bias" x1="400" y1="540" x2="1520" y2="540"/>
<g class="muted tick" text-anchor="middle" dominant-baseline="central"><text data-type="tick" x="400" y="780">0</text><text x="624" y="780">10</text><text x="848" y="780">20</text><text x="1072" y="780">30</text><text x="1296" y="780">40</text><text x="1520" y="780">50</text></g>
<g class="muted tick" text-anchor="end" dominant-baseline="central"><text x="370" y="330">+6</text><text x="370" y="400">+4</text><text x="370" y="470">+2</text><text x="370" y="540">0</text><text x="370" y="610">−2</text><text x="370" y="680">−4</text><text x="370" y="750">−6</text></g>
<g class="point"><circle cx="624" cy="505" r="10"/><circle cx="736" cy="610" r="10"/><circle cx="848" cy="540" r="10"/><circle cx="960" cy="435" r="10"/><circle cx="1072" cy="575" r="10"/><circle cx="1184" cy="505" r="10"/><circle cx="1296" cy="610" r="10"/></g>
<text class="ink legend" data-type="axisLabel" x="960" y="830" text-anchor="middle">2機器の測定値の平均(mm)</text><text class="muted legend" x="140" y="300">差 A − B(mm)</text>
<line class="bias" x1="440" y1="884" x2="500" y2="884"/><text class="ink legend" x="515" y="884" dominant-baseline="central">平均差 0.0 mm</text>
<line class="loa" x1="800" y1="884" x2="860" y2="884"/><text class="ink legend" x="875" y="884" dominant-baseline="central">95%一致限界 ±3.6 mm</text>
<line class="tolerance" x1="1270" y1="884" x2="1330" y2="884"/><text class="muted legend" data-type="legend" x="1345" y="884" dominant-baseline="central">仮の許容差 ±5 mm</text>
<text class="ink takeaway" data-type="takeaway" x="960" y="944" text-anchor="middle">7組すべてが仮の許容差内 — 実用上の許容幅は専門家が定める</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">一致限界は平均差 ± 1.96 × 標本標準偏差。架空の少数データのため結論は例示のみ。</text>
</svg></div></div>
/designs/bland-altman-measurement-agreement/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 90 (359806f708a8a843)
*
* 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+2e-37, U+39, U+41-42, U+6d, U+b1, U+d7, U+2014, U+2212, U+3001-3002, U+304b-304c, U+3053-3054, U+3057-305a, U+305f-3060, U+3066-3069, U+306b, U+306e-3070, U+3078-3079, U+307f, U+3081, U+308b, U+3092, U+3099, U+30bf-30c0, U+30c6-30c7, U+30fb-30fc, U+4e00, U+4e0a, U+4eee, U+4f8b, U+5024, U+504f, U+5185, U+540c, U+5668, U+56f2, U+5747, U+5b9a, U+5b9f, U+5bb6, U+5bb9, U+5bfe, U+5c02, U+5c11, U+5dee, U+5e45, U+5e73, U+5ea6, U+6570, U+672c, U+67b6, U+6a19, U+6a5f, U+6cd5, U+6e2c, U+6e96, U+7528, U+754c, U+78ba, U+793a, U+7a7a, U+7bc4, U+7d44, U+7d50, U+81f4, U+8a31, U+8a8d, U+8ad6, U+8c61, U+9580, U+9650, 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+2b, U+2e-37, U+39, U+41-42, U+6d, U+b1, U+d7, U+2014, U+2212, U+3001-3002, U+304b-304c, U+3053-3054, U+3057-305a, U+305f-3060, U+3066-3069, U+306b, U+306e-3070, U+3078-3079, U+307f, U+3081, U+308b, U+3092, U+3099, U+30bf-30c0, U+30c6-30c7, U+30fb-30fc, U+4e00, U+4e0a, U+4eee, U+4f8b, U+5024, U+504f, U+5185, U+540c, U+5668, U+56f2, U+5747, U+5b9a, U+5b9f, U+5bb6, U+5bb9, U+5bfe, U+5c02, U+5c11, U+5dee, U+5e45, U+5e73, U+5ea6, U+6570, U+672c, U+67b6, U+6a19, U+6a5f, U+6cd5, U+6e2c, U+6e96, U+7528, U+754c, U+78ba, U+793a, U+7a7a, U+7bc4, U+7d44, U+7d50, U+81f4, U+8a31, U+8a8d, U+8ad6, U+8c61, U+9580, U+9650, 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+2b, U+2e-37, U+39, U+41-42, U+6d, U+b1, U+d7, U+2014, U+2212, U+3001-3002, U+304b-304c, U+3053-3054, U+3057-305a, U+305f-3060, U+3066-3069, U+306b, U+306e-3070, U+3078-3079, U+307f, U+3081, U+308b, U+3092, U+3099, U+30bf-30c0, U+30c6-30c7, U+30fb-30fc, U+4e00, U+4e0a, U+4eee, U+4f8b, U+5024, U+504f, U+5185, U+540c, U+5668, U+56f2, U+5747, U+5b9a, U+5b9f, U+5bb6, U+5bb9, U+5bfe, U+5c02, U+5c11, U+5dee, U+5e45, U+5e73, U+5ea6, U+6570, U+672c, U+67b6, U+6a19, U+6a5f, U+6cd5, U+6e2c, U+6e96, U+7528, U+754c, U+78ba, U+793a, U+7a7a, U+7bc4, U+7d44, U+7d50, U+81f4, U+8a31, U+8a8d, U+8ad6, U+8c61, U+9580, U+9650, U+ff08-ff09;
}
同じ対象を測る機器AとBは、値の大きさにかかわらず実用上十分近い測定値を返すか。
横軸は各対象の2測定値の平均、縦軸は差 A−B。中央線が平均差(バイアス)、上下の実線が平均差 ± 1.96 × 標本標準偏差で計算した95%一致限界を示す。破線は説明用に置いた仮の許容差±5 mmで、7点はその内側にある。
相関散布図は2変数が一緒に増減するかを問うが、この図は測定値どうしの一致を問う。相関が高くても一方が常に 大きければ一致とは限らない。値は架空の7組であり、実データの結論には十分な標本数と用途別の許容差が必要。