mailinapp
Documentation menu

ウォーターフォールチャートブロック

累計を示すチャートです — 開始値の後に、増加・減少を表す一連のバーが続き、それぞれの前後の累計の間に浮くように描かれます。途中または最後に、入力した「合計」バーへ着地させることもできます。これは、売上のブリッジ図の定番の形です: 「開始時のMRR」→新規獲得→拡大→解約→「終了時のMRR」というように。

仕組み

手入力した各行は、累計に符号付きの差分(増加または減少)を加えるバー、または累計をそのまま絶対値にリセットするバー(合計・小計のアンカー)のいずれかになります。これは、単なるスタイルの違いではなく、ファネルチャートとの本質的な形状の違いです。ファネルのバーは常にゼロから始まり、単調に縮んでいきます。一方、ウォーターフォールのバーは浮くように描かれます: 左端はすでにあった累計の位置に、右端は結果として到達した位置に置かれ、どちらの方向にも動く可能性があります。

増加・減少・合計のバーは、常に同じ3つの予約カラーで描かれ、増加・減少のペアについては手入力で上書きすることはできません。これは、プロダクトがすべてのステータスカラーに適用している「赤は常に悪いニュースを意味する」という信頼のルールと同じもので、そのメールで直前にどんな色を選んだかに関わらず、どのメールでもウォーターフォールチャートを一貫して読み取れるようにしています。実際に手入力で選べるのは、中立的な合計の色だけであり、空欄のままにするとプロジェクトのブランドカラーが使われます。

画像の下にある常に表示されるデータ表には、すべてのバーのラベル・値・種類(増加/減少/合計)、そしてそのバーの後の累計が繰り返し示されます。累計の列は、このチャートタイプに特有の数値です。浮動する差分の並びだけが、「このバーの後、状況がどうだったか」という意味のある数値を持つためです。凡例には、実際に入力されたバーに存在する役割だけが一覧表示されます — 合計バーがないチャートには、誰も使っていない「合計」のスウォッチは表示されません。

ファネルと同様、バーの順序そのものがデータです: 累計の計算は、行を入力した順序に依存します。8本を超えるバーは、円グラフやツリーマップがあふれたスライスに対して行うような合成バケットへの統合ではなく、単純に除外されます — 2本のバーを結合すると、それ以降のすべてのバーが依存している累計を、静かに壊してしまうためです。ラベルが空欄、または値が解析できない行はスキップされ、実在するゼロ値のバーとしては数えられません。

設定可能なフィールド:

  • チャートタイトル — チャートの上に表示される、任意の見出しテキストです。
  • バー(順番) — 行のリストです: ラベル、数値の値(符号付きの差分、または行が合計としてマークされている場合は絶対値)、そして種類のセルです — そのセルにtotal(大文字・小文字は区別しません)と入力すると、その行が絶対値のアンカーになります。それ以外(空欄を含む)は、通常の差分として扱われます。
  • 合計の色 — 合計・小計のバーに使われる中立的な色を上書きします。空欄のままにすると、プロジェクトのブランドカラーが使われます。増加・減少の色は設定できません。
  • カードの背景色、パディング、境界線、角の丸み。
  • タイトルの色・サイズと凡例の色・サイズ — 見出しと、画像の下にある凡例・データ表のテキストのスタイルです。

まだバーが1つも入力されていない場合、ブロックはタイトルとカードの枠だけをレンダリングし、画像の代わりに「このチャートを表示するには、データを少なくとも1行追加してください」という簡単な通知を表示します。

例

月次の売上ブリッジ図 — 開始時のMRR、新規獲得、拡大、解約、終了時のMRR — が典型的な用途で、取締役会向けの更新や投資家向けダイジェストに入れることで、スプレッドシートを添付しなくても、何がその数値を動かしたのかを読者がそのまま把握できます。人員数のレポートでは、開始時の人員数 → 入社 → 退社 → 終了時の人員数をブリッジして、月次の運用まとめに使えます。機能リリースのエラーバジェットを追跡するプロダクトチームは、開始時のバジェットを、それを消費したカテゴリー別のインシデントに対してブリッジし、残りのバジェットを示す合計バーに着地させることもできます。

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

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Monthly MRR bridge</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Waterfall: Starting MRR 12,000 (total) → New business +3,200 → Expansion +1,400 → Churn -1,800 → Ending MRR 14,800 (total)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Label</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">Type</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Running total</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Churn</td>
      <td style="padding:4px 8px">-1,800</td>
      <td style="padding:4px 8px">Decrease</td>
      <td style="padding:4px 8px">13,000</td>
    </tr>
  </table>
</div>

<img>のalt属性には、すべてのバーの値と役割が書き出されています。表には、このブリッジ図に名前を与えている累計の数値も加えられています。

関連ページ