WEBセーフカラーは気にすべき？

　自分でテンプレートをカスタマイズしようとする際に、 216色のwebセーフカラーを選択すべきなのだろうか？

　直球で言うと、216色？そんなもん気にせんで、いいらしいぞ～！
　というのが私の結論である。

　Webセーフカラーって、一体…?!
　という人でも、記事を作成する画面のツールバーに 「Ａ」 の文字がある事、カラーパレットから色を選べる事、なら知っているだろうと思う。

　これがWebセーフカラーで、一応、どんなPC環境でも、同じ色が表示される、全216色。
　という事になっているが… 。

　つまり、この中から選べば、私のPCでもあなたのPCでも同じ色に見えるのよ～、のハズ！ の色だ。

　かねてから気になっていた事に…、他のモニターではどう映っているのだろうか？、という疑問があった。

　よくパソコン雑誌の新機種比較の記事を見ると、 Windowsだけでもメーカーによって明るいとか、ちょっと暗いとかの多少の差がある上に、 MacintoshはWindowsより明るいときている。 （私はWindowsなので、 Macintoshは白っぽく色がとんじゃっているように感じるが… )

　逆を返せば、 Macintoshでデザインしたもの(または画質調整した写真とか)を、 Windowsのモニターでみると暗い、ということになる。

　詳しく話すと「ガンマ値」とか、 Macintoshでは標準装備だが、 WindowsではPhotshopなどのグラフィックソフトを用いて補正するとか、 一般ユーザーは補正をいていない人がほとんど、など難しい用語が出てくるので、はぶく。

　そうかぁ、 WindowsとMacintoshでは、色が違うんだー、と覚えておけばよしとしよう。

　◆　ＲＧＢ値

　　まず、これから。 「効果的に伝えるWeb配色標準デザインガイド」 から抜粋。

コンピュータのディスプレイは光りの三原色と呼ばれる
R（赤）・G（緑）・B（青）の光りを混ぜ合わせ、その比率により色を決定していく事ができます。
　初期のコンピュータは白と黒や８色程度の表示しか出来ませんでしたが、 現在では殆どのコンピュータがRGBのそれぞれを２５６段階で変更できるようになっています。
　つまり、２５６の3乗、 16,777,216色を表示する事が可能です。それぞれ２５５が最も明るく、 0だと光りが点灯していない状態となります。

というわけで、合計16,777,216色の表示が可能。
　でも、これ。あくまで“可能”。

　ユーザーのPC環境によるからだそうだ。

　人によって、 256色(8bit)・ 65,536色(16bit)・ 16,777,216色(24bit)とモニターのカラーモードが違うらしい。
　ちなみに私のPCは、32bitになっている。

　≪自分のは？≫
　Windows XPでの操作しかわからないが、モニターの何も無いところで、 「右クリック」→ 「画面のプロパティ」のウインドウが現れる。
　「設定」タブをクリック→ 「画面の色」の箇所で確認できる。 　（他のOSでも、画面の設定や確認をする操作があるはず）

　で、なぜ“可能” の域をでないのか？

　どんなに沢山の色を駆使して、かっこよくデザインしても、 見る側の環境が「256色しかない」のであれば、代わりの色に置き換えられてしまう、からである。

　特に、グラデーションを使ってあると、徐々にぼかした筈の箇所が、階段状に色分けされたりする。

　◆　16進数

　CSS編集を出来る人ならみたことのある、＃ ○○○○○○　という色の指定をする英数字。

　　ココログだけどCSS編集を知らな～い、って人でも、 文字の色を変えたい時に、数色のカラーパレットが並ぶ右横に、得体の知れない英数字が並んでいるのを見たはず。

　ＨＴＭＬでの色の指定は、この16進数で表される。
０～２５５の色を00～FFの英数字で、赤を2桁・緑を2桁・ 青を2桁、の6桁で表示する。

　ということで、この英数字を指定する事で、本文のフォントや枠線の色を決めるのである。

　だから、あのカラーパレットに無い色でも、 この英数字を直接変えれば、好みの色に変えられる！

　ココログを始める時、一番引っかかりやすいのがここかも知れない。
　私などカラーパレットの中に選びたい色がなくて、自分の思い描くテンプレートに出来ないと、ずいぶん頭を悩ませていた。
　今となっては笑い話。

　色見本は、大概のHTMLやCSSの本に載っている。
　以前紹介した 「HTMLタグ辞典」 や 「スタイルシートデザインレシピ」 にも載っている。

　＃○○　○○　○○
　　↑　　　↑　　　↑ 　　
　　　 Ｒ　　　Ｇ　　　Ｂ　
　　 （赤）　（緑）　 （青）

　HTMLはこの６桁の数値で表記する事になっている。

　だから、あの横並びのパレットに無い色でも、この数字を当てはめれば、好みの色は表示される。

これ以外にも色の名前で指定する事が出来る方法もある。

　　font-color：Blue;　←　のように。
　ブラウザによりけりなのでお勧めできないけど。

　◆　Webセーフカラー

　どのメーカーのモニターでも、 OSでもブラウザでも、「赤」なら同じ「赤」が表示されるはずの、この216色。

　8bitのカラーモードが256色なのは、 このセーフカラー216色＋OSのシステムカラー40色。

　だが、 16bitのカラーモードでは、違うらしい。

　つまり、８bit以外のカラーモードでの閲覧者には、 こちらが意図した色では伝わらない可能性があるという事。

　問題は、じゃあ８bitのカラーモードで閲覧している人がどれだけいるのか？ 　である。

　各々、自分のブログのアクセス解析で確認できるが、私の場合は、ほぼ居ない…。

　見てない人に合わせていたなんてっ…、なんて事！

そしてもっと“なんて事！”　なのは、この216色すら、実は正確ではないという点！
　改善はされてきているらしいが、「絶対」と断言は出来ないようだ。

　ここまでくると、RGB値とか、 16進数とかが理解できていなくても、 「WEBセーフカラーって、どこがセーフ？」という気になってこないだろうか!?

　という訳で、私個人としてはＷＥＢセーフカラーは、

＊） WindowsとMacintoshでは色が違う事。

＊）一般にはカラー補正を知らない人が殆ど。

＊）３２bit・２４bitのカラーモードで作った画像は、それ以下の低bitのモニターでは他の色に変換されてしまう。

＊）よって、ユーザー側のモニター環境によって、違ってしまう可能性。

　これはオーバーかもしれないが↓↓
色が違うとはこういう事。

　　　　　　　

　この辺の事を頭の隅に入れておいて、
知った上で色の選択をする事にした。

　もし、他のモニターで見た時自分のPCと違って見えても、
違ってしまう色を分かった上で選択するなら、自己責任ってことであきらめもつく。

　このブログの画像も、「補正されてないカラー」で確認しているので、 Windowsの補正したカラーの人には、私より多少赤みがかった画像となっているかもしれないし、 Macintoshの人は、 Windowsの人以上にピンクっぽいかもしれない。

（注）　色が違うといっても、赤が青に変わってしまうわけではないから、ご心配なく。
　「色が違う」というのは、例えば 「黄色よりのオレンジ色にしようとしたら、かなり濃いオレンジになってしまった」というような違いの事。
　

　ただし、WEBデザインの仕事をする場合は、クライアントの環境など、配慮する必要がでてくるだろうが。

効果的に伝えるWeb配色標準デザインガイド
― ユーザビリティ/アクセシビリティ/マーケティングを考慮した
サイトの色彩設計からの配色の実際まで

坂本 邦夫


by G-Tools

HTMLタグ辞典

スタイルシートデザインレシピ