2008年11月19日

WEBクリエイターはCMYKに要注意!

RGB→CMYK

以前、Mozilla JapnさんにいただいたFirefoxマウスパッドの使い心地が非常に良く、愛用させてもらってるわけですが、ここにプリントされているロゴマークは何かおかしい…
と、なんとなく思っていたのです。

マウスパッド

何かが…
うーん…
はて?…
何だろう…
あーシュークリームが食べたい…

ん?…
シュークリーム…シークリーム…シームクリーム…CMYK…

そうか!CMYKだ!
というわけで、カラーモードをRGBからCMYKに変換する際に起こったミスが気になる部分だったんですねぇ…

まずはカラーモードの仕組みについて考えてみましょう。

RGBとCMYKって何?


RGBはPC用モニターやテレビなどの「ディスプレイ」で見る事を前提に使用されるカラーモードの事で、CMYKは最終的に印刷物になる事を前提に使用されるカラーモードの事です。

RGBの仕組み


RGBは、R(レッド)・G(グリーン)・B(ブルー)の「光の三原色」で色彩を表現します。
電源を入れていないモニターの画面を見ればわかりますが、何も無い部分は「黒」です。
そこに3色の光を当てることで、さまざまな色が表現でき、3つの光が重なると、一番明るく消費電力も激しい色、「白」になります。
当てる光の量を弱くする事で鈍色系も自由に表現できます。

CMYKの仕組み


CMYKは、C(シアン)・M(マゼンタ)・Y(イエロー)の「色の三原色」で色彩を表現します。
RGBとはまったく逆の原理で、何も無い部分は「白」(紙の色)です。
そこに3色のインクを重ねていく事で色彩を表現し、3つの色が重なると、一番暗くインク代もかかる色、「黒」に近くなります(塗料を使用した場合の原理上)。
ただし、印刷用のインクは透明度が高いため、実際には真っ黒にはなりません。
そこでCMYにK(ブラック)を足して、黒を補う仕組みとなっています。
ちなみに、ブラックライトアートのようにRGBで表現するインクもありますが、ここでは一般な印刷用インクのみで考える事とします。

RGBとCMYKの違いで問題は起こるの?


もちろんインクを使わないRGBモードの方が色域が広いので、色域を制限する事で、CMYKを画面上に再現する事ができます。
逆に印刷物では、RGBで制作された色や効果を表現できない事が多いです。
だから印刷物は必ずCMYKになっているはずで、RGBのままで印刷する事は不可能なのです。
いやいや、RGBのままプリンターで印刷した事あるよという人もいるかもしれませんが、実際にはCMYKモードに置き換わって、各インクの量を調節しているはずなんです。
つまり印刷物の場合は、CMYKの4つの版に分かれていて、実際に指定した色のパーセンテージで本物のインクが塗り重ねられていくというアナロギーな部分を意識したり、ソフトウェアの最新のプラグインや効果(フィルタなど)に対応していない印刷機器がある事なども理解しておかなければなりません。
DTPの世界からWEBの世界になんとなーく移行してきた人達は問題無いと思うのですが、その逆の場合は大きな落とし穴にはまってしまう可能性があるかもしれません。
RGBとCMYK… カラーモードの違いだけで、いろいろなトラブリューが起こってしまうんですよね。

どんなトラブルが起こるのか


話を本題に戻しましょう!
このマウスパッドをよく見ると、地球のハイライトの部分が妙に目立ってます。
マウスパッド

普段見慣れてるFirefoxのロゴマークは、もっと自然な光り方をしているはずです。
ちなみに、画像を見ればなんとなくわかりますが、FirefoxやThunderbirdのロゴマークはAdobeのIllustratorで描かれています。
しかもバージョンはCS以降です。
なぜそんな事がわかるのかって?
実はデータを持っているからです。
そこで、実際にAIデータのカラーモードを切り替えて観察してみました。

これがRGBモード
RGBの場合
そうそう、これこれ。
まさしくFirefoxのロゴマークです。
地球の丸みが見事に表現されています。
いつ見てもすばらしいデザインだと思います。


そしてCMYKモードに置き換えてみると…
CMYKの場合
あぁ、これですね。
マウスパッドに印刷されたものと同じです。

このハイライトの部分を観察してみると、
このオブジェクトにはブレンドモードの「スクリーン」が使用されています。
ブレンドモードに関しては、osakana.factoryさんが詳しく説明されていますが、RGBモードでのブレンドが、CMYKではうまく表現できないようですね。


今回のマウスパッドの件で考えてみると、WEBデザイナーが印刷会社にRGBのままでデータを渡したという事でしょうか。
おそらく通常のプリントアウトでは、ハイライト部分はきちんと表現されていたと思うのです。
ところが、印刷会社が版を作る際に、データをCMYKに変換すると…
このような事態になってしまったという私の勝手な妄想です。

今回のトラブルの回避方法


もちろん今回のトラブルを回避する方法もあるわけで、気になる部分を「ラスタライズ」すれば画像に置き換わるので、CMYKに変換する事ができます。
ただし、この場合はモニター用の解像度72dpiから、印刷用の解像度300〜350dpiになっている事を確認しなければなりません。
解像度も、RGBとCMYKの大きな違いのひとつですから。

まったくややこしやーな話ですが、そんなこんなをひとつのソフトウェアで対応できるのですから、IllustratorとかPhotoshopって凄いソフトだな〜と、改めて感心してしまいました。

そういうわけで、WEBクリエイターの皆さんは注意して下さいね。
もしも印刷物を作る事になった際は、普段使い慣れている技が、果たして印刷会社で対応できるのかどうか、ちょっと確認してみた方がいいかもしれませんね。
タグ:DTP Firefox
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック