膨大な数のFlashサイトが存在していますが、ユーザビリティを確保しているサイトは意外と少ないのではないでしょうか? デザインはコミュニケーションです。デザインが良いということはユーザーにとっての使い勝手も良いということ。本コラムでは、デザイン性とユーザビリティの高いサイトを解剖して、その秘密を制作という視点から解き明かしていきます。

Flashで膨大なデータをスマートに視覚化する「newsmap」

Flashが得意とする分野は幾つか存在しますが、その中に膨大なデータの視覚化があります。表現の幅が広いのはもちろんですが、Flashを利用することにより、リアルタイムでデータの「今」を視覚化することが出来ます。世界情勢を視覚化した好例としてnewsmapがあります。Google Newsからニュースを取得し、まったく違う形で世界情勢を見渡すことが出来ます。視覚化をする際、扱うデータの何を利用者に知ってもらうかにより、表現方法を変えなくてはいけません。newsmapでは、ツリーマップというデータを複数の入れ子になった四角形がツリー状となり表示されるテクニックを用いています。これにより、どのデータ（この場合ニュース）が重要なのかを視覚的に確認することが出来ます。また、隙間なく四角形を並べてスペースを有効利用するので、より多くのデータを一挙に観覧することが可能になります。

バージョン2で、より"使える"アプリに

2004年に公開されたnewsmapですが、2009年の4月にバージョン2になりました。前バージョンと同様にツリーマップを用いて膨大な数のニュースを一望出来るわけですが、今回からより使えるアプリケーションへと成長しています。データを視覚化したサイトはnewmapに限らず数多く存在しますが、一度見るにはおもしろいけど、何度も訪れて使ってみたいと思えるものはそれほどありません。従来のnewsmapもツリーマップを使った好例とはいうものの、ニュースを見るために訪れたいサイトとはいえませんでした。例えば、今注目されているニュースのタイトルを一望出来たものの、実際の記事を読むには外サイトへアクセスするので、読む度に毎回ブラウザの「戻る」ボタンを押す必要がありました。こうした利用者の不便を解決しているのがバージョン2です。

前バージョン(左)と新バージョン(右)との比較。ツリーマップに使われている色も若干変わっているのが分かります

従来からブラウザのウィンドウを変えても柔軟にレイアウトが変化するようになっています

注目したい新機能とユーザビリティ

新バージョンで最も注目する機能は２つあります。まずひとつは検索が可能になった点。ニュースは従来からカテゴリごとに色分けがされており、絞り込みは可能でしたが特定のトピックの視覚化をすることが出来ませんでした。検索が可能になったことにより、自分が欲しいと思う情報の視覚化が可能になり、表示が出来るツリーマップの数が無限に広がりました。検索で見つけた欲しいツリーマップにすぐアクセス出来るように追加されたのが２つ目の新機能であるディープリンクです。newsmap上で行うフィルタリングや検索にはすべて固定リンク用意されており、操作する度にリアルタイムでアドレスバーのURLが変化します。見たいツリーマップにすぐアクセス出来るだけでなく、他の人と共有もしやすくなりました。

newsmap上での操作は URL とブラウザのタイトルバーにリアルタイムに反映されます

検索はアルファベットを入力する度にツリーマップに表示される結果が変化するようになっています

検索はタイトルだけでなく、概要やソース名から探すことも可能です

前バージョンにあった使い勝手を改善している点もあります。従来はタイトル以外の記事情報を読むことが出来なかったのに対し、バージョン2ではマウスオーバーをすると記事の概要、写真、情報ソース、関連記事の数が表示されるようにあり、newsmap内で流し読みが出来る情報量が豊富になりました。また、ツリーマップの表示方法にも改善がなされています。以前は、正方形に近い四角形が幾つかありましたが、今バージョンからより横幅がある長方形として表示されるようになっています。一度に読めるニュースの数は変わりませんが、横に長くなったことで１行の文字数が増え可読性の向上につながっています。

クリックをすると従来と同様、ニュースサイトへアクセスしますが、マウスオーバーにするとミニウィンドウが表示され、ある程度内容が分かるようになりました

操作性は前バージョンに比べて向上していますが、今後マウスホイールやキーボードを使ってニュースを選択出来るようにすると、より流し読みがしやすくなるでしょう。

ツリーマップというダイナミックな表現を実現しつつ、利用者が欲しいと思われる機能の実装や「ニュースを読む」という目的に合わせた調整が行われている新バージョンnewsmap。近年、データの視覚化は盛んに行われており、面白みのあるコンテンツとして用いられていることがあります。newsmapは見た目がおもしろいですが、ニュースを読むことを目的として訪れてたとしても不便に感じないアプリケーションへと成長しつつあります。