「色に情報を運ばせる」テクニック
2006.06.29
昨日のエントリーで、プレゼンの資料において、「色に情報を運ばせる」ことについて簡単に触れたが、少し説明が不十分だったと思われるので、具体的な例をあげてもう少し分かりやすく説明しよう。
まずは下の図を見て欲しい。
ブログに関わる人たちをグループ化した図だが、グループが三階層に分かれることと、その数が上位層になるほど数が少なくなることを表現する、という目的はきちんと果たしている。
問題は色使いである。せっかくカラー画面を使ってプレゼンをするのだからと、色を着けたのだろうが、色分けそのものは何の役も果たしていない。「役目はないが、無駄ではなかろう」というのが通常の考え方だが、Tufteはそれを「情報量の無駄使い」と呼ぶ。彼ならば、こんな「色使い」を薦めるだろう。
上位層に行けば行くほどブログとのかかわりが「濃い」ことを色の濃淡で表している。つまり色情報がちゃんと役割を果たしているのだ。それに加え、この段階ではまだ青系の色しか使っていないので、別系統の色で表現した図を重ねあわせることが可能になるのである。たとえば、ブログと既存メディアを比較したこんな図を作ることが可能になる。
ちなみに、このテクニックはプレゼンだけでなく、アプリケーションやウェブサイトのユーザーインターフェイスにも応用が可能なので、覚えておいて損はしないと思う。
これだけだと、色が意味するところと、三角のとんがりが、
よく似た情報を意味しているので、
まだ、もう少し無駄遣い。
もう一工夫、いるのでは？
Posted by: べんじゃ | 2006.06.29 at 23:59
ウェブデザインにて色で情報を分ける方法はアクセシビリティ的（視覚障害者、色弱者）にはひどいと思われますが、そのあたりどうお考えですか。
Posted by: aa | 2006.06.30 at 00:34
>ウェブデザインにて色で情報を分ける方法はアクセシビリティ的（視覚障害者、色弱者）にはひどいと思われますが、
" Ensure that text and graphics are understandable when viewed without color." (http://www.w3.org/TR/WAI-WEBCONTENT/#gl-color)
“色を再現できない環境で表示しても、テキストやグラフィックスが理解できるようにする”（訳：ZSPC）ですね。
つまり、上記の図の色分け自体は、アクセシビリティの観点からは問題無いと思われます。
Posted by: accessibility | 2006.06.30 at 04:02
青色三角形の方のまんなか（ブロガー）の青色だけ、ちょっと黄色み（緑青的なの）が強いのが逆に気になります。色の受け取り方は主観的な部分が大きいだけに、その辺難しいですね。
ちなみに「色で情報を…」というタイトルで、昔、士郎正宗さん（漫画家、『攻殻機動隊』の作者）が著作の中で「カラーバーコード（フルカラーのバーコードで扱う情報量を飛躍的に拡大させる）」を使用していたのを思い出しました。
Posted by: _ | 2006.06.30 at 16:06
>> Guideline 2. Don't rely on color alone.
>> Ensure that text and graphics are understandable when viewed without color.
の部分ちゃんと読みましょう．
"ガイドライン２：色だけに頼るな．"
"色が無くても判るような文章や図になっているか確認しなさい．"
って書いてありますよ．
色だけで情報を伝えようとする手段はアクセシビリティの観点から問題有りって書いてますよ．
Posted by: 通りがかりの人 | 2006.06.30 at 20:00
>>通りがかりの人
この図において色は情報を補助するもので、「色だけで情報を伝えようと」している訳ではないと思いますよ。十分三角形のヒエラルキー構造だけで伝わると思いますし。
それに既出ですが、色弱者の一部は明度を見分けることは出来るので、明度差を中心に作図する方法は問題ないでしょう。
そしてwebデザインにおいてアクセシビリティが大切だとしても、アクセシビリティ以上に大切なものがある場合もあります。作図法についての解説に、図の見えない人への配慮がどこまで必要でしょうか。ターゲットを明確にすることは大切です:-)
Posted by: しがないwebデザイナ | 2006.07.03 at 00:19