1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 100 右 140 下 90 左 140 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em subtitle 22px / 500 axisTitle 22px / 700 tick 20px / 500 seriesLabel 20px / 500 eventTag 20px / 700 effect 26px / 700 takeaway 26px / 500 note 20px / 400 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 ## 外すと崩れる点 - 導入前の推移が平行に近いことを確かめ、比較店が試験店の反実仮想として妥当か検討する - 反実仮想は比較店の導入前後の変化を試験店の導入前値に加えて推定する - 施策と同時に変わった要因があれば、導入後の差を施策だけの因果効果と断定しない - 架空の週次指数。値と平行トレンド仮定は説明用で実測ではない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/event-study-pilot-store-incremental-sales/pattern.html
/ai/designs/event-study-pilot-store-incremental-sales.json
format: slide-16x9
density: medium
layout:
kind: axis
canvas:
w: 1920
h: 1080
margin:
top: 100
right: 140
bottom: 90
left: 140
type:
title:
size: 44
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 500
axisTitle:
size: 22
weight: 700
tick:
size: 20
weight: 500
seriesLabel:
size: 20
weight: 500
eventTag:
size: 20
weight: 700
effect:
size: 26
weight: 700
takeaway:
size: 26
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- 導入前の推移が平行に近いことを確かめ、比較店が試験店の反実仮想として妥当か検討する
- 反実仮想は比較店の導入前後の変化を試験店の導入前値に加えて推定する
- 施策と同時に変わった要因があれば、導入後の差を施策だけの因果効果と断定しない
- 架空の週次指数。値と平行トレンド仮定は説明用で実測ではない{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 90,
"left": 140
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"tick": {
"size": 20,
"weight": 500
},
"seriesLabel": {
"size": 20,
"weight": 500
},
"eventTag": {
"size": 20,
"weight": 700
},
"effect": {
"size": 26,
"weight": 700
},
"takeaway": {
"size": 26,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"導入前の推移が平行に近いことを確かめ、比較店が試験店の反実仮想として妥当か検討する",
"反実仮想は比較店の導入前後の変化を試験店の導入前値に加えて推定する",
"施策と同時に変わった要因があれば、導入後の差を施策だけの因果効果と断定しない",
"架空の週次指数。値と平行トレンド仮定は説明用で実測ではない"
]
} /designs/event-study-pilot-store-incremental-sales/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;--comparison:#667183;--counterfactual:#C16A24;--rule:#DBE1E9;
--plot-color-1: #F7EFE4;
}
*{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 90px;background:var(--ground);color:var(--ink);position:relative}.content{width:1640px;height:890px}.content>svg{position:absolute;left:0;top:0}
</style>
<div class="artboard" data-artboard><div class="content" data-content>
<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="店舗施策の導入週を0とするイベントスタディ。試験店と比較店の週次売上指数を表示し、比較店の変化を試験店の反実仮想として破線で延長。導入3週後の差は9ポイント。">
<style>
text{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.title{font-size:44px;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}.series-label{font-size:20px;font-weight:500}.event-tag{font-size:20px;font-weight:700}.effect{font-size:26px;font-weight:700}.takeaway{font-size:26px;font-weight:500}.note{font-size:20px;font-weight:400}.grid{stroke:var(--rule);stroke-width:1}.axis{stroke:var(--ink);stroke-width:2}.comparison{fill:none;stroke:var(--muted);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.treatment{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.cf{fill:none;stroke:var(--counterfactual);stroke-width:4;stroke-dasharray:12 9;stroke-linecap:round}.dot-treatment{fill:var(--accent);stroke:var(--ground);stroke-width:3}.dot-comparison{fill:var(--muted);stroke:var(--ground);stroke-width:3}.dot-cf{fill:var(--counterfactual);stroke:var(--ground);stroke-width:3}
</style>
<rect width="1920" height="1080" fill="var(--ground)"/>
<g transform="translate(140 100)">
<text class="ink title" data-type="title" x="0" y="58">試験店の導入効果 — 比較店との差は導入後に広がる</text>
<text class="muted subtitle" data-type="subtitle" x="0" y="98">売上指数 / 導入前を100に正規化 / 架空の8週データ</text>
<line x1="0" y1="130" x2="1640" y2="130" stroke="var(--rule)" stroke-width="2"/>
<text class="ink axis-title" data-type="axisTitle" x="810" y="177" text-anchor="middle">導入前の傾向を基準にすると、試験店の売上はどれだけ上振れしたか</text>
<text class="muted tick" x="0" y="220">売上指数</text>
<!-- Shared vertical scale; the launch boundary separates pre and post periods. -->
<g class="grid">
<line x1="210" y1="650" x2="1360" y2="650"/><line x1="210" y1="550" x2="1360" y2="550"/><line x1="210" y1="450" x2="1360" y2="450"/><line x1="210" y1="350" x2="1360" y2="350"/><line x1="210" y1="250" x2="1360" y2="250"/>
</g>
<g class="muted tick" text-anchor="end">
<text data-type="tick" x="190" y="657">100</text><text x="190" y="557">105</text><text x="190" y="457">110</text><text x="190" y="357">115</text><text x="190" y="257">120</text>
</g>
<line class="axis" x1="210" y1="650" x2="1360" y2="650"/>
<line x1="785" y1="238" x2="785" y2="650" stroke="var(--counterfactual)" stroke-width="2" stroke-dasharray="7 7"/>
<rect x="704" y="196" width="162" height="36" rx="18" fill="var(--plot-color-1)"/>
<text class="ink event-tag" data-type="eventTag" x="785" y="221" text-anchor="middle">施策を導入</text>
<!-- Pilot and matched stores move almost in parallel before launch. -->
<path class="treatment" d="M280 650 L420 610 L560 590 L700 550 L840 450 L980 390 L1120 350 L1260 290"/>
<path class="comparison" d="M280 650 L420 630 L560 610 L700 570 L840 550 L980 530 L1120 510 L1260 490"/>
<!-- Counterfactual extends the pilot's pre-launch level using comparison-store change. -->
<path class="cf" d="M700 550 L840 530 L980 510 L1120 490 L1260 470"/>
<g class="dot-comparison"><circle cx="280" cy="650" r="10"/><circle cx="420" cy="630" r="7"/><circle cx="560" cy="610" r="7"/><circle cx="700" cy="570" r="7"/><circle cx="840" cy="550" r="7"/><circle cx="980" cy="530" r="7"/><circle cx="1120" cy="510" r="7"/><circle cx="1260" cy="490" r="7"/></g>
<g class="dot-treatment"><circle cx="280" cy="650" r="4"/><circle cx="420" cy="610" r="8"/><circle cx="560" cy="590" r="8"/><circle cx="700" cy="550" r="8"/><circle cx="840" cy="450" r="8"/><circle cx="980" cy="390" r="8"/><circle cx="1120" cy="350" r="8"/><circle cx="1260" cy="290" r="8"/></g>
<g class="dot-cf"><circle cx="840" cy="530" r="7"/><circle cx="980" cy="510" r="7"/><circle cx="1120" cy="490" r="7"/><circle cx="1260" cy="470" r="7"/></g>
<g class="muted tick" text-anchor="middle">
<text data-type="tick" x="280" y="684">−4</text><text x="420" y="684">−3</text><text x="560" y="684">−2</text><text x="700" y="684">−1</text><text x="840" y="684">0</text><text x="980" y="684">+1</text><text x="1120" y="684">+2</text><text x="1260" y="684">+3</text>
</g>
<text class="muted axis-title" x="785" y="722" text-anchor="middle">導入週からの週数</text>
<!-- Gap at week +3 is the difference-in-differences estimate. -->
<line x1="1320" y1="290" x2="1320" y2="470" stroke="var(--counterfactual)" stroke-width="3"/>
<line x1="1308" y1="290" x2="1332" y2="290" stroke="var(--counterfactual)" stroke-width="3"/>
<line x1="1308" y1="470" x2="1332" y2="470" stroke="var(--counterfactual)" stroke-width="3"/>
<text class="ink effect" data-type="effect" x="1350" y="360">+9pt</text>
<text class="muted series-label" x="1350" y="394">導入3週後</text>
<g transform="translate(185 770)">
<line x1="0" y1="0" x2="44" y2="0" stroke="var(--accent)" stroke-width="4"/><circle cx="22" cy="0" r="6" fill="var(--accent)"/><text class="ink series-label" data-type="seriesLabel" x="56" y="7">試験店の実績</text>
<line x1="315" y1="0" x2="359" y2="0" stroke="var(--muted)" stroke-width="4"/><circle cx="337" cy="0" r="6" fill="var(--muted)"/><text class="ink series-label" x="371" y="7">比較店の実績</text>
<line x1="635" y1="0" x2="679" y2="0" stroke="var(--counterfactual)" stroke-width="4" stroke-dasharray="10 7"/><text class="ink series-label" x="691" y="7">反実仮想（比較店の変化を延長）</text>
</g>
<rect x="250" y="818" width="1140" height="70" rx="10" fill="var(--surface)"/>
<text class="ink takeaway" data-type="takeaway" x="820" y="862" text-anchor="middle">導入3週後: 試験店118 − 反実仮想109 = 推定差 +9ポイント</text>
<line x1="0" y1="915" x2="1640" y2="915" stroke="var(--rule)"/>
<text class="muted note" data-type="note" x="0" y="954">因果解釈には導入前の平行トレンドと、試験店だけの同時要因がないことの確認が必要。</text>
</g></svg></div></div>
/designs/event-study-pilot-store-incremental-sales/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 99 (8dae9e436b43c72e)
*
* 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+2b, U+2f-35, U+38-3a, U+3d, U+70, U+74, U+2014, U+2212, U+3001-3002, U+3044, U+304b-304c, U+3051-3054, U+3057-305a, U+305f-3060, U+3068-306b, U+306e-3071, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ec, U+30f3, U+30fc, U+4e0a, U+4eee, U+50be, U+5165, U+524d, U+52b9, U+5316, U+53cd, U+540c, U+5411, U+56e0, U+57fa, U+58f2, U+5909, U+5b9a, U+5b9f, U+5c0e, U+5dee, U+5e73, U+5e83, U+5e97, U+5ef6, U+5f8c, U+5fc5, U+60f3, U+6307, U+632f, U+63a8, U+6570, U+65bd, U+6642, U+679c, U+67b6, U+6b63, U+6bd4, U+6e96, U+78ba, U+7a7a, U+7b56, U+7e3e, U+884c, U+8981, U+898f, U+89e3, U+8a66, U+8a8d, U+8f03, U+9031, U+91c8, U+9577, U+9a13, 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+2b, U+2f-35, U+38-3a, U+3d, U+70, U+74, U+2014, U+2212, U+3001-3002, U+3044, U+304b-304c, U+3051-3054, U+3057-305a, U+305f-3060, U+3068-306b, U+306e-3071, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ec, U+30f3, U+30fc, U+4e0a, U+4eee, U+50be, U+5165, U+524d, U+52b9, U+5316, U+53cd, U+540c, U+5411, U+56e0, U+57fa, U+58f2, U+5909, U+5b9a, U+5b9f, U+5c0e, U+5dee, U+5e73, U+5e83, U+5e97, U+5ef6, U+5f8c, U+5fc5, U+60f3, U+6307, U+632f, U+63a8, U+6570, U+65bd, U+6642, U+679c, U+67b6, U+6b63, U+6bd4, U+6e96, U+78ba, U+7a7a, U+7b56, U+7e3e, U+884c, U+8981, U+898f, U+89e3, U+8a66, U+8a8d, U+8f03, U+9031, U+91c8, U+9577, U+9a13, 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+2b, U+2f-35, U+38-3a, U+3d, U+70, U+74, U+2014, U+2212, U+3001-3002, U+3044, U+304b-304c, U+3051-3054, U+3057-305a, U+305f-3060, U+3068-306b, U+306e-3071, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30bf-30c0, U+30c6-30c9, U+30db-30dd, U+30ec, U+30f3, U+30fc, U+4e0a, U+4eee, U+50be, U+5165, U+524d, U+52b9, U+5316, U+53cd, U+540c, U+5411, U+56e0, U+57fa, U+58f2, U+5909, U+5b9a, U+5b9f, U+5c0e, U+5dee, U+5e73, U+5e83, U+5e97, U+5ef6, U+5f8c, U+5fc5, U+60f3, U+6307, U+632f, U+63a8, U+6570, U+65bd, U+6642, U+679c, U+67b6, U+6b63, U+6bd4, U+6e96, U+78ba, U+7a7a, U+7b56, U+7e3e, U+884c, U+8981, U+898f, U+89e3, U+8a66, U+8a8d, U+8f03, U+9031, U+91c8, U+9577, U+9a13, U+ff08-ff09;
}
店舗施策の導入後、試験店の売上は比較店の通常推移を上回ったか。上回ったなら、どの程度の差が観測されたか。
横軸は導入前後の週、縦軸は導入前を100にそろえた売上指数。試験店と比較店の実績を実線で示し、比較店の導入前後の変化を試験店の導入前値へ足して、導入後の反実仮想を破線で延長する。導入3週後は試験店118、反実仮想109で、差の差は+9ポイント。
これは店舗間の単純な事後比較ではなく、導入前の水準差と導入前後の共通変化を差し引こうとするイベントスタディの説明図。因果解釈には、介入がなければ両群の推移が平行だったという仮定や、試験店だけに同時発生した別要因がないことが必要。図中の値は架空。