仕事としてデザインやプログラミングを行っているデザイナーやエンジニアだったとしても、設定により意図しないミスを引き起こしてしまうことがあります。
今回はPhotoshopのデザインデータを元に作られたウェブページが、「色味がちょっと異なっている」というフィードバックを受けたことで判明したPhotoshopのカラープロファイルに関する実際に起きた問題をご紹介します。
特にウェブデザインにおいては、デザインデータのカラープロファイルの設定が重要な要素となります。本記事では、Photoshopのカラープロファイル設定に関する問題とその解決方法について解説します。
目次
色味が異なっていたのはカラープロファイル設定が異なっていたためだった
最近、あるプロジェクトでPhotoshopデータ（以下PSD）を元にコーディングしたウェブページをクライアントに確認してもらったところ、「色味がちょっと異なっている」とのこと。最初は「RGBとCMYKの違い？」「モニターの違い？」などと思いましたが、デザインデータ確認時にCMYKかどうかは確認するし、だとしたら初歩的なミスだから初見で気が付きそうだし……なんだろう？と思い詳しく調査すると、デザイン作成側と開く側の環境でPhotoshopのカラープロファイル設定が異なっていたことが原因で、微妙な色味の違いが発生していたことが判明しました。
見た目が一緒でもカラーコードが異なるという問題
カラーコードとは白なら#FFFFFF、赤なら#FF0000というように、色を表現するために割り振られたユニークなIDのことです。
データ閲覧時や作業時に気が付かなかったのは、プロファイルが異なっていても見た目が一緒のためでした。
Photoshop上では見た目は一緒でカラーコードが異なる
例えば、この「Point 2」という深い赤い色の箇所。見た目一緒に見えますよね。実はプロファイルが違うためカラーコードが別物です。
ディスプレイ上は見た目一緒ですが、カラーコードが異なります。
ウェブブラウザ上では見た目が異なる
カラーコードが異なるため、実際にWebブラウザ上で確認すると若干見た目が異なります。くすんだ感じ、というんですかね。
このように、Photoshop上では見た目が一緒でもカラーコードが異なり、その結果画像書き出しやカラーコードを設定してWebブラウザで閲覧すると、色味が若干変わってしまっている、というような事態になるわけです。いやー困った。
問題の原因
状況がわかった後はなぜこんなことが起こったのかの調べました。
見た目に影響するため、カラー設定関係をみてみると、デザイナーから送られたPSDのカラー設定は「Adobe RGB」（他に「Display」というカラー設定のときも）が埋め込まれていたことが判明。この設定は一般的にウェブ用途で使用されるsRGBとは異なります。
Adobe RGBはより広い色域を持ち、印刷物や写真編集に適していますが、ウェブページやデジタルディスプレイは通常sRGBを使用します。sRGBとしてデザインデータを扱うことで、問題は発生しません。
今回のデザインは普段印刷媒体のデザインをやられていると思われるデザイナーから送られてきたPhotoshopのデザインデータだったため、カラープロファイル設定が印刷物に最適化されており、sRGBのカラープロファイル設定が埋め込まれない&プロファイルを設定変更せずに進めてしまった結果、色味の微妙な変化に気がつくことができませんでした。
- デザイナー側でプロファイルを「sRGB」に設定するか、渡すデータにsRGBカラープロファイルを埋め込む
- エンジニア側でフォトショップデータを開くときにカラープロファイル設定を変換する
どちらかが機能していれば防げる問題でした。ですが、この業界で15年以上経ちますが今回の問題が起こったのは初めて。なかなか気付きにくい問題かと思います。
プロファイル設定がsRGBに変更されることで、見た目は変わりませんが、RGB値が変更され、正しい色味で画像書き出しやCSSのカラーコード設定がされます。
Photoshopを扱うなら絶対設定しておきたいカラープロファイル設定
この問題を防ぐために、Photoshopのカラープロファイルを正しく設定するいくつかの方法をご紹介します。
Web用のカラープロファイル設定と開く時にプロファイルの確認ダイアログを表示するようにする（デザイナー・エンジニア両方）
これをやっておけば防げるため、絶対設定しておくことをおすすめします。
Photoshopの上部メニューバーにある「編集」から「カラー設定」を開くとダイアログが開きます。この中の「設定」で「日本 – 雑誌広告用」や「一般用 – 日本2」等ではなく、「Web・インターネット用 – 日本」に設定します。
また、「埋め込みプロファイルなし」の箇所を「開くときに確認」にチェックを入れると、プロファイルが異なる場合や埋め込まれていない場合にダイアログが表示されるようになります。これにより、プロファイルの不一致がすぐに分かり、適切な対応が取れるようになります。
デザインデータのプロファイル埋め込み（デザイナー側）
デザイナーが普段紙媒体のデザインをしている場合、Web用のデザインではsRGBプロファイルを埋め込む習慣を持つことが重要です。以下の手順でプロファイルを埋め込むことができます。
- 「編集」メニューから「プロファイル変換」を選択
- 「変換後のカラースペース」→「プロファイル」から「作業用RGB – sRGB IEC61966-2.1」を選択
- 「OK」をクリックしてプロファイルを変換
- ファイルを保存する際に、「カラープロファイルを埋め込む」にチェックを入れる（sRGBになっていることを確認）
PSDを開く際にカラーを変換（エンジニア側）
上記の「開く時にプロファイルの確認ダイアログを表示するようにする」を設定しておくことで、プロファイル設定が異なるPSDファイルを開く際にダイアログが表示されます。
「ドキュメントのカラーを作業スペースに変換」するオプションを選択すると、正しくsRGBに変換されます。これにより、Adobe RGBで作成されたファイルでも、作業スペースのプロファイルに自動的に変換され、ウェブ用に最適化された色が表示されます。
プロファイル変換の利用（エンジニア側）
異なったプロファイルで開いてしまっても大丈夫。「編集」メニューから「プロファイル変換」を選択し、ここでカラープロファイルを変更できます。Web用のカラープロファイルとして「sRGB IEC61966-2.1」を選択しましょう。以下の手順で設定を変更できます：
- 「編集」メニューから「プロファイル変換」を選択
- 「変換後のカラースペース」→「プロファイル」から「作業用RGB – sRGB IEC61966-2.1」を選択
- 「OK」をクリックしてプロファイルを変換
カラープロファイルを常に表示する設定（デザイナー・エンジニア両方）
上記の「開く時にプロファイルの確認ダイアログを表示するようにする」を設定をしていたとしても、PSDを開く際に、都度カラープロファイルが正しく設定されているか確認する癖をつけることが重要です。なぜなら、カラープロファイル設定はなぜか保存した設定からいつの間にかもとに戻ってしまうときがあるから……！（なぜかは不明。実際にありました）
気づかないで作業を進めてしまうと全箇所カラー設定をしなおし＆画像書き出し直しが発生して相当な手間です。トップページやLP着手時には必ず確認するようにしましょう。
以下の手順でプロファイル情報を表示できます。
- Photoshopでファイルを開く
- ウィンドウの「情報」枠内にあるメニューをクリックし「パネルオプション」を選択
- 「ステータス情報」欄の「ドキュメントのプロファイル」にチェックしてOK
- 情報ウィンドウにプロファイルが表示される
表示されました。
加えて、データを開いた後もそのデータが意図したプロファイルになっているかを確認できます。
PSDを開くと左下にデータに関する情報が表示されます。初期設定だとおそらくファイルサイズを表示している箇所。
ここの右矢印アイコンをクリックすると、複数のプルダウンが表示されますが、「ドキュメントのプロファイル」を選択するとそのデータのプロファイル情報が表示されるようになります。
一度設定しておけば他のPSDを開いたときも表示されるようなので、設定しておくことをおすすめします。
今回のケースの教訓
今回のケースでは、デザイナーが紙媒体のデザインに慣れているため、プロファイル埋め込みの習慣がなかったことと、PSDを受け取った後で確認する際にプロファイル変換がされなかったことで発生した問題であると考えられます。
- カラープロファイルの違いを理解し、ウェブ用のデザインにはsRGBを使用する
- Photoshopの設定を見直し、カラープロファイルを正しく設定する
- デザインデータを受け取った際に、プロファイルの確認と変換を徹底する
カラー設定が異なると、意図したデザインにならず、せっかく設定した色情報や画像データについても設定しなおしや書き出ししなおしという大きな手間が発生します。このような問題を発生させないため、共通のカラープロファイルを使用することが重要です。
適切なカラープロファイル設定を行い、無駄なやり直しや手間が増えないことを願う一方です。
ちなみに、今回はPhotoshopでのカラープロファイルについてでしたが、デザインツールのFigmaでもsRGBとDisplay P3の2つのカラープロファイルが用意されており、同様の不具合が発生するためご注意を。
コメントを残す