Adobe XDで作業していると作業画面とプレビュー、書き出した画像の色が変わって見える現象でお困りの方も多いのではないでしょうか。

今回は、Adobe XDの作業画面とプレビュー、書き出し画像を比較して検証してみた結果を紹介します。

 

なぜ色が変わってしまうのか

作業画面とプレビューや書き出した画像で色が変わってしまうのは、Adobe XDがカラーマネジメントに対応していないことが原因です。
PhotoshopやIllustratorはRGB、CMYKのカラーマネージメントに対応していますが、Adobe XDは残念ながら対応していません。

XDでカラーマネジメントに対応するにはPhotoshopでカラーマネジメントをせず、モニタの設定を利用する方法がありますが、制作環境とユーザーの環境で大きく色が変わることになるので、推奨できません。

 

色の違いを徹底検証!

他のデザイナーにも尋ねてみると「書き出し画像は問題ない」との声が…。
どういうことなのか…?比較・検証をしてみました。

 

検証対象

  • jpg画像 3種類
  • 塗りを指定した長方形オブジェクト 3種類

色は差異がわかりやすいピンク・グリーン・ブルーの3色をセレクトしました。

 

比較対象

  • 元画像(Adobe XDに配置する前の写真Photoshopで写真を配置/オブジェクトにカラーコードを指定)
  • Adobe XDの作業画面のスクリーンショット
  • Adobe XDのプレビュー画面のスクリーンショット
  • Adobe XDから1倍(等倍)で書き出したjpg
  • Adobe XDから2倍で書き出したpng

 

比較方法

■画像
それぞれ書き出した画像の全体と画像の一部を拡大し、目視で比較

 

■長方形オブジェクト
Photoshopのスポイトツールでカラーコードを取得し、長方形に設定したカラーコードと比較

 

写真はドットが複雑でスポイトで同じ場所をサンプリングするのが難しいため目視で確認します。
なお、写真素材とPhotoshopのカラープロファイルは「sRGB IEC61966-2.1」で統一しています。

 

まずは画像から比較をしていきましょう。

中央の公園の写真は色が複雑なのであまり差がわかりませんが、
左と右は一見しただけでも色の差があるのがわかりますね。

 

この一覧画像内の赤い四角を拡大してさらに比較してみます。

拡大するとはジャギーが目立ちますが、
全体を比べると、Adobe XDの作業画面はかなり彩度が高く、色が大きく変わって表示されているのがわかります。

元画像を基準にして比べると、書き出し画像とプレビューは色が近く見えます。

 

 

続いて長方形オブジェクトでの比較です。

比較した画像に使われていた色をサンプリングして比較しました。

比較画像の赤文字は設定したカラーコードと同じになったもの。
青文字は、近いカラーコードになったものです。

 

プレビュー画面とpng書き出しが、元に設定したものと同じカラーコードになりました。
jpgも若干コードは違いますが、許容範囲そうです。

 

検証結果

元画像・カラーコードと同じになったものは、Adobe XDから書き出したpng画像とプレビュー画面の2つでした。

Adobe XDの作業画面では色が異なって見えるため、作業時に惑わされないように注意が必要になります。

 

また、jpgは許容範囲内の差ですが、
下記画像のように、「jpg画像の下の背景に同じ色を設定して馴染ませる」という処理をする場合は
コーディング時に、背景に設定する色をXDから取得していると画像が浮いているように見えてしまうことも懸念されます。

僅かな色の差ですが、違和感が出てしまうのがわかるでしょうか。

コーダーに正しい色を指定し直してもらう調整する必要がありますが、
色の差について理解できていれば、画像をpngに差し替えることで解決できるかもしれません。

 

作業画面の色味に惑わされないために

元画像・書き出し画像に近いプレビュー画面を確認する癖をつけましょう。

 

プレビューの表示方法

 

作業画面右上の▲マークでプレビューを表示できます。

ショートカットキーは、Mac→⌘+Enter/Windows→Control+Enter です。

 

 

いかがだったでしょうか。

デザインに便利なAdobe XDですが、気をつけて作業しなければいけない事もありますね。

色味が変わってしまう事はデザイナーとして悩みの1つなので、今後のアップデートに期待です。