Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

Daily Trial Signups — Q2 2026

Grid
Daily Trial Signups — Q2 2026
140 100

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

calendar-heatmap-quarterly-trial-signups-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.1 KB
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 100 right 140 bottom 100 left 140

## Type (px against a 1920px canvas)
title  46px / 700 / tracking 0.01em
subtitle  22px / 500
axisTitle  22px / 700
month  22px / 700
weekday  20px / 500
cellValue  20px / 700
legend  20px / 500
total  28px / 700
takeaway  28px / 500
note  20px / 400

## Colour
Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #E8EEF5 / #B8CBE0 / #6F96C1 / #1F5FA8

## Constraints — dropping these breaks it
- Each cell represents one day from April 1 to June 30, 2026; columns are weeks and rows run Monday through Sunday.
- Cell values show daily trial signups; color bins are 1–5, 6–9, 10–13, and 14 or more.
- Total is 663; the maximum is 16 on 2026-05-08.
- Synthetic daily data for illustrating seasonality, not actual results.

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/calendar-heatmap-quarterly-trial-signups/pattern.html.

Spec

1.5 KB

/ai/designs/calendar-heatmap-quarterly-trial-signups.json

format: slide-16x9
density: medium
layout:
  kind: grid
  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
  month:
    size: 22
    weight: 700
  weekday:
    size: 20
    weight: 500
  cellValue:
    size: 20
    weight: 700
  legend:
    size: 20
    weight: 500
  total:
    size: 28
    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:
    - "#E8EEF5"
    - "#B8CBE0"
    - "#6F96C1"
    - "#1F5FA8"
rules:
  - Each cell represents one day from April 1 to June 30, 2026; columns are weeks and rows run Monday through Sunday.
  - Cell values show daily trial signups; color bins are 1–5, 6–9, 10–13, and 14 or more.
  - Total is 663; the maximum is 16 on 2026-05-08.
  - Synthetic daily data for illustrating seasonality, not actual results.

Files

pattern.html

23.2 KB

/designs/calendar-heatmap-quarterly-trial-signups/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents
<!doctype html><meta charset="utf-8"><title>四半期の無料体験申込 — 5月中旬に増加</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:#E8EEF5;--series-2:#B8CBE0;--series-3:#6F96C1;--series-4:#1F5FA8;
}*{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="2026年4月から6月の毎日の無料体験申込件数を曜日行と週列の暦順に配置したcalendar heatmap。各セルに件数と濃度を表示し、5月中旬に増加。">
<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}.month{font-size:22px;font-weight:700;fill:var(--ink)}.weekday{font-size:20px;font-weight:500;fill:var(--muted)}.cell-value{font-size:20px;font-weight:700;fill:var(--ink)}.cell-value.light{fill:var(--ground)}.legend-title{font-size:22px;font-weight:700;fill:var(--ink)}.legend{font-size:20px;font-weight:500;fill:var(--muted)}.takeaway{font-size:28px;font-weight:500;fill:var(--ink)}.note{font-size:20px;font-weight:400;fill:var(--muted)}.cell{stroke:var(--ground);stroke-width:2}.l0{fill:var(--series-1)}.l1{fill:var(--series-2)}.l2{fill:var(--series-3)}.l3{fill:var(--series-4)}.month-rule{stroke:var(--rule);stroke-width:2;stroke-dasharray:5 6}</style><rect class="ground" width="1920" height="1080"/><text class="ink title" data-type="title" x="140" y="153">無料体験申込の日次リズム — 2026年第2四半期</text><text class="muted subtitle" data-type="subtitle" x="140" y="201">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="760" y="294" text-anchor="middle">日付の順序は左から右、曜日は上から下</text><text class="month" x="472" y="383" text-anchor="middle">4月</text><text class="month" x="744" y="383" text-anchor="middle">5月</text><line class="month-rule" x1="574" y1="400" x2="574" y2="865"/><text class="month" x="1084" y="383" text-anchor="middle">6月</text><line class="month-rule" x1="914" y1="400" x2="914" y2="865"/><text class="weekday" x="264" y="447" text-anchor="end" dominant-baseline="central">月</text><text class="weekday" x="264" y="507" text-anchor="end" dominant-baseline="central">火</text><text class="weekday" x="264" y="567" text-anchor="end" dominant-baseline="central">水</text><text class="weekday" x="264" y="627" text-anchor="end" dominant-baseline="central">木</text><text class="weekday" x="264" y="687" text-anchor="end" dominant-baseline="central">金</text><text class="weekday" x="264" y="747" text-anchor="end" dominant-baseline="central">土</text><text class="weekday" x="264" y="807" text-anchor="end" dominant-baseline="central">日</text><rect class="cell l3" x="310" y="545" width="52" height="44" rx="8"><title>2026-04-01: 15件</title></rect><text class="cell-value light" x="336" y="567" text-anchor="middle" dominant-baseline="central">15</text><rect class="cell l0" x="310" y="605" width="52" height="44" rx="8"><title>2026-04-02: 4件</title></rect><text class="cell-value " x="336" y="627" text-anchor="middle" dominant-baseline="central">4</text><rect class="cell l1" x="310" y="665" width="52" height="44" rx="8"><title>2026-04-03: 6件</title></rect><text class="cell-value " x="336" y="687" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l0" x="310" y="725" width="52" height="44" rx="8"><title>2026-04-04: 5件</title></rect><text class="cell-value " x="336" y="747" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="310" y="785" width="52" height="44" rx="8"><title>2026-04-05: 7件</title></rect><text class="cell-value " x="336" y="807" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l0" x="378" y="425" width="52" height="44" rx="8"><title>2026-04-06: 5件</title></rect><text class="cell-value " x="404" y="447" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="378" y="485" width="52" height="44" rx="8"><title>2026-04-07: 7件</title></rect><text class="cell-value " x="404" y="507" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l1" x="378" y="545" width="52" height="44" rx="8"><title>2026-04-08: 9件</title></rect><text class="cell-value " x="404" y="567" text-anchor="middle" dominant-baseline="central">9</text><rect class="cell l2" x="378" y="605" width="52" height="44" rx="8"><title>2026-04-09: 11件</title></rect><text class="cell-value light" x="404" y="627" text-anchor="middle" dominant-baseline="central">11</text><rect class="cell l0" x="378" y="665" width="52" height="44" rx="8"><title>2026-04-10: 4件</title></rect><text class="cell-value " x="404" y="687" text-anchor="middle" dominant-baseline="central">4</text><rect class="cell l1" x="378" y="725" width="52" height="44" rx="8"><title>2026-04-11: 6件</title></rect><text class="cell-value " x="404" y="747" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="378" y="785" width="52" height="44" rx="8"><title>2026-04-12: 8件</title></rect><text class="cell-value " x="404" y="807" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l0" x="446" y="425" width="52" height="44" rx="8"><title>2026-04-13: 3件</title></rect><text class="cell-value " x="472" y="447" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l0" x="446" y="485" width="52" height="44" rx="8"><title>2026-04-14: 5件</title></rect><text class="cell-value " x="472" y="507" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="446" y="545" width="52" height="44" rx="8"><title>2026-04-15: 7件</title></rect><text class="cell-value " x="472" y="567" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l0" x="446" y="605" width="52" height="44" rx="8"><title>2026-04-16: 3件</title></rect><text class="cell-value " x="472" y="627" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l0" x="446" y="665" width="52" height="44" rx="8"><title>2026-04-17: 5件</title></rect><text class="cell-value " x="472" y="687" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="446" y="725" width="52" height="44" rx="8"><title>2026-04-18: 8件</title></rect><text class="cell-value " x="472" y="747" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l1" x="446" y="785" width="52" height="44" rx="8"><title>2026-04-19: 6件</title></rect><text class="cell-value " x="472" y="807" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l2" x="514" y="425" width="52" height="44" rx="8"><title>2026-04-20: 10件</title></rect><text class="cell-value light" x="540" y="447" text-anchor="middle" dominant-baseline="central">10</text><rect class="cell l1" x="514" y="485" width="52" height="44" rx="8"><title>2026-04-21: 6件</title></rect><text class="cell-value " x="540" y="507" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="514" y="545" width="52" height="44" rx="8"><title>2026-04-22: 8件</title></rect><text class="cell-value " x="540" y="567" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l2" x="514" y="605" width="52" height="44" rx="8"><title>2026-04-23: 10件</title></rect><text class="cell-value light" x="540" y="627" text-anchor="middle" dominant-baseline="central">10</text><rect class="cell l0" x="514" y="665" width="52" height="44" rx="8"><title>2026-04-24: 3件</title></rect><text class="cell-value " x="540" y="687" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l0" x="514" y="725" width="52" height="44" rx="8"><title>2026-04-25: 2件</title></rect><text class="cell-value " x="540" y="747" text-anchor="middle" dominant-baseline="central">2</text><rect class="cell l1" x="514" y="785" width="52" height="44" rx="8"><title>2026-04-26: 7件</title></rect><text class="cell-value " x="540" y="807" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l2" x="582" y="425" width="52" height="44" rx="8"><title>2026-04-27: 11件</title></rect><text class="cell-value light" x="608" y="447" text-anchor="middle" dominant-baseline="central">11</text><rect class="cell l0" x="582" y="485" width="52" height="44" rx="8"><title>2026-04-28: 4件</title></rect><text class="cell-value " x="608" y="507" text-anchor="middle" dominant-baseline="central">4</text><rect class="cell l1" x="582" y="545" width="52" height="44" rx="8"><title>2026-04-29: 6件</title></rect><text class="cell-value " x="608" y="567" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="582" y="605" width="52" height="44" rx="8"><title>2026-04-30: 8件</title></rect><text class="cell-value " x="608" y="627" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l0" x="582" y="665" width="52" height="44" rx="8"><title>2026-05-01: 4件</title></rect><text class="cell-value " x="608" y="687" text-anchor="middle" dominant-baseline="central">4</text><rect class="cell l0" x="582" y="725" width="52" height="44" rx="8"><title>2026-05-02: 3件</title></rect><text class="cell-value " x="608" y="747" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l0" x="582" y="785" width="52" height="44" rx="8"><title>2026-05-03: 5件</title></rect><text class="cell-value " x="608" y="807" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="650" y="425" width="52" height="44" rx="8"><title>2026-05-04: 9件</title></rect><text class="cell-value " x="676" y="447" text-anchor="middle" dominant-baseline="central">9</text><rect class="cell l3" x="650" y="485" width="52" height="44" rx="8"><title>2026-05-05: 15件</title></rect><text class="cell-value light" x="676" y="507" text-anchor="middle" dominant-baseline="central">15</text><rect class="cell l2" x="650" y="545" width="52" height="44" rx="8"><title>2026-05-06: 12件</title></rect><text class="cell-value light" x="676" y="567" text-anchor="middle" dominant-baseline="central">12</text><rect class="cell l3" x="650" y="605" width="52" height="44" rx="8"><title>2026-05-07: 14件</title></rect><text class="cell-value light" x="676" y="627" text-anchor="middle" dominant-baseline="central">14</text><rect class="cell l3" x="650" y="665" width="52" height="44" rx="8"><title>2026-05-08: 16件</title></rect><text class="cell-value light" x="676" y="687" text-anchor="middle" dominant-baseline="central">16</text><rect class="cell l1" x="650" y="725" width="52" height="44" rx="8"><title>2026-05-09: 6件</title></rect><text class="cell-value " x="676" y="747" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="650" y="785" width="52" height="44" rx="8"><title>2026-05-10: 8件</title></rect><text class="cell-value " x="676" y="807" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l3" x="718" y="425" width="52" height="44" rx="8"><title>2026-05-11: 15件</title></rect><text class="cell-value light" x="744" y="447" text-anchor="middle" dominant-baseline="central">15</text><rect class="cell l1" x="718" y="485" width="52" height="44" rx="8"><title>2026-05-12: 8件</title></rect><text class="cell-value " x="744" y="507" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l2" x="718" y="545" width="52" height="44" rx="8"><title>2026-05-13: 10件</title></rect><text class="cell-value light" x="744" y="567" text-anchor="middle" dominant-baseline="central">10</text><rect class="cell l2" x="718" y="605" width="52" height="44" rx="8"><title>2026-05-14: 12件</title></rect><text class="cell-value light" x="744" y="627" text-anchor="middle" dominant-baseline="central">12</text><rect class="cell l3" x="718" y="665" width="52" height="44" rx="8"><title>2026-05-15: 14件</title></rect><text class="cell-value light" x="744" y="687" text-anchor="middle" dominant-baseline="central">14</text><rect class="cell l1" x="718" y="725" width="52" height="44" rx="8"><title>2026-05-16: 7件</title></rect><text class="cell-value " x="744" y="747" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l1" x="718" y="785" width="52" height="44" rx="8"><title>2026-05-17: 9件</title></rect><text class="cell-value " x="744" y="807" text-anchor="middle" dominant-baseline="central">9</text><rect class="cell l2" x="786" y="425" width="52" height="44" rx="8"><title>2026-05-18: 13件</title></rect><text class="cell-value light" x="812" y="447" text-anchor="middle" dominant-baseline="central">13</text><rect class="cell l3" x="786" y="485" width="52" height="44" rx="8"><title>2026-05-19: 15件</title></rect><text class="cell-value light" x="812" y="507" text-anchor="middle" dominant-baseline="central">15</text><rect class="cell l0" x="786" y="545" width="52" height="44" rx="8"><title>2026-05-20: 3件</title></rect><text class="cell-value " x="812" y="567" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l1" x="786" y="605" width="52" height="44" rx="8"><title>2026-05-21: 8件</title></rect><text class="cell-value " x="812" y="627" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l3" x="786" y="665" width="52" height="44" rx="8"><title>2026-05-22: 14件</title></rect><text class="cell-value light" x="812" y="687" text-anchor="middle" dominant-baseline="central">14</text><rect class="cell l0" x="786" y="725" width="52" height="44" rx="8"><title>2026-05-23: 1件</title></rect><text class="cell-value " x="812" y="747" text-anchor="middle" dominant-baseline="central">1</text><rect class="cell l0" x="786" y="785" width="52" height="44" rx="8"><title>2026-05-24: 2件</title></rect><text class="cell-value " x="812" y="807" text-anchor="middle" dominant-baseline="central">2</text><rect class="cell l1" x="854" y="425" width="52" height="44" rx="8"><title>2026-05-25: 6件</title></rect><text class="cell-value " x="880" y="447" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l2" x="854" y="485" width="52" height="44" rx="8"><title>2026-05-26: 11件</title></rect><text class="cell-value light" x="880" y="507" text-anchor="middle" dominant-baseline="central">11</text><rect class="cell l0" x="854" y="545" width="52" height="44" rx="8"><title>2026-05-27: 4件</title></rect><text class="cell-value " x="880" y="567" text-anchor="middle" dominant-baseline="central">4</text><rect class="cell l1" x="854" y="605" width="52" height="44" rx="8"><title>2026-05-28: 6件</title></rect><text class="cell-value " x="880" y="627" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="854" y="665" width="52" height="44" rx="8"><title>2026-05-29: 8件</title></rect><text class="cell-value " x="880" y="687" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l1" x="854" y="725" width="52" height="44" rx="8"><title>2026-05-30: 7件</title></rect><text class="cell-value " x="880" y="747" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l0" x="854" y="785" width="52" height="44" rx="8"><title>2026-05-31: 3件</title></rect><text class="cell-value " x="880" y="807" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l1" x="922" y="425" width="52" height="44" rx="8"><title>2026-06-01: 7件</title></rect><text class="cell-value " x="948" y="447" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l1" x="922" y="485" width="52" height="44" rx="8"><title>2026-06-02: 9件</title></rect><text class="cell-value " x="948" y="507" text-anchor="middle" dominant-baseline="central">9</text><rect class="cell l2" x="922" y="545" width="52" height="44" rx="8"><title>2026-06-03: 11件</title></rect><text class="cell-value light" x="948" y="567" text-anchor="middle" dominant-baseline="central">11</text><rect class="cell l0" x="922" y="605" width="52" height="44" rx="8"><title>2026-06-04: 4件</title></rect><text class="cell-value " x="948" y="627" text-anchor="middle" dominant-baseline="central">4</text><rect class="cell l1" x="922" y="665" width="52" height="44" rx="8"><title>2026-06-05: 9件</title></rect><text class="cell-value " x="948" y="687" text-anchor="middle" dominant-baseline="central">9</text><rect class="cell l1" x="922" y="725" width="52" height="44" rx="8"><title>2026-06-06: 8件</title></rect><text class="cell-value " x="948" y="747" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l0" x="922" y="785" width="52" height="44" rx="8"><title>2026-06-07: 1件</title></rect><text class="cell-value " x="948" y="807" text-anchor="middle" dominant-baseline="central">1</text><rect class="cell l1" x="990" y="425" width="52" height="44" rx="8"><title>2026-06-08: 9件</title></rect><text class="cell-value " x="1016" y="447" text-anchor="middle" dominant-baseline="central">9</text><rect class="cell l1" x="990" y="485" width="52" height="44" rx="8"><title>2026-06-09: 7件</title></rect><text class="cell-value " x="1016" y="507" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l0" x="990" y="545" width="52" height="44" rx="8"><title>2026-06-10: 3件</title></rect><text class="cell-value " x="1016" y="567" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l0" x="990" y="605" width="52" height="44" rx="8"><title>2026-06-11: 5件</title></rect><text class="cell-value " x="1016" y="627" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="990" y="665" width="52" height="44" rx="8"><title>2026-06-12: 7件</title></rect><text class="cell-value " x="1016" y="687" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l1" x="990" y="725" width="52" height="44" rx="8"><title>2026-06-13: 6件</title></rect><text class="cell-value " x="1016" y="747" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="990" y="785" width="52" height="44" rx="8"><title>2026-06-14: 8件</title></rect><text class="cell-value " x="1016" y="807" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l1" x="1058" y="425" width="52" height="44" rx="8"><title>2026-06-15: 6件</title></rect><text class="cell-value " x="1084" y="447" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="1058" y="485" width="52" height="44" rx="8"><title>2026-06-16: 8件</title></rect><text class="cell-value " x="1084" y="507" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l2" x="1058" y="545" width="52" height="44" rx="8"><title>2026-06-17: 10件</title></rect><text class="cell-value light" x="1084" y="567" text-anchor="middle" dominant-baseline="central">10</text><rect class="cell l0" x="1058" y="605" width="52" height="44" rx="8"><title>2026-06-18: 3件</title></rect><text class="cell-value " x="1084" y="627" text-anchor="middle" dominant-baseline="central">3</text><rect class="cell l0" x="1058" y="665" width="52" height="44" rx="8"><title>2026-06-19: 5件</title></rect><text class="cell-value " x="1084" y="687" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="1058" y="725" width="52" height="44" rx="8"><title>2026-06-20: 7件</title></rect><text class="cell-value " x="1084" y="747" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l0" x="1058" y="785" width="52" height="44" rx="8"><title>2026-06-21: 1件</title></rect><text class="cell-value " x="1084" y="807" text-anchor="middle" dominant-baseline="central">1</text><rect class="cell l0" x="1126" y="425" width="52" height="44" rx="8"><title>2026-06-22: 4件</title></rect><text class="cell-value " x="1152" y="447" text-anchor="middle" dominant-baseline="central">4</text><rect class="cell l1" x="1126" y="485" width="52" height="44" rx="8"><title>2026-06-23: 6件</title></rect><text class="cell-value " x="1152" y="507" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l1" x="1126" y="545" width="52" height="44" rx="8"><title>2026-06-24: 8件</title></rect><text class="cell-value " x="1152" y="567" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l1" x="1126" y="605" width="52" height="44" rx="8"><title>2026-06-25: 8件</title></rect><text class="cell-value " x="1152" y="627" text-anchor="middle" dominant-baseline="central">8</text><rect class="cell l1" x="1126" y="665" width="52" height="44" rx="8"><title>2026-06-26: 6件</title></rect><text class="cell-value " x="1152" y="687" text-anchor="middle" dominant-baseline="central">6</text><rect class="cell l0" x="1126" y="725" width="52" height="44" rx="8"><title>2026-06-27: 5件</title></rect><text class="cell-value " x="1152" y="747" text-anchor="middle" dominant-baseline="central">5</text><rect class="cell l1" x="1126" y="785" width="52" height="44" rx="8"><title>2026-06-28: 7件</title></rect><text class="cell-value " x="1152" y="807" text-anchor="middle" dominant-baseline="central">7</text><rect class="cell l2" x="1194" y="425" width="52" height="44" rx="8"><title>2026-06-29: 11件</title></rect><text class="cell-value light" x="1220" y="447" text-anchor="middle" dominant-baseline="central">11</text><rect class="cell l1" x="1194" y="485" width="52" height="44" rx="8"><title>2026-06-30: 7件</title></rect><text class="cell-value " x="1220" y="507" text-anchor="middle" dominant-baseline="central">7</text><line class="rule" x1="1330" y1="405" x2="1330" y2="730" stroke-width="1.5"/><text class="legend-title" x="1370" y="440">申込件数 / 日</text><rect x="1370" y="474" width="36" height="28" rx="5" fill="var(--series-1)"/><text class="legend" x="1420" y="495">1–5</text><rect x="1370" y="520" width="36" height="28" rx="5" fill="var(--series-2)"/><text class="legend" x="1420" y="541">6–9</text><rect x="1370" y="566" width="36" height="28" rx="5" fill="var(--series-3)"/><text class="legend" x="1420" y="587">10–13</text><rect x="1370" y="612" width="36" height="28" rx="5" fill="var(--accent)"/><text class="legend" x="1420" y="633">14以上</text><text class="muted" x="1370" y="685" font-size="20">四半期合計</text><text class="ink" data-type="total" x="1370" y="724" font-size="28" font-weight="700">663件</text><text class="ink takeaway" data-type="takeaway" x="960" y="927" text-anchor="middle">5月中旬は申込が多く、火曜〜木曜に集中する</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>

font.css

3.0 KB

/designs/calendar-heatmap-quarterly-trial-signups/font.css — Not in Everything

Show contents
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   97 (1ac6d9410e92585b)
 *
 * 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+2d, U+2f-3a, U+2013-2014, U+3001-3002, U+301c, U+304b-304c, U+304f-3050, U+3053-3054, U+3059-305a, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+307e, U+3089, U+308b, U+3092, U+3099-309a, U+30b9-30bc, U+30bf-30c0, U+30c6-30c7, U+30cf-30d1, U+30e0, U+30ea-30eb, U+30f3, U+30fc, U+4e0a-4e0b, U+4e2d, U+4ed8, U+4ee5, U+4ef6, U+4f4d, U+4f53, U+52a0, U+534a, U+53f3, U+5404, U+5408, U+56db, U+571f, U+5883, U+5897, U+591a, U+5b57, U+5de6, U+5e74, U+5e8f, U+5ea6, U+6570, U+6599, U+65e5, U+65ec, U+66dc, U+6708, U+671f, U+6728, U+67b6, U+6b21, U+6c34, U+6fc3, U+706b, U+7121, U+7533, U+754c, U+7834, U+793a, U+7a7a, U+7b2c, U+7dda, U+7f6e, U+8a08, U+8fbc, U+9031, U+91cf, U+91d1, U+96c6, U+9806, 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+2d, U+2f-3a, U+2013-2014, U+3001-3002, U+301c, U+304b-304c, U+304f-3050, U+3053-3054, U+3059-305a, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+307e, U+3089, U+308b, U+3092, U+3099-309a, U+30b9-30bc, U+30bf-30c0, U+30c6-30c7, U+30cf-30d1, U+30e0, U+30ea-30eb, U+30f3, U+30fc, U+4e0a-4e0b, U+4e2d, U+4ed8, U+4ee5, U+4ef6, U+4f4d, U+4f53, U+52a0, U+534a, U+53f3, U+5404, U+5408, U+56db, U+571f, U+5883, U+5897, U+591a, U+5b57, U+5de6, U+5e74, U+5e8f, U+5ea6, U+6570, U+6599, U+65e5, U+65ec, U+66dc, U+6708, U+671f, U+6728, U+67b6, U+6b21, U+6c34, U+6fc3, U+706b, U+7121, U+7533, U+754c, U+7834, U+793a, U+7a7a, U+7b2c, U+7dda, U+7f6e, U+8a08, U+8fbc, U+9031, U+91cf, U+91d1, U+96c6, U+9806, 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+2d, U+2f-3a, U+2013-2014, U+3001-3002, U+301c, U+304b-304c, U+304f-3050, U+3053-3054, U+3059-305a, U+305f-3060, U+3066-3069, U+306b, U+306e-3071, U+307e, U+3089, U+308b, U+3092, U+3099-309a, U+30b9-30bc, U+30bf-30c0, U+30c6-30c7, U+30cf-30d1, U+30e0, U+30ea-30eb, U+30f3, U+30fc, U+4e0a-4e0b, U+4e2d, U+4ed8, U+4ee5, U+4ef6, U+4f4d, U+4f53, U+52a0, U+534a, U+53f3, U+5404, U+5408, U+56db, U+571f, U+5883, U+5897, U+591a, U+5b57, U+5de6, U+5e74, U+5e8f, U+5ea6, U+6570, U+6599, U+65e5, U+65ec, U+66dc, U+6708, U+671f, U+6728, U+67b6, U+6b21, U+6c34, U+6fc3, U+706b, U+7121, U+7533, U+754c, U+7834, U+793a, U+7a7a, U+7b2c, U+7dda, U+7f6e, U+8a08, U+8fbc, U+9031, U+91cf, U+91d1, U+96c6, U+9806, U+9a13;
}

Notes

視覚的な問い

無料体験申込が増える曜日や時期に、繰り返し現れるパターンはあるか。

構造

曜日を7行、四半期の週を左から右へ並べ、各日を1セルで表す。セル中の数値で厳密な件数を読め、明度と彩度の段階で日ごとの集中を把握する。月境界は週の途中に現れ、暦上の連続性を保ったまま月を分ける。カテゴリ比較の行列と異なり、各行列位置が日付・曜日に固定された時間格子である。

2026年第2四半期の架空申込データでは、663件のうち5月中旬に日次ピークが現れる。曜日行を上下に追うと、平日の高低が週単位でどう反復するかが見える。データは説明用の合成値で、実績ではない。