最初につけるプロファイルを間違えた!


#1

WebページのデザインモックアップをAiで作成。そのままパーツ流用でコーダーさんに渡すデータなのですが。
ウカツにもうっかりGeneric RGB Profileで新規作成してしまい、気づかずデザインを仕上げ、客先にも提出してOK出てしまいました。
完全に私のバカなんですが、特に以下の2点が悩ましいです。

・コーダーさんがうっかりsRGBで開いて色が変わってしまうのを防ぐ方法。
・実装後のブラウザのプロファイルのサポート範囲。

わかる範囲でご教示くださいまし。


#2

ブラウザの対応はこないだの勉強会でやんままさんがくわしくやったでつ( ‘ㅂ’)


上記プラスAndroidとかiPhoneとかも。

ただ、本件WEBブラウザのプロファイル対応はあまり関係ないですな。だってたぶんコーダーさん、最終的にプロファイル削除するよね。なので先様でどう開いてどう処理するかで変わります。

基本、sRGBにしなければ「Webブラウザとモニタ環境の平均中央に合わない」色で見えると考えて良き。
なので、最初から一般RGBプロファイルだった場合、

  • Illustratorで無警告で一般RGBで開く(見た目の色は変わらない)

    • PNGで書き出し→プロファイル埋まらないので、ブラウザで開くと濃くなる
    • JPEGで書き出し→一般RGBが埋まるので、正しく見えるブラウザとそうでないものが出てくる
      • あんど、プロファイルをImageOptiom等で単に削除すると濃くなる
  • IllustratorでsRGBとして開いてしまう(見た目の色は変わる、けど変わった、って分からない)

    • 以降、変わった色のまま進行する
      • 途中で書き出し&ブラウザ表示の色の違いで悩むかもしれない。

ってなるので、先様にかなりのプロファイルの扱いの知識が求められます。

a0002_009237_m
▲右が、一般RGBをsRGBとして見た状態。全般に濃くなる。

客先提出が、Ai生だったのか、PDFだったのか、JPEG等だったのかで、「どの色で見ていたのか」が変わるから、結果的に良かったのか悪かったのかは分からない………


#3

どーでもいい話ですが、先日私がDTPの勉強会(東京)で使ってたスライドも事故ってて、Generic RGBのPDFを投影しておりましたw

DecksetっていうMarkdownからスライド変換するソフトの書き出しデータを、無理矢理Illustratorで開いて修正したものという……。

閑話休題。

ColorSyncユーティリティで雑に比較したYxyのプロット図ですが、広い方がsRGBです。プロファイル無視してsRGBとみなして開くと、赤〜紫〜青のあたりに向かって確実に動いちゃいますね。

GenericからsRGBに変換できれば、損失はほとんど無さそう……納品後ということでそうもいかないんでしょうけど……。


#4

回答ありがとうございます。ブラウザ対応まとめ助かりますわ!

いや実はコーダーさんに連絡しまして、間違って一般RGBで作っちゃったので、プロファイルは埋め込みを使って開けてください。ってお願いはしたんです。一応。

でまあ、写真はそれぞれ記事をエントリーする時にプロファイルくっついてくるので問題ないのですが。
問題はCMSのテーマに使用するパーツ類で、これがsRGBでひらくとRGBの数値からして変わっちまうのが困りものでして。
背景が鮮やかな青なので差がよく目立つ目立つ。

で、これ普通はイラレのパーツからカラーの数値拾ってコーディングするんだけど、書き出した画像とコードで記述したCSSの色の差異がでちまわないかどうかヒヤヒヤしてる訳です。一般RGBのプロファイルが乗ってる画像と乗ってない画像が混在することなると思うので(jpgとpngの差もあるし)

今回はメインカラーサブカラー+アクセントカラーで色数それほど多くないので、背景の青のとこだけ乗り切っちゃえばどうにかなるかなーと思いつつ。(解決してない)

以前別件で発注側の制作会社がAdobiRGBに設定した状態でデータ共有したもんだから、sRGBとAdobeRGBで開くたびにどんどん色が変わるって恐ろしい事態になったこともあって、なかなか悩ましい問題だと思うのですコレ。


#5

CMSによって、というかWPだとサムネがプロファイルぶっ飛ばすので埋まってても怖いのですよ……
写真家さんのブログなんかで、サムネの色がえらく浅くなってたりするのはこれです。

あと、プロファイル変換では必ず誤差が出るので、一般RGB→sRGBと正しく変換かけても、カラー値は完全一致しません、実は。

▼は、ベタ塗りをモニタRGB→Adobe RGBへカラー変換したものですが……
8bitではディザ処理が入るため、よく見るとこうなります。(強調処理してます)
※16bitでも、8bitに落とす際にこうなります。

可能なら元データに戻って修正かけるのがベストだと思うけど、そんなこともいってらんないよね…