私が初めてWEB制作の現場に携わったときのこと、そこでのWEB制作は多分にもれずポスターやチラシを元にWEBページを作るというものでした。

就業当初、クライアントの役員さんが事あるごとに「うちの会社のサイトは色が暗い。くすんでいる」と気にされていたのです。

実際サイトを拝見した印象は、全体的にパーツの色がくすんでいるし、写真画像はぼやけているような気がする……。本来なら色指定があるロゴの色までもなんとなく違って見えました。

どうしてそんなことになってしまっていたのでしょうか。それは紙媒体のデータとWEBブラウザでのカラーモードが違っているからなのです。

紙媒体～印刷物では、CMYKというカラーモードが使われています

これは簡単に言うと、色を分解して4色のインクを混ぜ合わせることで印刷時に再現するというものです。

スポンサーリンク

CMYKは、シアン(C/青系)、マゼンダ(M/ピンク系)、イエロー(Y)、キー・プレート(K/輪郭を引くための色～通常は黒)のことを言います。

一方、ブラウザ、モニター上で表現されるカラーモードはRGBというものが使われています。R(赤)、G(緑)、B(青)の3色で、いわゆる光の三原色と呼ばれるものです。

参考記事：印刷では色の三原色に黒を加えてCMYKが使われますがKの意味は？

カラーモードをRGBに変更しておく

スポンサーリンク

CMYKでは色を重ねていくとくすんで行き、やがて黒に近づいていきます。RGBでは色を重ねていくと白に近づいていくという性質があります。まるで正反対ですよね。

CMYKで作られたパーツは、印刷物では鮮やかな発色をする割合でも、ブラウザ上ではやや暗く沈んで見えてしまいます。

それを少しでも解消するために、CMYKで作られたデータはWEBパーツとして書き出す前に、Photoshopなどを使ってRGBにカラーモードを変更しておくと、色が沈みません。

Photoshopでのカラーモードの変更は、ツールバー＞イメージ＞モード　から、RGBとCMYKが選べるようになっています。

また、カラーモードを変更した場合は、カラーのダイアログもCMYKからRGBに変更しておきましょう。

こちらはカラーモードのパネルの右上部分から設定ができるようになっています。

スポンサーリンク