Blog

Photoshopでデザインがあがってきてコーディングするという時、アセットで書き出した画像の色が違う…ということがありました。なんだかちょっと、色が浅い。

もちろんコーディングし終わって、クロームで確認しても浅いまま。
じゃあFireFoxで確認してみたら…と見てみると、Photoshopと同じ色で表示されました。

今まで、画像のプロファイルをなんとなくしか知らなかったのですが、クロームでかなり色が違ったのでなんとかしたい。
…と思って今回調べて結論を出しました。

＜結論＞アセット書き出しの色を元デザインに合わせる方法

結論から先にいうと、「プロファイル変換で可能。ただしカラーコードは変わる」です。

カラープロファイルは、デザインを作成し、保存するときに埋め込まれます。

デザイナーがデザインするときに、例えばカラープロファイルを「Adobe RGB (1998)」で作り、その色を基準にデザインを作成してしまったとしたら、アセット書き出しをする前にプロファイル変換をし、カラーコードや画像のプロファイルをsRBGに合わせてから、アセット書き出しをする必要があります。

ブラウザは、アセット画像を各ブラウザのカラーマネジメントによって表示する

Photoshopのアセットで書き出した画像は、プロファイルが失われます。

そして、カラープロファイルを持たない画像は、ブラウザによってカラーマネジメントされます。

では各ブラウザが、カラープロファイルを持たない画像をどう表示するのかというと、
最新のデータではないですが、ChromeとSafariはsRGB、FireFoxは設定によるということです。
FireFoxだとPhotoShopと同じ色で表示されていたのは、これが原因だったのかと思いました。
FireFoxがPhotoshop通りに表示していたということではなく、カラープロファイルのない画像をたまたまデザイン通りのプロファイル（もしくはそれに近い色のプロファイル）で表示していたということです。

プロファイルの変換をすると、PSDのカラーコードが変わる

現在のプロファイルを確認するには、Photoshopの左下にある「＞」を選択し、「ドキュメントのプロファイル」にチェックを入れます。

さらに、Photoshopの「編集」→「プロファイルの変換」で、プロファイルを変換することができます。

プロファイル変換のダイアログの「ソースのカラースペース」は、現在のプロファイルが表示され、「変更後のカラースペース」をプルダウンから選びます。
ここを「作業用 RGB - sRGB IEC61966-2.1」に変更し、OKを押すとプロファイルが変換されます。
（最初は「作業用 CMYK - Japan Color 2001 Coated」が選択されていますが、これはこのファイルがでCMYKであるということではありません。ただ単にプロファイルのプルダウンの一番上にあるからです）

※ちなみに、「画像を統合して外観を保持」にチェックが入ってると、レイヤーが統合され、1つになってしまいます。はずしましょう。

レイヤーの多いデザインはかなり時間がかかります。

また、下記ダイアログが出たら、ラスタライズすることをおすすめします。

仮に、「Adobe RGB (1998)」を「作業用 RGB - sRGB IEC61966-2.1」に変換してみます。

これで、同じ見た目でプロファイル変換ができたことになります。

Adobe RGB (1998)の方が、全体的に鮮やかですが、見るモニターによっては違いがわかりにくいし、ほぼ同じ色です。自分の環境でも、iMacのディスプレイでは違いはわかるのですが、サブモニタではほとんど違いがわかりません。

本題はここからです。

この状態で、水色のテキストのカラーコードを調べてみるとカラーコードが変わっていました。

Adobe RGB (1998) では #37ceff

sRGB IEC61966-2.1 では #00cfff

このままコーディングしてしまうと、違うカラーコードでCSSを書いてしまうことになります。
デザインとコーディングを一人で行っているなら自分だけの問題なので大丈夫ですが、
そうでない場合はコーディング時にカラーコードをデザインと変えてしまうのはあまりよくありませんので、デザイナーや、その他カラーコードを扱うチームメイトに伝えておく必要があります。

プロファイルを sRGB IEC61966-2.1 に変換した後にアセット書き出しすると、クロームなどのブラウザではPhotoshop通りの色が再現されます。
それは先にも書いた通り、アセット書き出しによりプロファイルが失われ、プロファイルがない場合はブラウザがsRGBで表示するからです。

しかし、すでにコーディングが終わった後でこれに気づくと、デザインのプロファイル変換をした上に、画像すべてアセットし直し＆CSSのカラーコードすべて書き直しとなります。

カラープロファイルをシミュレートできる「校正設定」と「色の校正」

Photoshopの「表示」の中に、「校正設定」と「色の校正」があります。これは、カラープロファイルの精度を使用して、モニター上で直接ドキュメントを校正することができる（ソフトプルーフ）というもので、特定の出力デバイスで再現した場合の色表示を、画面上でプレビューすることができます。

フォトショップの「表示」→「色の校正」にチェックが入っていたら、校正後のカラーになっています。
現在のプロファイルの色を確認するには、色の校正をオフにしておきます。

「色の校正」は、最初はオフになっていると思います。さらに私の場合は、校正設定は作業用CMYKになっていました。
この場合、色の校正はオフになっているのでCMYKが表示されているわけではありません。

しかし、最初オフになっていても「校正設定」を変更した時点で「色の校正」は「オン」に変わります。
このため、色の校正を変更したら色が変わった ＝ さっきまではCMYKで表示されてたんだ と勘違いしそうになりますが、校正設定を変える前は色の校正がオフだったことが多いので、本当に違いを確認したい場合はどちらも色の校正をオンにした状態で確認する必要があります。

色の校正は正確なのか

この校正設定のシミュレートについて、下記試してみました。

• 校正設定でsRGBをシミュレートしたもの
• sRGBに変換したもの

この二つは同じ色で表示されるです。

しかし、結果は違いました。

上が「色の校正」でsRGBをシミュレートしたもの、下がsRBGの画像です。

どちらもカラーコードは「37ceff」ですが、「色の校正」でシミュレートしている方が若干色が薄いです。

プロファイル変換をした画像も、全く同じ色になるかと思いきやモニターによっては違いが出る部分が若干あったので、私の知らない何かがあるのか、シミュレーションの限界があるのかもしれない…という結果でした。

まとめ

画像の色に関しては、アセットを使わず、プロファイルを埋め込むという方法もあります。「書き出し」→「Web用保存（従来）」で、プロファイルを含めた画像を保存すると、ブラウザもプロファイルに従って表示します。

試しに、カラープロファイルを含めた画像と含めない画像で容量を比べてみると、含めた方は＋2KBと大した違いはないので、手間以外はデメリットもなさそうでした。
しかしテキストなどCSSのカラーコードはどちらにせよsRGBで表示されることになるので、やはりデザインの時点でカラープロファイルをsRGBに設定しておく必要があると思いました。