hirax.net::バナー画像の情報量を探れ::(1999.11.19)

■バナー画像の情報量を探れ　

1文字辺りの情報量編

　今回はWEBの世界でよく見かけるバナーについて考えてみたい。
　そのきっかけは本WEBにはバナーが存在しないことに気付いたからである。さぁ、作ってみようかと考えた。
作ろうとしたのだが、そもそも、「バナー」って一体何なのだろう?という疑問が沸いた。そこで、まずは「バナー画像」について調べてみることにした。

　「バナー」というのは、ある意味WEBの顔である。いや、名刺という方が相応しいかもしれない。あるいは、「招待状」とでも言い換えた方が良いだろうか。そのバナーを辿って、WEBに辿りつく、あるいは、WEBを知るわけであるから、軽んじるわけにはいかないだろう。だから、その「バナー」についてはじっくり考える必要があるのだ。

　今回は、特に「マイクロボタン」という88x31ピクセルのバナーについて考えてみたい。よく見かけるサイズでもあるし、私が好きなサイズであるからだ。ちなみに、

という程度の大きさである。

　この88x31のサイズのバナーは

• IAB ( http://www.iab.net/ )

によれば、Micro Button というらしい。IABというのはInternet AdvertisingBreau (インターネット広告協議会)の略である。1996年4月にWWWで広告スペースを販売するアメリカの大手商業サイトが集まってできた団体である。
　そのIABのWEBの中に

• IAB/CASIEAdvertising Banner Sizes ( http://www.iab.net/iab_banner_standards/bannersource.html)

という情報がある。そこに、このMicro Buttonというものが載っている。広告屋さんは色々面白いことを考えるものだ。

　さて、その「Micro Button」というバナーについて、私がよく楽しむ、あるいは、使っているWEBの「バナー」を参考にしながら、考えてみることにする。

　それでは、私がよく見に行くWEBの中からそのMicro Buttonに近いものをピックアップしてみる。それらを参考にしながら、hirax.netの「できるかな?」用の「マイクロボタン」バナーを作成してみるのである。
　今回、参考にしたのは、以下の10個のバナーである。これらのWEBはいずれも非常に参考になるものばかりである。私の「マイクロボタン」作成にもきっと参考になると思うのである。また、今回他のWEBのバナー画像を使用している。その言い訳として、「本ページはリンクページ」である、ということにしておきたい。

　まずは、技術系WEBの双璧である「今日の必ずトクする一言」と「Fast&First」だ。

技術系WEBの双璧

http://www.tomoya.com/

http://www.cds.co.jp/ff/

　また、情報検索に便利な「infoseek」と「goo」である。

http://www.infoseek.co.jp/

http://www.goo.ne.jp/

　そして、OS部門では「Microsoft」と「Apple」である。Linux系辺りも入れてみたかったのだが、今回は断念した。

http://www.microsoft.com/japan/

http://www.apple.com/

　次は、ブラウザー部門である。「IntenetExplorer」と「NetscapeCommunicator」である。

http://www.microsoft.com/japan/

http://home.netscape.com/ja/

　そして、最後にマルチメディア系の双璧である「real player」と「QuickTime」だ。

http://www.real.com/

http://www.apple.co.jp/

　こうして並べてみると、次のような二つの傾向、

1. 青色がよく使われている。
2. 検索サイトは赤色が主である。

に気付く。青という色が持つ印象(空、宇宙、水、海)が好まれるのはよく納得できるような気がする。Explorerとか、Navigtorというような言葉と同じである。
　また、検索をかける時の急いた気持ちと赤色は非常に合う。それは、パトカーや救急車と同じである。そうしてみると、上の二つの傾向は他の例でもあてはまるものが多いかもしれない。他の検索サイトのYahoo!でも主たるイメージカラーは赤である。もちろん、それに当てはまらないサイトも沢山あるが...

　さて、これら10個の「バナー」と、自分用に作成した4つの「バナー」を例に示しながら、色々と考えて見ることにする。以下に「ノミネート」されたバナー達を示してみる。

10個のバナーと自作の4個のバナー

　まずは、そのバナー画像が持つ情報量について考えてみる。まずは、そのバナー画像の中の文字数に注目してみる。情報を伝える上で、文字というのは非常に重要と考えるからだ。その文字を伝えるためにどの程度ファイルサイズというコストがかかっているか、考えてみるのである。

ここで、文字数は次のように考えている。

• 英数文字1文字=1Byte
• 日本語1文字=2Byte

そして、そのバナー画像のファイルサイズを文字数で割った「文字(Byte)あたりのファイルサイズに注目してみるのだ。単位は(Byte/Byte=無次元)である。その値が小さいほうが、情報密度が高いと考えてみるのである。
　なお、Fast&Firstのバナー画像は、マイクロバナーとはかなり異なるサイズなので、除外した。また、言うまでもないと思うが、ここでつける順列はあくまでシャレである。念の為に書いておく。

バナー画像	画像中の文字数とそのバイト数 (Byte)	ファイルサイズ(Byte)	1文字あたりのファイルサイズ(Byte/Byte)	ファイル形式
	今日の必ずトクする一言 (22Byte)	2472	112	JPEG
	Fast&First (5Byte)	-----	-----	------
	infoseek Web Kit (14Byte)	750	54	GIF
	goo (3Byte)	881	294	GIF
	Windows2000 (11Byte)	3105	282	GIF
	Mac (3Byte)	465	155	GIF
	GET MicrosoftInternetExplorer (28Byte)	874	31	GIF
	Netscape Communicator 4.7 (23Byte)	1003	44	GIF
	real player 7 FREE (15Byte)	864	58	GIF
	QuickTime Get 4. (14Byte)	3116	223	GIF
	hirax.net できるかな (19Byte)	662	35	GIF
	hirax.net できるかな (19Byte)	648	34	GIF
	hirax.net できるかな (19Byte)	763	40	GIF
	hirax.net できるかな (19Byte)	2348	124	GIF

　その、1文字あたりのファイルサイズ(Byte/Byte)順に並べてみる。本WEBのバナーが上位に入っているのは、このテスト用にチューニングしたからである。当然だ。決して、本WEBが優れているという意味ではない。

1: 31 GIF	2: 34 GIF	3: 35 GIF	4: 40 GIF	5: 44 GIF
6: 54 GIF	7: 58 GIF	8: 112 JPEG	9: 124 GIF	10: 155 GIF
11: 223 GIF	12: 282 GIF	13: 294 GIF

　こうしてみると、一位のIEの1文字(Byte)辺り31Byteという情報密度はかなりのものである。最下位のgooは、3文字というトータルの文字情報量の少なさが足を引っ張っている。ファイルサイズ自体は一位のIEとほぼ同じ900Byte弱であるが、いかんせん文字情報量が少ない。そのため、「文字情報密度」が小さいのである。
　「今日の必ずトクする一言」「QuickTime」などグラデーションを用いたものは、色数を少なくしづらいのがネックだったろう。また、「今日の必ずトクする一言」は唯一のJEPG陣営である(->後編参考)。

　今回はあくまで導入編ということで、「文字情報密度」について考えてみた。次回は、バナー画像のエントロピー・情報密度などについて考えてみたいと思う。

　さて、バナー画像自体は「小さな絵葉書」みたいで私はとても好きだ。小さな中にそのWEBの作者の考えが現れているようにも思う。
　しかし、実は私はバナー画像を貼るのは自分ではあまりやらない。しかし、今回作成したバナー画像達、

______

をもし使用したい人がいるならば、それはもちろん大歓迎である。そんな奇特な人がそうそういるとも思えないが、もしいたら、好きな色・パターンを使って頂けたら幸いである。自分では、やらないのだけれど...

　そうそう、最後にもう一度書いておこう。これはリンク集であります。

■この記事と関係がある他の記事