すべてのカテゴリ

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

以前に書いた記事の続きに当たります。ある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要素を設定（カラーブロック）、背景に初期値を設定・カラーブロック