Information Graphics

このタイトルの言葉を知るきっかけは、"オライリー"の"デザイニング・インターフェース"の"複合的なデータを表示する:ツリー、テーブル、その他のインフォメーショングラフィック"である。

そもそも、"インフォメーショングラフィック"ってなに？な人なので、検索してみた。検索をすると青山の会社様のサイトあたりが、ビジネス的な解説をしている。抜粋すれば、「情報をわかりやすく伝えるコミュニケーションデザインです」とのこと。

ちなみに、その会社様はこちら
http://www.tubegraphics.co.jp/


ソフトウェアに限らず、図で案内、解説するには分かりやすいのだが、その図を意図する話の体系化となると、応用から導かれるのかな。それとも、まあ、その本を読んでみる事に。


最初に、その目的とやらが箇条書きに

1. データはどのように組織化されてるか
2. どれとどれが関係しているか
3. どうすればデータの詳しく調べられるか
4. データを別視点で見られるよう並び替えができるか
5. 自分が知りたいものだけを見せてほしい
6. 具体的なデータ値はなにか

と言う様な事が乗っておりました。

けど、最初に戻って、書籍などで見かける図なんかと比べれば、3のデータの詳細を調べられるかは、出たとこ勝負なのでこれは無く、4のデータの並び替えは、パッケージ化されてからはなにもできないと言う話になるし、5の自分だけってのも難しいことが分かる。

別に、書籍の図に意味は無いということではなく、それだけ膨大な事を踏まえて進まないと、書籍の図と同水準にはならないのよと言う事である。

1. データはどのように組織化されてるか

データの流れにはこんな感じのものがある。

• 線形的(リスト)
• 表示式的(エクセルのシートのようなもの)
• 段層的(ツリー)
• ネットワーク的(フローチャート、論理回路)
• 地理的(マップ、配線図など)
• その他(ツリーマップ(分岐の仕方で変わる？))

ふむ、流れと言うかパターンはこんなものなのか、最初の会社様のページに実例が載っているので、そんなので見比べるのも良いし、実際日ごろ使ってるアプリケーションなんかを見比べてもよさそうだ。


2. どれとどれが関係しているか

こちらは、プレゼンなどで見受けられるグラフなどがいい例だろう。相手に見せたいものやら、ぱっと見て注意を引かないといけない数字なんってのもある。
この読んでる本なのだが、ここいらまでは実践的データが何一つのってないので、流し読みにはちょっとつらいのかな...とも思うのだが。

たとえば、なにかのプロジェクト運用中に何かの数字が注意しろのごとく、大きく表示されるとか。店舗の在庫整理などをリアルタイムに構築し、物品の在庫が付く無くなったものに対してアラートを大きく表示したり(その場合、表示する前に勝手にアクションを起こせってのが正しいようなきもする)。

まあ、何かの動きに対して、サインを見えるかする手法と考えても良いのかもしれない。



3. どうすればデータの詳しく調べられるか

なんらかの表なり、タイムシート、マップなどに散らばった詳細なデータをどう救い上げるかである。手法としては

• スクロールとパーン(GoogleMapのようなもの)
• ズーム(ビデオ編集ソフトに見られる)
• 関心地点の開閉(クリックすると詳細がリストで表示される設定画面)
• 関心地点のドリルダウン(マップのとある点をクリックすると、その詳細みたいな)

があると言う話になっている。これらの機能、Ajaxなんかのライブラリーでほぼサポートされてそうなきもするのだが、利用用途は、それぞれの目的により違ってくるので、そこいらは考えてないと、分かりにくいただのソフトになりそうだ。


4. データを別視点で見られるよう並び替えができるか

こちらは当たり前に使われているソート、並び替えだ。
この項目を読んでいると、目的が定まってないのか、色々な視点のお話が書いてある。けど、ひとつでも目的が発生すれば、エクセルなりなんなりで、枯れた使われ方と言うのも見つかるような気もする。

必要とされてるものがなんなのか、何をしたいのか。なんって、ユーザーにならないと分からないといわれればそれまでなのだが。エクセルである程度の見え方を模索しておかないと、余計な作業が発生するのか。しなければ、それに越した事はない。


5. 自分が知りたいものだけを見せてほしい

サブタイトルが答えのような気もするのだが、そのサブタイトル「検索とフィルタリング」。
こちらは、元データに検索してフィルタリングをかけるような話になるのか。書籍の図だと、あるものを載せるか、それ用のページを新たに作って、地下鉄マップとガソリンスタンドマップなどのジャンル分けと言えばよいのかな...。いろいろやりようはありそうだけど。


6. 具体的なデータ値はなにか

データ値、と言うよりは単位と考えた方が楽なのかも。いくつかの実装例が載っているのだが。

• ラベル
• 凡例
• 座標軸、ルーラ、スケール、タイムライン
• データディップ
• データのブラッシング

とのこと。この無いように関しては、ここに別ページが用意されてるので、私の興味がある項目しか追わない。(それ以外は、別途書籍を買って読んでくださいな。)


データティップ(datatips)

図の上で特定の箇所にマウスポインターが重なったら、別ウィンドウに詳細が表示される。が、その目に注目される内容がその図にないと話にならない。なんか、卵が先かひよこか的話になってきたぞ。

けど、Webならば、データティップとリンクの併用でもよさそうだけど。

事例はこちら
#NFL公式サイト内


部分的なズーム

データ項目の縮尺をちいさくして、密度の濃いページを表示。マウスの動きによって、データ項目を拡大し、読みやすくする。

アニメーション機能なのかと思うのと、データの表示有無で、データティップなのか、部分的なズームだけかの差なのか？違うな。な気もする。

事例はこちら
#datelensのカレンダー
サンプルの動画しかみてないけど、1画面中に全体とその週、その日を収めるには都合のよさそうなカレンダー機能だ。が、カレンダーと言う話になると、そういう実装でも用途は絞られてしまうのが、残念。ってか、仕様だな。

Outlook日本語版使ってる人いましたら、使ってみて感想を...。その前に、Ajaxで実装してもよいのかも。PDAなどの制限の多いものほど、そのUIの依存度は強いのかと思うけど。まるでPOBOXを最初に触ったときの思いに近いのかな。


あとがき

本の内容そのままに書いてしまったのだが、結局は道しるべ本なのだと思ってみた。この本を読んだから正解が簡単に見つかることもあるのかもしれないが、ほとんどは、教養として蓄積するだけなのかと思う。

けど、本の存在そのものでもあるのだが、こうして書いていけば、頭はある程度整理され、パターン化のお手伝いになるし、なんらかの絞込み、フィルタにはなる。

内容としては、満足であるけども、タイムラインのお話がもうちょっと書いてあれば、いや、これで十分なのかもしれない。そう思えてきた。