分析とチャートのブロック
このページは、13種類すべてのチャート・KPIブロックの概要です。各ブロックには、フィールドの全一覧と実例を掲載した専用ページもあり、それぞれのセクションの末尾にリンクしています。
メール本文の中でデータストーリーを伝えるための、13種類のチャート・KPIブロックです — 週次ダイジェスト、売上のまとめ、受信者がクリックして開かなくても読める形のレポートなど。これらは挿入パレットの他のブロックと同じコンテンツセクションにあり、別途「分析」というカテゴリーはありません。
このブロック群のすべてのチャートに共通する点がいくつかあるため、以下で13回繰り返す代わりに、ここで一度だけ述べておきます:
- すべてのチャートは、サーバー側で生成された1枚の画像としてレンダリングされます — クライアント側のチャートライブラリもJavaScriptも使いません — その画像のすぐ横に、目に見えるデータ表が置かれます。 この表は注釈でもアクセシビリティ対応の後付けでもありません。画像と同じ数値を、そのままのHTMLで示しており、テキストのみのメールクライアント、画像がブロックされた受信ボックス、スクリーンリーダーでも、チャートを実際に使えるものにしているのはこの表です。省略されることはありません。
- チャートの数値は、送信または書き出しの時点で確定します — カウントダウンタイマーの締切や商品ブロックの在庫バッジと同じ「送信時点で正確」という考え方であり、リアルタイムに更新されるウィジェットではありません。（唯一の例外は、キャンペーン自身の回答結果に紐付けたチャートで、これはレンダリング時にライブで読み込まれます — 詳しくはチャートを実データに紐付けるを参照してください。）
- 2軸チャートは決して使いません。 スケールの異なる2つの指標は、2本のY軸を持つふりをした1つのチャートではなく、並べて配置した2つのチャートブロックで表現します。
KPIスコアカード
見出しとなる指標を1つの大きな数値で示します — 売上、登録数など、そのメールが報告する対象なら何でも構いません。
- フィールド: ラベル、形式付きの値(通常の数値・金額・パーセントのいずれか)、Δを表示するための任意の前回値、任意のスパークラインです。
- Δの方向(上昇・下降・変化なし)は、数値が実際に上がったかどうかから自動的に推測されるのではなく、自分で設定します。何を「良いニュース」とみなすかは常に自分でコントロールできます。
- スパークラインは小さなトレンド画像です。その下にあるラベル・値・Δは常に本物のHTMLテキストで、画像が表示されるかどうかに依存しません。
棒グラフ
縦または横の棒グラフで、手入力の系列を最大3つまで指定できます。
- カテゴリーが8個程度を超えると、チャートは各バーへの直接の数値ラベルをやめ、目盛り線付きの共有軸に切り替えます — 十数本のラベル付きバーから正確な数値を読み取るのは、それより前から読みにくくなるため、正確な数値の出典としてはデータ表が引き継ぎます。
折れ線・エリアグラフ
棒グラフと同じ、行ごとに入力する形式です — カテゴリーを行方向に並べ、系列を横方向に最大3つまで — さらにエリアグラフのバリエーション用にfilledトグルがあります。
- 各データ値のポイントマーカーは、20点程度を超えると徐々に間引かれ、線が点で埋め尽くされないようにします。それを超えても、線そのもの・共有軸・データ表がトレンドを示し続けます。
円グラフ・ドーナツグラフ
カテゴリーごとに1つの値を、円(ドーナツモードではリング)として描画します。ドーナツモードでは、中央にKPI風の数値を示す任意のラベルを置けます。
- スライスが8個を超えると、チャートが読み取れないほど細くなる代わりに、最小のスライスがまとめて1つの「その他」に統合されます — 凡例とデータ表のどちらも、同じ統合結果を示します。
散布図・バブルチャート
X/Yの点で構成され、任意のseries列でポイントを複数の色にグループ化したり、任意のsize列でバブルチャートにしたりできます。
- 系列の識別は、Series列に入力した内容によって決まります — 空欄のままにすると、すべての点がブロック自体のタイトルを1つの系列として共有します。
ヒストグラム
生の数値が入った列を、範囲ごとに自動でビン(区間)分けします — 事前に集計したバケットではなく、個々の数値をそのまま渡せば、区間分けはブロックが行います。
- 目標とするビンの数はおおまかに指定できます。入力したすべての値が同じ場合は、19個の空のビンを描く代わりに、1つのビンにまとまります。
ヒートマップ
行×列のグリッドに値を並べ、明るい色から暗い色へ連続的に変化するカラースケールで色付けします。
- セルに正確な値をテキストで表示するのは、グリッドが一目で読み取れるくらい小さいうちだけです — それを超えると、小さなセルに文字を詰め込む代わりに、カラースケール自体(と常に表示されるデータ表)が数値を伝えます。行と列の組み合わせが実際に存在しない場合(その行/列のペアに対応する行がまったくない場合)は、ゼロのように見せるのではなく、はっきりと区別できる「データなし」のグレーで表示されます。
ファネル
順序を持つ各ステージの値です — 訪問 → 登録 → 購入、といった一連の流れを想定しており、それぞれが最初のステージに対する割合として表示されます。
- ファネルの意味は、入力したステージの順序に完全に依存するため、円グラフやツリーマップのように、あふれたステージを「その他」にまとめることはできません — 上限を超えたステージは単純に描画されません。データ表には「最初のステージに対する割合」と「前のステージに対する割合」(段階ごとの減少率)の両方が加えられており、これは画像だけでは示せない情報です。
ウォーターフォールチャート
累計を示すチャートです — 開始値のあとに増加・減少を表す一連のバーが続き、途中または最後に、入力した「合計」バーへ着地させることもできます。
- 増加・減少・合計のバーは常に同じ3色の予約カラーを使うため、前回どんな色を選んだかに関わらず、どのメールでもウォーターフォールチャートを一貫して読み取れます。ファネルと同様、累計の計算は入力順序に依存するため、あふれたバーはまとめられるのではなく除外されます。
ゲージチャート
自分で定義した良好・警告・重大のしきい値帯に対して、単一の指標を示します — 行データ形式のチャートではなく、針のついたダイヤル形式です。
- このブロック群の中で、下にデータ表を持たない唯一のブロックです。理由はKPIスコアカードと同じで、値とそのステータスは、画像に閉じ込められた数値ではなく、画像の横にある本物のHTMLテキストとしてすでに示されているためです。
レーダーチャート
複数の軸を使った比較チャートです — 最大3つの系列を共有の軸上にプロットし、複数の観点でカテゴリーを同時に比較する際に便利です(例: 価格・品質・スピード・サポートで評価した製品)。
- ポリゴンとして描画するには、少なくとも3本の軸が必要です — それより少ない場合は、空のチャートと同じ「データを追加してください」というプレースホルダーが表示されます。このブロック群の他のチャートと異なり、これには下限と上限の両方があります(上限は8軸)。
ツリーマップ
値に応じた大きさのタイルを、円グラフの角度ではなく、矩形を埋めるように配置します(「squarified」と呼ばれるレイアウト方式)。カテゴリーごとに1つの値を入力する形式は円グラフと同じで、全体に対する割合を比較するための、単に形状が異なる表現です。
- 円グラフと同じデータ準備の仕組みを共有しているため、8個を超えると統合される、というルールも円グラフと同じです。
サンキー図
名前付きのノード間の比率的な流れを表します — From(起点)・To(終点)・Value(値)の行で構成し、例えば「トラフィックの流入元 → ランディングページ → コンバージョン」のような流れです。
- ノードは直接入力するものではなく、From/To列に繰り返し登場するラベルから自動的に導き出されます。左から右への位置も、流れの方向から自動的に決まります。
- ノードまたはリンクの上限を超えると、あふれたノードは統合されるのではなく除外されます — 円グラフの「その他」とは異なり、2つの別々の流れの終点を1つに統合すると、図が示す内容自体を誤って伝えることになるためです。データ表には、実際に描画された図に含まれたかどうかに関わらず、入力したすべての行が引き続き一覧表示されるため、入力した内容が黙って表示から消えることはありません。
実データへの紐付け
KPIスコアカード、棒グラフ、折れ線グラフ、円グラフの4種類 — この4つに限り — は、手入力する数値の代わりに、連携したデータソースや過去のキャンペーン自身の回答結果に紐付けることができます。ワンクリックでKPI行と棒グラフをまとめて用意する、ダッシュボードプロジェクトのスタート方法もあります。方法についてはチャートを実データに紐付けるを参照してください。