hirax.net::Keywords::「ページ」のブログ



1999-04-26[n年前へ]

WEBページは会社の顔色 

WEBページのカラーを考える 2

 前回は、WEBのレイアウトで企業についての考察を行った。今回はWEBページの色空間を考察してみたい。目的は、企業間あるいは、日本とアメリカ間で使用される色についてなにか差があるか、ということを調べることである。例えば、

  • 日本では万年筆のインクには黒がほぼ使用されるが、アメリカなどでは青が使用されることも多い
  • 日本で二色刷りでは黒と赤だが、アメリカでは黒と青である
とか、そういったことを確かめたいのである。

 まずは、ごく単純なCIE Lab色空間での考察を行いたい。CIE Lab色空間はCIE(Commission Internationale d'Eclairage= 国際照明委員会 )が1976年に推奨した、色空間であり、XYZ表色系を基礎とするものである。知覚的な色差を考えたいので均等色空間であるLab色空間を選んだ。

 まずは、Lab色空間がどんなものかを以下に示す。これは、適当に書いてみたものなので、正確なものではない。もっとわかりやすいものが
http://www.sikiken.co.jp/col/lsab.htm
にある。

Lab色空間
↑L*明るい
/ b*黄色
緑方向←→a* 赤方向
青 /
↓暗い

 それでは、a*b*だけ表示してみる。以下がa*b*色平面である。これも大雑把なイメージ図である。

a*b*色平面
↑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
Y= 0.212639R + 0.715169G + 0.072192B
Z= 0.019331R + 0.119195G + 0.950532B
ここで使用されているのRGB、およびその際の係数はハイビジョンテレビのRGB色空間だそうだ。

X0 = 0.95045 Y0 = 1.0 Z0 = 1.08892
とすれば、
L= 116(Y/Y0)^0.333 -16 ( Y/Y0 > 0.008856 )
a= 500[ (X/X0)^0.333 - (Y/Y0)^0.333 ]
b= 200[ (Y/Y0)^0.333 - (Z/Z0)^0.333 ]
とできるとある。もちろん、ここで使われる係数などは考えるデバイスにより異なるので、これは単なる一例である。

 それでは、前回に使用した画像についてLab色空間でのヒストグラムを調べてみる。

各WEBページとLab色空間でのヒストグラム
アメリカ版
L*a*b*の平均値/標準偏差
日本版
L*a*b*の平均値/標準偏差
apple
L*201/69.6
a*128/1.82
b*127/3.93
L*228/54.8
a*128/1.82
b*126/6.70
sgi
L*228/49.2
a*128/5.20
b*129/8.49
L*223/55.3
a*129/8.46
b*129.10.4
Kodak
L*37.8/49.9
a*133/9.14
b*138/17.0
L*194/76.4
a*132/14.1
b*132/14.1
Canon
L*163/77.6
a*131/16.2
b*112/21.5
L*207.52.8
a*130/8.56
b*127/11.2
FUJIFILM
L*159/77.1
a*112/25.5
b*145/25.8
L*190/79.2
a*129/6.18
b*121/14.6
Xerox
L*191/80.1
a*140/25.7
b*147/17.8
L*219/38.9
a*132/12.7
b*128/14.5
RICOH
L*228/44.1
a*129/8.81
b*128/10.0
L*289/51.6
a*132/10.2
b*127/10.2

 ここらへんまで、作業をしてくると、今回のやり方は失敗だったことがやっとわかる。WEBのトップページは企業のイメージカラーの影響が強すぎるし、こういった考察には数をかせぐ必要があるので、解析ロボットをつくって、ネットワーク上に放つ必要がある。手作業ではとてもじゃないがやってられない。

 例えば、「WEBのトップページは企業のイメージカラーの影響が強すぎる」というのは

  • Kodakアメリカの黄色
  • FUJIFILMアメリカの緑
  • Xeroxアメリカの赤
  • Canonアメリカの青
などを見ればわかると思う。ただし、こうしてみると全てアメリカ版であることが面白い。日本版よりも、色の使い方が派手なのである。それは、Xerox,FUJIFILM,Canonに関してa*,b*における分散の大きさなどを見れば明らかである。いずれも、日本版よりもアメリカ版の方が大きい、すなわち、派手な色使いをしているのがわかると思う。もしかしたら、ここらへんに文化の違いが出ているのかもしれない。
 ところで、Canonに関しては日本版を見るにイメージカラーは赤のような気がするが、アメリカ版では明らかに青をイメージカラーとしている。これは、Xeroxとの兼ね合いだろうか?

 さて、今回の考察はやり方を間違えたので話が発散してしまった。要反省だ。

1999-05-09[n年前へ]

fvion.icoの正体? 

不思議なログファイル

 週間ASCIIを読んでいると、InternetExplorerにユーザーのプライバシーを侵害するような機能があることが新たにわかった、という記事が載っていた。その記事中ではfavicon.icoというファイルがカギであるらしい。favicon.icoというファイル名を見てびっくりした。

 本WEBサイトが立ち上がった当初から、ログファイル中に「favicon.icoという謎のファイルを探したが見つからない」というエラーが出ていた。例えば、最近のLogで示してみると、

Top 10 of 25 Documents Not Found

RankURLAccesses%
1/dekirukana/screensave/Image.lzh3930.23
2/dekirukana/toolplus/toolp.gif2015.50
3/robots.txt1612.40
4/favicon.ico1410.85
5/~sgsc793/index.htm64.65
6/dekirukana/java/index_e.html53.88
7/dekirukana/probe/index_e.html53.88
8/dekirukana/server/favicon.ico21.55
9/dekirukana/java/JypewriterBeanInfo.class21.55
10/dekirukana/onkai2/www.natinst.com21.55

となる(それは別にしてメンテしないといけないファイルがある...)。

そんなファイルは使用してもいないし、リンクしてもいない。不思議だったので、Infoseekなどでfavicon.icoを検索してみると、他のWEBサイトのログファイル中でも同様のエラーログが生じていることはわかった。しかし、その時はそこまでしか考えなかった。その時は、favicon-> Famiconかな?というような安易な発想しかしていなかったのだ。その時に、favicon-> favorite iconと気づくべきであった。そうすれば、何が起きているかもう少し把握することができたはずだ。あるいは、納得するまで止めるべきではなかった。

 こんな反省はおいておいて、とりあえず、週間ASCII中に紹介されてた詳しい記事のリンクを追ってみることにした。

 まずは、
http://www.hotwired.co.jp/news/news/technology/story/2322.html
で概要がわかる。さらに、
http://msdn.microsoft.com/workshop/essentials/versions/ICPIE5.asp
でMicrosoftのもう少し詳しい技術紹介がされている。以下のような内容である。

 ユーザーが「お気に入り(favorites)」にあなたのサイトを登録した場合に、ユーザーが使っているブラウザーの「あなたのサイトへのリンク」の横にロゴを表示させたいと思うなら、favicon.icoという名前のファイルをあなたのドメインのrootディレクトリにおけば良い。InternetExplorerは自動的にこのファイルを探して、全てのお気に入りとクイックリンクの横にアイコンを表示させる。
 もしも、rootディレクトリにfavicon.icoを置くことができないのならば、次のようなタグをページ中に加えることで、他の場所に置くことができる。

<LINK REL="SHORTCUT ICON" href="/path/foo.ico">

また、次のようなスクリプトを使うことで、InternetExplorerのユーザーにあなたのサイトを自動的に「お気に入り」に登録するように促すリンクをつけることができる。

<SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
&& (parseInt(navigator.appVersion) >= 4)) {
document.write("<U>
<SPAN STYLE='color:blue;cursor:hand;'
onclick='window.external.
AddFavorite(location.href, document.title);'>
Add this page to your favorites</SPAN>
</U>");
}
//-->
</SCRIPT>

 そこで、実験してみることにした。まずは、favicon.icoを作成し、サーバーに置く。また、本ページのトップに
<LINK REL="SHORTCUT ICON" href="/dekirukana/favicon/favicon.ico">
を記述しておく。そして以下に「お気に入りに追加するためのリンク」を貼り付けておく。ただしMicrosoftInternetExplorerのバージョン4.0以降でないとこのスクリプトは見ることができない。
 さて、このリンクをクリックし、お気に入りに追加する実験を行ってみた。しかし、何故かアイコンは表示されなかった。これは手動で「お気に入りに追加」してみても同じである。何故か報道されているようにはならない。私がどこか間違えているのかもしれない。もう少し調べてみる必要があるだろう。

念のために書いておくが、今回のこのページ(http://www.hirax.net/dekirukana/favicon/index.html)はお気に入りには追加しないで欲しい。変なアイコンが出る、と言われても困る。ただし、文句でなくてアドバイスであれば大歓迎である。

ところで、このサイトを気に入る方がいらっしゃれば、TopPage(http://www.hirax.net/)で登録して欲しい。このTopページならば安心である。

 と、書いたがTopのページにアイコンを置いて見ることにした(1999.08.31)。前は、バーチャルドメインの設定のせいなのか、上手く動作しなかったが、現在は専用のサーバーを使用しているせいかうまく動いている。IE5以降のユーザーにしか影響は無いから特に害はないだろう。

1999-08-10[n年前へ]

WEBページは会社の心 (色弱と色空間 その2) 

WEBページのカラーを考える 3

 前回、

で色弱の人の感じる色空間について少し考えてみた。また、などで、WEBページの配色やレイアウトからその会社自身について考察してみたことがある。今回は、それらを組み合わせてみたい。前回考えたやり方(ある錐体の情報を無くした際に得られる色空間をシミュレーション計算する)で色々なWEBページを解析してみるのだ。

 その結果として得られるものは、会社の「心」を示しているかもしれない、と思うのである。

 まずは、そのためのプログラムを作成してみた。といってもごく簡単なユーティリティーである。画像ファイルを読みこみ、RGBデータの内任意の1チャンネルの情報を削除した画像を作成するのである。
 実作成時間は15分程である。使いやすさはほとんど考えていないし、ボタンの押す順番によってはプログラムが簡単に落ちるというゲーム代わりにもなるものである。もし、使いたい人がいるならば、そこらへんはちゃんと直すつもりだ。それでも使うのは簡単だとは思う。今のところ、私以外に使う人がいるとも思えないので、こんなもので構わないのだ。

 簡単に今回作成したプログラムTrueColorの動作画面を説明する。

TrueColorの動作画面
1.起動する
2.ファイルを読みこむ
3.RGBの内1色=0
4.RGBの内1色=他の2色の中間

 TrueColorは画像ファイルを読みこみ、

  1. RGBの内の1チャンネルを全て0にする
  2. RGBの内の1チャンネルを他の2チャンネルの平均値にする
という2種類(RGBの内どのチャンネルにその処理をするかでさらにその3倍の6種類)の処理を行うことができる。RGBの内の1チャンネルを他の2チャンネルの平均値にするというのは、一つのチャンネルの情報を欠如させた上で、なおかつ自然な画像を得ようとしたものである。これらの処理は実際の色盲の方の感じ方とはかなり異なるとは思うので、処理の選択の個所に関して、わざと名前を通常使われないであろうものに変えている。
また、画像読みこみに関してはSusieプラグインに対応している。

 使う人がいるとも思えないが、一応ここからダウンロードできる。

truecolor.lzh 360kB


 それでは、各社のWEBページを調べてみる。各社のWEBを見た上で、一番識別が困難になりそうな条件で解析を行ってみた。その結果、前回調べた7社中(ただし、今回は日本国内の会社のみ)では、ある1社以外は何の問題もないように思われる。大丈夫と思われる例を示してみよう。これはアップル株式会社である。

アップル株式会社
オリジナル
赤のチャンネルを他の2チャンネルの平均値にする

 特に見にくい個所は見当たらない。それは他の会社についても同様であり、ある1チャンネルの情報を欠如させても特に識別しにくい個所は見当たらなかった。

 さて、問題があると思われる1社はどこだろうか? そう、RICOHである。ただでさえ、見にくいデザインなのであるが赤のチャンネルの情報を削除すると文字の識別が困難になるボタンがある。このボタンのデザインは非常に見にくい。

RICOH
オリジナル
赤のチャンネルを他の2チャンネルの平均値にする

 RICOHは内容的には非常に素晴らしいWEBなのだから、WEBの色にももう少し気を配ると良いと思う。内容が伝わらない可能性があるというのは、非常にもったいないと思う。

 さて、他のWEBも調べてみよう。気を配っているはずの厚生省だ。

厚生省
オリジナル
緑のチャンネルを他の2チャンネルの平均値にする

 1箇所ハイライト部分が識別不能(ハイライトになっていることを)であることを除けば、問題は無いようである。

 さて、他のWEBを調べるなら当然本WEBについても調べなければならないだろう。

hirax
オリジナル
赤のチャンネルを他の2チャンネルの平均値にする

 背景に色をつけているので、若干見にくいとは思うが、うーん、落第かな... どうしたものか。

1999-12-12[n年前へ]

色覚モドキソフトを作る(色弱と色空間その4) 

五十歩百歩

  まず、先に書いておこう。今回は、

で作成したTrueColorと似たようなプログラムを作成してみたい。何しろ関係ない話が以降、長々と続くからである。

  昔から、科学者は「色」というキーワードに強く惹かれている、と思う。そんなことを私が思うまでもなく、量子色力学(quatumchromodynamics)、色つき空間群(Color-symmetry)等のキーワードにその事実は現れている。これらの言葉は普通に使われる「色」という言葉とは違う性質を表すものである。しかし、科学者が「色」というものを基本的なものであると感じているために、どんなものが対象でも、「性質」の代表的なものとして、「色」という言葉が連想されるのだろう。

  私は学生時代の量子力学の授業のおかげで、「色」という言葉を聞くと今でも眠くなってしまうのである。何しろ、私の通う理学部の教室の横は農学部の畑だったのだ。教授の声と共に「モゥーーー」という牛の鳴き声が聞こえてくるのだ。教授の声と牛の鳴き声が絶妙のハーモニーとなるのである。ただでさえ眠くなるのに、そのハーモニーはクロロホルムもビックリの睡眠作用を発揮するのだ。私はそのハーモニーのおかげで何回も記憶を飛ばされた。
また、その牛達のおかげで、授業の中で「匂い」と聞いたりすると、牛の糞の「匂い」しか連想できないのである。困ったものである。あの農学部の畑がなければ、もしかしたら私は量子力学を好きになっていたかもしれない。そして、量子力学を極めていたかもしれないのだ...簡単に言えば私は量子力学の授業では落ちこぼれてしまったわけだ。

  ところで、昔の科学者達を考えると、「色」に関わらなかった人を探すほうが逆に難しいように思う。ニュートン、マクスウェル、ヤング、ヘルムホルツなどが代表的である。当たり前である。物理・化学に関わらず、「光」には関わらざるを得ない。当たり前である。さまざまな計測を行ったり、エネルギーを考えたりする上で光は最も重要なモノである。
 そして、「色」というものは「光」の大きな性質の一つである。しかも、それは「科学者自身にとっても」目に見える性質である。目に見えるものを無視する科学者は少ないと思われるので、科学者が「色」に関わらないわけにはいかないのだ。

  割に最近の科学者でも、意外な分野の人が「色そのもの」の研究をしていることがある。例えば、シュレディンガーなども色空間の提唱をしていたらしい。確かに、量子力学から色空間へはつながりを感じないこともないのではあるが、少し意外でもある。そのシュレディンガーが提唱した色空間がどのようなものであるのか、私は残念ながら知らないのだが、波動を深く研究していたシュレディンガーが提唱する色空間というのは非常に興味のあるところである。また、化学。物理学者であるダルトンは自らも色弱であるため、特にその辺りのことを研究し、報告している。

  さて、そのダルトンをinfoseekで検索してみると、

というページを見かけた。ここに、色覚バランスチェック用の図があった。昔、身体検査でやったことがあるような図である。こういった、図が人によってどのように見えるかは非常に興味があるし、気にかかるところでもある。
 もちろん、WEBページは会社の心(色弱と色空間 その2) - WEBページのカラーを考える 3 - (1999.08.10)で作成したTrueColorも同じような目的のために作成したものであるが、あれはあまりにも大雑把なモノだったので、作り直してみたいのである。なお、今回は画像のRGBとL、M、S錐体の反応の間の変換は
画像のRGBとL、M、S錐体の反応の間の変換マトリクス
左=RGB2LMS、右=LMS2RGB
という変換マトリクスを用いている。

  そこで、こういったWEB上の画像を読み込んで、

でやったL,M,Sの各錐体の感度が低いときの色覚シミュレーションを行うソフトを作成してみた。ソフトはこれである。前回と同じく、Susieプラグインを用いて画像を読み込んでいるので、「Susieの部屋」などから、Susie本体・あるいはプラグインを入手する必要がある。
 また、手間を惜しんだためProxy対応にはしていない。さて、動作画面サンプルを以下に示す。初期状態ではから画像を読み込むようになっている。もちろん、他のURLからも画像を読み込むことが可能である。画面左の三本のスライダーで各錐体の感度を調整できる。
truecolor2.exeを実行した画面

  この画面例では各錐体の感度は全て100%になっている。

  それでは、以下に適当に錐体の感度パラメータを変化させた場合のサンプルを示してみる。

truecolor2.exeで錐体の感度パラメータを変化させた場合のサンプル

  こうしてみると、これまで見てきたものとは違う数字が浮かび上がることがわかる。89,52などである。こういう仕組みを用いたのが、石原式などの色覚検査のやり方である。つまりは、異なる色を識別できないこと、すなわち、混同色を用いているのである。混同色を用いて文字を描くことにより、色弱であるかどうかを判断しようとするものだ。

  さて、こういった書き方をすると、色を混同してしまうのが色弱の人だけと勘違いされてしまいそうであるが、そんなことはない。全ての人が「色を混同してしまう」のである。どんな人でも、異なる波長の光であっても、例えばRGBなどの(多くても)三色を混合すれば同じ色に見えてしまう。つまりは、混同色だらけなのである。健常者と呼ばれるヒトも色弱と呼ばれるヒトもたかだか数種類の錐体を持つにすぎない。
 色々な光の波長分布を認識できる生物がいたとすると、彼らがからすればヒトは全て色弱ということになるのだろう。つまりは、五十歩百歩といったところなのかな、と思うのである。

2000-03-18[n年前へ]

Dilay WEB's True Colors 

WEBの本音 (色弱と色空間その5)

 本屋でMookの辺りを眺めていると、「できるWEBデザイン」というようなタイトルがついた書籍が沢山ある。WEB上の情報でも「ホームページ」AND「配色」で検索をかけたりすると、これも山のように検索結果が出てくる。「WEBページの色使い」というのは、見た目ですぐわかるだけに気にする人が多いのだろう。もちろん、本「できるかな?」でも、これまで

というように、WEBの「配色」を題材にとってきた。

 ところで、辞書で"color"をひくと、「立場、姿、見せかけ、口実」と載っている。そういうこともあってか、どうも「色」というものもなかなかに苦いものでもあるように思う。それが、シンディ・ローパーの歌でも有名な"truecolors"になればなおさら、である。「色」というのは実に不思議で、面白いものである。
 そして、色を見る力である"vision"も辞書をひくと、光景、想像力、洞察力、予言力、未来像…など、とても興味深い言葉が多く、とても不思議である。

 "color"=立場、姿が百人百様であるのと同じく、"color vision"=色覚にも多様性がある。WEBの「配色」、そして、色覚にも多様性と言えば、とても役に立つ情報がある。以前、

で「Webの好きな色 苦手な色 読めない色」というアンケートが行われていた。そのアンケート結果はから見ることができる。また、そのアンケート結果を元にした「サイト配色」についての情報が
  • KRISTALL+ クリスタル・プラス( http://homepage1.nifty.com/kristall-plus/ )
にある。こちらもきれいにまとめられてる。WEBを作るならば、こうした情報に目を通しておいても損はないと思う。いや、もちろん本当は「損はない」どころではなく、目を通しておくべきだ、と私は思っているのである。

 さて、この「からーふぃくしょん」で行われた「アンケートで用いられた色の組み合わせ」は次のようなものである。
 

からーふぃくしょんにおいて実施されたアンケートで用いられた色の組み合わせ
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?
できるかな?

 この25種類の「できるかな?」の中で読みにくい色はどれだろうか? といっても、これでは「これ」と言いづらい。そこで、「からーふぃくしょん」ではこれらに番号付けがなされており、
 

からーふぃくしょんにおいて実施されたアンケートで用いられた色の組み合わせ
No.編
No.1
No.2
No.3
No.4
No.5
No.6
No.7
No.8
No.9
No.10
No.11
No.12
No.13
No.14
No.15
No.16
No.17
No.18
No.19
No.20
No.21
No.22
No.23
No.24
No.25

となっている。私などは、この中ではNo.17(緑背景に赤文字)とかNo.23(紫背景に赤文字)などはいまひとつ読みにくいので好きではない。そういう自分の好みははっきりとわかるのだが、他の人の感性に沿って考えるということは、なかなか私にはできない。いや、全然できない。そこで、

の時に作成した「色覚モドキソフト」により、この「色の組み合わせ」を解析してみることにした。それによって、色々な人の感覚を想像してみることにしたのである。ソフトで人の感覚を想像するというのも情け無い話ではある。まぁ、自分で作るソフトで想像するのであるから、自分で想像した気にも、少しはなれるというものである。

 前回作成した"truecolor2.exe"ではInternet上の画像ファイルのみに対応していたのみであった。インターネット上のファイルは解析できても、自分のPCの中のファイルは解析できなかったのである。だから、使い勝手がかなり悪かった。そこで、今回バージョンアップしたtruecolor3.exeを作成してみた。
 この"truecolor3.exe"は、そうそう役に立つとは思わないが、一応ここにおいておく。

いつものように、多種の画像ファイルに対応するためにはSusieプラグインを必要とする。もっとも、BMPファイルの読み込みのみであれば、プラグインは必要ない。また、きちんとした動作確認などもしていないのも、これまたいつもの通りである。

 この"truecolor3.exe"は、ローカルのファイルを開いて処理する機能を持っている(本来、当たり前の機能であるが…)。なので、上に挙げたような表を画像ファイルに落とした後に、この"truecolor3.exe"で解析してみるのである。

 一例を以下に示してみよう。これは、truecolor3.exeで上の画像を処理(Lを50%程度にしたもの)したものである。その処理の意味は「色覚モドキソフトを作る(色弱と色空間その4)- 五十歩百歩 - (1999.12.12)」を読めば判るであろうから、ここでは特に言及しない。あえて、(変な風に)言うならば色々な情報を引いてみたときに、それでも情報をちゃんと伝えられるか考えてみる、といった所である。

 使い方であるが、
下の左のボタンを押す  ->  ローカルファイルを開く、
そして、
下の右のボタンを押す  ->  インターネット上の画像ファイルを開く
ようになっている。その後に、L,M,Sの各スライダーを上下させることで、画像に変換をかけるわけである。
 

truecolor3.exeで上の画像を処理したもの
(Lを50%程度にしたもの)

 一体、この画像変換例の画像中で読みにくそうな番号はどれだろうか?No.1,No.3, No.4, No.19, No.23といったものだろうか? このような変換画像と先の「からーふぃくしょん」のアンケート結果と見比べてみると、面白いと思う。No.23などは私も見づらいことでもあるし、「あまり使って欲しくない色使い群」だ、と言えるのかもしれない。また、ここでは画像変換の一例のみを示したが、自分のWEBページ画像に対して色々と処理をしてみると面白いと思う。

 色々な処理をした時に、どれが「本当の色」="true colors"であるかは判らない。そして、そんなものが本当にあるのかどうかも怪しいものである。しかし、そういったことを考えてみるのは、とても興味深いことだと思う。そして、その色を認識する"vision"についても、もっと考えてみるべきだと、思う。

 さて、現在のHIRAX.NETのトップページ(http://www.hirax.net/)の基本色はNo.8とNo.16である。先の「カラーフィクション」におけるアンケート結果を見ると、そんなに悪い配色ではないようだ。ひとまず一安心である。
 



■Powered by yagm.net