すべてのカテゴリ

「Illustratorでは鮮やかだったのに、書き出したら色がくすんだ…」「完成したグッズの色が思っていたのと違う」アクリルキーホルダーやTシャツ、ステッカーなどのグッズ制作で、このトラブルを経験したことがある方は多いのではないでしょうか。実はこの原因のほとんどが、RGBとCMYKの違いにあります。そして結論から言うと、この悩みは最初のドキュメント設定でほぼ解決できます。この記事では、グッズ制作で色をイメージ通りに仕上げるための、正しい設定方法をわかりやすく解説します！Illustratorで色が変わる原因は？Illustratorで色が変わってしまう原因をみていきましょう。RGBとCMYKの違いRGBは、スマホやパソコンなどの画面表示用のカラーモード（光の色）です。CMYKは、プリンターや印刷で使われるインクの色です。この2つは表現できる色の範囲が違います。RGBはとても鮮やかな色を表現できますが、CMYKはそれよりも色の範囲が狭いため、RGBで作成した、「ネオンカラー」「鮮やかな緑や青」「ビビッドなピンク」などはくすんだ色に変換されてしまいます。RGBのまま入稿するとどうなる？ホームページ制作の際に使用したロゴはRGBデータであることがほとんどです。そのロゴをRGBデータのまま印刷所に入稿すると、印刷時に自動的にCMYKへ変換されます。このとき、「色が沈む」「全体的に暗くなる」「鮮やかさが消える」といった現象が起きます。つまり、Illustratorで見ていた色のままでは印刷されません。グッズ制作でよくある色トラブル実際の制作現場ではこんなケースがよくあります。■ アクキー

ご確認用画像でご提出したデザインの色味と、実際に印刷された色味が微妙に異なることがございます。ここでは「印刷色が画面で確認した色より暗い」「モニターで見たときと印象が違う」など、今回は色味や印象が異なる原因、また、その対処法を簡単にまとめてみました。【原因】■モニター色は「RGB」で、印刷色は「CMYK」だから印刷色が微妙に異ったり、色が沈む一因にカラーモードの違いがあります。モニターやスマートフォンの画面の色は「RGB」というレッド(Red)・グリーン(Green)・ブルー(Blue)の光の3原色によって色が表現されています。一方、印刷物の色は「CMYK」というシアン(Cyan)・マゼンタ(Magrnta)・イエロー(Yellow)・ブラック(Key tone)の4色のインクで表現されており、この表現方法の違いがモニターで見る色と印刷される色の微妙な違いを生み出しています。カラーモードが違っても「RGBの色をそのまま印刷したらいいのでは？」と思われるかもしれませんが、RGBは加法混色、CMYKは減法混色というように表現方法が異なるため、どうしても光の発色であるRGBを、印刷機のインク（CMYK）では表現することができない領域が生じてしまいます。つまり表現領域はRGB＞CMYKとなり、光の発色に依存するモニター色はCMYKインクで再現することが出来ずに印刷の色味が暗く沈んでしまいます。■モニターの設定や、環境光による違い4K対応ディスプレイやブルーライトを軽減するディスプレイ等、高価なものから安価なものまでモニターの数だけ表示色や設定が微妙に異なります。また、同じモニターでも、

「え、印刷ってCMYKじゃないの？」「RGBはweb用のカラーモードでしょ？」……そんな声が聴こえて来そうです。「印刷はCMYK」。これがいままでの常識でしたが、実は最近、「RGB印刷」というのが登場しています。まずRGBとCMYKについて簡単にわかりやすく説明しますね。RGBとは？RGBは「光の3原色」と呼ばれ、「Red」「Green」「Blue」の3つのカラーを混ぜ合わせ、様々な色を作る事ができます。（例：パソコンのモニター、スマホやタブレット画面、TV画面 等）光なので、3つの色全てを最大の明るさで混ぜると「白」になります。逆に全ての光を消すと「黒」になります。強い光が当たるととっても明るい。全く当たらないと真っ暗……そう考えればわかりやすいですね。RGBは光の量を増やせば増やす程明るくなる事から「加法混色」と呼ばれます。また、パソコンのモニターの白い部分を拡大してみると、3つのカラー「R」「G」「B」が綺麗に整列しているのがわかります。これはそれぞれの色が明るく発光していて、尚且つ遠目から見ているため、隣接する色が混ざって見える現象が起こり「白」に見えるのです。RGBが再現できる色の範囲は、難しい話を割愛しますと「とっても広い」です。CMYKとは？CMYKは「色の3原色」と呼ばれ、「Cyan」「Magenta」「Yellow」の3つのカラー（インク等印刷用塗料）を混ぜ合わせ、様々な色を作る事ができます。 （例：名刺、チラシ、ポスター等の印刷物） インクは、3つの色全てを同量混ぜると「黒」になります。 ※厳密には茶色っぽい黒になるため、綺麗な黒を再現するため黒インク（Bl

以前に書いた記事の続きに当たります。あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しました。本記事はQiitaで公開した記事の要約版と補足になります。 前提本記事ではあくまでも実際のケースに沿った表現方法の一例として、mix-blend-modeを使った方法を紹介しています。シンプルにRGB→CMY変換、減法混色をしたい場合には、白（#FFFFFFもしくはRGB(255,255,255)）からの減算の方がロジックとして王道と思います。目的Ｃ、Ｍ、Ｙ、それぞれのカラーブロックを重ね、実際に混色した際の色をシミュレートします。ベースロジックのデモのため、それぞれの色成分初期値は濃度１００％（C→RGB(0,255,255)、M→RGB(255,0,255)、Y→RGB(255,255,0)）とし、濃度の調整はスライダーにより、３色同比率で増減させます。 つまり、結果的には単に見た目が黒から白への濃度変化するものになるのですが、その表現方法の構築が本記事でのメインとなります。なお、当該のアプリケーションではＣ、Ｍ、Ｙ、個別の濃度調整スライダーを実装しています。また、それぞれの色成分初期値が、例えば、シアンの初期値（濃度１００％）はRGB(0, 255, 255)ではなく、RGB(65,225,210)という具合にクライアントによって変更できるようになっています。技術的な話 概ね以下の通りです。 ・Ｃ、Ｍ、Ｙ、それぞれについてDIV要素を設定（カラーブロック）、背景に初期値を設定・カラーブロック

今日は、色の再現方法「RGBとCMYK」について、わかりやすくお話ししたいと思います。Q・RGBとCMYKってなに？A・ざっくり言うと、 RGB → 画面で見るもの（SNS画像・Web広告など）CMYK →紙に印刷するもの（名刺・チラシなど） と考えてOKです！おーわり＾＾と、言いつつ少しだけ詳しくお話します。「RGBで作りますか？CMYKに変換しておきますか？」デザイナーさんにそう言われても、「え、なにそれ…よくわかんない…」って思ったこと、ありませんか？ そんな方に向けて「RGBとCMYKって何なの？」という色の基本をできるだけやさしくお伝えします^^まず、RGBは、スマホやパソコンの画面に使われている色の仕組みのことです。Red（赤）Green（緑）Blue（青）という3つの光を組み合わせて、いろんな色を表現しています。頭文字ですね👀画面の中で見るSNSの広告や画像、ホームページ用のデザインなどは、RGBという形式で作られていることがほとんどです。一方で、CMYKは、紙に印刷する時に使う色の仕組みです。 Cはシアン（青っぽい水色）、Mはマゼンタ（ピンク）、Yはイエロー（黄色）、Kはブラック（黒）で、この4色のインクを重ねて色を表現します。 これも頭文字ですね👀チラシや名刺、パンフレットなど、印刷物を作るときはCMYKが使われます。 RGBは「光で色を作る仕組み」、CMYKは「インクで色を作る仕組み」と覚えておくとイメージしやすいかもしれません。 RGBは光なので、すごく明るくて鮮やかな色を出せるのに対して、CMYKはインクなので、どうしてもくすみや落ち着いた色合いになりが