TOP
【デザイン用語集】RGBカラー

名刺良品Blog

【デザイン用語集】RGBカラー

2014.07.09 用語集

^{【デザイン用語集】RGBカラー}

^{RGBとは？デジタル表現に欠かせない“光の三原色”を知る}

^{デザインに関わっているとよく目にする「RGB」という言葉。色を構成する基本的な考え方の一つですが、印刷物との違いを正しく理解していないと、思わぬトラブルの原因になってしまうこともあります。}
^{今回は、デジタルデザインやWeb制作に欠かせないRGBカラーの仕組みと特徴について、印刷との違いも交えながらご紹介します。}

^{RGBとは？光を混ぜて色を作る仕組み}

^RGBとは、^Red（赤）^、^{Green（緑）}^、^{Blue（青）}^{の3色の光を使って色を表現する方式です。}
^{この3色の光をさまざまな強さで組み合わせることで、私たちが画面上で見ているほとんどの色が作り出されています。}
^{この方式は}^{「加法混色」}^{と呼ばれ、3色を重ねるごとに明るさが増していき、最終的には白に近づいていきます。}

^{つまり、光が増えることで色が作られるという仕組みです。}

^赤^＋^緑^＝^黄色^赤^＋^青^＝^マゼンタ^緑^＋^青^＝^シアン

^{すべてを最大にすると＝}^白

^{このようにRGBは、発光するデバイス（モニターやスマホなど）での表示に最適化されたカラーモデルです。}

^{RGBはなぜデジタル向きなの？}

^{画面で表示される情報は、ピクセル単位で光を制御して色を見せています。}

^{RGBはまさにこの仕組みに適した色の作り方なので、}^{Webデザイン、アプリUI、SNS画像など、ディスプレイで見ることが前提のコンテンツ}^{では基本的な色の指定方式といえるでしょう。}

^{たとえば、}
^{IllustratorやPhotoshopで「Web用」のドキュメントを作ると、自動的にRGBモードになります。}
^{FigmaなどのWebデザインツールも、RGBをベースに色を扱っています。}

^{特に、RGBは色域が広いため、鮮やかで明るい色合いを表現しやすいという特徴があります。}

^{蛍光ピンクやビビッドブルーといったネオンカラーなどの、CMYKでは表現が難しいカラーもRGBなら鮮明に描写可能です。}

^{RGBとCMYKの違い}

^{RGBと並んでよく登場するのが}^{「CMYK（シアン・マゼンタ・イエロー・ブラック）」}^です。
^{RGBが“光”で色を作る}^{のに対し、}^{CMYKは“インク”で色を表現}^{します。これは印刷物で用いられる標準的なカラーモデルです。}

^{CMYKについてはこちらの記事で紹介しています。　▶︎}^{【名刺良品blog】【デザイン用語集】CMYK}

^{この違いにより、}^{RGBとCMYKでは色の見え方が大きく変わることがあります。}
^{特に、RGBで作ったデザインをそのまま印刷しようとすると、鮮やかな色がくすんだように見えたり、全体が暗く見えてしまう場合があります。}
^{名刺などの印刷物をデザインする際に「画面では鮮やかな色だったはずだが、印刷したら思っていたのと違うな…」というギャップが生まれる原因のひとつが、ここにあります。}

^{RGBデータを扱うときの注意点}

^{RGBデータを扱うときは、以下のようなポイントに注意すると、トラブルを回避しやすくなります。}

^{モニターごとの色の見え方の違い}

^{同じRGB数値でも、モニターによって色が大きく異なって見える場合があります。}
^{これはモニターごとに、色温度・輝度・コントラストなどの設定が異なるためです。}

^{印刷には向かない色を作れてしまう}

^{RGBでは発色の良い色（ネオンカラーなど）も、CMYKに変換した瞬間にくすんでしまいます。}
^{印刷用のデータを作る時は、カラーモードをCMYKにして印刷時のイメージを確認する必要があります。}

^{Photoshopの校正プレビューを活用する}

^{Photoshopであれば、RGBで作成したデータもメニューの}^{『表示』＞『校正設定』＞『作業用CMYK』}^から、
^{印刷時の見え方をある程度シミュレーションできます。}

^{名刺や紙媒体に使う場合はどうする？}

^{RGBで作成された画像やデザインを、そのまま印刷用データとして入稿してしまうと、}
^{印刷工程で自動的にCMYKへ変換されてしまいます。これは多くの印刷会社で共通する仕様です。}
^{自動変換によって意図しない色味の変化が起こることがあるため、}
^{入稿前に自身で一度データをCMYKに変換のうえ、見た目を確認・調整しておく}^{ことが大切です。}
^{名刺良品の入稿テンプレートも、CMYKでのカラーモードを推奨しています。}

^{CMYKカラーへの変換方法}

^{Illustratorの場合}
^{『ファイル』＞『ドキュメントのカラーモード』＞『CMYKカラー』}^を選択

^{Photoshopの場合}
^{『イメージ』＞『モード』＞『CMYKカラー』}^を選択

^{すでにRGBで作られているデータは、上記の手順でCMYKに変換し、色味に違和感がないかをチェックしてから入稿するのが安心です。}

^{RGBはどんな用途に向いている？}

^{RGBは、ディスプレイでの発色に特化した方式です。}
^{そのため、以下のような}^{「紙に印刷しない用途」「画面で完結するデザイン」}^{でこそ真価を発揮します。}

^{RGBが適した用途の例}

_{^{SNS投稿用の画像・バナー}}
_{^{Webサイトのデザイン・キービジュアル}}
_{^{デジタルサイネージ（電子看板）}}
_{^{モバイルアプリ・UIデザイン}}

^{あらゆる電子媒体の画面上で利用されるデザインでは、RGBの鮮やかさを最大限に活かすことができます。}
^{逆に言えば、紙に印刷する目的のデザインであれば、初めからCMYKで設計するのが安全と言えるでしょう。}

^まとめ

^{RGBは、私たちが日常的に目にするディスプレイ表示の基盤となっている色表現の方式です。}
^{光の三原色で構成されており、色域が広く、鮮やかで明るい色合いを再現することに長けています。}
^{一方で、印刷物に使う場合は注意が必要で、RGBとCMYKの違いを理解したうえでデータを扱うことが重要です。}

^{名刺良品でも、RGBのまま入稿されたデータに対しては、}^{データチェックサービス}^{をお申し込みいただいている場合は}
^{CMYK変換後の色味変化についてご案内させていただいております。}

^{少しの手間をかけることで、完成した印刷物の仕上がりが大きく変わりますので、ぜひRGBとCMYKの使い分けを意識してみてください。}

一覧へ戻る