写真の色に関するトラブルをなくせ～ その色、本当にあってますか？ ～

こもりまさあき

1972年生まれのフリーランス

Webをはじめとしたネットワーク関連業務のほか、テクニカルライティングや講師などの活動が中心。時と場合によって職種が変わるため、肩書きはなし。

近著に、『HTML＋CSSコーディングが10倍速くなるZen Coding（共著）』、『HTML+CSSコーディング ベストプラクティス（共著）』他、多数。

Twitter and Instagram: @cipher

こもりまさあき

簡単に自己紹介http://eee.am/cipher

これからお話しすること

• 環境が異なるWebだから色が違ってよいの？• 色空間の違い、プロファイルの存在を意識する• Fireworksの特徴と作業時における注意点

環境が異なるWebだから色が違ってよいの？

こんなことになってませんか？自分の環境以外で見たら･･･あれ？あれ？、違う･･･

Internet Explorer 8 for Windows Safari 5 for Windows Google Chrome for Mac

• モニタを見る環境の違い（環境光など）• WindowsとMacの環境の違い• ブラウザごとの挙動の違い• さらには、モバイルデバイスの存在…• 相手を知ることが大事

閲覧環境の違いをしっかり認識しようWindowsとMac、そしてブラウザ･･･

ブラウザとOS環境のカラーマネジメントブラウザのカラーマネジメントの有無とOSの挙動

CMS IE9～あり 3.x～あり あり なし なし

Explorer Firefox Safari Chrome Opera

• CMSが機能すれば、プロファイルを解釈• Windowsは、基準となるsRGBとして描画、Macは、OSレベルでカラーマネジメントされて描画

1. 閲覧環境による表示の違いを認識

2. カラーマネジメントの仕組みを覚える

3. アプリケーションごとの特徴を理解

4. そのうえで、異なる環境でも正しく表示されるよう色味をコントロール

環境の違いを克服するにはどうする？異なる環境でも色味を正しくコントロールするには

カラーマネジメントを意識しましょう

色空間の違い、プロファイルの存在を意識する

1. カメラマン提供のデータをそのまま使ったらIEでみた表示色がおかしい･･･

2. 「これではいかん！」と色補正したらかえってクレームが･･･

3. 「商品と写真の色が違う！」とクレーム

4. Fireworksで開いたら、色が変になった

こんな状況が起こりうる例をあげると…

1. Adobe RGBの色空間のファイルだった→ 表示できるのは、Safari、Firefox、IE9のみ

2. ファイルの色空間を無視して補正した→ 正しく処理しないとモニタで表示色は変わる

3. 作業環境の色空間で保存してしまった→ 対象にあわせて適切に変換し保存する

4. FireworksとPhotoshopの違い→ それぞれの特徴を知ってデータ変換する

その原因は、色空間にあり色空間の存在を無視すると取り返しがつかない

• カメラは、AdobeRGBやsRGB• Windowsは、sRGBが基本• Macは、システムレベルで調整• モニタやプリンタは機種ごとに違う• プロファイルは、JPGに埋め込み可 *1

色空間とプロファイル色空間は、表示可能な色の範囲。プロファイルはデバイスごとの特徴を記述したもの

*1: プロファイルは、JPG以外にPSDやTIFFに埋め込むことができる

Adobe RGB？、sRGB？Adobe RGBとsRGBでは、色の再現領域が異なる

Adobe RGB sRGB

• 異なる色空間同士で色を翻訳、それがカラーマネジメント

• デバイスごとに異なる色空間でも、正しく変換されれば色味は保たれる

• カラーマネジメントを理解すれば、少しの誤差程度におさえられる

カラーマネジメントとは？異なる色空間でも同じように見えるよう色を変換

CMS

相互に変換AdobeRGB sRGB

• インターネットの標準は「sRGB」• ユーザ数の多いWindowsも「sRGB」• ブラウザのカラーマネジメントは、まだ限定的な環境でしか機能しない

• ならば、sRGBにしようじゃないか

現状は、最終的にsRGBにする閲覧環境の最大公約数にあわせるのが無難

繰り返します。最終的に「sRGB」です

Fireworksの特徴と作業時における注意点

• モニタの色合わせというより、正しく色表示できるように調整する

• Windowsは「Calibrize」などで *1• Macintoshはシステム環境設定で

まずは、キャリブレーションからはじめようモニタを調整して正しい色表示ができるようにする

*1: Windows 7からはシステムのコントロールパネル内に「色の調整」というメニューがある

• Creative Suite全体で動作するカラーマネジメントの機能が表向き見えない

• CS4以降では、プロファイルが埋め込まれたPSDは、「sRGB」に変換される

• つまり、Fireworksの作業空間は「sRGB」• ただし、書き出し時にプロファイルは埋め込まれない

Fireworksの作業環境の特徴Photoshopと異なるFireworksの作業スペース

繰り返します。Fireworksの作業空間は「sRGB」

• 何が何でも「sRGB」である• JPGファイルに埋め込まれたプロファイルは無視されるので注意

• 第三者との間での素材の受け渡しは、プロファイルの埋め込まれたPSDかFireworks PNGを使う

Fireworksのみで作業が完結する場合sRGBであることを頭の中にいれて作業

• PhotoshopもsRGBの色空間で作業 *1• sRGB以外の色空間の場合は、1. そのプロファイルを保持する2. sRGBにプロファイルを変換保存

• そして保存、Fireworksへ

PhotoshopからFireworksへのデータ移行Fireworksが、sRGBであることを前提に

*1: Photoshop（Creative Suite）のデフォルトのカラー設定「一般2」でRGBの作業スペースは「sRGB」

• Fireworksの書き出すデータには、プロファイルが含まれていない

• 移行は、Fireworks PNGかPSDで• カラーマネジメントされてないので、環境にあわせた色空間に変換する

• Creative Suite のカラー設定を確認

FireworksからPhotoshopへのデータ移行Fireworksのデータにはプロファイルが付かない

両方を行き来するなら「sRGB」で環境を統一すると楽

※Macの場合は、調整したモニタの色空間で編集・変換モニタがキャリブレートされていたりsRGB以外の色空間のファイルを取り扱う機会が多い環境では、PSの作業スペースがsRGB固定ではなく、モニタの色空間に設定されていることもあります。その際、FWのファイルをPSで開く際にファイルの色空間の適用（sRGB）で混乱する可能性があります。自身の環境をしっかり確認して、適切な色空間を指定、またはコンバートしましょう。PSの編集メニューにある「プロファイルの指定」と「プロファイルの変換」をうまく使いわけることが必要になります。

自分の作業スペースの色空間をしっかり確認しましょう

で、最後は「sRGB」

まとめ

• 制作時、閲覧時の環境の違いをしっかり認識する• 色空間の違いは、カラーマネジメントで解決する• Fireworksの作業スペースは「sRGB」• PSDにはプロファイルを埋め込んでデータ移行• 最終的に「sRGB」の色空間をターゲットにする

本日は、ありがとうございました