たまーに見かけるCMYK-JPEGな失敗
ブラウザで見る画像はRGBでアップしないと色かなり変わりますよ。
どうなるか、というと、こうなります。
▼これが、
▼こうなる。
ちょっと目も当てられないくらい色変わりますね。
編集さんや広報担当者が書籍のPRなどで、手元にある校了（責了……？w）ファイルのカラーモードを変えずにJPEGにしたり、印刷会社から送られてきたファイルをそのまま確認せず投稿するとこういうことが起きます。
ブラウザによって変わる！
しかも怖いのは、投稿した本人には正常に見えているので気づかないこともある……というところ……使っているブラウザによってちゃんと見えたり、見えなかったりするのです。
デスクトップ版/iOS版のSafariでは、CMYK画像も割と正常に見えます（正確にとは言えませんが）。その他のブラウザ、デスクトップ版ChromeやFirefoxでは、いわゆる蛍光色ぽく色が変わって見えます。
なぜ色が変わる？
今のWEBブラウザは、Android版のブラウザを除き主要なものはカラーマネジメント表示に対応しています。RGB画像であれば、カラープロファイルが埋め込まれているものはきちんとそれなりに色変換の上表示します。ProPhoto RGBやAdobe RGBプロファイルが埋まった画像をsRGB相当のモニタで見ても破綻はしません。
こんな感じ。表示できる範囲の色はちゃんと同じ色で表示されます。
（※Android端末を持っていないので、7.0とか8.0以降の対応状況は把握していません。どうなってますの？）
詳しくはこちらで
しかしWEBブラウザのCMYK画像への対応には差があり、CMYKとしてカラーマネジメントした上で表示するものとそうでないものに分けられます。
CMYKデータはRGBに変換しないと表示できませんから、対応ブラウザではカラーマネジメントの仕組みを使って変換します。
データを受け取り、プロファイルに従って色を決め、その色になるRGB値をプロファイルに従って求めます（実際にはモニタプロファイルをどう扱うかの実装も絡みます）。
しかし非対応ブラウザは次のようになっているようです（結果からの推測です。コード読めないので）。
（※Javascriptコードにすると 『CMYK→RGB』http://www.openspc2.org/reibun/javascript/convert/007/）
このためとんでもないカラーで表示されてしまう訳です。
PhotoshopでCMYK画像をRGBに変換するには？
Photoshopでプロファイルを正しく使って開き、正しく変換しましょう。具体的には……
正しいプロファイルで開く
下の画像、どちらが正しく開けているものだと思いますか？
正解は、左の方です。右の方が鮮やかになっているのでこっちかな？と思うかもしれませんが、こちらは開き方をミスっています。元々の画像が持っているカラープロファイルで正しく開けば、左の色になります。
この画像、Photoshopの設定によっては、開く際に次のような警告が出ます。
「埋め込まれたカラープロファイルを持っています」
そのプロファイルはsRGBなので、ここで選ぶべきなのは一番上。「作業用スペースの代わりに埋め込みプロファイルを使用」して、sRGBの色として表示させます。2番目は色は変わりませんが、色域が作業用スペースのAdobe RGBになります。一番下は、埋め込みを無視して作業用スペースのAdobe RGBの色として開くため、上の右のように色が変わります。
他にも落とし穴的にカラー変換｜指定の判断を迫られる場面がPhotoshopにはあります。
が、Photoshopカラー設定が初期設定の状態では、プロファイル云々について意識することはできません。なんの警告も出ないからです。ですので、
もし、カラー設定のこのあたりのチェックが外れているようなら、入れておいたほうが無難です。このチェックが入っていないとPhotoshopさんはカラー設定内容に従って自動処理するため、内容を把握していない場合事故になります。
もうちょっとカラー設定について知りたい方はこちらを。
『知らないうちに事故ってるかも…！Photoshopカラー設定を「全部」見てみよう – やもめも』https://iwashi.org/archives/4024
RGB画像で説明しましたが、CMYK画像でも同じこと。作成時のプロファイルと違うプロファイルを使って開いてしまうと、例のように色が変わります。
印刷会社からもらう画像は、CMYKプロファイルが埋め込まれていないことが多いでしょう。ここできちんと正しいプロファイルを指定しないと、元のカラーが狂ってしまうのですが、国内の場合は「Japan Color 2001 Coated」を指定すればだいたい合います。
正しくプロファイル変換する
sRGBに変換します。単純に「イメージ」＞「モード」で変換すると、Adobe RGB画像になることがありますから、「編集」＞「プロファイル変換」を選んで「sRGB IEC61966-2.1」を選択して変換しましょう。
プロファイルを埋め込んで保存すればAdobe RGBだろうがProPhoto RGBだろうが、カラーマネジメントに対応しているブラウザであれば前述の通りそれほど外した色にはなりません。ここでsRGBに変換するのは、最も多いであろうsRGB相当モニタでカラーマネジメント非対応ブラウザで見る際に大きく外さないようにするためです。
プロファイルを埋め込んで保存する
WEB向けだとプロファイルを削除してしまうことが非常に多いのですが、きっちり埋め込んだ方が安全です。sRGBプロファイルを埋め込んで保存してください。
埋め込んでいない場合、カラーマネジメント対応ブラウザでも色が変わってしまうことがあります。どういうことかと言うと……
カラーマネジメントするためには、元がどういう出自なのか、変換先が何なのかが分からないと何もできません。出自や変換先を示すものがカラープロファイルです。
ですので、カラープロファイルが無いと、カラーマネジメントすることができません。プロファイルが無いと困るので、そういう場合ブラウザはとりあえず仮のプロファイルを使います。
Safariは、プロファイルが無い画像はsRGB画像だと見なして表示します。Firefoxも設定変更でそうなります。Chromeもv61でプロファイル無し画像はsRGBと見なす仕様になりました。
それ以外のブラウザでは、プロファイルが埋め込まれていない画像はモニタのプロファイルへスルーして表示します（初期設定の状態のFireFoxで確認できます）。このため、プロファイルが削除されたsRGB画像は、iMac5Kなどの広色域モニタで見るとギンギラギンの顔真っ赤で目がチカチカするヤバい感じに表示されてしまいます。（Firefoxを設定変更しないで使ってる場合とか。Safari/Chrome61以降ならそうはなりません）
sRGBに変換しているんだから削除してもいいだろう………と安易にプロファイルを消しちゃうと、最近はやりの広色域モニタのユーザーからは不興を買ってるかもしれません………
まとめると
Photoshopでちゃんと開いてきちんとsRGBに変換した上で、プロファイルを埋め込んで保存
が安全極まりない方法かと考えます。
Photoshop持ってねーだよ！
Macの場合は、コツが要りますがすぐできます。Winは便利なソフトウェアがあります。
（Mac&Win）プロファイルをDLしてインストール
Photoshop等入っていない場合、必要なプロファイルがインストールされていませんから、AdobeさんからDLしてきます。
『ICC profile downloads – Windows』https://www.adobe.com/support/downloads/iccprofiles/iccprofiles_win.html
解凍して「CMYK」フォルダを開くと、中にJapan Color 2001 Coated.iccが居ます。
Macでのプロファイルインストールは
Finderの「移動」メニューをOptionキーを押しながら開き、「ライブラリ」を選択します。
「ColorSync」フォルダ内にある「Profiles」に、Japan Color 2001 Coated.iccを突っ込みます。フォルダがない場合は作成してください。
Winでプロファイルをインストールするには
Japan Color 2001 Coated.iccを右クリックして、「プロファイルのインストール」で完了です。
Macでの変換方法
ColorSyncユーティリティで画像を開く
「アプリケーション」フォルダの「ユーティリティ」内にある「ColorSyncユーティリティ.app」を開きます。
「ファイル」＞「開く」から、変換したいCMYK画像を開きます。
「ｉ」ボタンを押して情報を表示させます。
ColorSyncプロファイルに「Japan Color 2001 Coated」など、「一般CMYKプロファイル」以外がある場合は、次の「プロファイルを割り当てる」ステップを飛ばしてください。
プロファイルを割り当てる
プロファイルが埋め込まれていないCMYK画像を開くと、ここが「一般CMYKプロファイル」になり、画像はPhotoshopで「カラーマネジメントをしない」を選択した時のように色が変わってしまいます。埋め込みが無いのでとりあえず仮のプロファイルとしてこれが使われてしまっている訳ですね。
埋め込みプロファイルを使用して開いた画像よりも暗く沈んでしまっています。
Adobe Stock:utako068：ピストルを構えた女性（破れたドレス）
ですのでまず、プロファイルを割り当てて正しい色味に直します。
「プロファイルを割り当て」を選択し、「Japan Color 2001 Coated」を選択して（「出力」サブメニュー内にない場合はログアウト＆ログイン）「適用」
色が少し明るくなるはずです。「ｉ」ボタンでプロファイルが割り当てられていることを一応確認してください。
※割り当てたら、次のステップへは保存せずそのまま進みます。
sRGBに変換する
正しい色味になったら、RGBに変換します。
「プロファイルに合わせる」を選択し、「sRGB IEC61966-2.1」を選択。もし「blackscaleing」ウンタラが付いてるものがあってもそれは選択しないでください。
適用を押し、「ｉ」できちんとsRGBなRGB画像になっていることを確認して、保存してください。
これで、CMYK画像を正しくsRGBに変換することができました。
実は、ColorSyncユーティリティーでの変換結果はPhotoshopのものとは完全一致しません。変換エンジンが異なるからですが、まぁついったに上げるくらいなら問題ないでしょう……🐸
Winでの変換方法
Colonをダウンロードする
Colonは、ちゃんとしたプロファイル変換を簡単に行うためのアプリケーションです。
『Colon : やんま まのblog（仮）』http://blog.livedoor.jp/yamma_ma/archives/3368568.html
インストールは必要ないので、解凍するだけです。
先に設定を行う
Colonには設定画面が三つあります。
このように設定してください。
変換先のプロファイル：sRGB（最初からシステムに入っています）
プロファイルは埋め込む
「代替プロファイル」で、プロファイルが埋め込まれていない画像をどのプロファイルで作成したと見なすかを選択します。こちら結構重要なので忘れないこと。
特に、プロファイルが埋め込まれていないことが多いCMYKデータでは、「Japan Color 2001 Coated」をきちんと選択しておかないと色が結構くすんでしまいますから注意しましょう。
ドラッグ＆ドロップ！書き出し！
ここからは簡単、画像ファイルを放り込んで、書き出すだけでsRGB（変換先のプロファイル）へ変換されます。複数ある場合は続けて放り込みましょう。
Colonバージョンアップでより簡単になったそうです（2020/03/08追記）