CSS Nite LP, Disk 14

1. 写真の色に関するトラブルをなくせ
∼ その色、本当にあってますか？ ∼
こもりまさあき

2. 1972年生まれのフリーランス
Webをはじめとしたネットワーク関連業務のほか、
テクニカルライティングや講師などの活動が中心。
時と場合によって職種が変わるため、肩書きはなし。
近著に、『HTML＋CSSコーディングが10倍速くなる
Zen Coding（共著）』、『HTML+CSSコーディング ベストプ
ラクティス（共著）』他、多数。
TwitterandInstagram:@cipher
こもりまさあき
簡単に自己紹介
http://eee.am/cipher

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

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

5. こんなことになってませんか？
自分の環境以外で見たら･･･あれ？あれ？、違う･･･
Internet Explorer 8 for Windows Safari 5 for Windows Google Chrome for Mac

6. • モニタを見る環境の違い（環境光など）
• WindowsとMacの環境の違い
• ブラウザごとの挙動の違い
• さらには、モバイルデバイスの存在…
• 相手を知ることが大事
閲覧環境の違いをしっかり認識しよう
WindowsとMac、そしてブラウザ･･･

7. ブラウザとOS環境のカラーマネジメント
ブラウザのカラーマネジメントの有無とOSの挙動
CMS IE9∼あり 3.x∼あり あり なし なし
Explorer Firefox Safari Chrome Opera
• CMSが機能すれば、プロファイルを解釈
• Windowsは、基準となるsRGBとして描画、
Macは、OSレベルでカラーマネジメントされて描画

8. 1. 閲覧環境による表示の違いを認識
2. カラーマネジメントの仕組みを覚える
3. アプリケーションごとの特徴を理解
4. そのうえで、異なる環境でも正しく
表示されるよう色味をコントロール
環境の違いを克服するにはどうする？
異なる環境でも色味を正しくコントロールするには

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

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

11. 1. カメラマン提供のデータをそのまま
使ったらIEでみた表示色がおかしい･･･
2. 「これではいかん！」と色補正したら
かえってクレームが･･･
3. 「商品と写真の色が違う！」とクレーム
4. Fireworksで開いたら、色が変になった
こんな状況が起こりうる
例をあげると…

12. 1. Adobe RGBの色空間のファイルだった
→ 表示できるのは、Safari、Firefox、IE9のみ
2. ファイルの色空間を無視して補正した
→ 正しく処理しないとモニタで表示色は変わる
3. 作業環境の色空間で保存してしまった
→ 対象にあわせて適切に変換し保存する
4. FireworksとPhotoshopの違い
→ それぞれの特徴を知ってデータ変換する
その原因は、色空間にあり
色空間の存在を無視すると取り返しがつかない

13. • カメラは、AdobeRGBやsRGB
• Windowsは、sRGBが基本
• Macは、システムレベルで調整
• モニタやプリンタは機種ごとに違う
• プロファイルは、JPGに埋め込み可*1
色空間とプロファイル
色空間は、表示可能な色の範囲。
プロファイルはデバイスごとの特徴を記述したもの
*1:プロファイルは、JPG以外にPSDやTIFFに埋め込むことができる

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

15. • 異なる色空間同士で色を翻訳、
それがカラーマネジメント
• デバイスごとに異なる色空間でも、
正しく変換されれば色味は保たれる
• カラーマネジメントを理解すれば、
少しの誤差程度におさえられる
カラーマネジメントとは？
異なる色空間でも同じように見えるよう色を変換
CMS
相互に変換
AdobeRGB sRGB

16. • インターネットの標準は「sRGB」
• ユーザ数の多いWindowsも「sRGB」
• ブラウザのカラーマネジメントは、
まだ限定的な環境でしか機能しない
• ならば、sRGBにしようじゃないか
現状は、最終的にsRGBにする
閲覧環境の最大公約数にあわせるのが無難

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

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

19. • モニタの色合わせというより、
正しく色表示できるように調整する
• Windowsは「Calibrize」などで*1
• Macintoshはシステム環境設定で
まずは、キャリブレーションからはじめよう
モニタを調整して正しい色表示ができるようにする
*1:Windows7からはシステムのコントロールパネル内に「色の調整」というメニューがある

20. • Creative Suite全体で動作する
カラーマネジメントの機能が表向き見えない
• CS4以降では、プロファイルが
埋め込まれたPSDは、「sRGB」に変換される
• つまり、Fireworksの作業空間は「sRGB」
• ただし、書き出し時にプロファイルは埋め込まれない
Fireworksの作業環境の特徴
Photoshopと異なるFireworksの作業スペース

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

22. • 何が何でも「sRGB」である
• JPGファイルに埋め込まれた
プロファイルは無視されるので注意
• 第三者との間での素材の受け渡しは、
プロファイルの埋め込まれたPSDか
Fireworks PNGを使う
Fireworksのみで作業が完結する場合
sRGBであることを頭の中にいれて作業

23. • PhotoshopもsRGBの色空間で作業 *1
• sRGB以外の色空間の場合は、
1. そのプロファイルを保持する
2. sRGBにプロファイルを変換保存
• そして保存、Fireworksへ
PhotoshopからFireworksへのデータ移行
Fireworksが、sRGBであることを前提に
*1:Photoshop（CreativeSuite）のデフォルトのカラー設定「一般2」でRGBの作業スペースは「sRGB」

24. • Fireworksの書き出すデータには、
プロファイルが含まれていない
• 移行は、Fireworks PNGかPSDで
• カラーマネジメントされてないので、
環境にあわせた色空間に変換する
• Creative Suite のカラー設定を確認
FireworksからPhotoshopへのデータ移行
Fireworksのデータにはプロファイルが付かない

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

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

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

28. で、最後は「sRGB」

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

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