Webセーフカラーはサイトデザインするうえで覚えておくべき?

Webセーフカラーはサイトデザインするうえで覚えておくべき?

皆さんはWebセーフカラーって聞いたことありますか?

もしかしたら年代によってかもしれませんね。聞いたことないという方が多いのではないでしょうか。私がwebに携わり始めた14年くらい前は大学の講義でも、その名前が出てきていました。(そんな風に記憶しています)

簡単に説明すると、WindowsやMacといったOS、ディスプレイなどのハードウェアなど個人個人のウェブサイトの閲覧環境が異なっても正しく同一に表現される216色の色を指します。どんな環境でも同じように閲覧できる=セーフということでWebセーフカラーと言われていました。確かに今の時代も個人個人が持つデバイスはPCやスマホなど様々ですし、OSも昔と変わらずWindowsやMacOS、スマホであればアンドロイドなどいろいろですから、「そういわれると気にしなくてはいけないのかな・・・」とWebディレクターを始めたばかりの方はなんだか不安になるという方がいらっしゃるかもしれません。こちらのページではwebセーフカラーを気を付けるべきか?ということを解説いたします。

Advertisement

Webセーフカラー、果たして気を使うべき?

結論から言います。

気を配る必要は全くありません。

もうこれが答えです。

そもそもなぜWebセーフカラーが存在するかというと、閲覧環境によって見え方の差異をなくすためのものであって、Webセーフカラーに指定されていない色は表現できないというわけではないからです。

そもそもデザインするうえで216色では圧倒的に足りないですよね。また指定されたロゴやキャラクターによってはWebセーフカラーにない色を使っていることもあります。そのような場合、制作者側が勝手に色を変えることはできませんからそもそもWebセーフカラーのみでサイト制作をする、デザインをするというのは現実的に無理なんですよね。

また例えWebセーフからを使っていたとしてもディスプレイよって見え方が違いますから、正直意味ないんですよね。ですからディレクターの方がデザインをチェックする際などにはどうぞ気になさらないでくださいね!

ちなみにWebセーフカラーってどんな色?と気になる方はこちらをご覧ください。

【Webセーフカラーコードが一目でわかるWEB見本帳 Web216】

https://www.colordic.org/s

ね!?少なすぎるでしょ。

色見本はどんな色にしたいのかを具体的に伝えるための手段にはなる

上記のサイトをご覧いただくとWeb216の他にもパステルカラーやビビッドカラー、モノトーンなどのタブを切り替えることによって様々な色を16進数(#●●●●●●の形)で確認することができます。

こうした色見本はデザイナーに対して、「こんな色にしたい」「この色にしてほしい」とピンポイントで指定する場合には直接的で非常にわかりやすいですよね。 私も自分でCSSを書く際にはちょくちょくとお世話になっています。「こういう色がいいんだけどな~」といった漠然としてイメージを具体化する際に是非参考になさってください。