Compare Subject Lines Fairly — Balance Audience Groups and Send Times

120 82

1920 × 1080 Seen as a design

About this one

Assign subject lines A–D once across every combination of four audience groups and four send windows. Each line appears once in every row and column, preventing audience or timing bias from favoring one variant.

Reach for it when

Comparison Testing / Quality

Source

Saved: 2026.09.25
License: Original

Tags

Data Visualization Minimal

Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 82 right 120 bottom 82 left 120 ## Type (px against a 1920px canvas) title 44px / 700 / tracking 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 / tabular numerals totalLabel 20px / 500 conclusion 25px / 500 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #2F6FB5 / #A85A2E / #1C8C79 / #4E7A3A ## Constraints — dropping these breaks it - Put audience groups in rows and send windows in columns. Assign A–D once in every row and column; otherwise subject-line effects are confounded with the group or time. - Keep the send count equal in every cell so each subject line receives the same audience size before comparing response rates. - Keep the A–D labels alongside the colours; colour alone must not identify a variant. - This illustrates assignment only; it does not guarantee random sampling, deduplication, or successful delivery. Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/latin-square-subject-rotation/pattern.html.

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: - Put audience groups in rows and send windows in columns. Assign A–D once in every row and column; otherwise subject-line effects are confounded with the group or time. - Keep the send count equal in every cell so each subject line receives the same audience size before comparing response rates. - Keep the A–D labels alongside the colours; colour alone must not identify a variant. - This illustrates assignment only; it does not guarantee random sampling, deduplication, or successful delivery.

{ "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": [ "Put audience groups in rows and send windows in columns. Assign A–D once in every row and column; otherwise subject-line effects are confounded with the group or time.", "Keep the send count equal in every cell so each subject line receives the same audience size before comparing response rates.", "Keep the A–D labels alongside the colours; colour alone must not identify a variant.", "This illustrates assignment only; it does not guarantee random sampling, deduplication, or successful delivery." ] }

<!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>

/* 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; }

Notes

件名テストは、配信時刻と受け手の違いが反応に影響する。件名Aを朝に新規ユーザーへ、件名Bを夕方に常連へ送って比べても、違いが件名によるものか条件によるものか分からない。

この割付では、4つの顧客層と4つの配信枠を交差させ、16セルすべてにA〜Dを1回ずつ配置した。各案は各層・各時刻に一度ずつ現れ、各セル200件なので、件名ごとの送信数も800件で揃う。実運用ではセル内の対象を無作為に割り当て、配信失敗や重複を別に確認する。

Compare Subject Lines Fairly — Balance Audience Groups and Send Times

Take it with you

Everything

Prompt

Spec

Files

pattern.html

font.css

Notes