【Web Design】Webデザイナーのカラー設定

大前提として現実世界の色味とディスプレイの中の世界で、完璧に色味を合わせることは不可能だということや、Webの場合、ディスプレイ（パソコン、スマートフォン）の性能や経年劣化、ディスプレイのカラー設定、ブラウザの種類やバージョンといった環境によって色味が変わる。ということは頭にいれておかなければならない。

その上で、「できるだけ多くのユーザーに、統一されたWebサイトや商品のイメージを伝えていく」という目標を持って、Web制作を進め、最終的にクライアントや代理店とのコミュニケーションの中で調整していくことが大切だと思う。

■Web制作の環境に対する考え方

---

Webを制作する環境としては、できるだけ、汎用的かつ、自分たちの基準となるカラー設定を用意しておく必要がある。Webの場合は基本的に「sRGB色域」が比較的多くのユーザーに同じイメージで伝えられる。

しかし、デメリットとしては表現力がAdobe RGB色域などよりも劣るということが言える。繊細な色を操る卓越した色彩感覚の持ち主では、その感性が宝の持ち腐れになってしまうが、Web制作に関しては「制限のあるsRGB色域の中で、どう美しく見せるか」ということが重要になる。

■実際の作業環境

---

まず、ディスプレイのカラープロファイルはsRGB。
理由としては、この設定で世の中のWebサイトがどう見えているかを理解し、相対的に自分たちの制作するサイトの色味がどこに着地すればよいのかが、感覚的にわかりやすい。

次にPhotoshopのモニターのカラー設定に合わせる。これでディスプレイとPhotoshopのカラー設定が合う。
つまり、ブラウザのスクリーンショットを撮って、それをPhotoshopに読み込んでもプロファイルの不一致はなく、スポイトツールで色を採っても、同じ色となる。XDの場合はデフォルトでsRGBなので問題ない。

あとはIllustrator。
これもモニターのカラー設定に合わせる。

これで、Webブラウザ、Photoshop、XD、Illustratorと、アプリ間でデータのカラーが変わらなくなる。つまり、自分で制作する場合は、デザイン、イラスト、写真、コーディングデータで色味が変化しない。

フロントエンドエンジニアへのデータ受け渡し後も、Photoshopであれば、sRGBか、Web・インターネット用に設定していると想定されるので問題ない。XDの場合はカラーマネジメントが無いのでそのまま作業すれば問題ない。

この制作環境を基準とした上で、色を調整していくことができる。

■まとめとして

---

見る環境と作る環境をできるだけ一致させることで、制作時と完成時で色が変わるということを防ぐことができる。

そして、完成したものを基準として、もうちょっと鮮やかにしたいなど、色を最終調整していく。

この方法はひとつの方法であり、作り手の数だけ制作方法がある。
冒頭で書いたとおり、「できるだけ多くのユーザーに、統一されたWebサイトや商品のイメージを伝えていく」という目標にさえ向かっていれば、どんな方法でも自由だと思う。

■（オマケ）製品写真など、プロファイルが埋め込まれたものがきた場合

---

Photoshopで「作業用スペースの代わりに埋め込みプロファイルを使用」で読み込む。これで、データの制作者が意図しているカラーとなる。

データを開いた後、
●編集＞プロファイルの変更を選び、
●カラースペースをsRGB
●変換オプションのマッチング方法を知覚的
にしてOKを押す。

これで、知覚的には同じように見える色味でsRGBに変換される。この方法でないと、色味がかなり変わってしまうため、よくある色の不一致の問題になりやすい。

■おすすめ書籍

---

・動くWebデザインアイディア帳
・あえての、RetinaではないiMacの最終形
・Apple Studio Display
・なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉