IllustratorとWebで色が違う原因は？AdobeRGBとsRGBの違いと対処方法
2025-04-27
Illustratorで作成されたデザインカンプを元にコーディングした際に、
- 「同じ色コードなのに見た目が違う」
- 「Illustratorで書き出した画像の色もズレている」
といった経験はないでしょうか。
実際に私もこの問題に直面し、原因の特定に少し時間がかかりました。 結論から言うと、この現象の原因はカラースペース（色空間）の違いです。
本記事では、色ズレが発生する原因と具体的な対処方法、再発防止のポイントをまとめます。
色の数値は同じなのに見た目が違う
Illustratorで支給されたデザインを元にWebページを作成したところ、見た目の色が異なることに気づきました。
しかし、デザインカンプとWebページで指定しているカラーコード（例：#3366CC,#E48145）は同じです。
さらに、Illustratorから書き出した画像も、ブラウザで見ると色味が変わっているように見えました。
原因はカラースペース（AdobeRGBとsRGB）の違い
この問題の原因は、デザインデータのカラースペースにあります。
IllustratorのデータがAdobe RGBで作成されていた場合、Webで表示するとsRGBに変換されるため、同じ数値でも色が異なって見えることがあります。
カラースペースの違い
- Adobe RGB 印刷向けの色空間。色域が広く、鮮やかな色を表現できる
- sRGB Webブラウザや一般的なモニターの標準。Web制作ではこちらが前提
この2つが混在していると、数値が同じでも見た目が変わるという現象が起きます。
対処方法：Illustratorのカラー設定をsRGBに揃える
Illustratorの設定を変更することで、色ズレを解消できます。
設定手順
- メニュー「編集」→「カラー設定」を開く
- 作業用スペース（RGB）を 「sRGB IEC61966-2.1」に設定
- カラーマネジメントポリシー（RGB）を 「作業用スペースに変換」に変更
- Illustratorを再起動
この設定に変更すると、Illustrator上の色がsRGB基準に揃います。
その後、Web側のカラーコードも合わせて調整すると、見た目のズレはほぼ解消されます。
再発防止のチェックリスト
同様のトラブルを防ぐために、以下を事前に確認しておくと安心です。
- Illustratorのカラーマネジメントを「作業用スペースに変換」にする
- デザイナーに「sRGBで制作してください」と伝える
- 受け取ったデータのカラーモードを確認する （Illustrator：ファイル → ドキュメントのカラーモード → RGBカラー）
まとめ
Web制作では、sRGBが前提のカラースペースです。
Illustrator側がAdobe RGBになっていると、同じ色コードでも見た目が変わる原因になります。
「なんか色が違う…」と感じたときは、まずカラースペースの設定を確認してみてください。
