mailinapp
Documentation menu

ファネルブロック

訪問 → 登録 → 購入のような一連の流れを、各ステージを最初のステージに対する割合として測る、段階的なステージのチャートです。単純な棒グラフでは答えられない、ある1つの問いに答えるために存在します: 各ステージがどれだけの大きさかだけでなく、元のオーディエンスのうちどれだけがそこまで到達したか、という問いです。

仕組み

このチャートは、手入力した各ステージを横長のバーとして描き、値が下がるにつれて左から右へ狭くなっていきます — これは、プロダクト内の他のエンゲージメントファネルでも使われている、同じ視覚表現です。色付けには、他のチャートが使うカテゴリカルパレットではなく、順序カラースケール(1つの色相を、ステージの位置に応じて濃淡を変えたもの)が使われます。この違いは重要です: ファネルのステージは、円グラフのスライスや棒グラフの系列のような独立した識別対象ではなく、順序付けられた並びの中の1つの位置であり、色もそのことを表しています。

画像の下には、常に表示されるデータ表があります — これは省略可能なものではなく、テキストのみのメールクライアント、画像がブロックされた受信ボックス、スクリーンリーダーでこのブロックを使えるものにしているのはこの表だからです。ファネルの表には、画像だけでは示せない2つの数値が加えられています:

  • 最初のステージに対する割合 — このステージの値を、最初のステージに対する割合で示したもので、「元のオーディエンスのうちどれだけが残っているか」を読み取れます。
  • 前のステージに対する割合 — このステージの値を、直前のステージに対する割合で示したもので、ファネルが表そうとしている、段階ごとの減少を読み取れます。

ステージの順序そのものがデータです。ファネルの意味は、ステージを入力した順序に完全に依存するため、円グラフやツリーマップが枠に収まらなくなったときに行うような、あふれたステージを「その他」にまとめる統合はできません。2つのステージを結合すると、一連の流れの形そのものを誤って伝えてしまいます。そのため、8個を超えるステージは、上限を超えた分が単純に描画されない(表にも載らない)扱いになります。ラベルが空欄、値が解析できない、または値が負である行は、完全にスキップされます — ファネルのステージは負の値になり得ないため、ゼロ未満の値は、値がゼロの実在するステージとしてではなく、未入力として扱われます。

設定可能なフィールド:

  • チャートタイトル — チャートの上に表示される、任意の見出しテキストです。
  • ステージ(順番) — 行のリストそのものです: 各行にステージのラベルと数値の値を、ステージが進む順序で入力します。行ごとの色フィールドはありません — ステージの色は常にその位置から自動的に決まり、行ごとに選ぶものではありません。
  • カラースケール色 — 順序カラースケールの基本色相を上書きします。空欄のままにすると、プロジェクトのブランドカラーが使われます。
  • カードの背景色、パディング、境界線、角の丸み。
  • タイトルの色・サイズと凡例の色・サイズ — 見出しと、画像の下にある凡例・データ表のテキストのスタイルです。

まだステージが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 funnel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Funnel: Visited 1,000 (100%) → Signed up 420 (42%) → Added to cart 180 (18%) → Purchased 95 (9.5%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Stage</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of first</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of previous</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">420</td>
      <td style="padding:4px 8px">42%</td>
      <td style="padding:4px 8px">42%</td>
    </tr>
  </table>
</div>

<img>のalt属性には、すべてのステージの完全なテキスト説明が含まれており、その下の表は同じ数値を、選択可能なHTMLとして繰り返します — 画像自体には描かれない、段階ごとの減少率の列も含めてです。

関連ページ