サンキーダイアグラムとは
サンキーダイアグラムは、何かがある場所から別の場所へどう流れるかを示す図です。流れはそれぞれ帯で表され、帯の幅が量を表します。どこに一番多く流れているかがひと目でわかります。
主な使い道:
- 家計 — 給料が家賃、食費、貯金、娯楽にどう分かれるか
- 会社の財務 — 売上からコスト、税金、利益へ。決算資料でもよく使われます
- エネルギー — 燃料から電気、家庭まで。途中でどれだけ失われるかも
- Web サイトやアプリ — 訪問者がどこから来て、どこで離れるか
- 営業ファネル — 見込み客から商談、提案、成約まで
- 就職・転職活動 — 応募から面接、内定まで。Reddit で人気の使い方です
このツールは入力と同時に図を描きます。アカウント不要、透かしなし。数値がパソコンの外に出ることはありません。
使い方
- 1 行に 1 つの流れを入力します。始点、角かっこで囲んだ量、終点の順です。例: 給料 [4200] 予算
- または Excel や Google Sheets から 3 列（始点、終点、量）を貼り付けます
- 図はすぐに描かれます。必要ならタイトルを付けましょう
- スタイル（クラシック、ミニマル、ボールド、ソフト、アウトライン、ダーク、ネオン、エディトリアル）を選び、次に配色と画像サイズを選びます
- 数値の前や後に、¥ や kWh のような通貨や単位を付けられます
- PNG をダウンロード または SVG をダウンロード をクリックします
流れの書き方
- 1 行に 1 つの流れ: 予算 [1500] 家賃 は、予算から家賃へ 1,500 が流れるという意味です。
- ボックスは名前でつながります。給料 [4200] 予算 と 予算 [1500] 家賃 を書くと、予算はお金が通過する中間のボックスになります。名前は毎回同じ書き方にしてください。
- 何段階でも OK です: 給料 → 予算 → 貯金 → 投資
- 同じ流れを 2 回書くと、合計されます。
- ボックスに好きな色を付ける: :貯金 #22c55e のような行を書きます。
- コメント: // で始まる行は無視されます。
- 数値は 4200、4,200、4200.50 のどの形でも書けます。
ボックスに入る量と出る量が違う場合、ボックスは大きい方の高さになります。そのため、残った分がわかります。
8 つのスタイル
- クラシック — すっきり見やすく、レポートや資料向け
- ミニマル — 細いバーと淡い流れ。色より数値を見せたいときに
- ボールド — 太いバーと濃い色。部屋の後ろからでも読めます
- ソフト — 温かみのあるオフホワイトに角の丸いバー。SNS やニュースレター向け
- アウトライン — 中が空のバーとごく淡い流れ。インクを節約して印刷したいときに
- ダーク — 紺色の背景。暗いスライドやダッシュボード向け
- ネオン — 黒の上で光る流れ。SNS やタイトルスライド向け
- エディトリアル — 経済ニュースや調査レポート風の見た目。枝ごとに色分けした柔らかな流れ、細い濃色のバー、最も小さい項目には小さな点、太字の 2 行ラベル、そして中央に大きく表示される合計
エディトリアルは「蝶ネクタイ型」の図で最も映えます。多くの流れが中央の 1 つの合計に集まり、そこからグループや細かい項目に広がる形です。たとえば企業 → *総支出* → カテゴリー → 取引先。中央のボックスはツールが自動で見つけます。
スタイルが変えるのは見た目だけです。流れ、配色、サイズはそのままなので、数クリックで全スタイルを試せます。
設定
- 流れの形 — なめらかな曲線か、まっすぐな帯
- 向き — 左から右、または上から下（縦長のスマホ画像やファネルに便利）
- 数値 — 数値、各ボックスの全体に対する割合、その両方、または表示なし
- 配色 — ボックス用の 5 つの配色
- 流れの色 — 始点のボックスと同じ、終点のボックスと同じ、枝ごと（中央より後の各グループが最後まで同じ色）、両者の間のグラデーション、または単色のグレー
- 数値の前 / 後 — 通貨記号や単位。すべての数値に表示されます
- 画像サイズ — スライドにはワイド、SNS 投稿には正方形、スマホ画面には縦長
- ボックスの幅、ボックスの間隔、文字サイズ — 見た目を細かく調整
- 背景を透明にする — 白い背景のない PNG。色付きデザインのスライドに
すべてお使いの端末で処理
図はブラウザの中の小さなスクリプトで描かれます。流れのデータはアップロードされず、オンラインには何も保存されません。最後に入力したリストはこの端末にだけ記憶されるので、次に開いたときもそのまま残っています。
よくある質問
サンキーダイアグラムはどう作りますか？
各行に 1 つずつ「始点 [量] 終点」の形で流れを入力します。例: 「給料 [4200] 予算」。入力すると図が表示されます。あとは「PNG をダウンロード」か「SVG をダウンロード」をクリックするだけです。
Excel からサンキーダイアグラムを作れますか？
はい。データを 3 列（始点、終点、量）に並べ、行をコピーして入力欄に貼り付けてください。見出し行は自動で飛ばされます。
SankeyMATIC と同じように使えますか？
同じシンプルな「始点 [量] 終点」の行を使うので、SankeyMATIC で作ったリストもそのまま使えます。すべてブラウザで動き、登録も不要です。
流れの 1 つが描かれないのはなぜですか？
サンキーダイアグラムは一方向に流れるため、ループ（A → B → A）は描けません。ツールはループを閉じてしまう流れを省き、どの流れかをお知らせします。
PNG と SVG の違いは何ですか？
PNG はスライド、資料、SNS 用の普通の画像です。SVG はベクター形式で、どんなサイズでもくっきりしており、Illustrator、Inkscape、Figma、PowerPoint で編集できます。
データはアップロードされますか？
いいえ。図はお使いの端末のブラウザの中で作られます。
知っておくと便利
- 流れやボックスにマウスを乗せると、正確な量が表示されます
- PNG は選んだサイズの 2 倍で保存されるので、スライドや大きな画面でもくっきり見えます
- 棒グラフ、折れ線グラフ、円グラフには グラフ作成 を使ってください
