We are interpreters, not merely translators, between sender and receiver. What we say and how we say it makes a difference. If we want to speak to people, we need to know their language. In order to design for understanding, we need to understand design. (Erik Spiekermann, 1993)
情報可視化の6ステップ
今日の内容は、データ可視化のプロセスにおいては、「探索的可視化」と「説明的可視化」に関する部分にあたります。
ここはより具体的には、以下の2つに分けられますが、それぞれに「記号的枠組み」「知覚的枠組み」「慣習的枠組み」に関する部分があります。
- データを視覚表現に変換するエンコード
- 視覚表現を整えるデザイン
今回の講義では主に「知覚的枠組み」と「慣習的枠組み」を扱います。いくつかの情報可視化のデザインガイドを参考にして、検討すべき事項とそれぞれに関するルールを確認していきます。
情報可視化のデザインガイド
主な検討事項
- 図の構成要素
- 色
- 書体
- 保存形式
- アクセシビリティ
デザインガイドの例
- Data Visualization Style Guide
- The Sunlight Foundation’s Data Visualization Style Guidelines
- Urban Institute Data Visualization Guide
- Trafford Data Lab: Interactive graphics companion
- BBC Visual and Data Journalism cookbook for R graphics
- Baltimore City Data Viz Style Guide
- Apple Human Interface Guidelines
- デジタル庁 ダッシュボードデザインの実践ガイドライン
図の構成要素
要素
- 全体のサイズ
- 図番号
- タイトル
- サブタイトル
- 軸タイトル
- 軸ラベル
- 軸と目盛り
- グリッド線
- データソース・注記
- ロゴ
- 凡例
- ラベル
色
二値カラースケール
■ ■
2カテゴリの名義尺度の変数に対応付けることができます。2つのカテゴリを明確に区別でき、かつ互いに同等に見える色を選びます。明るさに変化がある色のような、順序をイメージさせる色のセットを使うべきではありません。
色に付随する文化的な意味合いにも注意を払う必要があります。例えば、早稲田大学（シンボルカラー：WASEDA Red）と慶應義塾大学（ブランドカラー：ブルー）を表現する場合、それぞれのイメージカラーに対応した色を選んだ方がその逆よりも直感的です。
質的カラースケール
■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■
二値カラースケールを拡張したものが質的カラースケールです。より多くのカテゴリに対応させることができます。
色を選ぶ時の便利なツールとして、ColorBrewerがあります。また、主要なカラースケールはデータ可視化モジュールに組み込まれていることも多いです（Altair、Plotly、seaborn）。
連続的カラースケール
単一色相： ■ ■ ■ ■ ■ ■ ■
複数色相： ■ ■ ■ ■ ■ ■ ■
複数色相： ■ ■ ■ ■ ■ ■ ■
量的データを表す時には、連続的カラースケールを使うことができます。単一の色相（例：暗い青から明るい青）を用いるものと複数の色相（例：暗い赤から明るい黄色）を用いるものがあります。
複数の色相を用いる場合、明るい赤から明るい黄色、緑から明るい黄色、青から明るい黄色、暗い紫から明るい緑など、自然界で見られる色のグラデーションに従った色合いにすると良いようです。そうでないもの（例：暗い黄色から明るい青）は不自然に見え、連続的スケールとして有用ではありません。
発散的カラースケール
■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■
データの値自体を可視化するのではなく、ある中立な値を中心として、そこからどちらの方向にどの程度データの値がずれているのかという偏差を可視化したいことがあります。このような場合は、発散的カラースケールを使うことができます。
発散的カラースケールは、共通の色を持つ中間点で2つの連続的カラースケールをつなぎ合わせたものです。中間点は、通常は明るい色で表されます。発散的カラースケールでは両方向のバランスがとれており、中央の明るい色から外側の暗い色へのグラデーションがどちらの方向でもほぼ同じになっている必要があります。
よく使われる色としては、茶色から緑がかった青、ピンクから黄緑、赤から青などがあります。
アクセントカラー
■ ■ ■ ■ ■ ■ ■
色は、データ内の特定の要素を目立たせるためのツールとしても有効です。データセット内の一つのカテゴリや値が、伝えたいことに関する重要な情報を担っている場合があります。その場合、このカテゴリや値に関連する視覚要素を読み手に強調することが考えられます。
書体
書体も検討要素の一つです。たくさんの種類を使う必要はなく、1〜2種類に抑えるべきですが、読みやすさと入手しやすさで選ぶと良いでしょう。
1種類の書体を使う時は、キャプションもラベルもその書体で、2種類使う時はキャプションとラベルで分けると良いです。
キャプションの書体
タイトル・サブタイトル・注記などに使う書体は、ゴシック体（sans serif）系にするのが一般的です。本や論文に掲載する図には、明朝体（serif）系を使うこともあります。
システム搭載フォントかGoogle Fontsで入手可能なものをいくつかおすすめします。
- 明朝体
- 游明朝体 → Win/Mac
- 源ノ明朝
- ZENオールド明朝 → Google Fonts
- BIZ UD明朝 → Win
- ゴシック体
- 游ゴシック体 → Win/Mac
- 源ノ角ゴシック
- ZEN角ゴシックNew → Google Fonts
- IBM Plex Sans JP → Google Fonts
ラベル（特に数値）の書体
場合によっては、ラベルを等幅フォント（monospace）にした方が見やすくなることがあります。全ての文字の横幅が同じなので、整列がしやすいのも良い点です。
- Inconsolata → Google Fonts
- IBM Plex Mono → Google Fonts
- Fira Code → Google Fonts
- Input Mono
保存形式
可視化作品をどのように保存するかも検討すべきポイントです。画像の保存形式にはおおまかに、ビットマップ形式（ラスタ形式とも）とベクトル形式があります。
ビットマップ形式では、色情報を持った個々の画素（ピクセル）が保存されます。一方で、ベクトル形式では、グラフィック要素の幾何学的配置の情報が保存されます（点の位置や曲線の数式のような形式）。実際の画像は、スクリーンへの表示や印刷の際にその場で生成されます。
| 略称 | 名称 | 形式 | 用例 |
|---|---|---|---|
| Portable Document Format | ベクトル | 一般用 | |
| EPS | Encapsulated PostScript | ベクトル | 古い。PDFを使いましょう。TeXでために見かけるかも |
| SVG | Scalable Vector Graphics | ベクトル | オンライン用 |
| PNG | Portable Network Graphics | ビットマップ | 線画の表示に最適 |
| JPEG/JPG | Joint Photographic Experts Group | ビットマップ | 写真に最適 |
| TIFF | Tagged Image File Format | ビットマップ | 印刷製品用、色表示が正確 |
| RAW | Raw Image Format | ビットマップ | デジタル写真、後期加工が必要 |
| GIF | Graphics Interchange Format | ビットマップ | 若干古い。最近はアニメーションに使われることが多い |
作成した図を保存する時には、解像度、正確性、柔軟性を保持した形にすることが重要です。具体的には、下記2つの方法がおすすめです。
- PDF形式で出力し、必要に応じてPNGやJPEGに変換
- 高解像度のPNGとして保存
アクセシビリティ
情報の利用可能性・利用しやすさのことを情報アクセシビリティと言います。私たちが情報にアクセスし利活用するためには、ターゲットとなる情報が (1) 認知可能・入手可能であること、(2) 利用可能・理解可能であることが必要です。
情報を利活用する際に生じ得る制約として、次のものが考えられます。
- 視認性・可読性・読み書きに関する制約
- 読み書きに時間を要する／読み書きが困難／読み書きの間違い・誤認がある
- 全体像を把握すること、選択的にモノ・コトを視認することに困難を伴う
- コミュニケーションの制約
- 移動に関する制約
- メディア・ツールの制約
情報可視化と関連する情報アクセシビリティを高める方法としては、次のようなものがあります。
- 情報を整理・具体化する
- 予見性、見通しを良くする
- 情報アクセスの負担を軽減する
- 平易な表現を用いる。専門用語の多用を避ける。冗長な表現を避ける。
- 視認性を高める
- 提示する視覚情報の位置、大きさ、太さ、背景色とのコントラストを調整する
- 文字の可読性を高める
- 文字の色と背景色のコントラストを高くする
- 色の識別ができなくても（白黒印刷しても）理解できる表現を用いる
- 文字の書体・大きさ・行間・表示位置を調整する
- 文字を読むための時間を調整する
- 文字情報を音声（読み上げ）・立体（点字、触図）、絵（ピクトグラム）で補足又は代替する
- 代替・補足する情報を付与する
- 音声情報を文字情報で代替・補足する
- 音声情報を視覚的情報で代替・補足する
- 音声情報又は資格情報を触覚情報で代替・補足する
- 視覚情報を音声情報で代替・補足する
- 発話・発声・意思表示を支援技術で代替する
スクリーンリーダーへの対応
- デジタル文書（ウェブページやPDF）にする時には、可視化作品に代替テキストを付与し、スクリンリーダーによる読み上げに対応する
- 印刷する時には、立体コピーなどを使って図が盛り上がるようにする
- 3Dプリンターで立体物を作ることもできる
ウェブページについては、Web Content Accessibility Guidelines 2.2も参考にしてください。
色のユニバーサルデザイン
色を使う時には、読み手が色覚異常（color-vision deficiency, CVD; 人口の約8%がなんらかの色覚異常を持っている）を持っている可能性を考える必要があります。
色覚異常
- 赤緑色覚異常（緑を知覚するのが困難）
- 2型3色覚（deuteranomaly）← 最も多い
- 2型2色覚（deuteranopia）
- 赤緑色覚異常（赤を知覚するのが困難）
- 1型3色覚（protanomaly）
- 1型2色覚（protanopia）
- 青黄色覚異常（青を知覚するのが困難）
- 3型3色覚（tritanomaly）
- 3型2色覚（tritanopia）← 比較的稀
今回紹介したカラースケールのうち、連続的カラースケールがCVDに影響することはほぼありません。
その他の（色相が意味を持つ）カラースケールでは、注意が必要です。
赤と緑を対比に用いると、赤緑色覚異常では見分けがつきません。
青と緑を対比に用いても、青黄色覚異常では見分けがつきません。
ColorBrewerのPiYGは、色覚異常を持つ人にも見分けがつくように設計されています。ピンクは赤と青の混色であり、黄緑は緑と黄色の混色であるためです。2型と1型色覚者には2つの色の青色成分の違いが知覚され、3型色覚者には赤色成分の違いが知覚されます。
質的カラースケールを使う際には、より慎重に色を選ぶ必要があります。
カラースケールと色のシミュレーション
色のシミュレータなどのCVDシミュレーションツールを使って色の見え方を確かめることできます。また、CVDセーフなカラースケールである「カラーユニバーサルデザイン推奨配色セット」を採用することも考えられます（下図はリンク先の配色セットとは若干異なりますが、同じくCVDセーフなカラースケールになっています）。
表現の冗長化
冗長な表現を採用し、1つのデータを複数の視覚記号に割り当てることも、アクセシビリティの向上に寄与する場合があります。
例えば、カテゴリを色だけではなく記号の形に割り当てる、折れ線グラフの線と順番と凡例の順番を揃える、凡例ではなくラベルを使う、などの方法が考えられます。
