1999-04-24[n年前へ]
■WEBページは会社の鏡 
WEBページのカラーを考える 1
今回は、WEBサイトのトップページから会社の雰囲気を考えたい。まずは、WEBのレイアウトを手がかりに考えてみたい。というわけで、以下に出てくる各企業に対する記述は全てWEBのレイアウトから考えていることであって、現実とは関係がない。誤解のないように。
まずは、以下の一覧を眺めてほしい。いずれも、デザイン、色について考えているであろうと思われる企業である。
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
それぞれ、2つづつ並べたが、左がアメリカ版、右が日本版である。同じ企業でも結構違うものである(Xeroxと富士Xeroxは同じ会社ではないが)。こうしていくつか並べてみると、アメリカ版と日本版の雰囲気の違いが見えてくる。
また、他にも思いつくことがある。例えば、こんな感じである。
- アメリカ版と日本版は結構違う。
- アメリカ版と日本版にはそれぞれ共通の雰囲気がある。
- アメリカ版より日本版の方が密度が高い。高すぎると言っても良いくらいだ。
- 日本版はどの企業も雰囲気が似ている。
- アメリカ本社と日本支社という関係の会社はアメリカ版と日本版が「うりふたつ」である。
以上の考えを基に、もう一度個別に眺めてみる。
まずは、Xeroxと富士Xeroxである。
| |
しかし、ここまで雰囲気が違うということは、Xerox本社と富士Xeroxの独立性を物語っているのかもしれない。
次は、Kodakである。
| |
次は、Canonだ。
| |
次は、FUJIFILMである。
| |
次は、ROCOHである。
| |
ただし、RICOHのWEBの内容は素晴らしいとフォローしておこう(例えば、英語技術文献の日本語要約などだ→参考:小人閑居して...- 情報をポケットに入れて持ち歩きたい - (1999.01.19) )。
次は、Appleである。
| |
Apple大好き。いいマシンが最近無いけど。
そして、sgi。シリコングラフィックスは会社名が変わったようだ。
| |
というわけで、今回はレイアウトから企業を考えてみた。
1999-04-26[n年前へ]
■WEBページは会社の顔色
WEBページのカラーを考える 2
前回は、WEBのレイアウトで企業についての考察を行った。今回はWEBページの色空間を考察してみたい。目的は、企業間あるいは、日本とアメリカ間で使用される色についてなにか差があるか、ということを調べることである。例えば、
- 日本では万年筆のインクには黒がほぼ使用されるが、アメリカなどでは青が使用されることも多い
- 日本で二色刷りでは黒と赤だが、アメリカでは黒と青である
まずは、ごく単純なCIE Lab色空間での考察を行いたい。CIE Lab色空間はCIE(Commission Internationale d'Eclairage= 国際照明委員会 )が1976年に推奨した、色空間であり、ＸＹＺ表色系を基礎とするものである。知覚的な色差を考えたいので均等色空間であるLab色空間を選んだ。
まずは、Lab色空間がどんなものかを以下に示す。これは、適当に書いてみたものなので、正確なものではない。もっとわかりやすいものが
http://www.sikiken.co.jp/col/lsab.htm
にある。
/ ｂ＊黄色 緑方向←  →a* 赤方向青 / ↓暗い |
それでは、a*b*だけ表示してみる。以下がa*b*色平面である。これも大雑把なイメージ図である。
 →a* |
参考までに、RGBからL*a*b*への変換式を挙げておく。
岡野氏のDigital AstronomyGallery ( http://www.asahi-net.or.jp/~RT6K-OKN/ )
から辿れる蒔田剛氏による第2回CCDカンファレンス「CANP'98」の「デジタル画像と色彩理論の基礎」によれば、
X＝ 0.412391R + 0.357584G + 0.180481B
Ｙ＝ 0.212639R + 0.715169G + 0.072192B
Ｚ＝ 0.019331R + 0.119195G + 0.950532B
ここで使用されているのＲＧＢ、およびその際の係数はハイビジョンテレビのＲＧＢ色空間だそうだ。
X0 = 0.95045 Y0 = 1.0 Z0 = 1.08892
とすれば、
Ｌ＝ 116(Y/Y0)^0.333 -16 ( Y/Y0 > 0.008856 )
ａ＝ 500[ (X/X0)^0.333 - (Y/Y0)^0.333 ]
ｂ＝ 200[ (Y/Y0)^0.333 - (Z/Z0)^0.333 ]
とできるとある。もちろん、ここで使われる係数などは考えるデバイスにより異なるので、これは単なる一例である。
それでは、前回に使用した画像についてLab色空間でのヒストグラムを調べてみる。
| L*a*b*の平均値/標準偏差 | L*a*b*の平均値/標準偏差 | |||
| apple |  | L* 201/69.6a*  128/1.82b*  127/3.93 |  | L* 228/54.8a*  128/1.82b*  126/6.70 |
| sgi |  | L* 228/49.2a*  128/5.20b*  129/8.49 |  | L* 223/55.3a*  129/8.46b*  129.10.4 |
| Kodak |  | L* 37.8/49.9a*  133/9.14b*  138/17.0 |  | L* 194/76.4a*  132/14.1b*  132/14.1 |
| Canon |  | L* 163/77.6a*  131/16.2b*  112/21.5 |  | L* 207.52.8a*  130/8.56b*  127/11.2 |
| FUJIFILM |  | L* 159/77.1a*  112/25.5b*  145/25.8 |  | L* 190/79.2a*  129/6.18b*  121/14.6 |
| Xerox |  | L* 191/80.1a*  140/25.7b*  147/17.8 |  | L* 219/38.9a*  132/12.7b*  128/14.5 |
| RICOH |  | L* 228/44.1a*  129/8.81b*  128/10.0 |  | L* 289/51.6a*  132/10.2b*  127/10.2 |
ここらへんまで、作業をしてくると、今回のやり方は失敗だったことがやっとわかる。WEBのトップページは企業のイメージカラーの影響が強すぎるし、こういった考察には数をかせぐ必要があるので、解析ロボットをつくって、ネットワーク上に放つ必要がある。手作業ではとてもじゃないがやってられない。
例えば、「WEBのトップページは企業のイメージカラーの影響が強すぎる」というのは
- Kodakアメリカの黄色
- FUJIFILMアメリカの緑
- Xeroxアメリカの赤
- Canonアメリカの青
ところで、Canonに関しては日本版を見るにイメージカラーは赤のような気がするが、アメリカ版では明らかに青をイメージカラーとしている。これは、Xeroxとの兼ね合いだろうか？
さて、今回の考察はやり方を間違えたので話が発散してしまった。要反省だ。
1999-08-10[n年前へ]
■WEBページは会社の心 (色弱と色空間 その2)
WEBページのカラーを考える 3
前回、
で色弱の人の感じる色空間について少し考えてみた。また、などで、WEBページの配色やレイアウトからその会社自身について考察してみたことがある。今回は、それらを組み合わせてみたい。前回考えたやり方(ある錐体の情報を無くした際に得られる色空間をシミュレーション計算する)で色々なWEBページを解析してみるのだ。その結果として得られるものは、会社の「心」を示しているかもしれない、と思うのである。
まずは、そのためのプログラムを作成してみた。といってもごく簡単なユーティリティーである。画像ファイルを読みこみ、RGBデータの内任意の1チャンネルの情報を削除した画像を作成するのである。
実作成時間は15分程である。使いやすさはほとんど考えていないし、ボタンの押す順番によってはプログラムが簡単に落ちるというゲーム代わりにもなるものである。もし、使いたい人がいるならば、そこらへんはちゃんと直すつもりだ。それでも使うのは簡単だとは思う。今のところ、私以外に使う人がいるとも思えないので、こんなもので構わないのだ。
簡単に今回作成したプログラムTrueColorの動作画面を説明する。
 |  |
 |  |
TrueColorは画像ファイルを読みこみ、
- RGBの内の1チャンネルを全て0にする
- RGBの内の1チャンネルを他の2チャンネルの平均値にする
また、画像読みこみに関してはSusieプラグインに対応している。
使う人がいるとも思えないが、一応ここからダウンロードできる。
truecolor.lzh 360kB
それでは、各社のWEBページを調べてみる。各社のWEBを見た上で、一番識別が困難になりそうな条件で解析を行ってみた。その結果、前回調べた7社中(ただし、今回は日本国内の会社のみ)では、ある1社以外は何の問題もないように思われる。大丈夫と思われる例を示してみよう。これはアップル株式会社である。
 |  |
特に見にくい個所は見当たらない。それは他の会社についても同様であり、ある1チャンネルの情報を欠如させても特に識別しにくい個所は見当たらなかった。
さて、問題があると思われる1社はどこだろうか? そう、RICOHである。ただでさえ、見にくいデザインなのであるが赤のチャンネルの情報を削除すると文字の識別が困難になるボタンがある。このボタンのデザインは非常に見にくい。
 |  |
RICOHは内容的には非常に素晴らしいWEBなのだから、WEBの色にももう少し気を配ると良いと思う。内容が伝わらない可能性があるというのは、非常にもったいないと思う。
さて、他のWEBも調べてみよう。気を配っているはずの厚生省だ。
 |  |
１箇所ハイライト部分が識別不能(ハイライトになっていることを)であることを除けば、問題は無いようである。
さて、他のWEBを調べるなら当然本WEBについても調べなければならないだろう。
 |  |
背景に色をつけているので、若干見にくいとは思うが、うーん、落第かな... どうしたものか。
2001-03-25[n年前へ]
■WEBページがキオスクになる日 前編
東スポ・レイアウトでいこう
以前、「WEBページを検索した時、その検索結果を小さな画像（サムネイル）で表示してくれるのって便利だと思わない？（というかやってみない？)」とアドバイスされたことがあった。目的のキーワードで検索をかけた結果が一覧で表示されても、そのテキストのみの結果からは全然イメージが湧かない、というのである。なるほどなぁ、と私は思いながらも、その「WEBページの検索結果をサムネイル表示する」というアイデアを簡単に実現するにはどうしたら良いかがなかなか思いつかなかった。どこかの検索エンジンを利用して検索を行って、その結果に対してさらにサムネイル表示を加えてみようなどとも挑戦してみたのだが、サムネイル表示のために利用しようとしたThumbnailsViewのThumbCtlを使ったプログラムが何故かWindows2000上では上手く動作しなかったりして、なかなか進まないままだった。
もちろん、自分のサーバーでもあるhirax.netの中の全文検索結果にサムネイル表示を加えることは簡単にできるだろう。しかし、hirax.netにある「できるかな?」の各ページはあまりグラフィカルというわけではないのである。ほとんどのページで、少なくとも先頭近くはほぼ文章だけで占められている。すると、サムネイル表示すると下のような感じになってしまう。
 |
このような表示だと、テキストのみの検索結果に対して「結果からイメージを湧かせる」という点ではさほど優位に思われないのである。hirax.netは比較的画像を多く使っているサイトであるとは思うのだけれど、それでもやはりページの内容が文字主体であるため、サムネイル表示を上手く活用する方法が考えつかなかったのである。
実際のところ、私が頻繁に見に行く他のサイトでも文字主体のところが多いので、自分自身の用途としてはなかなかWEBページのサムネイル表示は活用できそうになかった。
しかし、周りを見わたして考えてみればそんなWEBサイトばかりではないのだった。もしかしたら、「文字主体の読み物」を読んでいる人は実は少数派で、そうじゃない人やそうじゃないサイトの方が圧倒的に多いのかもしれない。少なくとも、企業のWEBサイトは良くも悪くもグラフィカルなページの方が圧倒的に多い。そして、そんなサイトに対して「検索結果をサムネイルで表示する」ことでどんなに「結果からイメージが湧くか」を実感させてくれたのが、お笑いパソコン日誌経由で知ったgirafa(http://www.girafa.com/)である。実際の例を示してみると、化粧品(cosmetics)というキーワードで検索をかけた時
この二種類の結果から受けるイメージの違いはやはり大きい。
girafaを使って化粧品をキーワードにして検索結果をサムネイル表示させた場合は、もう化粧品のパンフレットのような感じで文字なんか読まなくても、イメージが頭の中に入ってくるのである。言葉の壁もなんのその、文字を読む必要もないのである。なるほど、私のように文字主体のWEBサイトばかり読んでいるものには判らなかったが、ファッション関係のWEBサイトを検索する女性にとっては、「検索結果のサムネイル表示」はとても必要とされそうである。
もちろん、それはコスメ用品を検索しまくる女性だけでない。エロ・エロ・キーワードを片手に検索をしまくるエロゾンビたる男性達にもとてもありがたいものとなるに違いない。例えば、こんな風にエロ・エロ・キーワードで検索をかけたりすると、その結果なんてもうイメージ湧きまくり状態になる。もちろん、この検索結果もここに張り付けて、その効果とイメージを共に分かち合いたいくらいなのであるが、そんなことをしたらこのページまで18禁扱いされないし、私を誤解する人も出てきそうなので、残念ながら止めておく。（いや、違った。全然残念ながらではないか。）
このgirafaは検索結果をサムネイルで表示してくれるだけではなくて、InternetExplorerのサイドバーとして自分の好きなリンク集をサムネイル表示させておくこともできる。例えば、下の画面左に表示されているのがgirafaのサイドバーである。
 |
さて、冒頭で「文字主体のサイトではサムネイル表示では効果が少ないのではないか」と書いた。しかし、それは実はサムネイルの画像が粗い場合の話であって、実は文字主体のサイトでもサムネイル画像の情報量が多い場合には、それは必ずしも正しくない。実際、girafaの作成するサムネイル画像はかなり高品質なので、WEBページの頭に大きな文字があれば、それもちゃんと読むことができるのである。
試しに、girafaとThumbnails Viewの作成するサムネイル画像の違いを並べてみると、下のようになる。
 |
 |
この記事のタイトルが読めることの効果は非常に大きい。例えば、誰しも駅のキオスクで実際の新聞を買おうとする場合には、一面のトップの記事のタイトルを見て、どの新聞を買うかを決めるということも多いはずである。少なくとも、私の場合はそうだ。目を引く記事のタイトルがあれば、その新聞を買い、そうでなければ買わないというやり方である。
それと同じで、girafaでニュースサイトのリンク集を表示させているような場合には、興味がある記事がトップにあればそのリンク先へ飛んで、そうでなければわざわざそのサイトへ飛んだりはしない、という風な使い方になってしまいそうなのである。つまり、girafaでサムネイル表示されているリンク集というのは、ほとんどキオスクで折り畳まれた新聞の一部が見えているだけの状態と非常に良く似ているのである。girafaのサイドバーとキオスクに並んでる新聞はとても感覚的に近いのだ。そういう感覚的な近さというのは、きっととても大事なことだとも思うのである。
このgirafaみたいな便利なモノはきっと普及することだろう。girafaがベータ版でなくなって、ちゃんと動作するようになれば普及しないわけがない。そして、誰もがそんなサムネイル表示された新聞社のWEBサイトを見るようになった暁には、新聞社のWEBページは絶対東スポ方式にすべきだと私は思う。サムネイル画像には大きく、「川崎麻世・カイヤ、離婚」という文字が見えるのだが、それをクリックしてそのページに飛ぶと、その下に「回避」という文字があって、実は「川崎麻世・カイヤ、離婚回避」という記事だったというようなやり方だ。あまりやりすぎるとオオカミ少年になってしまう恐れもあるが、まぁそんな新聞WEB記事も面白くていいんじゃないのかな、と思ったりするのである。二十一世紀は東スポスタイルが大流行するハズなのだ。
しかし、ホントのところ二十一世紀になってもやっぱり東スポや噂の真相ってあるんだなぁ。当たり前かもしれないけど、鉄腕アトムの時代もやっぱり東スポや噂の真相ってあるんだなぁ。ちょっと不思議な感覚だなぁ。
2002-11-04[n年前へ]
■WEBページがキオスクになる日 中編
hirax.net風 「WEB＆雑誌の立ち読みコーナー」
前回、「WEBページがキオスクになる日 前編 - 東スポ・レイアウトでいこう-」で新聞社や雑誌のWEBページはいずれ「東スポ」みたいなレイアウトになっていくハズなのだー、と予想してからもう一年半も過ぎた。いずれ検索サイトの結果表示は「イメージを湧かせ易いサムネイル表示」になっていくのが自然だろうから、それに対応してWEBページの作り方もサムネイル表示を念頭においたものになっていくに違いない、と考えたのである。そして、そんな暁にはWEBページのデザインは東スポのようになっていくに違いない、と思ったのだ。つまり、ページのトップには目を惹かれる大きな写真と、興味を惹かれずにはいられないキャッチーなフレーズが大きく配置されるに違いないと思ったのである。
 |
もちろん、ここまでトリッキーな配置は一部裁判所にすら嘘つきのライセンスを保証されたことがある（東スポvs三浦和義名誉毀損 裁判の一審で、「東スポがウソを書きまくるのは明らかなので、何を書いても名誉毀損にはならない」と裁判所に認定されたことがある）東スポくらいにしか許されないことだは思うが、特にニュースを報道するようなWEBページはもっと目を惹き心を惹くようなビジュアルなレイアウトになっていくに違いないと思ったのだった。
しかし、前編をアップしてから一年半も過ぎたのだけれど、一向にそんな気配はないのである。サムネイルを表示してくれる検索サイトもまだまだ主流とは言えないし、検索されるWEBページの側だってページのトップにはテキストだけを羅列しているだけのところも多い。
例えば、下に示した「東京新聞」の例を見ればそれがよく判ることだろう。トップページには各ニュースの内容を説明する短いテキストだけが配置されている。読者はその短いテキストの内容を読んで、さらに詳しい内容を読むかどうかの判断をしなければならない。また、そのニュースの重要度は一見したところでは判らないのである。
それとは逆に、下の右側に示したCNNの例では非常にビジュアルな配置になっている。ニュースを説明する写真が大きく配置されているし、重要なニュースは大きく配置され、そうでないものは小さく配置されている。レイアウトをする側は苦労するとは思うが読む側からすると非常に読みやすい。テキストを読んでイメージがもりもりと湧くようなタイプの人はともかく、ワタシのように雑誌でもなんでも斜め読みをして、ましてや英語の論文なんか図や画像を眺めて読んだつもりになるタイプの人間にはこのCNNスタイルは非常に読みやすいのである。（いや、読まずに眺めているだけなのだが…）
ニュースを説明するテキストだけが配置されている  | ニュースを説明する写真が大きく配置されている  |
そして、一番素晴らしいのがやはり本家スポーツ新聞のWEBページである。そこにはちゃんと当日の新聞の最新版の画像が配置されているのだ。その最新版の画像はやはりとても目を惹き、内容もとても判りやすいのである。実際のところ、それはWEBページでもなんでもないわけなのだが、その日のスポーツニュースを一見して判るという点ではとても素晴らしいのだ。
 |  |  |
とはいえ、残念ながらこんなビジュアルな例はとても数が少なく、ほとんどのニュースWEBページは単なるテキストの羅列だったりするのである。そしてそれは読まれるWEBページ側だけの話だけでなく、WEBページへたどり着くまでの過程だって、やはり同じようにとても非ビジュアル的なのである。
例えば、ワタシはWEBページを読みに行くときにはWebページの更新チェッカであるWWWCを使っている。その動作画面は下に示してみたような感じで、基本的に更新されたサイト名の羅列になる。また、例えばはてなアンテナのような同じような更新チェックアンテナの場合だって、基本的には更新サイトと更新内容がテキストで羅列・表示されることになる。
 |
こういうツールを使って、WEBページを読んでいると、いつのまにやら、「更新されているから読みに行かなきゃ」というような気持ちになっていることに気づくのである。まるで、義務感のような気持ちを（ほんの少しではあるけれど）植え付けられるような気持ちになるのだ。すると、チャップリンのモダンタイムズではないけれど、何やら自分が歯車の中で機械的にマウスをクリックしているような気になってしまうのである。これはちょっとイヤなのだ。携帯メールのテキストを駆使するようなニュータイプ、テキストから内容がすぐ理解できるニュータイプとは違い、ワタシのようなビジュアル重視タイプにはこういうテキストの羅列をクリックしていく作業はちょっと苦手なのである。
ワタシはもっと違う気持ちでWEBページを読みに行きたいのだ。ページに目を惹かれ、思わずマウスをクリックしてしまうというような気持ちになりたいのである。特に、比較的画像を多く配置しているような新聞やPC系ニュースサイトを読みに行くときには、「その大雑把な見た目＝大雑把な内容」を眺めて、その内容に惹かれてそのページを読みに行きたいのである。各ページへのリンク箇所には各ページの大雑把な画像つまりサムネイル画像か何かが表示されていて、そのサムネイル画像を眺めて判断してから各ページへ読みに行く、というようにしたいのである。キオスクやコンビニの雑誌コーナー新聞コーナーで、雑誌の表紙や新聞の一面を眺めて思わずそれらに手を伸ばすように、WEBページのサムネイル画像を並べて眺めてから、思わずそこのページへ飛んでみたかったりするわけなのだ。
必要は発明の母というわけで、試しにhirax.net内にそんな「コンビニの雑誌コーナーのようなアンテナを作ってみたい」と考えて、まずはWindows上でWEBページのサムネイルを定期的に作成するソフトを試しに作ってみた。このソフトを動かして、定期的にニュースサイトの各ページのサムネイル画像を作成し、DT_FTPのような定期的にサーバーにファイルを転送するソフトと併用することで、サーバー上にいつも最新のWEBページのサムネイル画像を置いておくというようにしてみた。例えば、その画像を利用したニュースサイトへのリンクがこの下に配置されているものである。テスト用なのでまだまだリンク数も少ないし、（拡大したときの）サムネイル画像も少し小さめだし、更新チェック・アンテナとの連携もしていなかったりするけれど、それでもワタシの「こんなのが欲しい！」という大体のイメージは掴めることと思う。そしてまた、スポーツ新聞や各雑誌の最新号表紙へのリンクも貼ってみたので、それらを眺めればコンビニで眺めるような雑誌棚のイメージが湧くハズである。
今は残念ながらテキスト羅列のリンクが多いのだけれど、いずれ「雑誌、ニュース系のWEBページへのリンクはこんなサムネイル画像タイプが主流になるハズなのだ」と前編に続き中編の今回もまた外れそうな予想をするところで話を終わらせてみたいのであるが、それにしてもそれにしても「テキストだけでもちゃんと頭の中に入ってくる」タイプの人が少しうらやましいと思うのである。これからは、やっぱりそんなニュータイプの時代なんだろうか？だとしたら、こんなサムネイルタイプは主流にはならないのかな？どうなんだろうな？
」など。