WebデザインはCMYKじゃダメ？Webの色（RGB）と印刷の色（CMYK）の違いと変換時の注意点
広告媒体の制作を行う現場で、グラフィックデザイナーがポスターやPOPなど、通常CMYKデータを扱っている中で、Web用のバナーやランディングページ、キャンペーンサイトなど、デザインバリエーションとして、RGBのデータも合わせて制作・納品する（しなければならない）ケースが増えています。普段、CMYKで色指定しているグラフィックデザイナーにとって、RGBで色を考えることは相当なストレスですし、通常、入稿時にRGBが無いように注意しているのに、逆にRGBでデザインするには抵抗感がある方が多いようです。 そんな時「WebデザインはCMYKじゃダメ？」「CMYKデータはWebデザインに使えない？」「CMYKだとどんな不具合があるの？」などの質問を受けます。 今回は、Webデザインで扱う色「RGB」と、印刷で扱う色「CMYK」の違いや、RGB・CMYK変換の注意点などについてお伝えします。
- グラフィックデザイナーがRGBを扱うのは困難？
- RGBとCMYKの表現方法の違い
- Webデザインの色指定は「RGB」や「カラーコード」
- 真っ赤や真っ黒には差がでる
- RGB変換後に色に違いがでて気になる場合は別途調整する
- 鮮やかな写真は、全体的にくすんでしまう場合がある
Webデザインは、光の3原色（RGB）で行なう
Webデザインは、原則「光の３原色（RGB）」赤（Red）、緑（Green）、青（Blue）の組合せで色を表現します。パソコンやスマホの画面は、モニターに並ぶ小さな点（画素）が赤青緑（RGB）の光を放って、色を表示しているので、デザインの色を忠実に再現したい場合はRGBで作成するのが理想的です。
RGBとCMYKの表現方法の違い光の３原色は、舞台を照らす照明のように、各色を照らすほど（加えるほど）、明るく（白く）なり、加法混色と言われています。 それに対して印刷で使用する「色材の３原色（CMY）」シアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）は、絵具のように混ぜるほどに、暗く（黒く）なるので、減法混色と言います。
印刷物など反射光で見る色（CMY）より、光源自体が光っている色（RGB）の方が、より多くの色を表現することができ、再現できる色の範囲も広くなっています。なので、RGBの原色に近い鮮やかな色や明るい色は、CMYで表現できる色の範囲で表現しようとすると（CMYに変換すると）、くすんで暗くなったような色になってしまいます。
Webデザインの色指定は「RGB」や「カラーコード」印刷物がCMYKで色指定するのに対して、通常、Webデザイン制作時の色指定は「RGB」や「カラーコード」を使用します。 「RGB」では各色に対して「0〜256」で指定して、「カラーコード」」では各色に対して「00〜ff」の「16進数」を使って指定します。どちらもRGB（赤緑青）の光の強さを256段階で指定します。 カラーコードで扱う、16進数は、0〜9の10種の数字とA〜Fの6種の英字、合わせて16種の英数字の組合せで表されます。 00、01、02…97、98、99、A1、A2…、AA、AB、AC…DF、EF、FFまでの256種（階調）が、赤青緑の各色に割り当てられます。フォトショップの色補正（レベル補正やトーンカーブ）も、この256階調（８ビット＝２の８乗＝256）で３原色を調整しています。（赤青緑の電球が256段階の明るさを調節して照らされて、色が表現されているとイメージしてみて下さい） 例えば、緑はRGBで「R：0、G：255、B：0」、カラーコードで「#00ff00」のように指定します。
CMYKのままWeb用のデータを作ってもいいの？
でも、RGBで作った方が良い場合があります。 次に、RGBとCMYKの色の違いを、実際のサンプルで確認して見たいと思います。
真っ赤や真っ黒には差がでるグラフィックで真っ赤にしたい時は、「C：0％、M：100％、Y：100％、K：0％」の金赤を使い、Webでは「R：255、G：0、B：0」を指定します。 真っ黒はグラフィックでは「K：100％」やリッチブラックで表現し、Webでは「R：0、G：0、B：0」を指定します。 それぞれ上記のCMYKとRGBのベタ画像を、RGB画像にペーストして見たのが以下のサンプルになります。
RGB変換後に色に違いがでて気になる場合は別途調整するCMYKで作ったデータを、イラストレーターのカラーパレットで、CMYKからRGB変えてみると分かるのですが、金赤（M：100％、Y：100％）をRGBに変換したら「R：197、G：0、B：24」 になり、 黒（K：100％）をRGBに変換したら「R：16、G：24、B：14」などの中途半端な数値の色になります。変換後に、他の原色が混じっている分、くすんだ、ハッキリしない色変換されてしまいます。 このような色（彩度）の違いは、複雑なデザインの一部であれば気づきにくいのですが、広い面積の背景色であったり、ロゴ色などの、特に忠実に色再現しなければならない色だと、印象が変わってしまうので、RGBでデザイン制作（くすみのない数値を指定）する必要があります。 すでに、CMYKで作ってしまったデータであれば、忠実に色を表現したい部分をRGBで指定し、レイヤーで分けてから合成して、コーディング用データを制作する方法も検討する必要があると思います。
鮮やかな写真は、全体的にくすんでしまう場合があるCMYKからRGB変換時のカラープロファイルによっても色は変わる
この記事の前半で、CMYKのデータをRGB画像にコピペすれば、コーディングデータとして使えます。と書きましたが、CMYKをRGBに変換する際のカラープロファイルが違うと、変換後の色も変わってきます。 例えば、「C：20％、M：30％、Y：40％、K：0％」の色を、RGB画像にペーストするときに、カラープロファイルが「Adobe RGB」の場合、RGBの値は「R：202、G：181、B：153」になりますが、カラープロファイルを「sRGB」にすると「R：211、G：183、B：152」になります。逆にRGBからCMYKにする場合でも、CMYK画像のカラープロファイルを「Japan Color 2001 Coated」するか「Web Coated」にするかなどによって、変換後の色が変わります。
モニターによって色が変わることが前提 そもそもですが、モニターにより表現される色が異なります。 電気屋でテレビが並んで展示されていることを思い出してもらえば分かると思いますが、メーカーや機種によって、画面の色合いや明るさが異なっていますよね。 それと同じように、デザイナーのモニターと、色校正される方のモニターが全く同じ色で見えていることは現実的にありえません。色について検討する際には、モニターによって色味が変わることをお客様に理解して頂いていることが必要です。