【Webデザイン】RGBとCMYKの違い

4932515_s自社の商品やサービスの魅力を正しく伝えたいのなら、色の原則について学んでおく必要があります。WebデザインにおけるRGBとCMYKの違いや原則について理解していないと、「Webサイトで見たらあざやかなのに、紙広告では色がくすんでしまった」や「自分が思っていた色ではない色が出力されてしまった」という事態に陥る可能性があります。

Webサイトの担当者が扱う媒体は、Web広告や紙広告、雑誌など、多岐に分かれていますが、各種媒体によって色の表現形式が異なるため、RGBとCMYKの違いやWebデザインにおける色調整の注意点をわかりやすく解説していきます。

パンフレットとWebサイトで色が違う!?

Webサイトを立ち上げる際、雑誌やパンフレットなど紙媒体のデータを元にデザインを制作すると、パソコンで見たときに「なんだか色がちょっと違う」「パンフレットと見比べると全体的に明るく鮮やかになったような・・・」という体験をしたことはないでしょうか。あるいは、「スマートフォンで撮影した写真をプリントするとスマホの画面で見ている時と色がちょっと違う・・・」など、似たような経験をされた方も多いでしょう。

なぜ、このような現象が起きるのでしょうか。この現象は、パソコン・スマートフォンの画面の色と印刷に使用される色の仕組み(カラースペース・色空間といいます)が異なっているために発生します。

RGBとCMYK

色の表現方法は、代表的なものは2種類あります。本テーマで押さえておきたいのが、このRGBとCMYKという2種類のカラースペースの違いです。
まず、パソコン・スマートフォンの電子画面の色はRGBというカラースペースが利用されています。一方で、紙などの印刷物ではCMYKが利用されています。

RGBの特徴

光の三原色であるRGBは、「レッド」「グリーン」「ブルー」の3色で色を表現しており、頭文字からその名称が形成されています。別名、加法混色とも呼ばれており、3色を混ぜ合わせていくと白へと変化していきます。

後述するCMYK との違いを理解するためにも、RGBは色を重ねるごとに明るい色へと変化していく特徴をもっていると覚えておきましょう。

CMYKの特徴

一方、CMYKは減法混色の理論に基づき色を表現します。「シアン」「マゼンタ」「イエロー」「ブラック」の4色の頭文字から命名され、色を重ねるごとに暗い色へと変化していきます。
「ブラックは黒だからKになったの?」と思った方もいるかもしれませんが、KはKey Plate(キープレート)の頭文字に由来します。キープレートとは、印刷物の細部や輪郭を表現するために使用された版のことです。これには、よく黒色が使用されていました。

また、RGBの3色で白へと変化していくのなら、「CMYの3色があれば完全な黒になるのでは?」と思う方もいるでしょう。
実は、CMYの3色をどれだけバランスよく混ぜたとしても、濁った茶色にしかなりません。そのため、キープレートの黒で正確な黒を表現しています。

WebデザインではRGBを使う

Webサイトはパソコンやスマホで閲覧されるので、RGBを使ってデザインします。

先ほど、RGBは加法混色で明るい色へと変化していくと説明しました。もし、WebデザインをRGBではなくCMYKで作成するとどのような弊害があるのでしょうか。CMYKは、RGBと違って減法混色だと説明しました。

そのため、RGBで表現可能だった色の美しさがCMYKでは表現不可となり、少しくすんだ暗い色となってしまいます。

モニターによっても色が違う

Web・印刷間に限らず、モニターやブラウザなどユーザーの環境によっても少し色が違って見えるため注意が必要です。モニターは製品によって性能が異なるため、表現される色に違いがあります。

このようなモニター・ブラウザごとの色の差異を解消するためには画像データにカラープロファイルの埋め込みを行いましょう。カラープロファイルとは画像データの持つ色域の特性のことで、カラープロファイルの埋め込みをすることによって、異なるモニターやブラウザでも画像の製作時の色を、正しく再現することができます。

Webサイトの制作・運用においては、写真やバナーなどの画像データを掲載するときに対策する必要があります。Webデザイン制作ツールとしてよく使われているPhotoshopには、画像を書き出す際にカラープロファイルを埋め込む機能もありますので簡単に対応することができます。

まとめ

Webと印刷物だけでなく、パソコン同士でも色の表現に差異があることを理解できたでしょうか。色の見え方はWebサイト全体の印象にも大きく関わり、場合によっては企業イメージや製品の色が意図した通りに伝わらない可能性もあるため注意が必要です。
カラープロファイルの活用や、異なるモニター・デバイスでの表示確認をしっかりと行い、見え方に違いが生じないようにしましょう。

  • このページを共有する