mailinapp
Documentation menu

サンキー図ブロック

名前付きのノード間の、比率的な流れの帯です — From(起点)・To(終点)・Value(値)の行で構成され、たとえばトラフィックの流入元 → ランディングページ → コンバージョンのような流れです。単純なファネルの1本の線形の並びだけでは分岐する経路を示せない場合に、ボリュームが一連のステージを通ってどこへ流れていくかを追跡するための形です。

仕組み

このブロック群の他のすべてのチャートと異なり、サンキー図のノードは直接入力するものではありません — 入力すべき「ノード」の列自体が存在しません。代わりに、ノードはFrom列とTo列に繰り返し登場するラベルから導き出されます: あるステージのFromの値として「Visited」と入力し、別の行のToの値としても「Visited」と入力すると、両方とも同じノードとして扱われます。各ノードの左から右への位置(どの縦方向のレイヤーに置かれるか)も、入力した行が表す有向グラフに対する最長パスの計算によって算出されます。流入のないノードは最も左のレイヤーから始まり、それ以外のすべてのノードは、最も上流にある先行ノードより1つ後のレイヤーに置かれます。これらはいずれも、手作業で位置を決めるものではありません。

すべてのリンクの値は、単純な正の量です — 流れには意味のある「負」の読み方が存在しないため、ゼロや負の値で入力された行は、逆方向や幅ゼロの帯として描かれるのではなく、グループ化の時点で除外されます。自己ループ(FromとToが同じラベルである行)は、左から右へのレイアウトの中で、自分自身に流れ込むノードには意味のある帯がないため、完全にスキップされます。同じFrom/Toのペアを記述する複数の行は、上書きされるのではなく合算されます — 「Referral → Signed up」と記した2つの行は、後の編集で置き換えるべき単一の測定値とは違い、本当にその2倍の流れを意味しているのです。

リンクの色は、任意のフローの色のセルで行ごとに上書きしない限り、デフォルトでその起点となるノード自身の色になります(サンキー図で慣例的な「起点によって色付けする」という読み方です)。ノードの色そのものは直接入力できません — ノードは、最初に登場した順に、決められた色のスロットを次々と取得するだけで、これはこのブロック群の他のすべてのチャートが使っている、識別ベースの色の割り当てと同じものです。

ノードまたはリンクの上限(ノード12個、リンク24個)を超えると、あふれたノードは統合されるのではなく除外されます。これは、円グラフやツリーマップがあふれた分を扱う方法とは意図的に異なります。2つの別々の流れの終点を1つの合成された「その他」のノードに統合すると、図が実際に示している内容を誤って伝えてしまいます。サンキー図の目的全体が、全体に対する割合をまとめることではなく、別々の経路を追跡することにあるためです。

除外されたノードとともに、起点または終点が除外されたリンクも同様に除外されます。ただし、データ表には、実際に描かれた図に含まれているかどうかにかかわらず、入力したすべての行が引き続き一覧表示されます — 循環した入力ミス(A → B → A)によって描かれないままになった、しかし実在するフローも含まれます。入力した内容が、表示から静かに消えてしまうことはありません。

設定可能なフィールド:

  • チャートタイトル — チャートの上に表示される、任意の見出しテキストです。
  • フロー(from、to、value) — 行のリストです: Fromのラベル、Toのラベル、数値のValue、そして任意のフローごとのフローの色の上書きです。
  • カードの背景色、パディング、境界線、角の丸み。
  • タイトルの色・サイズと凡例の色・サイズ — 見出しと、画像の下にある凡例・データ表のテキストのスタイルです。

有効なフローの行がまだ1つも入力されていない場合(すべての行が空欄、自己ループ、またはゼロ以下の値である場合)、ブロックは画像の描画をスキップします。タイトルとカードの枠だけをレンダリングし、代わりに「このチャートを表示するには、フローのデータ(from、to、value)を少なくとも1行追加してください」という簡単な通知を表示します。

例

ユーザージャーニーの図 — 訪問 → 登録 → 購入に加えて、離脱への分岐、そして解約への分岐 — は、ファネルであれば1本の線に押し込むしかない離脱と分岐を、1枚の画像の中で可視化します。予算配分のフロー(収益 → 部門別予算 → 明細項目)は、財務のまとめに、お金がステージごとにどこへ流れているかを視覚的に追跡させてくれます。サポートチームは、チケット件数をチャネル(メール/チャット/電話)からカテゴリー(請求/バグ/使い方)、そして解決状況(解決/エスカレーション)へと流すことで、どのチャネルがどの結果につながっているかを浮き立たせることができます。

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

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

alt属性には、描かれたすべてのフローの帯が一覧表示されています。表には、ノード/リンクの上限や循環したレイアウトによって描かれないままになった行も含めて、入力したすべての行が一覧表示されます。

関連ページ