ヒートマップブロック

行×列のグリッドに値を並べ、明るい色から暗い色へ連続的に変化するカラースケールで色付けするブロックです — 曜日×時間帯のように、2つの軸を同時に見て活動がどこに集中しているかを見つけるためのものです。

仕組み

このチャートは、サーバー側で生成された1枚のPNG画像としてレンダリングされます(クライアント側のチャートライブラリもJavaScriptも使いません)。その下には常に表示されるHTMLデータ表が置かれます — このブロック群のすべてのチャートが守っている、譲れない組み合わせです。ヒートマップには、他のチャートのような系列や「全体に対する割合」という形はありません: 大きさは、1本の連続的なカラースケール上の色の濃淡だけで表され、2つ目の識別用の色が使われることは一切ありません。表の上にある「凡例」はグラデーションバーです(スウォッチの並びではなく、本物のCSSで描かれます)。片端に0、もう片端にグリッドの実際の最大値がラベル付けされ、どの濃淡がどの大きさに対応するかを示します。

行は「ロング形式」で入力します: 手入力した行1つにつき、1つの行・1つの列・1つの値を指定します — グリッド全体の1行や1列ではなく、グリッドの1つのセルに対応します。プロジェクトのデータは配列を入れ子にできないため、この形式が自然な選択になっています。レンダリング時に、ブロックは手入力されたすべてのセルを行×列の行列にまとめます。行と列それぞれのラベルは、最初に入力された順序のまま保持され、並べ替えられることはありません — 曜日を並べたヒートマップで月曜日が先頭に来るのは、最初にそう入力したからであり、アルファベット順や時系列順に推測されているわけではありません。

本当に存在しない組み合わせ(行と列のペアに対して、値を一度も入力していない場合)は、画像の中で単色のグレーの「データなし」セルとして表示されます。このような欠落が1つでもある場合、凡例には「データなし」のスウォッチが表示されます。これは、ゼロの表示方法とは意図的に区別されています。

ゼロは、カラースケール上で実際に測定された値です — 低い側の端ではありますが、それでも計測済みの値です。一方、欠落はそのセルについて誰も何も記録していないことを意味します。この2つを混同すると、「ここにはデータがない」ということが「ここでの活動はまさにゼロだ」という、実質的に異なる主張と同じに見えてしまいます。データ表には、実際に値を入力したセルだけが一覧表示されます。本当の欠落については、表示すべき値がないため、表に行が追加されることもありません。

セルに正確な値をグリッド画像内のテキストとして直接表示するのは、グリッドが小さいうち(合計セル数、つまり行×列が40以下)だけです。それを超えると、画像自体の中では大きさをカラースケールの濃淡だけで伝えるようになり、正確な数値を読み取る場所は常に表示されているデータ表に移ります。どんどん小さくなるセルに読める文字を詰め込む方法は、グリッドが大きくなるはるか手前で通用しなくなります。グリッドの上限は、行が12個・列が24個までです。この上限を超えて新しい行や列の識別子が追加された場合、既存のものに統合されるのではなく、除外されます。まったく異なる2つの行や列を1つに統合すると、それぞれが計測していた内容を誤って伝えてしまうためです。

カラースケールは、デフォルトではプロジェクトのブランドカラーから導き出された色相が使われます。カラースケール色を設定すると、自分で指定した色で上書きできます。

このブロックは手入力の行のみに対応しており、データソースへの紐付けやキャンペーンの回答結果への紐付けモードはありません。紐付けに対応する4種類のチャートタイプについては、チャートを実データに紐付けるを参照してください。

設定可能なフィールド:

• チャートタイトル — 画像の上に表示されます。
• セル(行、列、値) — 行のリストです。手入力した行1つにつき、グリッドの1つのセルに対応します。
• カラースケール色 — デフォルトのブランドカラー由来の色相を上書きします。
• カードの背景色、パディング、境界線、角の丸み。
• タイトルと、凡例・データ表のテキストには、それぞれ独立した色とフォントサイズの組み合わせがあります。

例

イベントのダイジェストメールでは、RSVP(出欠回答)の活動を曜日×時間帯でヒートマップ化できます(典型的な7×24の形で、行・列の上限にも余裕をもって収まります)。これにより、主催者は招待状が実際にいつ開封され、行動につながっているかを把握できます。サポート運用のレポートでは、チケット件数を曜日×カテゴリーでグリッド化することで、何十本もの棒グラフに分けなくても、どのカテゴリーがどの曜日に急増しているかが一目で分かります。スポーツチームのシーズンレポートでは、出席状況をスカッド(編成チーム)×月でヒートマップ化できます。「データなし」という本当の欠落 — たとえば、初期の月にはまだ存在していなかったスカッド — は、はっきりとグレーで表示され、チームの実際の出席状況を誤って伝えてしまう「出席者ゼロの月」のようには見えません。

静的フォールバックの見え方

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Activity by day and time</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Heatmap: 3 rows × 4 columns, values from 0 to 15"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px">
    <span style="font-size:12px;color:#6b7280">0</span>
    <span aria-hidden="true" style="display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(to right,#eef2ff,#3730a3)"></span>
    <span style="font-size:12px;color:#6b7280">15</span>
  </div>
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Row</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Column</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Tue</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Afternoon</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">15</td>
    </tr>
  </table>
</div>

グラデーションの凡例には、カラースケールの0と最大値の両端がラベル付けされています。表には、実際にデータがあるセルについてのみ、行・列・値が一覧表示されます — 本当の欠落には、この表にも行が追加されることはありません。

関連ページ

• 分析とチャートのブロック
• 棒グラフブロック
• 散布図・バブルチャートブロック