まずは、この場を借りてお礼を。ありがとうございました（深々）。

さて、当日はFireworks特集となるイベントでしたが、ボクの担当は他の登壇者の皆さんの内容とはちょっと毛色が異なるカラーマネジメントの話でした。「FireworksのTipsやテクニックなどを知りたい方が多いんじゃなかろうか、今回の内容に関して大丈夫かな？」と思っていたのですが、予想以上に良い反応をいただいておりホッと胸をなで下ろした次第です。

とはいえ、プレゼン自体はボロボロだったので、その反省や参加いただいたお礼をこめて当日伝えきれなかったことをこちらのエントリーにまとめてみました。

＃前もって書いておきますが、長いです（笑）。

カラーマネジメントを意識して作業するってことは…

Webの世界は閲覧環境がバラバラ、人によってモニタでの表示状態が変化してしまうという特徴があるのは事実です。現時点では、それを完全に制作者側でコントロールすることは不可能でしょう。

ただ、多くの環境である程度は制作者側が意図した色合いに近い状態で見てもらうということは可能です。裏を返せば、何も気にしないで作業していたら、最悪他の環境での表示状態がまったく合ってないってこともあるわけです。

カラーマネジメントを意識して作業をするというのは、多様な環境でできるだけ色を合わせるって意味はもちろんですが、それ以上に「多様であるが故におこりうる色の違いに関するクレームに自信をもって対処できるように制作物（納品物）を仕上げる」ためでもあります。自分の制作物が正しいのかどうか自信が持てなかったら、クライアントやお客様に適切な説明もできませんよね。

そのためには、閲覧環境の違いを認識することや制作環境の状態を把握することも大事ですし、色空間やプロファイルの存在を知ったり、アプリケーションの適切な使い方を覚えることも必要なのです。

ブラウザのカラーマネジメントについて

sRGBの色空間として考えられるインターネットの世界において、ブラウザのカラーマネジメントは「JPGに埋め込まれた異なるプロファイルを正しく解釈できる」と考えてもらえば良いでしょう。そこからモニタやOS環境にあわせて再度色味の調整がおこなわれる、と。

たとえばWindows環境下なら半ば強制的にsRGBにされるわけで、プロファイルのあるJPGでもsRGBの色空間であるものとして表示されて色が変わってしまうわけです。使用中のブラウザがこのプロファイルを認識できるかどうかは、こちらのページでチェックできますので試してみましょう。

リンク先で表示された写真は4分割されています。それぞれがまったく別の色に見えてたらカラーマネジメントはされてない（プロファイルの解釈ができない）ことになります。Firefoxの場合は、3つ同じになるはずです。

ちなみにFirefoxは、カラーマネジメント機能を「about:config」の画面で調整可能です（現在のバージョンは、デフォルト有効）。

「gfx.color_management.mode」のトコの数値がそれです。「0がオフ、1と2がオン」なのですが、1と2ではページ全体をカラーマネジメントするか、プロファイルのある画像だけを対象にするかといった違いがあります（参考リンク）。

このようなブラウザやOSによる挙動の違いは、これまでこのブログで何度も紹介しているmiyahan.comさんの「液晶ディスプレイとカラーマネージメント」が大変良くまとめられているので、是非ご一読を。

やらないよりはやった方が良いに決まってるキャリブレーション

キャリブレーションについては、「色を合わせるというより、正しく色が表示できるようにする」と考えていただいた方が良いでしょう。やるとやらないでは、見え方が大分違うんじゃないですかね。

より厳密にやるのであれば、ハードウェアキャリブレーションをおこなうツール類が販売されていますので、それを用いた方が良いに決まっています。ただ、世の中の皆さんすべてが予算がとれる環境ばかりではないので、今回は簡易的なキャリブレーションの方法として、Windows環境では「Adobeガンマ（※現在配布されていません）」や「Calibrize」、Macは「システムの環境設定→ディスプレイ」を紹介しました。

せっかくなので、WindowsのCalibrizeでの手順を書いてみます。

インストール後、起動する

配布サイトからダウンロードしインストールが終わったら、起動して「Next」を押してモニタの明るさとコントラストを調整します。そして再度「Next」を押すとこの画面です。

RGB各色のスライダを調整する

この画面があらわれたら、RGB各色の下にあるスライダで調整します。中央の●と周囲の色が同じになるようにスライダを動かすのですが、この違いを真面目に見つめてはいけません。1〜2mモニタから離れて、目のピントを合わせないでスライダを動かすのがポイントです。

で、同じになったら保存

RGB各色の調整が終わったら「Next」を押して、出てきた画面で「Save」を押して保存しましょう。

シレッとインストールされます

ダイアログも出てこないので「どこに保存されたの？」って感じなのですが、ちゃんと更新されるはずです。コントロールパネルの「モニタ」や「色」に関する設定を開いてみましょう（WindowsはOSのバージョンでまちまちなので、それは自身で調べてください）。

ちなみにモニタのプロファイルなどは、「C:¥Windows¥System32¥spool¥drivers¥color¥」にあります。日付でソートして最終更新日を確認すれば、どれがいじられたものか分かるはずです。

Creative Suiteのカラー設定について

今回は、Fireworksの特集であったので、Creative SuiteやPhotoshopのカラー設定についてはサラッと流したのですが、Creative Suite全体のカラーマネジメントは「Bridge」でコントロールします。

Photoshopのカラー設定について

せっかくなので、Photoshopのカラー設定も書いておきましょう。
基本的にCreative Suite全体のカラーマネジメントの支配下におかれて同期されていますが、編集メニューから内容を修正することも可能です。

ソフトをインストール後の初期設定は「一般用 日本 2」か「Web・インターネット用」になってるんじゃないでしょうか（インストールするSuiteによって違うかもしれませんので確認を）。ここで大事なのは「RGBの作業スペース」と「カラーマネジメントポリシー」です。

作業スペースが「sRGB」になっていれば、新規ファイルを作成したり、埋め込まれたプロファイルを作業スペースに変換してファイルを開いた場合は「sRGB」になります。

カラーマネジメントポリシーは、埋め込みプロファイルが異なる場合やプロファイルがない場合の処理になります。設定によってはチェックが外れている場合がありますので、一致しないものやプロファイルがないものは処理をダイアログで決定するようにしておけば確実です。

RGBのカラーマネジメントポリシーを変更することもできます。自身の設定が「作業用RGBに変換」なのか「埋め込みプロファイルを保持」なのかを確認してちゃんと覚えておきましょうね。

sRGB以外の色空間を取り扱う機会が多い場合など、「必ずしもsRGBばかりで作業するわけじゃないから自分で全部コントロールしちゃうよ」って時は、設定そのものをオリジナルで保存しておけば良いでしょう。WindowsならどのみちsRGBが基本なので、モニタのプロファイルを選んでも大差はないかと（もちろん環境で変わりますので、この辺がわかってる人はお好きにどうぞ）。

その代わり、カラーマネジメントポリシーでとりあえずダイアログが出るようにしないと、モニタのプロファイルになってしまいますからね。

色空間の存在などを知らない状態で、この辺の設定をスルーして第三者のファイルを処理しちゃったりするから問題が起こるのです。「自分の見ているのは何なのか」はちゃんと知っておきましょう。

色空間をちゃんと扱わないと…

Fireworksの話をしなければならないのですが、ちょっと脱線して…。たとえば、「Adobe RGB」のプロファイルをそのまま使ってファイルを開いたとします。

以下の画面で使ってるファイルは、こちらにあるわざとAdobe RGBのプロファイルを埋め込んだJPGです。これ以外にも試してみたい方は、こちらとかこちらにあるのをご自由にお使いください。

それを「sRGB」の色空間に変換せず、そのままJPGとしてプロファイルを埋め込んで書きだした場合は、カラーマネジメントの効かないブラウザでは当然のことながら色が変わってしまいます。

どのように見えるかっていうのは、Photoshopの「色の校正」でも確認できます（※上の「校正設定」で「インターネット標準（sRGB）」を選択してから）。上の写真と比べてみると明らかにおかしいですね。

適当にやっちゃうとこういうことになってしまうのです。

異なる色空間は適切に変換する

Photoshopの余談を続けましょう。

作業スペースが「sRGB」であっても、埋め込まれたプロファイルをそのまま使えば、ファイルの持っている色空間で作業することになります。これを「sRGB」の色空間に適切に変換するためには、Photoshopの「編集」にある「プロファイルの変換」を使います。「プロファイルの適用」ではないので気をつけてください。

内蔵のCMSを使って、色空間を変換します。

表示されたダイアログで、変換後の色空間に「sRGB」を選択して「OK」を。

書き出します。CS4からは「Webおよびデバイス用に保存」のダイアログで「sRGBに変換」というチェックボックスが表に出てきたので、面倒だったらそれで変換しても結果は同じでしょう。

左が「Adobe RGB」の元ファイル、右が「sRGB」に変換して保存したJPGです。大丈夫そうです、偉いぞCMS（笑）。では、PhotoshopはこれぐらいにしてFireworksに戻ります…。

Fireworksの挙動を再確認

CS4以降のFireworksは、プロファイルの埋め込まれたPSDファイルであれば、内部でsRGBに変換処理をおこなって表示するようになっています。

しかし、問題は「プロファイルの埋め込まれたJPG」です。たとえば、下の写真。

左が「Adobe RGBのプロファイル付きのJPG」、右が「sRGBのプロファイル付きのJPG」です。sRGBなら、まぁFireworksもsRGBなので問題はないでしょう。しかし、Adobe RGBの…は…、明らかに…、色がち、違います…。

試しに「Adobe RGB」なPSDを開いて比べてみるとご覧のとおり。

これでは困りますよね。困ります。クライアントの支給データなどなら、担当者がコンパクトデジカメで撮影したデータだったりして、なんとなく「sRGBだろうな…」って想像は付きます。しかし、カメラマン提供のJPGになってしまうと、「Adobe RGB」や「ProPhoto RGB」の色空間である可能性が出てきてしまいます。それを知らずにFireworksで開いたら…。怖い怖い。

プロファイル付きのJPGを「sRGBのプロファイル付きのJPG」へ

Fireworksの挙動は前述したとおりです。Photoshopを持ってなくて、Fireworksしかない場合にプロファイル付きのJPGが届いたら困ります。その問題をクリアするツールを紹介しましょう。

使うのは「Image Magick」。Webサーバの中で画像処理をおこなったりしているソフトウェアですので、「おや、どこかで聞いたことがあるぞ？」という方も多いかもしれません。

実はこのソフト、WindowsでもOS Xでも使えます（実際の変換処理はコマンドラインになりますが…）。まぁ、騙されたと思ってダウンロードしてインストールしてみましょう。

変換処理は、コマンドプロンプトでおこないます（OS Xならターミナル）。まずは、変換するファイルと同じディレクトリにシステムの中にある「ICCプロファイル（.iccとか.icm）」をコピーしてきましょう。

Windowsなら「C:¥Windows¥System32¥spool¥drivers¥color¥」、OS Xなら「/Library/ColorSync/Profiles/Displays/」とかにあります。

そして以下のコマンドを入力します。

convert 変換するファイル -profile プロファイルのファイル名 変換後のファイル名

※色空間のとこは、「sRGB〜」みたいなのが入ります。ファイル名さえわかればいいので、sRGB.icmとかsRGB.iccにしておくと楽です。

変換が終われば、ファイルができています（何も言ってはくれませんｗ）。

Adobe RGBのファイルと変換処理したファイルをFireworksで開いてみましょう。左が「Adobe RGB」まま、右が「sRGB」に変換したもの。

成功ですね、くすんでません。これでFireworksだけでいけちゃいます。

FireworksからPhotoshopに持っていく

ここからは、Fireworksで保存・書き出したファイルをPhotoshopに持っていく場合の補足です。

Fireworksで保存・書き出したファイルにはプロファイルが付きません。ファイルを開いた際にカラーマネジメントされてるかどうかは、環境（カラーマネジメントポリシー次第）で変わるので、再度色空間を確認、必要に応じて指定しましょう。

Fireworksの作業空間がsRGBなので、そのファイルもsRGBとして扱います。色空間を指定する（変換ではない）時は「プロファイルの指定」を選択して適切な色空間を適用します。

※「プロファイルの変換」は色空間をコンバートする、「プロファイルの指定」は色空間を強制的に適用する、ってイメージです。

カラーマネジメントされてないのであれば指定しましょう。

sRGBのプロファイルを選択して「OK」を押せばオッケイ。

他の色空間にしたい

ここで気をつけたいのが、仮に元のファイルがAdobe RGBの色空間であったとしても、Fireworksに持っていったらsRGBになります。

何かしらFireworksで処理したファイルを開いて、「元がAdobe RGBだったよな」ってことで「Adobe RGB」を指定したら色が変わります。これでは間違い。

安直に「プロファイルの指定」で「Adobe RGB」を指定するとダメ。

たとえば、元のAdobe RGBの色空間に戻す、戻した方が都合がよい場合は（があるかどうかはさておき）、一旦sRGBなり作業用の色空間を適用した後に、「プロファイルの変換」を使って「Adobe RGB」に変換します。

はい、これで適切に変換されました。

OS XでのFireworks

基本的な仕様とか挙動は、Windowsと変わりません。

Windows同様、プロファイル付きのJPGだと色は異なります。

Photoshopとの間でデータをやりとりする場合、sRGBの作業スペースで完結していれば、FireworksのファイルはsRGBのプロファイルを指定しましょう。

なので、sRGBで作業スペースを統一しておくと楽なのはOS Xも一緒です。

OS Xで環境をカスタマイズしている場合は…

DTPなどの仕事と併用していてsRGBの色空間以外などを使う機会が多い場合などは、自身の環境がカスタマイズされていることも多いかと思います。その場合は、モニタをベースに作業する方が余計な手間（プロファイルの適用とか変換とか）がかからないこともあります。

「ハードウェアキャリブレーションしてない環境でモニタにあわせるのは危険では？」というご指摘もうけましたが、安全を取るならもちろん環境を「sRGB」に統一した方が良いでしょう。オリジナルの設定でできるようなレベルの方は解説の必要もないと思われますので、ご自身で最適な方法を選んでください。

これはボクのPhotoshopのカラー設定です。RGBの作業スペースはモニタ、CMYKの変換テーブルもオリジナル、みたいな人も中にはいるのではないでしょうか。

上記の設定でファイルを開いた状態。左はAdobe RGBの色空間、真ん中と右はFireworksのPNGを開いてるのでカラーマネジメントされずモニタの色空間になってる状態。

ファイルがsRGBの色空間ですから、プロファイルの指定で「sRGB」の色空間を指定する、と（左と真ん中が同じ状態、右はそのまま）。これを間違えてsRGBに変換したら別のものになっちゃいます。Photoshopには、前述した「色の校正」ってのがありますので有効活用しましょう。

今どのような状態なのか、ってのを知ることが大事なんです。

というわけで、長々と失礼しました

実のところDTPの黎明期に近い時分から写真と印刷物の色合わせ、富士ゼロックスのプリンタの色あわせとか仕事としてやってきましたけど、環境でコロコロ変わる色の話を真面目にしようとすると簡単には書けないんですよね…ホント。

30分（実際はしゃべりすぎて40分…）という時間でFireworksを絡めた内容を伝えるため、後半が駆け足になってしまって聞き苦しい点も多々あったのではないかと感じてますが、聞いてくださった皆さんに何かしらの気づきを与えられたのであれば幸いです。あらためてありがとうございました。

→ CSS Nite

おまけ

おまけというわけではないのですが、「プロファイルを埋め込むとファイルサイズが増えるよね」というご指摘もいただいていたかと。確かに微妙にその分サイズは増えてしまいます。sRGBの色空間で最終的に処理し書き出してれば、プロファイルを埋め込まなくてもいいっちゃいいでしょう。

他のセッションで、Fireworksの方が書き出しサイズが小さくなるとか、最適化したPNGにすれば軽くなるということを紹介されていましたが、書き出したJPGファイルもPNG同様にさらに小さく最適化することができます。

インストールするタイプではない画像の最適化に使える有名なオンラインサービスとしては、米Yahoo! の「Smush.it™」や「PunyPNG」なんかがありますね。JPGとかは、プロファイル分ぐらいのデータサイズなら余裕で減ります。試してみてください。

WebディレクターのためのHTML+CSS基礎講座

5/15、21開催　全2日 10時間 10:00～16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

http://blog.gaspanik.com/html-css-session-200911

かなり直前の告知になってしまって申し訳ないかぎりですが、土曜開催ということで会社にお勤めの方も参加していただきやすいかと。よろしくお願いいたします。

WebディレクターのためのHTML+CSS基礎講座

1/21、22開催　全2日 10時間 10:00～16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

http://blog.gaspanik.com/html-css-session-200911

以前告知した際にセミナーの内容についてはグダグダ書いてますので、そちらのページをご確認いただければ幸いです。

WebディレクターのためのHTML+CSS基礎講座

12/10、11開催　全2日 10時間 10:00～16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

http://blog.gaspanik.com/html-css-session-200911

と、前回の告知の時に、セミナーの内容についてはグダグダ書いてますので、そちらのページをご確認いただければ幸いです。

WebディレクターのためのHTML+CSS基礎講座

11/19、20開催　全2日 10時間 10:00～16:00

タイトルにもあるように、対象は一応Webディレクターさんとなっていますが、内容的にはこれからWebの業界に入りたい方でも大丈夫です。

Webサイトのディレクションなどを担当される皆さんは、実際にあまり手を動かすことはないかもしれませんが、制作の現場がどういったことを考えて仕事しているのかを知らないというわけにはいきません。変化し続けるWebの世界の現状を把握しながら、今どういうことが求められていてどういったことに注意しておくべきか、実務にいかすにはどうしたらいいのかみたいな話とあわせて、Web制作の基本ともいえるHTMLとCSSの仕組みや考え方を押さえましょうといった内容になっております。

が、私の場合どちらかというと教科書でおしえてくれないこと（*1）を余談として口にする傾向にありまして、時間の許す限りHTMLとCSSに関することだけでなくFlashやモバイルの話、検索エンジンがどうしたこうしたとか、作業を楽にするツールを紹介したり、まだ日本では知られてないことなどもあれこれ喋るのではないかと。
※内容がそれない程度にですけど（笑）

興味のある方は是非この機会に（定期開催ではないものですから…）。

→ WebディレクターのためのHTML+CSS基礎講座

*1: 内容こそ違いますがたとえばこんなことだったりです。

（追記: 2009.10.15）
えー、告知をしてあまり日も経ってないのですが、おかげさまでまたまた満員御礼になったようです（ありがとうございます）。12月もひょっとしたらあるかもしれませんので、その際はまたあらためて…