はじめに
本記事では、UI/UXデザイン方面でつよつよになりたい筆者が、UI・UXデザインに取り組んでいくなかで身に染みて感じたことを書いています。
今回は番外編です。UI/UXというよりは、印刷物に利用するデザインの話になります。
カラーモード……？
UI/UXデザイン方面に興味を持ち色々やらせていただく中で、アイコンやロゴ等の画像を扱う機会が増えてきました。
とはいえアプリやWebなど、画面上で表示するアイコンやロゴに関しては特に何も気にすることはなく取り扱ってきたのですが、この度、印刷物に利用するロゴを扱う機会がありました。
すると、何やら「入稿データのカラーモードはCMYKで。RGBで入稿しないでください」とか指定されるんですよね。
CMYKってなんですか……？
普段使ってるRGBと何が違うんですか……？
そもそも何の頭文字なんですか……？
RGB→CMYKの変換を試してみよう
ここにかわいいあおむし君のイラストがあります。
これは筆者がペイントソフトで描いてPNG形式で保存したデジタルイラストなので、当然カラーモードはRGBです。
このあおむし君の画像のカラーモードをCMYKに変換すると、こんな感じになります。
鮮やかな蛍光イエローだったあおむし君の顔色がうっすらと悪く……。
背景の青色も暗くなってしまいました。
光の三原色と色の三原色
美術の授業などで、光の三原色と色の三原色について聞いたことはないでしょうか。
PCやスマートフォンなどの画面に代表される、自ら光を発するものの色の表現はR(赤)・G(緑)・B(青)の3色で、光の三原色です。
これは、色を重ねれば重ねるほど明るく白に近づく混色方法で、加法混色と呼ばれます。
対して、印刷物の色の表現はC(シアン)・M(マゼンタ)・Y(イエロー)で、色の三原色です。
実際には上記3色に加えてK(キープレート、黒のことです)の4色が印刷では利用されます。(3色の混色では綺麗な黒にならないこと、また印刷に用いるインクの量を削減することが理由です。)
プリンター売り場に行くと、この4色のインクが売っているのではないでしょうか。
これは、色を重ねれば重ねるほど暗く黒に近づく混色方法で、減法混色と呼ばれます。
つまり、カラーモードのRGBはアプリやWebなど、画面で表示する想定の画像に適した色の表現方法であり、CMYKは印刷物にする想定の画像に適した色の表現方法なのです。
ではなぜカラーモードをRGBからCMYKに変えると色が変わってしまうのかというと、RGBよりもCMYKの方が表現できる色の数が少ないことに起因します。
画像のカラーモードをRGBからCMYKに変換した場合、CMYK形式で表現できない色は似た色に置き換えられます。
特にパステルカラーや蛍光色が減法混色だと難しいため、実際に前節のあおむし君も、パステルカラー・蛍光色の部分がくすんでしまっています。
(印刷会社によっては、特色インクというCMYKで表現できない色のインクを利用することで印刷できるケースもあるようです)
ちなみに、デジタル画像で使いがちなPNG形式のカラーモードはRGBのみです。つまりPNG形式の画像は基本、印刷に不向きだったりします。
「劣化もしないし透過もできるし、PNG形式が一番だよね！」と思いがち(筆者は思っていました)ですが、PNG形式はweb上での表示に適した形式であり、印刷時には別の形式を選択することを検討した方が良さそうです。
ちなみにカラーモードをCMYKとして保存できる形式としては、JPEGやTIFF、PSD等が挙げられます。
とはいえそもそも、カラーモードをCMYKに指定した状態でデータを作成するのであれば、それこそPhotoShopやIllustratorなどを利用する必要があったりするのですが……。
さいごに
もし、「このロゴ、アプリ上だけじゃなくて宣伝用のチラシにも表示するかも……！？」という場合などには、色の表現方法の違いを知っていると「じゃあCMYKデータとして作っておこう」という判断ができるかもしれません。
また、自分以外の人にデザインをお願いする場合であっても「このロゴは印刷物でも使います」ということを事前に共有できると、いざ出来上がったものを印刷したら何だか色が変……？ということも避けやすくなるかもしれない、と思いました。