Webデザイン初心者必見！RGBやCMYKってなに？絶対に覚えないといけない「カラーモード」について

こんにちは！デザイナーのヒロです。

これからWebデザインをゼロから学びたい！でも、何から学べばいいか良くわからない…

そんな方に向けて、Webデザインの基本を、わかりやすく簡単にご紹介します！

今日は、デザイナーなら必ず知っておきたい「色」についてご紹介します！

まずは、絶対に覚えないといけない「カラーモード」を説明しますね。

RGBとCMYK

「RGB」や「CMYK」という言葉を聞いたことがありますか？

これらは、カラーモードを示す言葉です！

RGBとは、

• Red（レッド = 赤）
• Green（グリーン = 緑）
• Blue（ブルー = 青）

のことで、

CMYKは、

• Cyan（シアン ※水色っぽい色）
• Magenta（マゼンタ ※ピンクっぽい色）
• Yellow（イエロー）
• Key plate（黒）

のことです！

RGBもCMYKも、色の頭文字を組み合わせたものだったんですね。

でも、これらの色はいったい何を意味してるのでしょうか？

ディスプレイは、赤・緑・青の3つの光で色を表現する

スマートフォンやパソコンのディスプレイは、どうやってさまざまな色を映せるのか知っていますか？

実は、ディスプレイは、赤・緑・青の、3つの色の光を発しています。

それらの色をうまく混ぜることによって、さまざまな色を表現しているのです！

赤・緑・青の3つの色、

つまりディスプレイは、RGBで色を表現しているんですね。

RGBは、3つの色を混ぜれば混ぜるほど、

明るく、白っぽくなっていくので、加法混色 とも呼ばれます。

反対に、ポスターやチラシなどの印刷物は、

CMYKの4つの色のインクを混ぜて、さまざまな色を表現します。

これらは、混ぜるほど暗い、黒っぽい色になるので、減法混色 とも呼ばれます。

Webサイトは、スマートフォンやパソコンなど、ディスプレイがあるもので見ますよね。

つまり、WebデザインのカラーモードはRGBを使用し、CMYKを使うことはありません！

RGBとCMYKでは、色の組み合わせ方が違うので、

同じ色を表現できなかったり、色の指定の仕方が違ったりします！

Webデザインをする時は、カラーモードはRGB！

これは絶対に守っておきましょう！

同じ色でも、ディスプレイによって色が変わる！

ディスプレイで色を表示する時は、RGB！でしたね。

ところが、RGBで作成したロゴやイラストなどの画像の色が、

違うディスプレイで見ると少し色が変わってたりするんです！

これは、表現できる色の範囲が、ディスプレイによって違いがあるため、

画像の色がディスプレイによって変わってしまう、ということがあります。

つまり、せっかくがんばって作ったロゴやイラストが、

意図通りの色で、ユーザーに見えていないかもしれないんです！

これは、残念すぎますね….

どうしたら良いんでしょうか？

カラープロファイルで、一貫した色を再現する

そこで登場するのが、カラープロファイルです！

カラープロファイルは、どのような色で表示してほしいのかを記録しているデータです。

ディスプレイは、カラープロファイルに合わせて、色を出力します。

つまり、カラープロファイルをロゴやイラストに埋め込むことで、

あなたがデザインした色に、ディスプレイが極力近づけようと頑張ってくれるんです！

カラープロファイルにもいろいろ種類があり、それぞれ特徴がありますが、

現在、多くのディスプレイが対応している代表的なカラープロファイルは、「sRGB」です。

なので、特にこだわりがなければ、

カラーモードはRGBに、

その中でも、カラープロファイルはsRGBに、設定しましょう！

いかがでしたか？

カラーモードを理解することは、Webデザイナーとして大きな一歩です！

次は、RGBでの色の指定の仕方についてご紹介しますね。

こちらも要チェックです！