こんにちは、ハヤマです。
今回は、Webデザインを目的とした視点で「Figmaのカラーマネジメント」について書いていきたいと思います。
Figmaのカラーマネジメント
Webデザインを行うにあたって、取り扱うアプリケーションやツールがどこまでカラーマネジメントに対応しているかを確認しておくことは重要です。
カラーマネジメントはソフトウェアやデバイス間での色の差を管理するために必要なシステムのことで、各デバイスやデータの色情報（カラープロファイル）を用いて色を“共通化”し、どのデバイスでも同じ色で見えるように環境を整備することができます。
一方カラーマネジメント非対応のアプリケーションやツールでデザインを行うと、カラープロファイルを取り扱うことができず、コーディング後にWebブラウザで確認した時デザインのイメージとは異なった色合いで画像が表示されてしまう、といった不具合が発生してしまいます。
カラーマネジメントについて、詳しくはこちらをご覧ください。
Figmaのアプリケーションのカラーマネジメントは、以下の色空間が選択可能です。
- sRGB
- Unmanaged（非管理）
※デスクトップアプリを使用した場合。
設定はメニューのFigma > Preferences（基本設定） > Color Space（色空間）から可能です。
※上記画面は言語表示を日本語に変更しています。
sRGB
sRGBとは、国際電気標準会議（IEC）が定めた国際標準規格のRGB空間の定義です。
Windows環境の基準となっている色空間で、WebサイトもsRGBに準拠して作られています。
このほかにも一般的なプリンタやカメラで違和感なく再現できる色域とされています。
頭文字の「s」は「標準（standard）」の略であり、汎用性の高さが特徴です。
Unmanaged（非管理）
Unmanagedは翻訳すると“管理されていない”、つまりは「規格に管理されない色表示」であることを意味します。 本来のディスプレイ性能による表示での確認が可能で、高性能なディスプレイが表示できる豊かな色を規格に影響されずに表示することができます。
Webデザインで使用するにはどちらの設定が良いか
Webページはブラウザで表示されるため、予め「sRGB」に設定のうえ作成をした方がデザイナーのイメージに近い色味で実装することができます。
アプリのデザインなどブラウザ以外での表示を目的とした制作では、「Unmanaged（非管理）」で行うと良いようです。（念のため、sRGBの選択肢も含めて検証を行い判断することをおすすめします）
他の方の記事で、「デフォルトがUnmanagedになっているので注意」とありましたが
私の方で確認したところ、「sRGB」が選択されていました。
この設定は変更したことがなかったので、「sRGB」がデフォルトに変わったのかもしれません。お手持ちのFigmaアプリで確認してみてください。
デスクトップ版とWebブラウザ版を併用する時の注意
FigmaアプリでColor Space（色空間）を「Unmanaged（非管理）」にしてデザインしたデータを
Webブラウザ版のFigmaで開いた場合、“同じデータなのに見た目上色の差が発生する”ということが起こるようです。
これはディスプレイ性能による表示とsRGBによる表示と、それぞれ異なる色域でデータを表示していることが原因のようで、データを共有する時など特に注意が必要です。
さいごに
いかがでしたでしょうか。
この記事を書こうと思ったきっかけは、Adobe XDがカラーマネジメント非対応だったことです。
これがIllustrator・PhotoshopからXDに乗り換えることのできない超えられない壁でした。
FigmaはWeb制作において問題なさそうなので、良かったです。
今後もFigmaについて理解を深めていきたいと思います！
来週のブログ更新はお休みをいただき、次回は5月10日（水）更新予定です。
