棒に並べると「大小の比較」に見える
棒・折れ線・面・円と着せ替えても、元の5つの数値は1つも動いていない。それでも棒は「大小の比較」、線は「伸びている物語」、円は「全体に占める割合」へと、同じ数字が違う顔を見せる。何を読み手に届けたいかで、選ぶべきチャートは決まってくる。
チャート形式の選び方(時系列・分布・比較)
「時間の推移」を見せたいなら折れ線・面グラフ、「全体に占める割合」を見せたいなら棒グラフ(円グラフは要素数が増えると読みにくくなるため3〜4分割程度に留める)、「多数のデータ点の分布」を見せたいならヒストグラム・箱ひげ図が適する。伝えたいメッセージが先にあり、形式はそのメッセージに従って決まる。
標本は260点・平均35と66の二峰性(破線が真の分布)。ビンが粗すぎれば二つの山は一塊に潰れ、細かすぎればノイズに埋もれて谷が消える。ビン幅そのものが、読み取れる結論を左右してしまう。
標本は一切いじっていない。破線が示す真の分布には確かに谷がある。にもかかわらず、ビンを粗くすれば二つの山は一塊に潰れ、細かくすればノイズに埋もれて谷は消える。分布を見せるときは、ビン幅そのものが読み取れる結論を左右してしまう。
AかBをタップして回答
正答率 — 円グラフ 0%(0/0) / 棒グラフ 0%(0/0)
近い二つの値、扇の面積だけで大きい方を選べただろうか。円グラフは面積の比較が苦手で、共通の底辺に揃う棒グラフなら迷わない。何問か続けると、その差は正答率にはっきり出てくる。
配色設計(カテゴリカル・連続値・発散)
色分けの目的によって配色の種類が変わる。カテゴリを区別したいだけなら彩度・明度を揃えた「カテゴリカル配色」、数値の大小を1方向に表したいなら明度が単調に変化する「連続配色」、プラス/マイナスのような中心を持つ値には中心を白系にした「発散配色」を使う。3種を混同すると、大小関係が誤って伝わりやすい。
セルをなぞると値が出る。カテゴリカル配色だと、色を見ても大小の順は当てられない。
同じ前年比のヒートマップでも、発散配色なら中心を境に正と負がすぐ読み分けられる。ところがカテゴリカルに変えた途端、大小の手がかりは消えてしまう。配色の種類を取り違えることが、そのまま読み手の誤読につながる。
赤緑じゃない
標準では赤=減少・緑=増加が一目瞭然。上のセグメントでP型・D型の色眼鏡をかけてみよう。
標準色覚には明快な「赤=減少・緑=増加」も、P型・D型の色眼鏡をかけると増加色と減少色が近づき、見分けやすさメーターがすとんと落ちる。そこへ▲▼と数値を重ねておけば、色が読めない人にも増減は届く。色だけに意味を背負わせない、ささやかな保険。
インタラクション設計(ツールチップ・ズーム)
ツールチップは「カーソルの位置」ではなく「対象データ点の位置」に追従させると読みやすい。ズームは、データ点が密集する時系列グラフで特に有効だが、ズーム後も軸ラベル・単位が省略されないよう気をつける必要がある。
指でなぞると、カーソル追従では手ブレがそのままツールチップに乗るのに対し、データ点追従は最寄りの値へ吸い付いて落ち着く。指を離しても最後に触れた値は残るので、拡大したあとでも軸の日付と数値を見失わずに済む。
凡例にカーソルを乗せると1系列だけ強調(他は薄く)、タップで表示/非表示。表示中の系列だけで縦軸が自動で貼り直される。
4本を重ねると線は絡まって見分けがつかない。凡例に触れれば注目の1本だけが前へ出て、いらない系列は畳める。残った系列に合わせて縦軸も引き直される。描き足すより隠すほうが、詰め込んだグラフをかえって読みやすくすることがある。
ダッシュボードの情報設計
ダッシュボードは「上から下へ読む」文章とは違い、走査(スキャン)される。最も重要な要約(KPIの数値)を最上部に固定し、詳細なグラフはその下に配置する「サマリーが先、詳細は後」の順序を徹底する。異常値は色だけでなくアイコンやラベルでも二重に示すと、色覚特性に依存しない設計になる。
4枚を等価に並べると、いちばん大事な売上が右下に埋もれる。視線ヒートは散らばり、要点に辿り着けない。
同じ数値のKPIでも、右下に埋もれた「並べただけ」と、最上段のヒーローに据えた「要点から設計」とでは、視線ヒートの集まり方も「3秒で要点に届いた率」もまるで違う。ダッシュボードは上から視線を減衰させながら走査されるもので、一行ずつ読み下していく文章とは性質が違う。要約を先頭に置くのは、好みではなく走査の順序に合わせた設計だ。
背景・グリッド・影・枠・囲み・グラデ。データを表さないインクを1枚外すたび、残った棒は素直になり、データインク比が上がっていく。
背景の塗り、濃いグリッド、3D風の影、囲み枠。データを表さないインクを1枚剥がすたびに、残った棒はいくらか素直に読めるようになり、データインク比(純度ゲージ)が上がっていく。「全部盛り/引き算」を一括で見比べると、盛るほど親切に見えて実は削ったほうが伝わる逆説がはっきりする。
A=100・B=104 の本当の差は +4% のまま。それでもY軸を切り上げるほど棒丈の差だけが伸び、うそ係数(見かけ÷実際)の針が跳ね上がる。一枚で人を動かすグラフで、軸の起点をどこに置くか。書き手の誠実さがそのまま出る。
A=100とB=104 の隔たりは、起点をどう動かしても実際の差 +4% のまま。それでもY軸を切り上げるほど見かけの差だけが伸び、うそ係数メーターの針がみるみる跳ね上がってステージが赤く警告する。一枚で人を動かすダッシュボードで、軸の起点をどこに置くか。書き手の誠実さがそのまま出るところ。