コントラストの原則

今回は「コントラストの原則」について書いていきます。

コントラストの原則含め、デザインの４原則については以下をご参照ください。

データ可視化に悩むあなたへ　２日目（デザイン４原則と近接の原則）

このシリーズの想定ユーザーは以下の方々です。

• データ可視化ツールには慣れてきたが、何をどう可視化したらいいか分からない

• いまひとつ自分の可視化がイケてない気がする

• 可視化のプロセスが分からない

参考書は以下に挙げます。主にノンデザイナーズ・デザインブックを参考にしていますが、データ可視化の観点からMakeoverMonday本も参考にしています。

あとは、自分のデータ可視化の原点であるStorytelling With Dataも参考書として挙げておきます。

ノンデザイナーズ・デザインブック [第4版]

MakeoverMonday: Improving How We Visualize and Analyze Data, One Chart at a Time (English Edition)

Storytelling with Data: A Data Visualization Guide for Business Professionals (English Edition)

（日本語版ありました）

このシリーズで使用したTableau Workbookは以下からダウンロードできます。

https://tabsoft.co/2Pt8Wgw

（Disclaimer）

ここで書き表すことは絶対ではありません。データ可視化を集中的にやり続けている人間の、一意見として捉えて下さい。

---

【コントラストの原則】

復習として、ノンデザイナーズ・デザインブックでのコントラストの原則を再引用します。

コントラスト（Contrast）

コントラストの背景にある考え方は、ページの要素同士が単に「類似」するのを避けるということです。もし要素（書体、色、サイズ、線の太さ、形、空きなど）が「同一」でないなら、はっきり異ならせるということです。

コントラストは、ページ上で視覚を引きつけるもっとも重要な要因になることがよくあります。つまり、読者をまず読む気にさせるという働きをするのです。

また、情報をより明確に伝える役割もします。

データ可視化におけるコントラストの原則は「どこに注目すればいいかを伝える」ことです。

また（反復的な）コントラストは同時に「情報の組織化」に役立ちます。

似たようなことは反復の原則でも行いました。

コントラストの付け方には、大きく分けて２つの方法があります。

• 文字サイズや色などに強弱、緩急をつける。

• 余分な要素を削る、目立たなくさせ、メインの要素を相対的に目立たせる。

早速ですが、データ可視化でどのようにコントラストが生かされるかを見てみましょう。

---

【データ可視化におけるコントラストの原則の例１】

復習のようになりますが、次のデータ可視化は前回の反復の法則で使用されたものです。

上下での変更点のほとんどは、シンプルに「文字の大きさを変えただけ」です。

しかし、文字サイズに「コントラスト」をつけたことにより

• それぞれの可視化は何を示すか

• この可視化の全体は、３つの可視化で構成されていること（情報の構造）

上記２点がよりクリアに伝わります。

単なる文字サイズの変更でも、これだけのパワーがあります。

（基本的に、可視化のタイトルは文字サイズを明らかに大きくすることを推奨します）

---

【データ可視化におけるコントラストの原則の例２】

別の例を見てみましょう。

こちらの例では、それなりに情報構造も分かりやすく配置されています。

一方で、色遣いがカオスですね。

「どこに注目すればいいか」が一目で全く分かりません。

左下で言えば、PhonesとBindersがどれか全く分かりません。

ここで「どこに注目すればいいか」にコントラストをつけます。

色にコントラストをつけたことにより

「２０１８年」

「PhonesとBinder」

「Washington州」

上記３点に注目しやすくなりました。

また、細かい要素をいくつか削っています。

• 色の凡例（タイトルや可視化の中に含め、凡例のためのスペースを削除）

• 軸のグリッド線（今回は大まかな傾向がテーマのため）

• タイトルの背景色（データがより目立つようにグレーに）

ちなみに、今回のコントラストの原則で取り上げた話は、実は整列の原則でも似た話を取り扱いました。

デザイン４原則は互いに完全に独立したものではなく、多少オーバーラップしている点もあるように思います。

したがって、４原則をバランスよく取り入れる／学習することが大切だと思います。

---

【最後に】

今回はデザインにおける「コントラストの原則」を、データ可視化の観点から解説しました。

これは「どこに注目すればいいかを伝える」ことと「情報の組織化」に役立ちます。

コントラストの付け方には、大きく分けて以下２つの方法がありました。

• 文字サイズや色などに強弱、緩急をつける。

• 余分な要素を削る、目立たなくさせ、メインの要素を相対的に目立たせる。

今回でデザイン４原則についての説明は終わりですが、デザイン軸についての記事はもう少し続きます。

Storytelling with dataの３章と４章の内容を参考に、もう少しだけデータ可視化に活用できるポイントについて書きます。

ご質問等はTwitterまたはLinkedinまでよろしくお願いします。それでは。