Photoshopの画像が別の画面で違う色に見えたら、何を比べるか

パソコンでは落ち着いた緑に見えたのに、スマートフォンでは鮮やかすぎる。そんなとき、すぐに色を塗り直すと、原因が分からないまま別の端末に合わせる作業になってしまいます。まず比べたいのは、制作中のデータと、実際に掲載する画像です。

色空間は、画像の色を数値で扱うときの範囲や基準を表します。AdobeのWeb表示向けの説明では、sRGBを使う方法と、既存の画像をプロファイル変換する手順が案内されています。カラープロファイルは、数値をどの色として扱うかを伝える情報です。

制作時と書き出し時で、この扱いが異なっていないかを確認します。例えば元データがどの色空間で、掲載用のJPEGやPNGをどの設定で書き出したかを控える。画面で見た印象だけで修正を重ねるより、同じ条件の画像を比較しやすくなります。

試す際は、元の制作データを残し、掲載用のコピーで変換と書き出しを行います。書き出した画像をパソコンのブラウザで開き、次にスマートフォンでも同じ画像を見る。Photoshopの作業画面と、SNSへ掲載した画像だけを比べると、どの段階で違いが生じたのか分かりにくくなります。

端末側の明るさや、画面の色を調整する設定も見え方に関係します。すべての画面で完全に同じ色に見せることを、書き出しの設定だけで約束することはできません。だからこそ、画像側で確認できる条件と、見る端末側の違いを分けて考えます。

ブランドカラーを扱うなら、基準にする色の指定、使った設定、掲載用のファイルを一緒に残しておきます。担当者が変わったときも、どの色を目指したかを説明できるからです。「もう少し緑を濃くする」の前に、同じファイルと同じ条件を比べているかを確かめたいと思います。