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-06-16[n年前へ]
■ヘルメットの色空間分布
学生運動の色空間とグラフ配置
さて、私は「迷信の押し付け」は大嫌いである。もちろん、その人の中で信じている分には結構で、それも文化の一つだとは思う。しかし、それを私にまで押し付けられるととたんにムッとしてしまう。そんな私ではあるが、「占い」はそう嫌いでもなかったりするのが面白いところだ。いや、むろん「占い」を信じているわけでは毛頭無くて、「遊び」として好きなのである。
何しろ、占いというのは「根拠無し」に「決めつける」ことが出来る素晴らしいものである。何の前振りもなしに
「君はお菓子の食べすぎでデブになる。」と言うと、普通であれば張り倒されることだろう。しかし、それを
「君の前世は象だった。だから、君は太る運命だ。」と言えば、どうなるだろうか。悪いのは「前世」や「運命」であって、「口の悪い私」ではないのである。それどころか、
「えぇ〜、なになにその占い〜。教えて、教えて〜」という好意的な反応すら予想される(あくまで予想だけ)のである。これを便利と言わずして、何と言おう。
しかも、占いの特徴の一つは後付けの結論・理由付けが可能、というところにある。その結果、「占い」というものは現実にとても近くなり、さらに「本当らしさ」がアップする。そういうわけで、私は大好きなのである。
例えば、私の職場の私の机の端には、名前、生年月日、アンケート式etc.といったありとあらゆるタイプの占いを職場の人がやった結果がファイルされている。そして、恐ろしいことにそれらの紙には、それを読んだ人の書き込みがあるのである。例えば、私の性格占いの結果をプリントアウトした紙を見てみると、「もう少しイイ子になる必要があります。」という文章の下に赤線が引っ張ってある。この赤線を書き込んだのは誰だか知らないが、実に失礼な輩である。また、「思ったことをすぐ口に出す傾向があります。」という部分は二重線が引っ張られており、これなども世の中には訳のわからないことをする人間がいる良い一例である。そのくせ、「とても心優しいひとです。」という部分は赤線で消されたりしているのが、私としては理解に苦しむ部分でもある。きっと、この書き込みをした輩は「心優しい」という意味を知らないのであろう。
そういうわけで、こういった人々による書き込み・添削のされた占いの結果、すなわち、後付けの結論・理由付けのされた占いの結果と言うのは実に恐るべき迫真性を持つのである。そして、同時に笑うことができる(本人は別にして)、という素晴らしいものなのである。
ところで、私は「色」が大好きである。もう、何回も「色」に関する話題をしているのだから、そんなことは言うまでもないかもしれない。そこで、「色」と「占い」との関連で言うと、一時期「色占い」というものが流行っていた。「ＸＸ色で連想する人は誰？」という質問をして、この色で連想された人はあなたにとって恋人、とか、この色は友達、とか占うのである。
私もこの「色占い」が流行ったときにやった記憶があるのだが、これが全く役に立たなかった。役に立たなかった理由の一つに
- 私の周りの人は服なんて着替えない。
- だから、いつも同じ服を着ている。
- その服のイメージ = その人のイメージになる。
そのために、当時の学生の典型的?な姿を下に示してみる。いや、正確に言えば典型的ではなくて、単に目立っていた学生と言うほうが正しいかもしれないが、その姿を示してみたい。
 |
この絵を見るとわかるように、頭の部分を覆うヘルメットというのは何より目立つのである。この人達が身に付けている服装というものは、そんなにカラフルなものではない。いや、ハッキリ言えば、特徴のない色ばかりである。そりゃそうだ、個性的で目立つ色の服なんか着ていたら、個人的に目をつけられてしまう。
しかし、それに対してヘルメットの部分は実にカラフルである。セクトごとに個性ある色分けがされている。人目見ればわかるような色使いがされている。それは、チームスポーツのユニフォームと同じである。敵か味方か一目で見分けがつかないと、困ってしまうわけである。
そして、そのヘルメットの色の印象が強いがために、
その人達の印象 = その色というような状況すら生まれるのである。だから、先の「色占い」のような質問はそのような場においては、何の意味も持たないのである。それは単なるセクト分け問題と化してしまうのである。とたんに、生臭い問題になってしまうのだ。
ところで、さまざまな場所に位置する各セクトが、どのような「色」の住み分けをしているかは、非常に気になるところである。「色」に常日頃こだわってきた「できるかな?」であるから、各セクトのヘルメットの色空間における空間分布を見てみることにしたい、と思う。
そこで、マルチメディア共産趣味者連合 中央委員会の
- ヘルメットで見るセクト( http://marukyo.cosm.co.jp/MET/index.html )
 |
こうしてみると、ヘルメットによる色表現を考えてみると結構広い「色空間分布」になっているようである。カラー画像をヘルメット画像に色分解する、ヘルメットディザなんていうのも実現できるかもしれない。
しかし、これだけではつまらないので、
- 学生活動家組織の変遷 (http://marukyo.cosm.co.jp/KEIZU/gakusei-keizu.html )
そして、グラフ配置の結果の一例を色空間に重ねてみたものを次に示す。
 |
この画像と先程の「ヘルメットの色空間分布」を比較してもらうと、結構似ているのが面白いところだと思う。もちろん、似たような配置になったものを使用したわけではあるが、それにしても面白いと思うのだが、どうだろうか？
私が大学に入学した当時は、セクト間の陣地争いが盛んだった。といっても、私のいた学校がガラパゴス諸島のように(その手の部分では)化石的な学校だったからで、決して古い昔の話ではない。授業をやっている横の廊下で、内ゲバで殺される人がいたり、朝のキャンパスで血みどろの戦いが行われていたりした。実際のところ、それは私にとって結構衝撃的な出来事だった。少なくとも、そのせいで、あの手の陣地争いを大嫌いになったことは確かだ。とりあえず、現実空間ではともかくこの色空間においては、そんな陣地争いがないのが良いところだ。
さて、今回はタイトルをゲバ字(トロ字)っぽくしてみた。ゲバ字(トロ字)というのは、チラシや立て看などでよく使われた(る?)文字のことである。だから、別に「こういう形」というものがあるわけではない。とりあえず、それっぽくしてみたわけであるが、どうも本WEBにはこういうフォントは似合わないようである。うーむ、失敗である。
2000-06-26[n年前へ]
■WEBの文章
わたしは、読む人の力をいつでも信じています。そうでなかったら一行も書けません。また、見抜く目を最高にもった人を想定読者にするのが、このメディアを続けていくための秘訣でもあります。----------- from 「からーふぃくしょん」（リンク）（リンク）
2000-08-04[n年前へ]
■あなたの声が、すぐそばにある
エジソン式コップ蓄音機の逆襲
前回、
で学研の「大人の科学」の中から「エジソン式コップ蓄音機」を購入して組み立ててみた、という話を書いた。今回はその続編である。前回は組み立ててはみたが、なかなか良い音を録音・再生することができなかった。しかし、「エジソン式コップ蓄音機」の実力はそんなものではないわけで、今回はその「逆襲」というわけだ。 一応念のために、前回組み立てた「エジソン式コップ蓄音機」の写真を下に示してみよう。
 |
蓄音機の上の部分が「マイク兼スピーカのカップ」、そして輪ゴムで押さえた針がそのカップに取り付けられ、録音メディアとしてのプラスティックカップがその下で回転している。何とも素朴な「科学おもちゃ」である。懐かしの「科学教材」なのである。
下の写真はこの「エジソン式コップ蓄音機」で「音を再生しているところ」である。この写真もまた、前回のページに載っけていたものである。
 |
ところが、「エジソン式コップ蓄音機」の開発者の方がこの写真を見てこんなアドバイスを下さった。
さて、拝見した「エジソン式コップ蓄音機」の溝写真から判断すると、針先が痛んでいるように思えます。ちなみに、切削音はほとんどしないはず（削りかすもあまりでないはず）です。確かにこの写真には削りかすがずいぶん写っているし、ガーという切削音のノイズも凄かった。再生音に対する前回の私の感想は、普通に針先を見てもなかなか判りませんが、顕微鏡で見るとイッパツです。
大きい声で歌っても、再生される「歌声」はとても小さい。いや、再生される「音」はうるさいくらいに大きいのだけれど、「歌声」はかすかにしか聞こえない。と書いてある。しかし、これはどうやら私が作ったものが上手く動かなかっただけのようである。話を伺ってみると、普通は簡単にキレイな音が再生されるものらしい。おそらく、雑に組み立てた私が、どこかで針先をダメにしてしまったのだろう。
なるほど、確かに学研のサイト
- エジソン (http://kids.gakken.co.jp/kit/otona/edison/edison_index.html )
そして、なんと心優しい開発者の方は新品の針まで送って下さったのである。
 |
そして、実は私の手元にはこんな素晴らしい顕微鏡まである。そう、4年の科学2000/04付属の科学教材である。もう、針先を調べないわけにはいかないだろう。というよりは、「この顕微鏡を使って針先を調べないと、怒るよ怒るよ。」と言っているかのような素晴らしいシチュエーションである。もう、調べないわけにはいかないだろう。
 |  |
というわけで、この素晴らしい顕微鏡を使って針先を見てみたいと思う。早速、「二本の針先」を顕微鏡を使って見てみたものが次の写真である(ホントは違う顕微鏡を使った)。
 |  |
実はこの針先というものは、あまり鋭くないことがわかる。「付属していた針」も「送って頂いた針」の方も針先は実は平らになっているのだ。もしかしたら、繊維の中に針を通す時には、あまり針先は鋭くない方が実は良いのかもしれない(実はK氏のアイデア)。例えば、繊維の隙間に針を通すようにするために、針先をわざと丸めているなどの理由があるのではないだろうか？木の繊維にそって曲がっていく釘があるように、この針先も繊維を避けながら進むために先を丸めていたりはしないのだろうか？
また、この写真は左右とも同じ倍率である。ということは、ずいぶんと「付属していた針」と「送って頂いた針」で太さが違うことが判るだろう。また、太さと同様に針先の形状も若干違うこともわかる。「付属していた針」の方は円錐の先をスパッと切り取ったような形状をしている。そして、針先には若干のバリがある。一方、「送って頂いた針」の方は円錐の先を丸めたような形状になっている。針先に鋭い部分やバリなどはあまりない。この差は非常に気になるところだ。
ちなみに、「同倍率で撮影したカッターの刃先」はこんな感じだ。もうメチャクチャ鋭いのである。
 |
さて、すぐに送って頂いた針先に交換して録音をし直してみたいところだが、今回は針先は変えなかった。先ず、現時点でどのような現象が起きているかを、調べておきたかったのである。そこで、
- 針先がカップに接触する角度を寝かせる
- 録音時は針を支持するアームがぶれないように固定する
 |  |
「ノイズがある場合」と「ノイズがない場合」では、ずいぶんと録音溝の様子に違いがあることが判る。もう「ノイズが多い場合」の方では見るからにノイズが多そうであるし、録音溝が無数の傷がついてしまっている。そして、「ノイズがない場合」の方は見るからに「クリアな音」が出そうである。おそらく、「ノイズがある場合」には針先が妙に引っかかりやすくなっているために、こんな無数の傷ができてしまうのだろう。
参考までに、「ノイズが無い場合」の録音溝の断面を撮影したものが次の写真である。写真では判りにくいと思うが、録音溝は中央部がえぐれ、その周囲が盛り上がっている。
 | (倍率がもう少し高い)  |
また、直感的に想像できるように、この録音溝は針先の平らな部分とほぼ同じ大きさであった。判りやすいように、
- 針先 - 「ノイズがない場合の録音溝」 - 「ノイズがある場合の録音溝」 - 録音溝の断面
 |
この写真を眺めていると、「針先のバリがマズイのではないか？」という想像が強くされるだろう。「針先のバリ」が引っかかることが不安定性の全ての原因であり、この針先の平らな部分を丸めてバリをとってみた場合には、キレイな音が出るようになるのではないかという気がしてくる。そこで、針先のバリを取ってそして新しい針との比較をするとどうなるか、それを次に調べてみたい。
とはいえ、このページもずいぶんと写真が多く、思いページになってしまった。そこで、この続きは次回行うことにしたい、と思う。
さて、今回「エジソン式コップ蓄音機」を使って録音実験を繰り返すために、私は近所の100円ショップで10個100円のプラスティック・コップを山のように買った。何しろ、この録音作業はやり直しがきかない。一回、ミスったらそのカップはもう使い物にならないのである(録音用には。もちろん、通常の飲み物の入れ物としては使える)。
100円で10個、つまり1個10円だから、録音可能な時間あたりのカップ単価を考えてみると
- 10円/0.5分
- 10円/7.4分
さて、今回「エジソン式コップ蓄音機」に録音してみた音の再生音はこんな感じだ。ちょっとサイズが大きいが、是非聞いて頂きたいと思う。開発者によれば、「普通に作れば肉声に近いほどのハイファイ音が聞こえる」とのことなので、この再生音は上手く作れなくてもこの位の音は聞こえるという例として考えて欲しい。
こんな「エジソン式コップ蓄音機」のとても素朴な作りの見かけにしては、結構再生音はきれいに聞こえるものだ。まだ、針先を変えていないので、まだまだ変な音であるが、ぜひぜひ静かな部屋で耳をすまして聞いてみてもらいたいと思う。鈴木祥子歌う「あなたを知っているから」の最後のリフレインがあなたの耳にも聞こえるだろうか？耳を澄ませば、こんな言葉が聞こえてくるはずだ。あなたの声がすぐそこにある。
心の中のすぐそばにある。
2002-02-28[n年前へ]
■Microsoft Producer for PowerPoint 2002
W3Cによる同期マルチメディアコンテンツ規格「SMIL」(Synchronized Multimedia Integration Language)ライクなコンテンツを制作するためのツール、とのこと。Powerpoint2002持ってないけど、どうなのだろう。使えるのかなぁ？（リンク）
」など。