チュートリアル
商品写真の色が違って見える理由：実践的なsRGBワークフロー
商品写真の色が合わない原因が、クリエイティブ、書き出し、表示のいずれにあるかを特定します。診断表とウェブ対応画像のための明確なワークフローが含まれています。
商品写真の色が違って見えるのは、画像自体が変更された、カラープロファイルの処理方法が異なった、または表示ディスプレイが違うといった理由が考えられます。商品色を調整する前に、同じファイルを比較してください。一般的なウェブ配信では、sRGBコピーが実用的な出発点となりますが、すべての画面を同一にしたり、間違った色で生成された商品を修正したりすることはできません。
最も迅速で有用な診断は、承認されたオリジナル、書き出された配信ファイル、そして顧客が実際に目にする画像の3つを比較することです。これにより、不一致が最初にどこで発生したかがわかります。
どのような種類の不一致があるかを特定する
商品ページで紫色に見える架空のネイビーのキャンバスバッグを想像してみてください。すぐにマスター画像を再着色しないでください。まず、紫色の色合いがオリジナルにすでに存在するか、それとも後から現れるのかを確認してください。
| 観察事項 | 調査対象 | 最初の有用な比較 |
|---|---|---|
| オリジナルのどのビューでもバッグが紫色に見える | 撮影時の照明、編集、または生成された製品の色 | オリジナルと信頼できる製品参照との比較 |
| オリジナルは正しく見えるが、書き出されたコピーが変わる | 書き出し時のカラースペース、プロファイル処理、または調整 | 同じカラーマネージメント対応アプリケーションで両方のファイルを確認 |
| ローカルの配信ファイルは正しく見えるが、アップロードされた画像が変わる | 宛先での変換、または実際に提供されたファイル | 配信ファイルと公開バージョンとの比較 |
| 同じファイルが2つのアプリケーション間で異なる | アプリケーションのカラー処理と表示設定 | 比較可能な表示条件下での全く同じファイル |
| 同じファイルが2つのデバイスで異なる | 画面設定、キャリブレーション、表示環境 | 一貫した参照ディスプレイと2番目の通常の表示確認 |
これらは診断の方向性を示すものであり、特定の画面のリモート診断ではありません。複数の要因が関与している可能性があります。
マスターとウェブ用コピーを分離する
後で必要になる可能性のある作業を保持する承認済みマスターを保管してください。意図する宛先用に別の配信コピーを書き出します。その寸法、フォーマット、出力カラープロファイルを記録しておけば、推測することなく再現できます。
Adobeはウェブ表示を目的とした画像にはsRGBを推奨しており、ウェブ用に保存する前に他の埋め込みプロファイルから画像を変換する方法を説明しています。また、制御されていないディスプレイがオンラインでの色の整合性をどのように制限するかについても解説しています。
Photoshopを使用している場合、その「プロファイル変換」ワークフローは、既知のプロファイル間で変換するための関連操作です。単にファイルの名前を変更して、その外観が保持されていると仮定しないでください。ファイルのソースプロファイルが欠落しているか不明な場合は、任意のプロファイル変更を行う前にその情報を確立してください。
ファイル拡張子だけでは、完全なカラーワークフローはわかりません。2つのJPEGファイルが異なるプロファイル情報を持っているか、異なる方法で処理されている可能性があります。実際に引き渡すファイルを検査してください。
作業カラースペースと出力選択を混同しない
写真アプリケーションは、あるカラー環境で編集し、別の環境で配信ファイルを生成することができます。Capture Oneのカラーに関するドキュメントは、その内部処理とICCプロファイルを通じた出力変換を区別しています。関連する引き渡しは、エディター内でRAWプレビューがどのように見えるかだけでなく、書き出された画像です。
製品チームにとって、これは配信メモに出力選択を記録することを意味します。「私の編集アプリケーションでは正しく見える」は有用な情報ですが、ウェブサイトは書き出されたファイルを提供します。アップロードする前にそのファイルを確認してください。
生成されたアートワークの場合、ダウンロードした画像から始め、その既存のプロパティを検査してください。それが同じカメラRAWワークフローを使用している、または作成ツールがプロフェッショナルなカラーマネージメントコントロールを公開していると仮定しないでください。
製品自体が間違っている場合に画像を修正する
カラーマネージメントは、誤って描かれたバーガンディのバッグを正確なネイビーのバッグに変えることはできません。クリエイティブがすでに製品参照と異なる場合は、まずクリエイティブの修正を行ってください。
Panelly Studioでの有用な修正依頼は、次のようになるでしょう。
このバージョンのバッグは紫色に見えます。@image1のネイビーのキャンバスに合わせてください。
参照にあるクリーム色のステッチ、長方形のフロントポケット、シルバーのジッパーは維持してください。
暖かい背景は維持しつつ、バッグに直接当たる色付きの光を減らし、ネイビーの色が認識できるようにしてください。
同じ製品名と最終行で、完全に修正された4パネル画像を生成してください。これは視覚的な結果を求めるものであり、レンダリングされたすべての表面で正確な色値を約束するものではありません。同じ表示条件下で修正版と参照を比較してください。暖かいシーンがまだ製品の色を強く変化させている場合は、雰囲気のあるシーンと並行して、よりニュートラルな製品に焦点を当てたフレームを使用してください。
16進数カラーだけでは、撮影された素材を完全に記述することはできません。テクスチャ、ハイライト、シャドウのすべてが可視表面に影響を与えます。実際の参照を使用し、どの外観が認識可能であるべきかを指定してください。
通常の条件下でアップロードされたアセットを確認する
書き出し後、配信コピーをカラーマネージメント対応アプリケーションと宛先のプレビューで開いてください。キャッシュされた古い画像や、別のワークフローを経由したスクリーンショットではなく、同じバージョンを比較していることを確認してください。
次に、顧客向けのページを検査してください。変換された画像が提供されている場合は、その結果も比較してください。架空のバッグに関する有用な配信メモは、「ネイビーバッグ v3; 参照Aに対して承認済み; sRGBでウェブ用コピーを書き出し済み; デスクトップと電話で製品ページを確認済み」と記載されるかもしれません。これは、普遍的な色精度を主張することなく、確認した内容を記録するものです。
2台目のデバイスは、自動的な権威としてではなく、実用的な確認として使用してください。暖色系の電話画面だからといって、マスターを寒色系にする必要があるとは限りません。1つのデバイスを補正するためにすべての製品画像を変更する前に、表示モードと表示条件を確認してください。
キャンペーンでニュートラルな参照を維持する
雰囲気のある広告は強い光と色を使用できますが、製品詳細画像は実際の仕上がりをより明確に示します。これらの画像に異なる役割を与えてください。キャンペーンは、青いアイテムを別の購入可能なバリアントのように見せることなく、視覚的に特徴的なままでいることができます。
書き出し前のクリエイティブな選択については、製品ライティングガイドを参照してください。配信段階では、再現可能な書き出しと比較プロセスを維持してください。適切な段階で問題を解決することで、技術的な調整が不必要な再設計になるのを防ぎます。
よくある質問
sRGBを使用すれば、すべての電話で画像が同じに見えますか？
いいえ。sRGBは実用的なウェブ配信の選択肢ですが、ディスプレイ設定や表示条件は依然として異なります。絶対的な保証としてではなく、一貫したワークフローの一部として使用してください。
あるブラウザで製品の色が間違って見える場合、製品の色を変更すべきですか？
まず、全く同じファイルを別の適切なアプリケーションで比較し、そのプロファイルと書き出し履歴を確認してください。引き渡しを診断する前にクリエイティブを変更すると、新たなエラーが発生する可能性があります。
PanellyはICCプロファイルの編集機能を提供していますか？
このワークフローはその機能を前提としていません。Studioで完全なクリエイティブを洗練させた後、必要なプロファイルの検査や変換には適切な画像アプリケーションを使用してください。
