【Illustrator】書き出しプレビューで赤やオレンジの彩度が高く見える原因と対処法

作業中は普通なのに、書き出しプレビューだけ色が派手に見える…

Illustratorで作業していると、

• 作業画面では違和感がない
• 書き出しプレビューで急に赤やオレンジが派手に見える
• 書き出すと、落ち着いた色に戻る

といった“見え方のズレ”に悩むことがあります。

結論：色空間（sRGB / Display P3 / Adobe RGBなど）の不一致で起きることが多い

作業画面と書き出しプレビューで色味が変わるのは、使用している「色空間」が一致していないことが原因になっていることが多いです。

同じRGBの数値でも、色空間によって再現できる色の範囲が異なるため、赤やオレンジなどの見え方が変わります。
特に、Display P3とsRGBの違いによって、赤やオレンジなどの彩度が大きく変わって見えることがあります。

Web用途では、作業設定と書き出し設定をsRGBに統一することで、書き出し時の色ズレを大きく減らすことができます。

以下で、確認すべき手順を詳しく解説します。

Illustratorで書き出し時に色が変わる主な原因

色空間は、主に以下の3つが使用されます。

色空間	色の広さ	得意分野	Web向き？
sRGB	狭い	Web・SNS	◎
Display P3	中〜広	Apple端末	△
Adobe RGB	広い	印刷・写真	×

この3つは「表現できる色の範囲（色の広さ）」が違います。

• 色の範囲が狭い → どの環境でも同じように見えやすい
• 色の範囲が広い → 鮮やかだけど、環境差が出やすい

この色空間が混ざることで、色ぶれが起こります。

例としては、以下のように色空間が違った場合、色ぶれが起こりやすいです。

この切り替わりで、

• 作業中は普通
• プレビューで派手
• 書き出すと印象が変わる

という現象が起きます。

作業時・書き出し時の色空間を揃えることで色ぶれが起きにくくなります。

Webデザインにおいては、迷ったら sRGB一択 です。

Webでは「正しく表示される可能性が最も高い色空間」が sRGB

sRGBは
👉 いちばん広い色を出せる
ではなく
👉 いちばん多くの環境で“同じように見える”
色空間です。

Webでは、閲覧環境を制作者がコントロールできません。
そのため、最も多くの環境で安定して表示される sRGB が事実上の標準として使われています。

「一部の環境でより鮮やか」よりも、「どの環境でも大きく崩れない」ことが、Webデザインでは重要です。

書き出しプレビューと実際の色を揃えるための4つのチェック項目

作業時・書き出し時の色空間をsRGBに揃えるチェック項目をお伝えします。
以下を上から順に確認してください。

1. ドキュメントプロファイルをsRGBにする（最重要）

• 「作業用RGB：sRGB IEC61966-2.1」を指定する

2. カラー設定（全体設定）をWeb向けにする

• 設定：カスタム
• 作業用RGB：sRGB IEC61966-2.1
• カラーマネジメントポリシー（RGB）：作業用スペースに変換

※ CMYK設定はWeb用途では気にしなくてOKです。
※『作業用スペースに変換』は、ファイルに埋め込まれたプロファイルを作業用に揃える設定です。既存データの見え方が変わる場合があるため、重要案件は複製して試してください。

3. 校正設定を「インターネット標準RGB」にする

• インターネット標準RGB（sRGB） を選択

ここが

• CMYK
• モニターRGB

になっていると、作業画面とプレビューの見え方がズレます。

※これは表示確認のための設定です。まずは①②④（プロファイル／カラー設定／RGBモード／書き出し設定）を優先してください。

4. ドキュメントのカラーモードがRGBか確認する

• RGBカラーになっているか確認
• CMYKのままでも作業はできますが、Web用のRGB表現に変換する段階で色の見え方／数値が変化しやすいため、Web用途はRGBドキュメント推奨です。

まとめ：色空間を揃えよう

• 書き出しプレビューで派手に見えるのは色空間の違い
• 多くの場合、数値が壊れているのではなく、表示（プレビュー）の解釈差で見え方が変わっています
• Web用はsRGB基準で統一するのが正解

※筆者環境：macOS（Macbook Pro M1MAX）／Illustrator 2025
書き出しプレビューで赤・オレンジが濃く見える現象を確認し、上記手順で改善しました。