版の配色
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
1920 × 1080 作品として見る 版そのものを描画 — どの倍率でも字は潰れません 骨格・余白・カラムを重ねた状態
コピーして貼るか、ファイルに保存して渡す。ネットにつながらない環境には「全部入り」を 1 つ渡せば足りる。
このパネルの中身を、URL の先にあるファイルの中身まで含めて 1 つにまとめた Markdown — 大きいのでファイルで渡す（コピーは 32KB まで）
以下の仕様でスライドを 1 枚作ってください。 - 版面 1920 × 1080 - 余白 上 82 右 120 下 82 左 120 ## 文字（版面 1920px に対する px） title 44px / 700 / 字間 0.01em subtitle 22px / 400 axisNote 20px / 500 corner 20px / 500 columnHead 22px / 700 rowHead 22px / 500 variant 48px / 700 cellCount 20px / 500 asideHeading 24px / 700 balanceMark 30px / 700 balanceCopy 20px / 400 totalValue 42px / 700 / 等幅数字 totalLabel 20px / 500 conclusion 25px / 500 ## 配色 地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #2F6FB5 / #A85A2E / #1C8C79 / #4E7A3A ## 外すと崩れる点 - 顧客層を行、配信枠を列に置き、各行・各列へ件名A〜Dを1回ずつ割り当てる。案が特定の層や時刻に偏ると、件名の効果と条件差を分けられない - 1セルの送信数を揃える。異なる件名の反応率を比べる前に、各案が受け取る母数を同じにする - A〜Dの文字を色と一緒に残す。色だけで案を識別させない - これは割付の例であり、無作為抽出・重複除外・配信到達を保証するものではない 内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。 正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/latin-square-subject-rotation/pattern.html
/ai/designs/latin-square-subject-rotation.json
format: slide-16x9
density: medium
layout:
kind: matrix
canvas:
w: 1920
h: 1080
margin:
top: 82
right: 120
bottom: 82
left: 120
type:
title:
size: 44
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 400
axisNote:
size: 20
weight: 500
corner:
size: 20
weight: 500
columnHead:
size: 22
weight: 700
rowHead:
size: 22
weight: 500
variant:
size: 48
weight: 700
cellCount:
size: 20
weight: 500
asideHeading:
size: 24
weight: 700
balanceMark:
size: 30
weight: 700
balanceCopy:
size: 20
weight: 400
totalValue:
size: 42
weight: 700
numeric: tabular
totalLabel:
size: 20
weight: 500
conclusion:
size: 25
weight: 500
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
series:
- "#2F6FB5"
- "#A85A2E"
- "#1C8C79"
- "#4E7A3A"
rules:
- 顧客層を行、配信枠を列に置き、各行・各列へ件名A〜Dを1回ずつ割り当てる。案が特定の層や時刻に偏ると、件名の効果と条件差を分けられない
- 1セルの送信数を揃える。異なる件名の反応率を比べる前に、各案が受け取る母数を同じにする
- A〜Dの文字を色と一緒に残す。色だけで案を識別させない
- これは割付の例であり、無作為抽出・重複除外・配信到達を保証するものではない{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "matrix",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 82,
"right": 120,
"bottom": 82,
"left": 120
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 400
},
"axisNote": {
"size": 20,
"weight": 500
},
"corner": {
"size": 20,
"weight": 500
},
"columnHead": {
"size": 22,
"weight": 700
},
"rowHead": {
"size": 22,
"weight": 500
},
"variant": {
"size": 48,
"weight": 700
},
"cellCount": {
"size": 20,
"weight": 500
},
"asideHeading": {
"size": 24,
"weight": 700
},
"balanceMark": {
"size": 30,
"weight": 700
},
"balanceCopy": {
"size": 20,
"weight": 400
},
"totalValue": {
"size": 42,
"weight": 700,
"numeric": "tabular"
},
"totalLabel": {
"size": 20,
"weight": 500
},
"conclusion": {
"size": 25,
"weight": 500
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#2F6FB5",
"#A85A2E",
"#1C8C79",
"#4E7A3A"
]
},
"rules": [
"顧客層を行、配信枠を列に置き、各行・各列へ件名A〜Dを1回ずつ割り当てる。案が特定の層や時刻に偏ると、件名の効果と条件差を分けられない",
"1セルの送信数を揃える。異なる件名の反応率を比べる前に、各案が受け取る母数を同じにする",
"A〜Dの文字を色と一緒に残す。色だけで案を識別させない",
"これは割付の例であり、無作為抽出・重複除外・配信到達を保証するものではない"
]
} /designs/latin-square-subject-rotation/pattern.html — 版そのものの HTML。書体の部分集合ごと同梱で、開けばこの絵がそのまま出ます。
<!doctype html>
<meta charset="utf-8">
<title>件名A〜Dを公平に比べる — 顧客層と配信枠の偏りを抑える</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" data-artboard="true">
<style>
:root {
--ground: #FFFFFF; --surface: #F4F6F9; --ink: #131820;
--muted: #667183; --accent: #1F5FA8; --rule: #DBE1E9;
--series-1: #2F6FB5; --series-2: #A85A2E; --series-3: #1C8C79; --series-4: #4E7A3A;
}
svg { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; }
.ground { fill: var(--ground); }
.ink { fill: var(--ink); }
.muted { fill: var(--muted); }
.accent { fill: var(--accent); }
.rule { stroke: var(--rule); }
.title { font-size: 44px; font-weight: 700; letter-spacing: .01em; }
.subtitle { font-size: 22px; font-weight: 400; }
.axis-note { font-size: 20px; font-weight: 500; }
.corner { font-size: 20px; font-weight: 500; }
.column-head { font-size: 22px; font-weight: 700; }
.row-head { font-size: 22px; font-weight: 500; }
.variant { font-size: 48px; font-weight: 700; }
.cell-count { font-size: 20px; font-weight: 500; }
.aside-heading { font-size: 24px; font-weight: 700; }
.balance-mark { font-size: 30px; font-weight: 700; }
.balance-copy { font-size: 20px; font-weight: 400; }
.total-value { font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.total-label { font-size: 20px; font-weight: 500; }
.conclusion { font-size: 25px; font-weight: 500; }
.v-a { fill: var(--series-1); }
.v-b { fill: var(--series-2); }
.v-c { fill: var(--series-3); }
.v-d { fill: var(--series-4); }
</style>
<rect class="ground" x="0" y="0" width="1920" height="1080"/>
<g transform="translate(120 82)" data-content="true">
<rect x="0" y="0" width="1680" height="916" fill="transparent"/>
<text class="title ink" data-type="title" x="0" y="56">件名A〜Dを公平に比べる — 顧客層と配信枠の偏りを抑える</text>
<text class="subtitle muted" data-type="subtitle" x="0" y="105">架空の案内メール実験 / 4つの顧客層 × 4つの配信枠 / 各セル200件</text>
<line class="rule" x1="0" y1="142" x2="1680" y2="142" stroke-width="2"/>
<text class="axis-note muted" data-type="axisNote" x="276" y="187">配信枠 →</text>
<text class="corner muted" data-type="corner" x="0" y="229">顧客層 ↓</text>
<text class="column-head ink" data-type="columnHead" x="383" y="229" text-anchor="middle">月曜 9時</text>
<text class="column-head ink" data-type="columnHead" x="621" y="229" text-anchor="middle">月曜 13時</text>
<text class="column-head ink" data-type="columnHead" x="859" y="229" text-anchor="middle">火曜 9時</text>
<text class="column-head ink" data-type="columnHead" x="1097" y="229" text-anchor="middle">火曜 13時</text>
<line x1="270" y1="246" x2="1210" y2="246" stroke="var(--ink)" stroke-width="2"/>
<g class="row-head ink"><rect x="0" y="260" width="250" height="122" fill="var(--surface)"/><rect x="0" y="260" width="4" height="122" fill="var(--rule)"/><text data-type="rowHead" x="20" y="330">初回利用</text></g>
<g class="row-head ink"><rect x="0" y="392" width="250" height="122" fill="var(--surface)"/><rect x="0" y="392" width="4" height="122" fill="var(--rule)"/><text data-type="rowHead" x="20" y="462">月1〜2回利用</text></g>
<g class="row-head ink"><rect x="0" y="524" width="250" height="122" fill="var(--surface)"/><rect x="0" y="524" width="4" height="122" fill="var(--rule)"/><text data-type="rowHead" x="20" y="594">週1回以上利用</text></g>
<g class="row-head ink"><rect x="0" y="656" width="250" height="122" fill="var(--surface)"/><rect x="0" y="656" width="4" height="122" fill="var(--rule)"/><text data-type="rowHead" x="20" y="726">法人管理者</text></g>
<g>
<rect x="260" y="260" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="260" y="260" width="228" height="4" class="v-a"/><text class="variant v-a" data-type="variant" x="374" y="323" text-anchor="middle">A</text><text class="cell-count muted" data-type="cellCount" x="374" y="357" text-anchor="middle">200件</text>
<rect x="498" y="260" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="498" y="260" width="228" height="4" class="v-b"/><text class="variant v-b" data-type="variant" x="612" y="323" text-anchor="middle">B</text><text class="cell-count muted" data-type="cellCount" x="612" y="357" text-anchor="middle">200件</text>
<rect x="736" y="260" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="736" y="260" width="228" height="4" class="v-c"/><text class="variant v-c" data-type="variant" x="850" y="323" text-anchor="middle">C</text><text class="cell-count muted" data-type="cellCount" x="850" y="357" text-anchor="middle">200件</text>
<rect x="974" y="260" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="974" y="260" width="228" height="4" class="v-d"/><text class="variant v-d" data-type="variant" x="1088" y="323" text-anchor="middle">D</text><text class="cell-count muted" data-type="cellCount" x="1088" y="357" text-anchor="middle">200件</text>
</g>
<g>
<rect x="260" y="392" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="260" y="392" width="228" height="4" class="v-b"/><text class="variant v-b" data-type="variant" x="374" y="455" text-anchor="middle">B</text><text class="cell-count muted" data-type="cellCount" x="374" y="489" text-anchor="middle">200件</text>
<rect x="498" y="392" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="498" y="392" width="228" height="4" class="v-c"/><text class="variant v-c" data-type="variant" x="612" y="455" text-anchor="middle">C</text><text class="cell-count muted" data-type="cellCount" x="612" y="489" text-anchor="middle">200件</text>
<rect x="736" y="392" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="736" y="392" width="228" height="4" class="v-d"/><text class="variant v-d" data-type="variant" x="850" y="455" text-anchor="middle">D</text><text class="cell-count muted" data-type="cellCount" x="850" y="489" text-anchor="middle">200件</text>
<rect x="974" y="392" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="974" y="392" width="228" height="4" class="v-a"/><text class="variant v-a" data-type="variant" x="1088" y="455" text-anchor="middle">A</text><text class="cell-count muted" data-type="cellCount" x="1088" y="489" text-anchor="middle">200件</text>
</g>
<g>
<rect x="260" y="524" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="260" y="524" width="228" height="4" class="v-c"/><text class="variant v-c" data-type="variant" x="374" y="587" text-anchor="middle">C</text><text class="cell-count muted" data-type="cellCount" x="374" y="621" text-anchor="middle">200件</text>
<rect x="498" y="524" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="498" y="524" width="228" height="4" class="v-d"/><text class="variant v-d" data-type="variant" x="612" y="587" text-anchor="middle">D</text><text class="cell-count muted" data-type="cellCount" x="612" y="621" text-anchor="middle">200件</text>
<rect x="736" y="524" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="736" y="524" width="228" height="4" class="v-a"/><text class="variant v-a" data-type="variant" x="850" y="587" text-anchor="middle">A</text><text class="cell-count muted" data-type="cellCount" x="850" y="621" text-anchor="middle">200件</text>
<rect x="974" y="524" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="974" y="524" width="228" height="4" class="v-b"/><text class="variant v-b" data-type="variant" x="1088" y="587" text-anchor="middle">B</text><text class="cell-count muted" data-type="cellCount" x="1088" y="621" text-anchor="middle">200件</text>
</g>
<g>
<rect x="260" y="656" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="260" y="656" width="228" height="4" class="v-d"/><text class="variant v-d" data-type="variant" x="374" y="719" text-anchor="middle">D</text><text class="cell-count muted" data-type="cellCount" x="374" y="753" text-anchor="middle">200件</text>
<rect x="498" y="656" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="498" y="656" width="228" height="4" class="v-a"/><text class="variant v-a" data-type="variant" x="612" y="719" text-anchor="middle">A</text><text class="cell-count muted" data-type="cellCount" x="612" y="753" text-anchor="middle">200件</text>
<rect x="736" y="656" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="736" y="656" width="228" height="4" class="v-b"/><text class="variant v-b" data-type="variant" x="850" y="719" text-anchor="middle">B</text><text class="cell-count muted" data-type="cellCount" x="850" y="753" text-anchor="middle">200件</text>
<rect x="974" y="656" width="228" height="122" fill="var(--ground)" stroke="var(--rule)"/><rect x="974" y="656" width="228" height="4" class="v-c"/><text class="variant v-c" data-type="variant" x="1088" y="719" text-anchor="middle">C</text><text class="cell-count muted" data-type="cellCount" x="1088" y="753" text-anchor="middle">200件</text>
</g>
<rect x="1260" y="212" width="360" height="566" fill="var(--surface)"/>
<rect x="1260" y="212" width="360" height="5" fill="var(--accent)"/>
<text class="aside-heading ink" data-type="asideHeading" x="1288" y="267">偏りを割り当てで均す</text>
<text class="balance-mark accent" data-type="balanceMark" x="1308" y="336" text-anchor="middle">行</text>
<text class="balance-copy ink" data-type="balanceCopy" x="1342" y="330">各顧客層に</text><text class="balance-copy ink" x="1342" y="359">A〜Dが1回ずつ</text>
<line class="rule" x1="1288" y1="384" x2="1592" y2="384"/>
<text class="balance-mark accent" x="1308" y="430" text-anchor="middle">列</text>
<text class="balance-copy ink" x="1342" y="424">各配信枠にも</text><text class="balance-copy ink" x="1342" y="453">A〜Dが1回ずつ</text>
<line class="rule" x1="1288" y1="478" x2="1592" y2="478"/>
<text class="balance-mark accent" x="1308" y="524" text-anchor="middle">数</text>
<text class="balance-copy ink" x="1342" y="518">各セルの送信数</text><text class="balance-copy ink" x="1342" y="547">を同じにする</text>
<line class="rule" x1="1288" y1="572" x2="1592" y2="572"/>
<text class="total-value accent" data-type="totalValue" x="1288" y="650">3,200件</text>
<text class="total-label muted" data-type="totalLabel" x="1288" y="686">合計 / 件名ごとに800件</text>
<line x1="0" y1="836" x2="1680" y2="836" stroke="var(--ink)" stroke-width="2"/>
<text class="conclusion ink" data-type="conclusion" x="0" y="884">件名だけを比べるなら、顧客層と配信枠にA〜Dを均等に割り当てる。</text>
</g>
</svg>
/designs/latin-square-subject-rotation/font.css — 全部入りには入れていない
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 92 (4c376e6d7daedda1)
*
* 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+2c, U+2f-34, U+38-39, U+41-44, U+d7, U+2014, U+2192-2193, U+3001-3002, U+301c, U+3048, U+304b-304c, U+3051-3054, U+3057-305a, U+305f-3060, U+3064-306b, U+306e, U+3078-3079, U+3082, U+3089-308b, U+3092, U+3099, U+30bb-30bc, U+30e1, U+30eb, U+30fc, U+4e0a, U+4eba, U+4ee5, U+4ef6, U+4fe1, U+504f, U+516c, U+5185, U+5217, U+521d, U+5229, U+5272, U+5404, U+5408, U+540c-540d, U+56de, U+5747, U+5b9f, U+5ba2, U+5c64, U+5e73, U+5f53, U+6291, U+6570, U+6642, U+66dc, U+6708, U+67a0, U+67b6, U+6848, U+6bd4, U+6cd5, U+706b, U+7406, U+7528, U+7a7a, U+7b49, U+7ba1, U+8005, U+884c, U+8a08, U+9001, U+9031, U+914d, U+9867, U+9a13;
}
@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+2c, U+2f-34, U+38-39, U+41-44, U+d7, U+2014, U+2192-2193, U+3001-3002, U+301c, U+3048, U+304b-304c, U+3051-3054, U+3057-305a, U+305f-3060, U+3064-306b, U+306e, U+3078-3079, U+3082, U+3089-308b, U+3092, U+3099, U+30bb-30bc, U+30e1, U+30eb, U+30fc, U+4e0a, U+4eba, U+4ee5, U+4ef6, U+4fe1, U+504f, U+516c, U+5185, U+5217, U+521d, U+5229, U+5272, U+5404, U+5408, U+540c-540d, U+56de, U+5747, U+5b9f, U+5ba2, U+5c64, U+5e73, U+5f53, U+6291, U+6570, U+6642, U+66dc, U+6708, U+67a0, U+67b6, U+6848, U+6bd4, U+6cd5, U+706b, U+7406, U+7528, U+7a7a, U+7b49, U+7ba1, U+8005, U+884c, U+8a08, U+9001, U+9031, U+914d, U+9867, U+9a13;
}
@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+2c, U+2f-34, U+38-39, U+41-44, U+d7, U+2014, U+2192-2193, U+3001-3002, U+301c, U+3048, U+304b-304c, U+3051-3054, U+3057-305a, U+305f-3060, U+3064-306b, U+306e, U+3078-3079, U+3082, U+3089-308b, U+3092, U+3099, U+30bb-30bc, U+30e1, U+30eb, U+30fc, U+4e0a, U+4eba, U+4ee5, U+4ef6, U+4fe1, U+504f, U+516c, U+5185, U+5217, U+521d, U+5229, U+5272, U+5404, U+5408, U+540c-540d, U+56de, U+5747, U+5b9f, U+5ba2, U+5c64, U+5e73, U+5f53, U+6291, U+6570, U+6642, U+66dc, U+6708, U+67a0, U+67b6, U+6848, U+6bd4, U+6cd5, U+706b, U+7406, U+7528, U+7a7a, U+7b49, U+7ba1, U+8005, U+884c, U+8a08, U+9001, U+9031, U+914d, U+9867, U+9a13;
}
件名テストは、配信時刻と受け手の違いが反応に影響する。件名Aを朝に新規ユーザーへ、件名Bを 夕方に常連へ送って比べても、違いが件名によるものか条件によるものか分からない。
この割付では、4つの顧客層と4つの配信枠を交差させ、16セルすべてにA〜Dを1回ずつ配置した。 各案は各層・各時刻に一度ずつ現れ、各セル200件なので、件名ごとの送信数も800件で揃う。 実運用ではセル内の対象を無作為に割り当て、配信失敗や重複を別に確認する。