モニターで鮮やかに見えていた青や緑が、刷り上がった紙ではくすんで見える。デザインや印刷の仕事をしていれば一度は出くわす落差ですが、その理由を図で説明するのは意外に難しいものです。「色域（ガモット）が違うから」という一言を、目で見て確かめられる形にしたのが本ツールです。
ASOBOADは、sRGB・Adobe RGB・Display P3・Rec.2020・CMYKの色域を、CIE 1931 xy色度図と3次元の立体で重ねて比較できる無料Webツール「色域スコープ GAMUT SCOPE」を公開しました。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。
どんなツールか
色域スコープ GAMUT SCOPEは、各カラースペースが再現できる色の範囲を、色度図の上に描いて比べるためのビューアです。表示したい色域をチップで選び、ドラッグで立体を回しながら、どこがはみ出し、どこが重なっているのかを確かめていきます。さらに任意の色を1つ指定すると、その色が各色域の内側に収まるかどうかを計算し、「○ 色域内」「× 色域外」として判定します。
これまで、色域の比較といえば教科書やメーカー資料に載っている平面の三角形の図を眺めるしかありませんでした。ただ平面の図は「面積が広いほうが優れている」という誤解を生みやすく、明度方向の得意・不得意がまったく見えません。本ツールは同じデータを3次元で立ち上げることで、「どの明るさの帯でどちらが有利か」まで読み取れるようにしています。
描画にはWebGLベースの3Dライブラリ（Three.js）を使っており、計算はすべてお使いのブラウザ内で完結します。読み込ませた測色データが当方のサーバーへ送信・保存されることはなく、データが端末内にとどまる仕組みです。PCではドラッグで回転・ホイールで拡大縮小、スマートフォンやタブレットではドラッグとピンチ操作に対応しています。
馬蹄形の地図で読む「色域」
ビューアの土台になっている馬蹄形の図は「CIE 1931 xy色度図」と呼ばれ、人間の眼が知覚できるすべての色度（色み）を平面に写し取ったものです。外周の曲線は単一波長の光（虹の色そのもの）が描く「スペクトル軌跡」で、下辺の直線は赤紫と青紫を結ぶ「純紫軌跡」。この馬蹄形の内側が、人に見えるすべての色みの地図になります。本ツールでは、この外周をCIE 1931 2°標準観測者の色度座標データ（380〜700nm・5nm刻み）からそのまま描いているため、形状は公式の色度図と一致します。
モニターや印刷機は、この地図の全域をカバーできるわけではありません。ディスプレイはR・G・Bの3原色の混合で色を作るため、色度図上では3つの原色を頂点とする三角形の内側しか表現できません。一方の印刷は紙の白とインキの掛け合わせで色を作るので、範囲は三角形ではなく、インキと紙の物性で決まる歪んだ多角形になります。この「かたちの違い」こそが、RGBとCMYKの相性の悪さの正体です。
収録している5つの色域
ビューアに描けるのは、Web・一般モニターの世界標準である「sRGB」、緑〜シアン側を大きく拡張しフォトレタッチや印刷系ワークフローで定番の「Adobe RGB (1998)」、近年のスマートフォンやディスプレイで事実上の標準となった「Display P3」、4K/8K放送・HDR時代に向けた超広色域規格「Rec.2020」、そして日本の枚葉オフセット印刷の標準的な再現域を近似した「CMYK 印刷（近似）」の5つです。
RGB系の4つは、各規格の公称原色座標と白色点（D65）から変換行列を都度計算し、RGB立方体の表面をxyY空間へ写像して立体を生成しています。ページ内には「主要カラースペース早見表」も用意しており、たとえばsRGBの緑がx 0.300／y 0.600、Adobe RGBの緑がx 0.210／y 0.710というように、描画にそのまま使われている座標を確認できます。なおカラーフィルムの色域は銘柄・露光・現像条件で大きく変動し、信頼できる単一の公称値がないため、本ツールでは意図的に収録していません。
なぜ「立体」で見るのか
3Dビューでは、水平方向がxy色度（色あい）、縦軸の高さが輝度Y（色の明るさ）を表し、底面が黒、上へ行くほど白に近づきます。印刷の鮮やかなイエローは明るい領域に、モニターの深いブルーは暗い領域に存在します。そうした「高さ方向の住み分け」が、回転させると一目で分かります。RGB系が原色の三角錐として立ち上がるのに対し、CMYKが丸みを帯びた塊のような姿になることも、立体にしてはじめて実感できる違いです。
もちろん、従来の図と見比べたい場面もあります。「2D 色度図」に切り替えれば教科書と同じ「上から見た地図」になり、「3D 立体」に戻せば明度方向を含めた姿に戻ります。この往復ができるのが本ツールの使いどころで、たとえば2D表示では印刷のシアンのベタがsRGBの三角形の外側にはみ出していることが確認でき、「広い・狭い」は場所ごとに逆転し得るという事実が具体的に見えてきます。
主な機能・特徴
- 5つの色域をチップで個別にオン・オフでき、比べたい組み合わせだけを重ねて表示できます。不透明度スライダーで奥の立体の見え方を調整できるため、内包関係を確かめたいときに便利です。
- 「3D 立体」と「2D 色度図」をワンタップで切り替えられます。立体で明度方向を確かめてから、平面で従来の図と突き合わせる、という使い方ができます。
- 「自動回転」で立体をゆっくり回し続けられ、「ラベル表示」で各色域の名前の重畳表示を切り替えられます。プレゼンや授業で見せながら説明する場面を想定した機能です。
- 色を1つ選ぶと、各色域について「○ 色域内」「× 色域外」を判定します。3D画面上には白いマーカーでその色の位置が示されるので、なぜ外れたのかを位置関係で理解できます。
- 図の上をタップすれば、その位置の色度をその場で計測できます。狙った領域の座標を拾いたいときに使えます。
- 測色データ（CGATS形式のISO 12642チャート測色値や、ArgyllCMSの.ti3、1行にL,a,bを並べたCSV）を読み込ませると、CMYKの近似モデルが実測点から構築した立体に置き換わります。Lab値はD50測定として扱い、Bradford変換でD65へ順応します。
- 計算はすべてブラウザ内で行われ、読み込ませたデータが当方のサーバーへ送信されることはありません。社外に出せない特性化データを扱う場面にも向いています。
使い方
まず「表示する色域 / Gamuts」のチップで、比べたい色域を選びます。初期状態ではsRGBとAdobe RGB、そしてCMYKが表示されているので、Display P3やRec.2020を足したり、逆に絞ったりして目的の組み合わせを作ります。次に立体をドラッグして回し、ホイールやピンチで寄りながら、はみ出している領域を探します。見づらければ「不透明度」を下げると奥側が透けて見えます。
調べたい色が決まっているときは「Probe — 色域内外ジャッジ」のカラーピッカーで色を指定します。選んだ色はsRGB値として解釈され、各色域の判定が「Judgement — 判定結果」に並びます。3Dビューで判定したときは立体としての内外、2D色度図モードでは色度のみでの判定になるため、結果の横に添えられる注記（「3D判定」「色度のみ」など）も一緒に確認してください。
印刷の色域をより実態に近づけたい場合は「測色データを読み込む」から特性化データを読み込みます。読み込みが成功すると点数とファイル名が表示され、CMYKの3D表示と内外判定の両方が実測ベースへ切り替わります。読み込んだ内容はその場の表示に使われるだけで、どこかへ保存されるわけではありません。
RGBからCMYKにすると色がくすむ理由
モニターのRGBは光そのものを重ねる加法混色で、R＋G＝イエロー、3色すべてを重ねると白になります。対して印刷のCMYKは、白い光からインキが特定の波長を吸収する減法混色で、C＋M＝ブルー、3色を重ねると理論上は黒に近づきます。ページ内にはブラウザの合成モード（screen / multiply）で実際に混色を計算したデモも置いてあり、混ぜるほど明るくなる側と暗くなる側の違いをその場で見比べられます。
RGBとCMYは、同じ三原色を「足し算側」と「引き算側」から見た表裏の関係にあり、Rの補色がC、Gの補色がM、Bの補色がYになります。白色光からR（赤）の成分を取り除けば残るのはGとBの光、すなわちシアンです。だからシアンのインキは「赤を吸収するフィルター」として働きます。写真の色かぶり補正で青っぽい写真にイエローを足すのも、RGB→CMYK変換の理論上の基礎式（C=1−R, M=1−G, Y=1−B）も、すべてこの構造から来ています。ページ内の色相環はノードをタップすると対応するペアを確認でき、「赤の補色は緑」と習った美術のRYB色相環との体系の違いにも触れています。
そして肝心の「くすみ」は、色域外の色が必ず色域内のどこかへ置き換えられること（色域圧縮）から生じます。3Dビューでモニター系の三角錐とCMYKの立体を重ねると、特に鮮やかなブルー、蛍光がかったグリーン、彩度の高いオレンジあたりに印刷側の対応する場所がないことが分かります。画面のプレビューと刷り上がりの差の多くは、ここに由来しています。
計算の根拠と、近似であることの範囲
色域を「正確に」扱うツールを名乗る以上、どこまでが規格値による計算で、どこからが近似なのかを分けて示す必要があります。RGB系4つは規格の公称値に基づく計算で、規格どおりの描画です。一方CMYKは、印刷の色域が本来は測色データの集合であり単純な数式では表せないため、Japan Color 2001 Coatedの代表的なベタLab値（D50）をD65へ順応変換した一次色・二次色6点と紙白・黒点の計8点を用い、網点混色が概ねXYZ空間で線形になる性質にもとづいてXYZ空間での凸包として構築した近似立体を使っています。この近似はJapan Color 2001 CoatedのICCプロファイルと照合され、ランダムなsRGB色の内外判定で約95%の一致が確認されていますが、階調域や用紙差までは表現できません。
もうひとつ、原理的な限界もあります。ご覧のディスプレイ自体に色域があるため、その外側の色はクリッピングした近似色で表示されます。「モニターでは再現できない色をモニターで見せる」ことは不可能なので、画面上の色はあくまで位置関係を理解するための参照表示として捉えてください。
入稿前に”落ちる色”へ見当をつける。見つけるべきは、鮮やかな色そのものより「その明るさで無理をしている色」です。
印刷の色校正で「思ったより沈んだ」と言われる色には、だいたい傾向があります。私が入稿前に必ず疑うのは、蛍光ペンのような黄緑、発光しているような水色、それに彩度の高いオレンジ。この三つはRGBでは軽々と出るのに、CMYKには受け皿がありません。ただ、実務で本当に厄介なのは「暗いのに色みが濃い色」のほうだと感じています。濃いこげ茶やワインレッドのように、暗さと彩度を同時に要求する色です。印刷で色を暗くする手段はインキを足すことしかなく、インキを足せば明度と一緒に彩度も失われていく。だから「その明度で保持できる彩度の上限」を超えた瞬間に、色は静かに置き換えられてしまいます。
GAMUT SCOPEの3Dビューで立体の底が黒点に向かってすぼまっているのを見ると、この制約が形として納得できるはずです。私の段取りは、まずキービジュアルの主要色をプローブに何色か放り込んで危ない候補を洗い出し、そこだけPhotoshopの色の校正と色域外警告で追い込み、最後は色校正紙で確認する、という三段構え。同じCMYKでも紙が変われば色域は変わるので、コート紙前提の判断を上質紙の案件へ持ち込まないことも大切です。事前に一色でも「これは落ちる」と分かっていれば、色校正のやり取りは驚くほど短くなります。見当をつける、それだけで入稿は静かになります。
活用シーン
- 印刷入稿の前に、色域から落ちそうな色に見当をつけたいとき
- RGBとCMYKの違いを、クライアントや社内メンバーに図で説明したいとき
- sRGBとAdobe RGB、Display P3のどれで作業すべきかを判断したいとき
- 広色域ディスプレイ向けのコンテンツで、sRGB外の色をどこまで使うか検討したいとき
- 学校や研修で、色度図・加法混色・減法混色・補色を視覚的に教えたいとき
- 自分で測色した特性化データを読み込んで、手元の印刷条件の色域を立体で確かめたいとき
よくある質問
Q. 利用は無料ですか？
A. はい。無料でご利用いただけます。会員登録もインストールも不要で、ページを開いてすぐに使い始められます。
Q. RGBからCMYKにすると色がくすむのはなぜですか？
A. RGBは光を重ねる加法混色、CMYKはインキが光を吸収する減法混色で、再現できる色域がそもそも異なるためです。特に鮮やかなブルー・グリーン・オレンジはCMYK色域の外にあり、変換時に色域内の近い色へ置き換えられるため、くすんで見えます。
Q. 色度図の「面積が広い＝高画質」ですか？
A. 必ずしもそうではありません。色域は「再現できる範囲」であり、階調の滑らかさや輝度、キャリブレーションの精度とは別の指標です。2D表示の面積比較は明度方向の情報を落としているため、3Dビューと併せて見ることをおすすめします。
Q. 「CMYK内」と判定された色は、印刷でそのまま出ますか？
A. 判定は近似モデル上の目安です。実際の再現は用紙・インキ・印刷条件・ICCプロファイルに依存するため、危険な色を早期に見つけるスクリーニングとして使い、最終確認は本機校正や色校正紙でおこなってください。
Q. 読み込ませた測色データは外部に送信されますか？
A. 読み込んだデータ（CGATS / CSV）はお使いのブラウザ内でのみ処理され、外部へ送信されることはありません。
Q. スマートフォンでも使えますか？
A. はい。ドラッグでの回転、ピンチでの拡大縮小、図をタップしての色度計測に対応しています。3D描画を継続的におこなうため、端末によっては発熱や電池消費が増える場合があります。
ご利用にあたって
本ツールは色域とカラーモードの理解を助けるための教育・制作支援目的のリファレンスであり、色彩の測定・検査・証明をおこなうものではありません。表示および判定は規格の公称値と代表的な測色値に基づく計算（CMYKは近似モデル）によるもので、結果の正確性・完全性を保証するものではありません。本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。入稿・発注・製造等の最終判断は、必ず本機校正・色校正紙・実機確認など正規の検証手段に基づいておこなってください。画面上の色はご覧のディスプレイの色域・調整状態に依存し、色域外の色はクリッピングした近似色で表示されます。ブラウザの種類・バージョンや端末環境によっては、表示・動作が異なる場合があります。
Japan Colorは標準印刷色の名称、Adobe RGBはAdobe Inc.、Display P3はApple Inc. の規格・商標であり、本ツールは各団体・各社とは無関係の独立したコンテンツです。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、ASOBOAD／AMIXは責任を負いかねます。本ツールの仕様・計算方法・掲載内容は、予告なく変更または提供を終了する場合があります。
「画面と紙で色が違う」を、言葉ではなく立体で確かめてみてください。色域スコープ GAMUT SCOPEをぜひお試しください。
▶︎ デザイン制作実績を見る / ▶︎ デザインのブログ記事一覧 / ▶︎ デザイン制作のガイド・媒体の特徴
この記事について
こんなページも読まれています
