ちいつる
A-09リファレンス

データ可視化・チャート設計ガイド

形式選定から配色・インタラクションまでの設計判断を一貫して示す。

触ってみるタブで棒・折れ線・面・円と着せ替え、グラフをタップして値も確かめてください
same numbers
同じ数字、四つの顔
1月2月3月4月5月
4月の売上
63

棒に並べると「大小の比較」に見える

棒・折れ線・面・円と着せ替えても、元の5つの数値は1つも動いていない。それでも棒は「大小の比較」、線は「伸びている物語」、円は「全体に占める割合」へと、同じ数字が違う顔を見せる。何を読み手に届けたいかで、選ぶべきチャートは決まってくる。

チャート形式の選び方(時系列・分布・比較)

「時間の推移」を見せたいなら折れ線・面グラフ、「全体に占める割合」を見せたいなら棒グラフ(円グラフは要素数が増えると読みにくくなるため3〜4分割程度に留める)、「多数のデータ点の分布」を見せたいならヒストグラム・箱ひげ図が適する。伝えたいメッセージが先にあり、形式はそのメッセージに従って決まる。

触ってみるビン数を動かして、背後の破線に隠れた二つの山(谷)を掘り当ててください
find the valley
隠れた双子の山
谷は埋もれている

標本は260点・平均35と66の二峰性(破線が真の分布)。ビンが粗すぎれば二つの山は一塊に潰れ、細かすぎればノイズに埋もれて谷が消える。ビン幅そのものが、読み取れる結論を左右してしまう。

標本は一切いじっていない。破線が示す真の分布には確かに谷がある。にもかかわらず、ビンを粗くすれば二つの山は一塊に潰れ、細かくすればノイズに埋もれて谷は消える。分布を見せるときは、ビン幅そのものが読み取れる結論を左右してしまう。

触ってみる円グラフと棒グラフを切り替えて、AとBのどちらが大きいか当ててみてください
A B、大きいのは?
AB

AかBをタップして回答

正答率 — 円グラフ 0%(0/0) / 棒グラフ 0%(0/0

近い二つの値、扇の面積だけで大きい方を選べただろうか。円グラフは面積の比較が苦手で、共通の底辺に揃う棒グラフなら迷わない。何問か続けると、その差は正答率にはっきり出てくる。

配色設計(カテゴリカル・連続値・発散)

色分けの目的によって配色の種類が変わる。カテゴリを区別したいだけなら彩度・明度を揃えた「カテゴリカル配色」、数値の大小を1方向に表したいなら明度が単調に変化する「連続配色」、プラス/マイナスのような中心を持つ値には中心を白系にした「発散配色」を使う。3種を混同すると、大小関係が誤って伝わりやすい。

触ってみる配色の種類と階調数を切り替えて、同じデータの読みやすさを比べてください

セルをなぞると値が出る。カテゴリカル配色だと、色を見ても大小の順は当てられない。

同じ前年比のヒートマップでも、発散配色なら中心を境に正と負がすぐ読み分けられる。ところがカテゴリカルに変えた途端、大小の手がかりは消えてしまう。配色の種類を取り違えることが、そのまま読み手の誤読につながる。

触ってみる標準・P型・D型の色眼鏡をかけ替え、二重符号化のON/OFFで読みやすさを比べてください
put on the goggles
赤緑は、みんなに
赤緑じゃない
1月2月3月4月5月6月
増加↔減少の見分けやすさ100%

標準では赤=減少・緑=増加が一目瞭然。上のセグメントでP型・D型の色眼鏡をかけてみよう。

標準色覚には明快な「赤=減少・緑=増加」も、P型・D型の色眼鏡をかけると増加色と減少色が近づき、見分けやすさメーターがすとんと落ちる。そこへ▲▼と数値を重ねておけば、色が読めない人にも増減は届く。色だけに意味を背負わせない、ささやかな保険。

インタラクション設計(ツールチップ・ズーム)

ツールチップは「カーソルの位置」ではなく「対象データ点の位置」に追従させると読みやすい。ズームは、データ点が密集する時系列グラフで特に有効だが、ズーム後も軸ラベル・単位が省略されないよう気をつける必要がある。

触ってみるチャートをなぞるかタップして、ツールチップの追従先とズームを切り替えてみてください
ツールチップの追従先

指でなぞると、カーソル追従では手ブレがそのままツールチップに乗るのに対し、データ点追従は最寄りの値へ吸い付いて落ち着く。指を離しても最後に触れた値は残るので、拡大したあとでも軸の日付と数値を見失わずに済む。

触ってみる凡例をホバーで強調、タップで表示/非表示に切り替えてみてください

凡例にカーソルを乗せると1系列だけ強調(他は薄く)、タップで表示/非表示。表示中の系列だけで縦軸が自動で貼り直される。

4本を重ねると線は絡まって見分けがつかない。凡例に触れれば注目の1本だけが前へ出て、いらない系列は畳める。残った系列に合わせて縦軸も引き直される。描き足すより隠すほうが、詰め込んだグラフをかえって読みやすくすることがある。

ダッシュボードの情報設計

ダッシュボードは「上から下へ読む」文章とは違い、走査(スキャン)される。最も重要な要約(KPIの数値)を最上部に固定し、詳細なグラフはその下に配置する「サマリーが先、詳細は後」の順序を徹底する。異常値は色だけでなくアイコンやラベルでも二重に示すと、色覚特性に依存しない設計になる。

触ってみる「そのまま/仕上げ」をタップで切り替え、要約(KPI)を置く位置で視線がどう変わるか見てください
Sales Dashboard
並べただけ
3秒で要点に届いた人34%

4枚を等価に並べると、いちばん大事な売上が右下に埋もれる。視線ヒートは散らばり、要点に辿り着けない。

同じ数値のKPIでも、右下に埋もれた「並べただけ」と、最上段のヒーローに据えた「要点から設計」とでは、視線ヒートの集まり方も「3秒で要点に届いた率」もまるで違う。ダッシュボードは上から視線を減衰させながら走査されるもので、一行ずつ読み下していく文章とは性質が違う。要約を先頭に置くのは、好みではなく走査の順序に合わせた設計だ。

触ってみる装飾のチップを1枚ずつ剥がして、純度ゲージが伸びていくのを見てください
data-ink ratio
インクを削る
4258356750
データインク比46%

背景・グリッド・影・枠・囲み・グラデ。データを表さないインクを1枚外すたび、残った棒は素直になり、データインク比が上がっていく。

背景の塗り、濃いグリッド、3D風の影、囲み枠。データを表さないインクを1枚剥がすたびに、残った棒はいくらか素直に読めるようになり、データインク比(純度ゲージ)が上がっていく。「全部盛り/引き算」を一括で見比べると、盛るほど親切に見えて実は削ったほうが伝わる逆説がはっきりする。

触ってみるY軸の起点を動かして、うそ係数の針がどこまで跳ね上がるか確かめてください
lie factor
うそ係数メーター
AB0104
×1.0
うそ係数
実際の差 (A→B・不変)
+4.0%
見かけの差(棒の高さ)
+4%

A=100・B=104 の本当の差は +4% のまま。それでもY軸を切り上げるほど棒丈の差だけが伸び、うそ係数(見かけ÷実際)の針が跳ね上がる。一枚で人を動かすグラフで、軸の起点をどこに置くか。書き手の誠実さがそのまま出る。

A=100とB=104 の隔たりは、起点をどう動かしても実際の差 +4% のまま。それでもY軸を切り上げるほど見かけの差だけが伸び、うそ係数メーターの針がみるみる跳ね上がってステージが赤く警告する。一枚で人を動かすダッシュボードで、軸の起点をどこに置くか。書き手の誠実さがそのまま出るところ。

次はこれ