iTunes風な容量ゲージを表示する「Gauge.js」
何らかのサービスを考える際に、それを誰が見ても分かるようにするというのはデザインを決める上で重要な考え方だ。そのためには文字での説明ではなくアイコンや、イラストによって分かりやすく情報を提供する必要がある。
iTunesのゲージ風
とは言え、素人がそれを簡単に実践するのは難しい。その際役立つのが世界でビジネスを展開している企業のデザインだ。そこには英語圏のみならずサービスを利用する人たちにとって分かりやすくする工夫がこらされている。iPodで一気に盛り返しているAppleのその一つだ。
今回紹介するフリーウェアはGauge.js、iTunesで用いられている容量ゲージを表示するJavaScriptだ。非商用に限りフリーとなっている。
iTunesでは音楽や動画、写真と言ったメディアの種類に応じてどれくらいの容量を占めているのかを横向きのゲージで表示している。分かりやすい色分けがされ、全体のどれ位をどのメディアが占めていて、後どれくらいの余裕があるのかが一目で分かる。
表現パターンは多数
Gauge.jsはその表示を再現してくれる。色分けの種類は無数に増やすことができ、表示の長さも可変だ。さらに単純な項目別の色分けだけではなく、グラデーションを効かせて表示することもできる。もちろんJavaScriptなので動的に変更することも可能だ。
ゲージの角を丸くする設定もでき、凝ったゲージを容易に作成できる。円グラフを使う手もあるだろうが、より狭いスペースで使える分、Gauge.jsは使い勝手が良い。とは言えあまり項目が多い場合には見づらくなってしまうのでご注意を。
**gauge.js (javascript programmable gauge)