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

梅雨が嫌いなキャットパッド藤井です。こんにちは。実践で役に立つ設計キーワードをぼちぼち取り上げています。

第十一匹目は、大連続シリーズ「MIEM：ミーム」その４です。

今回は次元の詳細化にチャレンジしましょう。

表紙は、近所のため池のボス猫です。フテブテしさマックス。

• 前→十匹目「MIEM：ミーム」その3
• 次→梅雨明け？

チャートタイプをそのままに、ファセットを増やすテクニック

これまで説明してきたチャートでは、１つのファセットに、１つの次元（x軸、y軸、色や大きさや形状など）を割り当てていました。

このやり方はシンプルで分かりやすく、設計もしやすいのですが、チャートタイプがファセットの数に左右されやすいという問題をはらんでいます。

今回は、チャートタイプをそのままに、ファセットを増やして表現力を拡張する方法をいくつかご紹介します。

軸に複数のファセットを割り当てる方法

まずは単純なサンプルをみてみましょう。

たとえば「居住性満足度アンケート（注意：架空のアンケートです）」を見てみると、y軸は「回答人数ファセット」、x軸は「都市ファセット」となっています。

このチャートでは各都市でアンケートに答えてくれた人数が分かりますが、どのような回答であったかまでは分かりません。そこで、y軸の「回答人数ファセット」を「満足度ファセット」で細分化してみます。

なんだか色々なことが見えてきました。

東京は満足度がほぼ二極化しており、福岡は普通という印象をもった方が多いようです。札幌は満足している割合が多いようですね。（注意：架空のアンケートです）

このように、あるファセットを別のファセットで細分化する方式は随所で使えます。このとき細分化される側を親ファセット、する側を子ファセットと呼ぶことにします。

重要な注意点としては、親ファセットと子ファセットは必ず単位系を共有する必要があります。今回の場合は親も子も「人」ですね。

テクニック その１：シリアル（直列）タイプ

さて、上の例ではチャートタイプをバーチャートから変更せずに、ファセットを追加することができました。まとめるとこんな感じですね。

チャートタイプ

バーチャート[シリアル]

y軸

回答人数[ 満足度 ]（人）

x軸

都市

もう一度、同じチャートを見てみます。このチャートでは細分化された評価を都市ごとに縦に積んでいます。この縦積みタイプを「シリアル（直列）」と呼びます。要素を積んでいる様子から、スタックチャートと呼ばれることも。

シリアル（直列）は、親ファセットの要素比較に向いており、さらに細分化の状況を見ることで子ファセットの比率がわかります。

テクニック その２：パラレル（並列）タイプ

Amazonなどでレビューを読む際に、極端に良い／悪い評価の絶対数を見ることはありませんか？　「すぐに壊れる」と数人レビューされてる商品は怖くて購入に踏み切れない、という方もいると思います。

同じように、評価の絶対数だけを都市別に見てみたい時などに使うのが、「パラレル（並列）」という表現方法です。

チャートタイプ

バーチャート[パラレル]

y軸

回答人数[ 満足度 ]（人）

x軸

都市

パラレル（並列）では、細分化された要素をグループ化し、横に並べることで子ファセットの絶対数を把握しやすくすることができます。しかし、親ファセットの総数を比較するのには向いていません。

シリアルとパラレルの転換デモ

シリアルとパラレルは「積んでいる」か「並べている」かだけの違いなので、情報構造的には近しい関係にあり、データ的には全く同じものです。

下のチャートはシリアル・パラレルを動的に切り換えたデモです。要素の総数は変わらず、配置だけが変化していることに注目して下さい。

テクニック その３：レイヤー（重ねる）タイプ

シリアル（直列）とパラレル（並列）というテクニックは、親ファセットを子ファセットで細分化するものでしたが、第３のテクニック「レイヤー（重ねる）タイプ」は、その名の通りチャートを重ねることで表現力を増加させます。

チャートタイプ

バーチャート・ラインチャート[レイヤー]

y軸

降水量（mm）

気温（℃）

気圧（hPh）

x軸

月[1月、２月、３月、４月、５月]

レイヤー（重ねる）タイプのチャートは、同じx軸を持つチャートを２つ以上、単純に重ねるだけです。汎用性と拡張性があり、チャートの領域を節約したい場合によく使われます。（たとえば、２つの異なるチャートを合体させて半分の領域にできる）

レイヤー（重ねる）タイプを厳密なチャートとして表記する場合、２つ目以降のチャートのy軸ラベルも必要となります。その際、チャートの右側にラベルを追加していくのが一般的な解決策です。（上の例では、２つ目の「気圧」と3つ目の「気温」をチャート右側に追加しています。）

レイヤー（重ねる）タイプは、異なるファセット同士の相関関係をみせることに特化したチャートタイプです。上のチャートでは、「降水量が増えると気温が上がっている」ことや「降水量・気温が上がると、気圧が下がる」という相関関係を見出すことができると思います。

色々なことがわかるなら、もっとたくさん重ねてみてはいかがでしょう。

ダメですね。逆にわかりにくくなってしまいました。欲張って5つ、6つとチャートを重ねると、結果的に簡潔さや視認性が落ちてユーザーが意味を汲み取れなくなってしまいます。個人的な意見ですが、レイヤー（重ねる）タイプは３つ・４つのファセットを重ねると、ユーザーに伝わる情報量が最大になると感じます。

何度も言いますが、複雑なチャートを提示してユーザーに負荷のかかる読解行為を求めるのは、情報設計的には超ダメダメです。（アートとして捉えるなら問題ないでしょうが……）

情報設計において、「情報を増やすこと」と「複雑になってしまうこと」は常につきまとうジレンマであると覚えておいてください。

まとめ

今回は、ファセットを増やして表現力を拡張する方法を紹介しました。

MIEMを理解すれば、「どのようなチャートタイプを使って、どのようなファセットのどんな意味をユーザーに提示するのか？」を、合理的、かつ、論理的に設計することが可能になります。ぜひ、みなさんもチャレンジしてみてください。

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

• 前→十匹目「MIEM：ミーム」その3
• 次→梅雨明け？