2017.05.19BLOG

ネコの手も借りたい情報設計十匹目
「MIEM：ミーム」その３

Fujii

今年も年度末の繁忙期を無事に乗り切ったキャットパッド藤井です。こんにちは。実践で役に立つ設計キーワードをぼちぼち取り上げています。

第十匹目は、大連続シリーズ「MIEM：ミーム」その３です。
その１ではバーチャートを教材に情報には次元があるよという話、その２では代表的なチャートフォーマットを紹介しました。

今回は次元数の多いチャートを観察してみましょう。

表紙は、台北市内の裏路地で出合った猫です。熱帯っぽい多肉植物が繁茂する錆びた非常階段と、サビ三毛というナイスな組み合わせに注目。

復習「情報には次元がある」という話

まずは復習です。情報には、必ず次元の概念があります。まずは２次元のドットチャートをみてみましょう。

チャートタイプ: ドットチャート
１　y軸: 体重 (kg)
２　x軸: 身長 (cm)

とある電車の乗客情報をドットチャートにしました。x軸に身長（cm）、y軸に体重（kg）で構成されています。今回は、この２次元のチャートの次元を増やしていき、どのようなビジュアライゼーションを行なえるかを観察してみます。

ドットチャートの三次元化

次元を増やすにあたり、どのようなファセット（情報の切り口）が存在するのか確認してみましょう。

「電車の車両に乗客の情報」ということなので、さしあたり思いつくのは、性別、年齢ぐらいでしょうか。では、まず性別の次元を追加して三次元のチャートにしてみましょう。

男性を青、女性を赤のマーカーで色分けしてみました。男性の方が身長が高く、体重が重い傾向があるようです。

チャートタイプ: ドットチャート
１　y軸: 体重 (kg)
２　x軸: 身長 (cm)
３　マーカーの色: 性別[男：青 , 女：赤]

ドットチャートの四次元化

さらに「年齢」というファセットを追加して、チャートを四次元にしてみましょう。

ただし、今回は正確な年齢ではなく、「年代」として端数処理、つまり丸めてチャートに落とし込んでみます。

端数処理＝丸めは、情報設計の全般において、意図を簡潔に伝えるためには必須のテクニックです。

チャートタイプ: ドットチャート
１　y軸: 体重 (kg)
２　x軸: 身長 (cm)
３　マーカーの色: 性別[男：青 , 女：赤]
４　マーカーの形状: 年代[○：〜20代 , □：30代〜40代 , △：50代〜]

ファセットを四つも含んでいるので、最初の二次元チャートよりもかなり情報量は増えました。しかし「この状態が分かりやすいか？」といわれると、そうでもない気がします。

チャートは合理的に情報を表現することができますが、使い方を間違えるとかえって分かりにくくなります。情報設計者には、チャートの特性を理解し、ユースケースと照らし合わせて最適なチャートを設計する責任があります。

情報の端数処理＝丸めについて補足

横道にそれて少々難しい話をすると、上の四次元チャートにおいて「年齢≒年代」には「マーカーの形状」を割り当てています。

「年齢」を「年代」として丸めることで、マーカーの形状を減らすことができ、認識しやすく、分かりやすくしています。（もし0歳から100歳までの100個の形状を用意するとなったら、たぶん破綻しますよね。）

どうしても「年齢を丸めずにチャートに投影する」必要がある場合は、「x軸、y軸に続いて、z軸（奥行き）を用意し、3Dなチャートにする」か「年齢が高いほど、マーカーを大きくする」などが候補に上がりますが、どちらも良い選択肢とは言えません。

さらに多次元化することも可能。だが。

さらにさらに、五次元、六次元という高次元のチャートを作ることも可能です。「年収をz軸にあてる」「移動距離をマーカーの大きさにあてる」など、ファセットを追加すればよいのです。

しかし、そのチャートが分かりやすいかというと、そうでもないんですよね。

チャートの設計は情報デザインそのものです。

使う人、見る人に正確にストレスなく情報が伝わるようにするべきと考えると、ファセットを盛り込みまくるのも考えものです。技術的、理論的に可能だからといって、ユーザーを置いてけぼりにしないようにしたいですね。

多次元チャートを紹介しておいてなんなのですが、情報設計士として私がお勧めする実用的なチャートの次元数は、最大で三次元ぐらいです。それを超えると複雑なチャートになってしまい、解読行為に多大な負荷が発生してしまいます。技術的に可能だからといってなんでもやっちゃうのは設計者のエゴです。ユースケースに照らし合わせ、どこまで複雑にしても良いのか？常に考えるクセをつけましょう。

もっと別の例

バブルチャートによる国ごとの砂糖と脂肪摂取量

上記はドットチャートに似ていますが、ドットの１つ１つが大きさを持ち情報（連続量）を表現できます。一般的にはバブルチャートと呼ばれるものです。国ごとの砂糖と脂肪摂取量を表しています。

y軸が「一日あたりの砂糖摂取量」、x軸が「一日あたりの脂肪摂取量」、そしてマーカーの大きさが「成人の肥満率」となっています。

つまりこのバブルチャートは三次元のチャートです。マーカーの大きさに割り当てられた「成人の肥満率」をz軸（奥行き）とする方法もあったかと思いますが、「マーカーの大きさと肥満」がイメージとしてリンクしているので、この設計が最良だと思います。

チャートタイプ: バブルチャート（ドットチャートとほぼ同類）
１　y軸: 一日あたりの砂糖摂取量（g）
２　x軸: 一日あたりの脂肪摂取量（g）
３　マーカーの大きさ: 成人の肥満率（%）

ヒートマップによる平日の従業員1人あたりの売上

上記はヒートマップと呼ばれるものです。x軸とｙ軸の２つの軸を設定しグリッド化、そこに色を乗せることで分布（ヒートな部分）を知ることができます。

ではこちらもチャートフォーマットとファセットを整理してみます。

チャートタイプ: ヒートマップ
１　y軸: 曜日[月曜 , 火曜 , 水曜 , 木曜 , 金曜]
２　x軸: 従業員（名前）
３　グリッドの色: 売り上げ数（点）

まとめ

今回は、多次元の情報をチャート化するテクニックを紹介しました。

チャートは情報をグラフィカルにする最も一般的な技術でありデザインです。気をつけたいのは、多次元化できるからといって、ユースケースに反してまで複雑化しない！という点でしょうか。時には我慢して情報を単純化することもあるのです。

カオスな明日にネコパンチ！　キャットパッド藤井でした〜。