朗報！ついにXDがカラーマネジメントに対応しました！

みなさんこんにちは。デザイナーのうりゅうです。

少し前のことになってしまいますが、ついにXDがカラーマネジメントに対応しましたね！
心待ちにしていたデザイナーやコーダーの方も多いのではないでしょうか？
今回はこの機能について簡単な解説と、書き出した画像を比較してみてわかったことや注意点をまとめてみました。

そもそも「カラーマネジメント」とは？

カラーマネジメントとは、ソフトウェアやデバイス間での色の差を管理するために必要なシステムのことです。
各デバイスやデータの色情報（カラープロファイル）を用いて色を「共通化」し、どのデバイスでも同じ色で見えるようにしてくれます。

カラーマネジメントに対応して変わったこと

「XD 57」以降のバージョンで新規ファイルを作成すると、デフォルトで「sRGBカラープロファイル」が選択されるようになりました。

「XD 57」より前に作成された古いファイルは、管理されていないカラープロファイルのままなので影響はなさそうです。
非破壊的な操作なのでいつでも切り替えることができ、古いファイルをsRGBカラープロファイルに変更することも可能です。
メニューの編集＞カラープロファイルから「sRGB」もしくは「アンマネージド」を選択できます。

実際に書き出して比べてみた

どのくらい変わるのか、書き出した画像で比較してみました。

少しの違いですがわかるでしょうか？
気にならない方は気にならないくらいの違いですが、デザイナーとしては結構違う！と感じてしまいます。

XD書き出し（アンマネージド）とPhotoshop書き出しでの比較

わかりやすいようにアンマネージドの画像とPhotoshopの画像だけで比較してみます。
左のアンマネージドの画像の方が黄みがかっているのがわかるでしょうか？
机や床の白い部分を比較するとわかりやすいかと思います。
白って100色あんねん！という某タレントさんの言葉が聞こえてきそうですね。

Photoshop書き出しとXD書き出し（sRGBカラープロファイル）での比較

カラープロファイルを使用して書き出すと色味はほぼ気になりませんね！
しかし、右側のXDで書き出している方がぼやけているのがわかるでしょうか？
使用する画像やサイズによっては画質が荒いと感じてしまいそうです。

まとめ

いかがでしたでしょうか。
カラーマネジメント非対応というXDにおける大きな悩みが解消されたのは、大変喜ばしいことですね✨
しかし、XDから画像を書き出すにはまだまだ問題がありそうです。
MVなど綺麗に書き出したい画像はPhotoshopで書き出すなど、用途やサイズにあわせての対応が必要ですね。
Web制作にはかかせないXDですので、さらなる改善に期待しつつ、これからも大いに活用していきたいと思います。