KPIスコアカードブロック

メールが報告する対象の指標を、1つの大きな見出し数値で示すブロックです — 売上、登録数、NPSなど、受信者に最初に見せたい指標なら何でも構いません。多くのダイジェストメールやダッシュボードメールが冒頭に置くブロックで、通常はチャートの上に3つ並べて使われます。

仕組み

スコアカードは、ラベル・大きな値・任意のトレンド指標・任意のスパークラインという、上から下への視覚的な並び順で構成されます。値とラベルは常に本物のHTMLテキストとしてレンダリングされ、設定したフォントサイズと色がそのまま使われます — 見出し数値を読み取れるかどうかは、画像の読み込みに一切依存しません。レンダリングされたPNG画像なのはスパークラインだけで、それも、それがなくても既に読み取れる数値の上に添える装飾にすぎません。

トレンド指標(「Δ」)は、前回値とトレンドの方向の両方が設定されている場合にのみ表示されます。このブロックはこの2つを、互いに独立した2つの任意フィールドとしてではなく、1つのまとまった入力単位として扱うため、どちら向きが良いニュースかを示す矢印なしにΔのパーセンテージだけが表示されるという、あいまいな状態は発生しません。パーセンテージ自体は常にvalueとpreviousValueから計算されますが、方向(上昇・下降・変化なし)は数値が実際に上がったかどうかから推測されるのではなく、自分で設定します。

これが重要なのは、「数値が上がった」ことが常に良いニュースとは限らないからです。サポートチケット数やチャーン率の上昇は悪いニュースであり、それらを報告するスコアカードは、生の数値が増加していても、下降色の矢印でそれを伝える必要があります。矢印の色は、選んだ方向(上昇なら緑、下降なら赤、変化なしならアンバー)に従い、固定パレットではなくプロジェクト自身のステータスカラーが使われます。

スパークラインは、スパークラインの値フィールドに入力した数値(または紐付けモードの場合は、紐付けたフィールドの行ごとの値、最大60点)をプロットした小さなトレンドライン画像です。線を引くための点が2つ以上ある場合にのみ描画されます。線の色はΔの色があればそれに従うため、下降していて深刻に見えるトレンドは一目で赤だと分かります。Δが設定されていない場合は、プロジェクトのブランドカラーにフォールバックします。

設定可能なフィールド:

• ラベル — 指標の名前。専用の色とフォントサイズを持ちます。
• 値 — 見出しとなる数値。リテラルな文字列として扱われるため、マージタグを入れることもできます。
• 形式 — 数値・金額(USD、小数点なし)・パーセントのいずれか — valueとpreviousValueの表示時の書式のみを制御し、保存方法には影響しません。
• 前回値 — Δの比較対象となる値です。Δを表示するには、トレンドの方向とあわせて設定が必要です。
• トレンドの方向 — なし・上昇・下降・変化なしのいずれか。矢印の記号と色の両方を決定します。
• スパークラインの値 — 左から右にプロットされる、手入力の数値リストです。
• カードの背景色、パディング、境界線、角の丸み。
• 値のテキストとラベルのテキストには、それぞれ独立した色・フォントサイズの組み合わせがあります。

手入力の値だけでなく、KPIスコアカードは、連携したデータソースや過去のキャンペーン自身の回答結果に値を紐付けることもできます。データソースへの紐付けでは、値フィールドと集計方法(合計・平均・件数・最新行のいずれか)を組み合わせ、紐付けられたすべての行を1つの見出し数値に集約します。紐付けが置き換えるのはvalueとスパークラインの元データのみです — previousValueとtrendDirectionは常に手入力のままとなります。紐付けた「前回」の数値には、このスキーマが保持していない過去のスナップショットが必要になるためです。両方のモードの仕組みの詳細については、チャートを実データに紐付けるを参照してください。

例

このブロックを実際の文脈で見る最も早い方法は、ダッシュボードの用途でプロジェクトを開始することです。「Weekly performance」という見出しと、カラムに並んだ3つのKPIスコアカードが用意されます: 上昇のΔを伴う金額形式の売上、上昇のΔを伴う通常の数値形式の新規登録数、変化なしのΔを伴うパーセント形式のコンバージョン率です。続いて棒グラフが配置されます(ダッシュボードグリッドプリセット)。これはもっともらしい例の数値を持つ出発点であり、自分で連携するまでは何にも紐付けられていません。

週次の運用ダイジェストは、3つのスコアカード(未解決チケット数、平均応答時間、CSAT)を先頭に置き、それぞれに前週比のΔを付けることで、読者がチャートまでスクロールする前に見出しの数字を見せることができます。キャンペーン後のレポートでは、そのキャンペーンの商品ブロックの注文にデータソースの集計で紐付けた、「合計収益」を示す1つの大きなスコアカードを使い、送信当日までの日次の積み上がりを示すスパークラインを添えることもできます。サブスクリプション事業の月次レポートでは、MRR・解約アカウント数・新規純増アカウント数を並べてスコアカード化するかもしれません: 3枚のカード、3つの異なるΔの方向、それぞれが方向を手入力しているため(変化の符号から推測しているわけではないため)正しく色付けされます。

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

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    $24,800
    <span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
       alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
       style="display:block;max-width:100%;height:auto;margin:4px 0" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>

値・ラベル・Δは、スパークラインの<img>が表示される前から、すべて本物のテキストです。その下にある小さなグレーの行が、同じ3つの情報をプレーンテキストとして繰り返しているため、画像がオフでもカードは完全に読み取れます。

関連ページ

• 分析とチャートのブロック
• チャートを実データに紐付ける
• 棒グラフブロック