【Figmaの色設定の罠】デザインデータとプレビュー・コーディング時の色味が違う場合の設定

違和感はデザイン完成後に起きました。
完成したデザインを「共有」でクライアント様に確認していただこうとした時、発行されたURLを開くと異変が。

「・・・何か色味くすんでない？」

どう見ても色味がくすんでいるのです。暗い、暗いぞ！
元デザインは写真も背景色もグラデーションも鮮やかなのに「共有」で見るとくすんでいます。

その時頭によぎったのは
「FigmaにはもしかしてCMYKとRGBの設定があるのか？」です。
illustratorやPhotoshopにはCMYKやRGBの設定があり、それぞれ紙モノやWebサイトを作成する場合に切り替えますが、まさかその設定があるのかもしれないと勘ぐりました。

設定の探索

調べたのはFigmaの「基本設定」

・・・ありました。色設定！！

「色空間」を見てみると「sRGB」と「非管理」があり、「非管理」にチェックがついていました。

もしや？と思い「非管理」から「sRGB」にして、Figmaを再起動すると
デザインデータと「共有」で見たデザインが一緒の見た目になりました！！
問題解決です！

sRGBと非管理とは

sRGBとは、標準的なRGBカラースペースの1つで、1996年に制定された国際的な規格です。sRGBは、主にWebページやデジタル画像、ビデオ、スマートフォン、タブレット、コンピュータディスプレイなど、デジタル画像や映像を扱う機器やアプリケーションで使用されます。
つまりどんなデバイスでも同じ色味で表示できる、Webで使用される標準的な色です。

非管理とは、カラーマネジメントなどを行わない色の表現方法です。非管理の場合、入力された色がそのまま表示されますが、それぞれのディスプレイや出力環境によって異なる結果になる可能性があります。非管理の場合、色の変換などが行われず、原色に近い形での色の表現が可能です。
つまり、色の表現はかなり広いが、デバイスによって表示色が異なります。

色味の違いを検証

sRGBと非管理の設定を切り替えてそれぞれスクリーンショットを取り、Chromeの検証ツールで、スポイトツールを使用し、同じ色を表示してみました。

sRGBと非管理を比較すると非管理のほうが鮮やかです。
そしてsRGB・非管理と画像下部のWebで表示してみましたが、sRGBとかなり近い色になっています。

非管理とWebと比較してここまで色味が違うとかなり困ります・・・。この結果からも色管理は「sRGB」をおすすめします。

どっちを使うべきか

WebだとsRGB一択です。非管理はデバイスによって色味が異なってします。
非管理の使い方をchatGPTに聞くと印刷物は非管理がいいとのことですが、本当かな？という印象です。

まとめ

Figmaの色空間設定はデフォルトで「非管理」になっています。Figmaを導入された場合にやる最初にやる設定では必ず「sRGB」にする事を忘れてはいけないと思いました。