==== 1997年1月のお話し ====


 ウェッブ上で画像を扱うことは、ごく当たり前であるし、それがウェッブの普及してきたメリットでありますから、それについてはとやかく言う筋合いではないですが、その画像がどのような調子で他人様の目に映っているのかは、画像データをページに張り付けている小生にとっては、とっても気になるところです。
 と言うのも、気にしていない人は全然気にしていないだろうし、知っている人はそれを納得して見ているのでしょうが、ディスプレイ(特にCRT)には、テレビガンマというものが存在して、それがプラットフォームやモニタによって値が異なり、写真で言うところの階調表現やコントラストに大きく影響されるからであります。勿論、最終的に目に見える段階で、リニアになればよいのですが。
 小生が自宅で現在使用しているコンピュータは、Apple Macintosh Centiris 660AV で、本体内蔵のビデオポートから、飯山電気製のディスプレイ(MF-8615 Hello)を使用した環境で画面を覗いています。ガンマ値を変更できるツールはあるのですが、約1.8の状態で使用しています。マッキントッシュでは、大体この程度の値が普通であるみたいですが、Windows環境では、(勿論ビデオカードの種類も多種ありますが)バラバラで、それもそもそものNTSCで定められたガンマ値2.2に近いものが多いみたいですね。
 あなたのディスプレイ(ビデオ回路系を含めた)ガンマ値はいくらでしょうか?
 それを測定する簡易チャートを作成したので、ここをクリックし、確認してみてください。
 左側と右側にステップの異なるグレイスケールのブロックが表示されています。そして、左端、若しくは右端にそれぞれの段階に対応したガンマ値が記されています。どちらか視認性のよい方で、画面より離れて(場合によって画面をスクロールしながら)眺めてください。グレースケールの間に細い横縞模様がありますが、それが隣接するブロックと明るさの境がなくなる箇所がその(目で見えている)ディスプレイのガンマ値ということになります。
 尚、注意事項として、画面がディザ表示されていたりすると見た目の正確さに欠けますので、グレースケールが正しく表示されるビデオ環境をお薦めします。また、画像をリサイズしたり回転したりすると、チャートのとCRTの特性上、表示に狂いが生じる場合があります。即ち、このチャートは、精密な測定をすることを前提とはしていないので、あくまで目安としてお考えてください。
 小生は、大体において、自分の環境(ガンマ値1.8)で適正に見えるように、画像データのレタッチを行っていますので、Windowsユーザーが多い昨今、その方には、コントラストが高めで、かつ全体的に暗めに表現されているのではないでしょうか。勤務先では、業務でWindowsマシンを使用する機会も多いのですが、その時に眺めた自分のホームページの印象の違いに唖然とした覚えがあります(良い意味でも悪い意味でも)。
 ホームページの背景は、なにか全体的に一貫した優しい配色をと思って、淡い緑系の色を選んだつもりですが、この中間調のパステル色がディスプレイによって、印象が大きく異なるのですね。
 バックにGIFデータを埋め込むのも手ですが、気に入ったテキスチャの画像がなかなか作れないでいるのです。例えば、小生のホームページのトップに戻る ボタンですが、ここをクリックすると子ウィンドウが開きまして、このGIFデータで背景を埋めると、このようになったりしますが、気色悪いので新しいウィンドウは即座に閉じてください。
 で、今回のホームページのリバイスアップで、過去のページはそのままに、新規に手を加えてページから、色調は変化させずに背景を明るい色に変更することにしました。

は、こんな感じでしたので、比較すると
は、大分開けた雰囲気でしょう。
させるとこうなります。しかしながら、これらは、JavaScript(のこのルーチン)が正常に動作するブラウザを使用していないと、意味がないですね。
 もうこうなったら、JavaScriptが使用できる人向けに、ついでに好きな背景色にしてもらいましょう。下のテキストボックスに、RGBの順番に16進でそれぞれ1バイトの好きな数値を連続入力して、ボタンをクリックしてみてください。例えば、0x000000ならば真っ黒だし、0xFFFFFFならば真っ白だし、0xFF0000ならば、真っ赤になる筈です。
0x

 どうですか、気に入った背景色になりましたか?

 ちょっと、話が脱線しますが、JavaScriptって面白いですね。例えば、次のようなイベントもとれるのですね。下のボタンの上にマウスカーソルを移動してみてください。


 しかしながら、これは、Netscape3.0でないと、動かないみたいですね。


 以上が、「背景色の明るさを41%向上した理由」なのですが、続けて、今度はもう少し学術的に「背景色の向上した明るさが41%である理由」を以下に述べてみましょう。
 以前の背景色のレベルをR0、G0、B0として、現在の背景色のレベルをR1、G1、B1と置きます。0〜255(8ビット)レベルで、HTMLの指定は、R0:0x40(64),G0:0xD0(208),B0:0xB0(176)から、R1:0xAF(175),G1:0xFF(255),B1:0xDF(223)に変更しました。
 8ビットデータを0〜100に正規化すると、
 R0 = 64 / 255 x 100 = 25.10, G0 = 208 / 255 x 100 = 81.57, B0 = 176 / 255 x 100 = 69.02
 R1 = 175 / 255 x 100 = 68.63, G1 = 255 / 255 x 100 = 100.00, B1 = 223 / 255 x 100 = 87.45
 となります。
 RGBをカラーテレビ系(NTSCの定める赤、緑、青の蛍光色を原刺激、標準照明光Cを基礎刺激とする表色系)の信号とみなして、この値をディスプレイの三刺激値とすると、
 X = 0.6067 x R + 0.1736 x G + 0.2001 x B
 Y = 0.2988 x R + 0.5868 x G + 0.1144 x B
 Z = 0.0000 x R + 0.0661 x G + 1.1150 x B
が、CIE XYZ表色系(2度視野)への変換マトリックスとなります。
 然るにここで、各々の値を色空間変換すると、上記の式より、
 X0 = 43.20, Y0 = 63.26, Z0 = 82.35
 X1 = 76.50, Y1 = 89.19, Z1 = 104.12
となります。
 輝度を表すYの値を比べるとY0:63.26→Y1:89.19(差分25.93)となっていまして、
 dY / Y0 = 25.93 / 63.26 = 0.4098 = 41%
 (Y1 = Y0 x 1.4098 = 63.26 x 1.4098 = 89.19)
と、(多少計算誤差がありますが)明るさに関して、背景色が41%分アップしたことになります。まあ、正確に言うと、人間の感知する明度相当のものは、後述のL*値の方が近いですが。

 ここで、色度座標についても計算しておきますと、
 x = X / (X + Y + Z), y = Y / (X + Y + Z)
なので、
 x0 = 0.2288, y0 = 0.3350
 x1 = 0.2835, y1 = 0.3306
となりまので、色味は若干、緑方向から白点へ近づいたことになります。
 色度図に関しては、1996年3月のお話しも、参照として見てみてくださいな。

 ちなみに均等色空間上で、変更前と変更後の色差を計算しておきましょう。
 XYZ表色系からL*a*b*色空間へ変換する式は、
 L* = 116.0 x (Y/Yb)^(1/3) - 16.0
 a* = 504.3 x ((X/Xb)^(1/3) - (Y/Yb)^(1/3))
 b* = 201.7 x ((Y/Yb)^(1/3) - (Z/Zb)^(1/3))
 (標準照明光Cの場合,Xb:98.072, Yb:100.000, Zb:118.225)
であり、色差は、L*a*b*均等色空間内の2点の色度間の距離でありますから、
 dE = SQRT((L1* - L2*)^2 + (a1* - a2*)^2 + (b1* - b2*)^2)
となります。
 以上の式に当てはめて計算すると、
 L1* = 83.58, a1* = -49.20, b1* = -5.65
 L2* = 95.66, a2* = -21.21, b2* = 0.82
 dE = 31
となります。

 ちょっと、学術的な色の話になってしまいました。もうすこし、ソフトで芸術的な色のお話がさらにご希望の方は、NaO's COLOR PAGEを見てみてください。パーソナル色判断もありまして、とても素敵なページです。

 参考文献:「色彩工学の基礎」池田光男著,朝倉出版(1980年9月初版)
     :「色の性質と技術」応用物理学会光学懇話会編,朝倉出版(1986年10月初版)
     :「JISハンドブック色彩」日本規格協会(1986年4月第1版)



秋谷裕之ホームページ / ri7h-aky@asahi-net.or.jp