(2020/03/07 加筆修正)
今回は前回に続いてデザインの４原則のひとつ「整列の原則」について書いていきます。
本コラムシリーズは以下の方を主対象として書いていきます。
データ可視化に携わっている
Tableau等のデータ可視化ツールには慣れてきたが、知識に薄さを感じる
データ可視化のプロセスが分からない、良い可視化を作れていない
参考書は以下に挙げます。デザインに関しては主にノンデザイナーズ・デザインブックを参考にしていますが、データ可視化の観点からMakeoverMonday本も参考にしています。
また自分のデータ可視化の原点であるStorytelling With Dataも参考書として挙げておきます。
このシリーズで使用したTableau Workbookは以下からダウンロードできます。
整列の原則
復習として、ノンデザイナーズ・デザインブックでの整列の原則を再引用します。
整列（Alignment）
ページ上では、すべてを意図的に配置しなければなりません。あらゆる要素が、ほかの要素と視覚的な関連をもつ必要があります。整列は、すっきりと洗練された見え方を生み出します。
「整列」と聞いた時に、データ可視化では主にSortingの意味で使用される印象がありますが、ここでの整列の原則は以下を意味します。
すべての要素を意図的に配置する
すべての要素を他の要素と視覚的に関連させる
デザインに一体性をもたせる
ちなみに、意図的な配置は「近接の原則」と不可分のように思うので、この記事では近接の原則も合わせて使っています。
まず初めに、整列の原則により解決したい問題を示します。
Visual Obstacleという概念
自分がこの言葉を知り、意識し始めたのはStorytelling with Data(Chapter 8)との出会いによります。
厳密な定義は見つけられませんが、ここではVisual Obstacleを以下で定義します：
「伝えたいメッセージを分かりやすく直感的に伝える上で、その理解を妨げる視覚的要素」
実際にVisual Obstacleの例を見ていきます。下図をご覧ください。
この可視化で伝えたいメッセージは「CentralとSouthでのProfitは2018年で落ち込んでいる」です。
（メッセージはタイトルに記載されていますが）この可視化それ自体は、見た瞬間に伝えたいメッセージが伝わりにくい形をしています。
なぜ伝わらないかを一緒に見ていきましょう。
結論としては「余分な（視覚的）要素が多すぎる」ことが問題です。
以下に問題点を列挙しました。
伝えたいメッセージとデータ可視化が「視覚的に関連」していないことが問題です。また余分な要素（凡例など）が多いことも問題です。
特に棒グラフの色遣いについて、カラフルで楽しいですけど、一気に見づらくしています。この可視化から「CentralとSouthでのProfitは2018年で落ち込んでいる」ことを「直感的に」理解することは、おそらく大変難しいです。
（注：凡例を表示するな、という意味はありません。凡例を表示させる必要がある場合は多いです。「わざわざ表示させる程でもない凡例は不必要」という主張をここではしています。）
もうひとつ。色が多すぎて「一体性」が無いですね。
同じProfitを単に年別で出しているだけなのに、同じ指標に見えにくいように思います。
ではどう改善するか。
２つの例をご用意しました。
Visual Obstacleを無くす
１つめの例では、以下の修正を施しました。
対象であるCentralとSouthを左側（最初に目につく側）に配置。
色を2018年のCentralとSouthにのみ与えた。
不要な凡例を削除。
「見て欲しいもの」を最前面に押し出しました。
嫌でも2018年のCentralとSouthのProfitに目が行きます。
伝えたいメッセージを直球ストレートで伝える姿勢により、Visual Obstacleの排除に努めることが出来ます。
もうひとつの例は、折れ線グラフに変えてみました。
ここでも基本方針は変わらず「SouthとCentralに意識を注目させる」ことです。
時間変化するデータなので、傾向が分かりやすい折れ線グラフを採用しました。
Region間比較がしやすいですね。
ここでおさらいのため、整列の原則を再掲します。
すべての要素を意図的に配置する
すべての要素を他の要素と視覚的に関連させる
デザインに一体性をもたせる
データ可視化では整列の原則は「余分な要素、意図のない要素を削る」ことに帰着すると思います。
余分、意図のない視覚的効果（色や余分なテキストなど）を排除し
視覚的に関連していない要素を排除し
余分なデザイン要素を排除し、一体性をもたせる
ことが、データ可視化における「整列の原則」の応用になるのではと考えます。
ちなみに：Task Firstの姿勢はデザイン４原則に通じる
初回のコラムで「Task：誰が何を知りたいか、何をするべきか」の定義からデータ可視化のプロセスは始めるべきという主張をしました。
上記の「余分な要素、意図のない要素を削る」というプロセスは、結局のところ「Taskに関係ない要素は可視化から削る」というプロセスと一致します。
可視化の過程において、常にTaskを忘れないようにしてください。
「Taskに一致した可視化かどうか」を自問するだけでも、作成される可視化のデザイン性、可読性は向上します。
その他のVisual Obstacleの例
色と凡例を挙げましたが、それ以外の要素もVisual Obstacleになり得ます。
次の例を見てみましょう。
全体的にデコボコしています。
このデコボコが「伝えたいメッセージを分かりやすく直感的に伝える上で、その理解を妨げる視覚的要素」になりえます。
どの点が良くないか洗い出してみましょう。
線を引いてみると、デコボコ具合が分かります。
コメントについては画像をご覧ください。
修正するとしたら、以下のようにできると思います。
同じように線を引いてみましょう。大分すっきりしたことが分かると思います。
また、ここで「近接の原則」も使用していることに注意してください。
その他のVisual Obstacleの例もありますが、この記事ではここで止めておきます。
この例で伝えたいことは「整然とした可視化の方が見やすい」ということです。
可視化の配置の仕方、整列具合を意識してみてください。
余談：Color Dietという方法
ちなみにですが、Color Dietという概念があります。
「色」という視覚的要素は強い効果を持つことから、下手をすれば「意味のないのに意味があるように見える」色遣いをしてしまいます。
Color Dietとは「とりあえずグレースケールでViz作り、色を後付けすることにより不必要な視覚的要素を減らす」という考え方です。
これも結局は整列の原則のようなもので、色にちゃんと意味を持たせよう、意味のない色は使わないようにしよう、ということです。
ご興味ある方は上のリンクからどうぞ。字幕ありのPod Castです。
最後に
今回はデザインにおける「整列の原則」を、データ可視化の観点から解説しました。
これは以下の３点が要点でした。
すべての要素に意味と関連性をもたせること
一体感をもたせること
余分な要素を削ること
次回は「反復の原則」について書く予定です。
ご質問等はTwitterまたはLinkedinまでよろしくお願いします。それでは。