印刷と画面の色の違い｜RGB・CMYK・色空間の基礎知識
色彩 New

印刷と画面の色の違い｜RGB・CMYK・色空間の基礎知識

なぜ画面と印刷で色が違うのか？RGBとCMYKの違い、色空間（sRGB、Adobe RGB、DCI-P3）の基礎、デザイナーが知っておくべき色変換のポイントを解説。

RGBCMYK色空間印刷カラーマネジメント

画面で見た色と、印刷した色が違う——デザイナーなら一度は経験したことがあるだろう。

「画面では鮮やかなブルーだったのに、印刷したらくすんでいる」 「ネオンピンクが印刷できない」

これらの問題は、**RGB（画面）とCMYK（印刷）**という2つの異なる色の仕組みを理解することで解決できる。

本記事では、色空間の基礎から、失敗しない色変換のコツまでを解説する。

RGBとCMYK：2つの色の世界

RGB（加法混色）

Red、Green、Blueの3色の光を混ぜて色を作る。

特徴内容
原理光を混ぜる
混ぜると明るくなる（白に近づく）
使用場所モニター、スマホ、TV
範囲0〜255
赤(255,0,0) + 緑(0,255,0) + 青(0,0,255) = 白(255,255,255)

CMYK（減法混色）

Cyan、Magenta、Yellow、Key（黒）の4色のインクを重ねて色を作る。

特徴内容
原理インクを重ねる
混ぜると暗くなる（黒に近づく）
使用場所印刷物（チラシ、名刺、書籍）
範囲0〜100%
シアン(100%) + マゼンタ(100%) + イエロー(100%) = 暗い茶色（理論上は黒）
→ だから黒インク（K）を別途使う

なぜ色が違う？

RGBとCMYKでは、表現できる色の範囲（色域）が異なる。

  • RGBは光の三原色で、非常に広い色域を持つ
  • CMYKはインクの限界があり、RGBより狭い

特に鮮やかな色（蛍光色、ネオン）はCMYKで再現できない。

色空間とは

色空間の定義

色空間とは、色を数値で表現するための「座標系」のこと。

同じ「赤(255,0,0)」でも、色空間によって実際の見え方が異なる。

主な色空間

色空間色域用途
sRGB狭いWeb、一般モニター
Adobe RGB中写真、印刷
DCI-P3広いiPhone、Mac、映画
ProPhoto RGB非常に広いハイエンド写真編集

sRGB

最も標準的な色空間。Webデザインでは基本的にsRGBを使う。

  • ほとんどのモニターがsRGBに対応
  • CSSの色指定はsRGBが前提
  • 色域は狭いが、デバイス間の互換性が高い

Display P3（DCI-P3）

Apple製品で採用されている広色域の色空間。

  • iPhone、MacのRetinaディスプレイで表示可能
  • sRGBより約25%広い色域
  • CSS: color(display-p3 1 0 0) で指定可能
/* Display P3での赤（sRGBより鮮やか） */
.vibrant-red {
  color: color(display-p3 1 0 0);
}

/* フォールバック */
@supports not (color: color(display-p3 1 0 0)) {
  .vibrant-red {
    color: #ff0000;
  }
}

Adobe RGB

印刷・写真向けの広色域空間。

  • sRGBより広い緑〜シアン領域
  • 高品質な印刷物に適している
  • 一般のモニターでは正しく表示されない

印刷で失敗しないために

1. CMYKで再現できない色を避ける

RGBで見えるCMYKでの結果
ネオンピンクくすんだピンク
鮮やかなシアン暗めのシアン
蛍光グリーン渋いグリーン
ディープパープル茶色っぽい紫

対策: 印刷物のデザインでは、最初からCMYKで作業する。

2. リッチブラック vs 100%ブラック

印刷で「真っ黒」を出すには注意が必要。

設定CMYK値結果
100%ブラックC0 M0 Y0 K100やや灰色っぽい
リッチブラックC60 M40 Y40 K100深い黒
/* リッチブラックの一般的な配合 */
C: 60%
M: 40%
Y: 40%
K: 100%

注意: 細い文字にリッチブラックを使うと、版ズレで見づらくなる。

3. 総インキ量に注意

CMYKの合計値が高すぎると、インクが乾かない・にじむ問題が発生。

用紙推奨上限
コート紙320〜350%
マット紙280〜300%
新聞用紙240〜260%
/* 例: 総インキ量340% */
C: 100% + M: 80% + Y: 80% + K: 80% = 340%

4. カラープロファイルを埋め込む

印刷入稿時は、カラープロファイルを必ず埋め込む。

  • 日本の印刷: Japan Color 2001 Coated
  • アメリカの印刷: U.S. Web Coated (SWOP) v2

Illustrator/Photoshopで「プロファイルを埋め込む」にチェック。

Webでの色管理

sRGBを基本に

WebデザインではsRGBが標準。特別な理由がなければsRGBで作業する。

/* 通常のCSS色指定（sRGB） */
.button {
  background-color: #3B82F6;
  /* または */
  background-color: rgb(59, 130, 246);
}

Display P3対応サイト

Apple製品でより鮮やかな色を表示したい場合、Display P3を使う。

.hero {
  /* P3対応デバイス向け */
  background: color(display-p3 0.2 0.5 1);

  /* 非対応デバイス向けフォールバック */
  @supports not (color: color(display-p3 0 0 0)) {
    background: #3380ff;
  }
}

画像の色空間

  • JPEG/PNG: sRGBで書き出すのが安全
  • WebP: sRGBが標準
  • AVIF: 広色域対応可能

変換時の注意点

RGB → CMYK変換

  1. 鮮やかな色は必ずくすむことを前提に
  2. 印刷会社の推奨プロファイルを確認
  3. ソフトプルーフ（画面上での印刷シミュレーション）を活用
  4. 可能なら色校正（実際の印刷でテスト）

CMYK → RGB変換

  1. 問題は少ないが、モニターによって見え方が異なる
  2. sRGBに変換するのが無難

ツール

ソフト変換方法
Photoshop編集 → プロファイル変換
Illustrator編集 → プロファイル変換
GIMP画像 → モード → CMYKに変換
当サイトカラーコード変換ツール

よくある質問

Q: Webデザインでも印刷を意識すべき？

A: 印刷物も作る可能性があるなら、鮮やかすぎる色（ネオン系）は避けたほうが安全。

Q: CMYKで作業すべき場面は？

A: 以下の場合はCMYKで作業：

  • 最終出力が印刷物のみ
  • 印刷会社からCMYK入稿を指定された

Q: 画面と印刷の色を完全に一致させられる？

A: 完全な一致は物理的に不可能。ただし、カラーマネジメントを適切に行えば、十分に近づけられる。

まとめ

画面と印刷の色が違う理由と対策：

ポイント内容
RGB光の三原色、画面用
CMYKインクの四原色、印刷用
色空間sRGB（Web標準）、Adobe RGB（印刷）、P3（Apple）
変換の注意鮮やかな色はくすむ、プロファイルを埋め込む

デザインの目的（Web？印刷？両方？）を明確にし、それに合った色空間で作業することが大切だ。

当サイトのカラーコード変換ツールでは、RGB⇔CMYK変換も確認できる。ぜひ活用してほしい。

関連記事

記事一覧に戻る