1999-11-19[n年前へ]
■バナー画像の情報量を探れ 
1文字辺りの情報量編
今回はWEBの世界でよく見かけるバナーについて考えてみたい。
そのきっかけは本WEBにはバナーが存在しないことに気付いたからである。さぁ、作ってみようかと考えた。
作ろうとしたのだが、そもそも、「バナー」って一体何なのだろう?という疑問が沸いた。そこで、まずは「バナー画像」について調べてみることにした。
「バナー」というのは、ある意味WEBの顔である。いや、名刺という方が相応しいかもしれない。あるいは、「招待状」とでも言い換えた方が良いだろうか。そのバナーを辿って、WEBに辿りつく、あるいは、WEBを知るわけであるから、軽んじるわけにはいかないだろう。だから、その「バナー」についてはじっくり考える必要があるのだ。
今回は、特に「マイクロボタン」という88x31ピクセルのバナーについて考えてみたい。よく見かけるサイズでもあるし、私が好きなサイズであるからだ。ちなみに、
この88x31のサイズのバナーは
- IAB ( http://www.iab.net/ )
そのIABのWEBの中に
- IAB/CASIEAdvertising Banner Sizes ( http://www.iab.net/iab_banner_standards/bannersource.html)
さて、その「Micro Button」というバナーについて、私がよく楽しむ、あるいは、使っているWEBの「バナー」を参考にしながら、考えてみることにする。
それでは、私がよく見に行くWEBの中からそのMicro Buttonに近いものをピックアップしてみる。それらを参考にしながら、hirax.netの「できるかな?」用の「マイクロボタン」バナーを作成してみるのである。
今回、参考にしたのは、以下の10個のバナーである。これらのWEBはいずれも非常に参考になるものばかりである。私の「マイクロボタン」作成にもきっと参考になると思うのである。また、今回他のWEBのバナー画像を使用している。その言い訳として、「本ページはリンクページ」である、ということにしておきたい。
まずは、技術系WEBの双璧である「今日の必ずトクする一言」と「Fast&First」だ。
 http://www.tomoya.com/ |  http://www.cds.co.jp/ff/ |
 http://www.infoseek.co.jp/ |  http://www.goo.ne.jp/ |
 http://www.microsoft.com/japan/ |  http://www.apple.com/ |
 http://www.microsoft.com/japan/ |  http://home.netscape.com/ja/ |
 http://www.real.com/ |  http://www.apple.co.jp/ |
- 青色がよく使われている。
- 検索サイトは赤色が主である。
また、検索をかける時の急いた気持ちと赤色は非常に合う。それは、パトカーや救急車と同じである。そうしてみると、上の二つの傾向は他の例でもあてはまるものが多いかもしれない。他の検索サイトのYahoo!でも主たるイメージカラーは赤である。もちろん、それに当てはまらないサイトも沢山あるが...
さて、これら10個の「バナー」と、自分用に作成した4つの「バナー」を例に示しながら、色々と考えて見ることにする。以下に「ノミネート」されたバナー達を示してみる。
| | | |
| | | |
| | ||
 |  |  |  |
まずは、そのバナー画像が持つ情報量について考えてみる。まずは、そのバナー画像の中の文字数に注目してみる。情報を伝える上で、文字というのは非常に重要と考えるからだ。その文字を伝えるためにどの程度ファイルサイズというコストがかかっているか、考えてみるのである。
ここで、文字数は次のように考えている。
- 英数文字1文字=1Byte
- 日本語1文字=2Byte
なお、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の作者の考えが現れているようにも思う。
しかし、実は私はバナー画像を貼るのは自分ではあまりやらない。しかし、今回作成したバナー画像達、
______
をもし使用したい人がいるならば、それはもちろん大歓迎である。そんな奇特な人がそうそういるとも思えないが、もしいたら、好きな色・パターンを使って頂けたら幸いである。自分では、やらないのだけれど...
そうそう、最後にもう一度書いておこう。これはリンク集であります。
2000-02-06[n年前へ]
■パノラマ写真と画像処理 Pt.1
パノラマ写真を実感する
「パノラマ」という言葉は何故か大正ロマンを感じさせる。かつて、流行ったパノラマ館や江戸川乱歩の「パノラマ島奇譚」という言葉がそういったものを連想させるのだろう。私も自分で写真の現像・焼き付けをしていた頃は、フィルム一本まるまる使ってベタ焼きでパノラマ写真を撮るのが好きだった。
そういう癖は持ち歩くカメラが「写るんです」と「デジカメ」へ変化した今でも変わらない。例えば、
の時に撮ったこの写真もそうである。 |
そしてまた、次に示す写真もそうだ。これは1999年夏頃の早朝に箱根の湖尻で撮影したものである。360度のパノラマを撮影したものだ。
 |
観光に行った先で撮影したと思われるかもしれないが、残念ながら違う。出勤途中に撮影したものである。豊かな自然がありすぎて、涙が出そうである。
パノラマ写真としては、こういう景色を撮ったものも良いが、人が写っているものも良い。私の勤務先がこの大自然の中に移転してくる前、都会の中にあった頃に居室で撮ったパノラマ写真などはとても面白い。窓の向こうにはビルが見えたり、周りに写っている人ですでに退職した人が何人もいたりして、涙無しには見られない。
もちろん、こういった写真はパノラマ写真で楽しむのも良いが、もっと実感できるものに加工しても楽しい。私がかつて都会の居室で撮影したものは、当時はAppleのQuicktimeVRのムービーファイルに変換して遊んでいた。今はもうない居室の中をグリグリ動かすのはホロ哀しいものがあり、とても味わい深かった。
ところで、WEB上でそういうパノラマのVRファイルを見せるにはどうしたら良いだろうか？もちろん、AppleのQuicktimeVRを用いれば良いわけではあるが、プラグインが必要である。私はQuicktimeは好きであるが、ブラウザーのQuicktimeのプラグインは嫌いである。WEBを眺めているときに、「Quicktimeのアップグレードはいかがでしょう？」というダイアログが出ると、少しムッとしてしまう。そこで、Javaを使うことにした。いや、もちろんJavaをサポートしていないブラウザーもたくさんあるが、こちらの方がまだ好きなのである。
そのようなパノラマのVRを実現するJavaアプレットには、例えば
- Panoramania
- http://www.lamatek.com/lamasoft/Panoramic/test.html
- Ｊａｖａアプレット（パノラマver1.1）
- http://village.infoweb.ne.jp/~fwbc6098/java/panorama/panorama.htm
- TheVRApplet1.0
- http://www.physik.uni-greifswald.de/~jonas/VRApplet/VRApplet.html
- how toinsert the panorama show (java applet) inside your home page ?
- http://persoweb.francenet.fr/~carl/brique/exapano1.htm
さて、ここまでは単なる前振りである。本題は、実はこれから始まる。先日このようなメールを頂いた。
私はWindowsを使っているのですが、AppleのQuicktimeVRに興味があって、QuicktimeVRのパノラマ・ムービーを作っています。しかし、素材となる画像の作成に四苦八苦しております。ご承知の通り、
- ライカ版カメラに２４ミリ広角レンズをつけて、
- 三脚にパノラマヘッドをつけて、ぐるりと周囲を１２枚撮りして、
- 現像、プリントし、
- スキャニングして、ステッチャソフトでレンダリングし、
- それをMacintosh上でMake-QTVR-Pａｎｏｒａｍａにドロップして、
- ８ミリビデオに広角レンズを付け、
- ９０度横倒しにして、１０秒程度で１回転するようにステッピングモーターで駆動するパノラマヘッド（自作）に乗せ、
- 高速シャッター撮影し、
- マックのＡＶ機能で円周１２枚の静止画を取り出
- し、
- ８ミリビデオを横倒しにして、
- モーター回転するヘッドでぐるりと３６０度撮影し、
- その撮影した動画ファイルの、各フレームから走査線にして数本分を抽出し（インターレースで２５６本のうちセンター１２８本目の前後数本の走査線分）、
- それを貯めて１枚のｊｐｇファイルにする、
- そのJPEG画像をMakeQTVRPanoramaの入力にして、パノラマムービーを作る、
その場合には、スリットスキャンカメラを入手し、それをカラープリントする設備を準備すればいいのでしょうけど、高価です。
そこで、
長々と分かりにくいことを書きましたが、要は、「マックで動く電子スリットスキャンソフト」をなんとか作っていただけないでしょうか？もし、そのようなソフトがあれば、
まずは、答えを先に書いてしまおう。私が作らなくても、
- NIH-Image (MacOS)
- ScionImagePC (Windows)
- 複数画像(動画)からの走査線抽出
ScionImagePCの動作画面を以下に示す。NIH-Imageとほぼ同じである。
 |
これらのソフトのStack-Slice機能を用いれば「複数画像(動画)からの走査線抽出」ができる。その使用例と、その面白い座標軸変換について考えてみたい。しかし、このページは少々重くなってきた。まして、走査線の抽出の話は使用画像が多くならざるをえない。そこで、次回、詳しく使用例を紹介することにする。よく、次回といったまま数ヶ月経つことがあるが、今回は大丈夫である。少なくとも数日後には登場することと思う(多分)。
あれっ、ここまで書いてからinfoseekで検索すると、
- パノラマ写真のひっみっつっ!
- http://www.imagica.com/nomad/sig98/hitachi/
2003-12-29[n年前へ]
■富士山バーチャルお鉢めぐり
富士山のてっぺんを散策できる富士山バーチャルお鉢めぐり from 富士
2004-12-09[n年前へ]
■風船で空へ
たくさんの風船につかまり空に飛ぶ「ooning into the Sky」雲の上の空まで風船につかまって行ってみる。その様子(動画)を眺めると、(やる気になれば)なんでもできるような気にさせられるかも。 from BOX HEAD ROOM
2005-06-11[n年前へ]
■「Mac for intel」と「スティーブ・ジョブス＠開発現場」
「intelのCPUへの移行」を発表したApple WWWC 2005のKeynote speechビデオを眺めていて、クパチーノのApple社内で行われていた移開発作業のようすを想像し、先日聞いたNeXT STEP 3.0の頃の開発現場に現れるスティーブ・ジョブスの姿の話を思い出した。
それは、製品出荷日が近づいてきて、開発メンバーの疲労が極限値に達している頃、「よれよれの服」と「無精ひげ」と「疲れた顔」で「リフレッシュコーナー」に現れると、「おれもガンバルから、おまえも頑張れ」としみじみ語る、という話である。そして、その言葉とジョブスの姿を見た(精神的にも肉体的にも)疲れた(単純な)社員たちのやる気は(単純に)180 % アップしたという。
ふと周りを見ると、ここは機械が林立する実験室。今日見た景色は「霧の箱根山中の実験室」 もちろん、ジョブスはこに現れれることはない…。さてさて、コーヒーでも飲んで、カフェインの力でやる気を(強引に)180 % アップさせようか。
」など。
