デザインファイルのカラープロファイルの管理 – Figma Learn - ヘルプセンター

はじめに

この機能を使用できるユーザー

すべてのプランで利用可能

ブラウザおよびデスクトップアプリのFigmaデザインで利用可能

ファイルの編集可権限が必要

ディスプレイが異なれば、色を表示するテクノロジーも異なり、その結果、異なるデバイス、モニター、ブラウザアプリケーションの間で見た目の不整合が生じることになります。チームが大きくなるに従い、不整合も大きくなりがちです。

Figmaの色管理で、以下のことができます。

チームメイトが異なるディスプレイを持っている場合でも、色の一貫性を維持する
優先カラープロファイルを選んで、新規作成するすべてのデザインファイルに適用する
ファイルの色を、あるカラープロファイルから別のカラープロファイルに変更する
アセットを特定のカラープロファイルにエクスポートする

サポート対象カラープロファイル

Figmaデザインでは、sRGBおよびDisplay P3の2つのカラープロファイルから選ぶことができます。

sRGBは最も広く使われているカラープロファイルです。Webでは長い間標準になっており、ほとんどすべてのWebブラウザとディスプレイでサポートされています。

Display P3は、P3とも呼ばれており、sRGBよりも色が鮮やかで、また視覚的に区別可能な色数が49％多くなります。まだwebまたはディスプレイの標準とはなっていませんが、人気は高まっています。iOSのデバイスまたはRetinaディスプレイ用に作成している場合には、これらのエクスペリエンスにDisplay P3が最適です。

a graph showing the color gamuts of sRGB and Display P3, inner circle labelled sRGB, outer circle labeled Display P3

注: 上の画像はsRGBおよびDisplay P3の色範囲を色相、彩度、輝度(HSB)空間で表しています。カラーモデルの詳細 →

彩度は半径で表され、中心に向かうにつれ低くなり、周辺に向かうにつれて高くなります。sRGBの円の外側のエリアは、P3がsRGBさらに高い彩度を表示できることを示しています。

輝度は100％でのみ表示されますが、どちらのカラープロファイルも完全な輝度範囲を有しています。

最良の結果を得るためには、選択したカラープロファイルをディスプレイがサポートしており、そのプロファイル向けに設定されていることを確認してください。たとえば、Display P3の色は、このプロファイルをサポートしていないモニターでは正しく表示されません。

FigJamボードはsRGBで描画されます。

優先カラープロファイルの選択

新規のデザインファイルはデフォルトでsRGBに設定されます。作成するデザインファイルに異なるカラープロファイルを選択するには、次の手順に従います。

アクセス権のあるファイルを開きます。
Figmaメニューを開きます。
[基本設定] > [カラープロファイル]に進みます。
[カラープロファイル設定]モーダルで、[sRGB]または [Display P3]を選択します。
をクリックしてモーダルを閉じ、設定を保存します。

figma menu open to preferences, cursor hovering over color profile option from menu

ファイルのカラープロファイルの変更

カラープロファイルはファイルレベルで変更することができます。ファイルのカラープロファイルを変更する場合には、選択肢が2つあります。

カラー値を保持(割り当て)して、色の外観を変更しますが、その値は変更しません
外観を保持(変換)して、色の値は変更しますが、その外観は変更しません

注: 分岐とマージによってカラープロファイルを変更することはできません。たとえば、ファイルをDisplay P3からsRGBに変換する場合、ブランチから変更をマージするとカラー値は変更されますが、カラープロファイルは変更されません。

カラー値の保持(割り当て)

ファイルにカラープロファイルを割り当てる場合、色の見え方は変わりますが、その基礎となる16進コードやHSB値などのデータは変更されません。

ブランドカラーなどの特定の色で作業しているときには、カラー値を保持することを選択することができます。この場合、色の見え方がわずかに異なるとしても、デバイスおよびファイルの間でブランドの16進コードが一貫していることがより重要です。

On the left is a title that says Keep color values (Assign). On the right are two circles with slightly different green colors, one labelled Display P3, one labelled sRGB. Both circles labelled with the same hex code #00A010

ファイルにカラープロファイルを割り当てるには、次の手順に従います。

ファイルを開いたまま、ファイル名の横にあるをクリックします。
[ファイルのカラープロファイル] > [Display P3に変更]または[sRGBに変更]に進みます。
モーダルで、[カラー値を保持(割り当て)]を選択します。
変更を保存するには、[Display P3を割り当てる]または[sRGBを割り当てる]をクリックします。

外観の保持(変換)

ファイルを異なるカラープロファイルに変換する場合には、その色の基礎となるデータが変更されますが、同じか可能な限り類似の色が表示されます。

ブレインストーミング、ワイヤーフレームの作成、異なるデバイスで色がどのように見えるかのテストが目的の場合は、色の外観の保持を選択できます。この場合は、システムを維持することより外観の一貫性がより重要になります。 On the left is a title that says Keep appearance (Convert). On the right are two pink circles with the same color, one labelled Display P3 with hex code #FF0B71, one labelled sRGB with hex code #FF0070.

変換する前に、次のことにご注意ください。

ファイルを前に使用したカラープロファイルに変換しても、以前のオリジナルの値に戻すことができない場合があります。
sRGBの色範囲の方が狭いので、ファイルをDisplay P3からsRGBに変換すると近似色が使用されることになり、一部の色は「切り取られる」ことになります。

ファイルを異なるカラープロファイルに変換するには、次の手順に従います。

ファイルを開いたまま、ファイル名の横にあるをクリックします。
[ファイルのカラープロファイル] > [Display P3に変更]または[sRGBに変更]に進みます。
モーダルで、[外観を保持(変換)]を選択します。
変更を保存するには、[Display P3に変換]または[sRGBに変換]をクリックします

色スタイルおよび色バリアブルは変換によって影響を受けないため、それらのカラー値は変更されません。

カラープロファイルの変更の取り消し

ファイルへのカラープロファイルの変更を元に戻すには、次のいずれかを選択します。

キーボードショートカット⌘ Command / Control Zを使用します
バージョン履歴にある古いバージョンを選択します

注: バージョン履歴には、カラープロファイル変更のアクティビティーと変更後のプロファイルがログに記録されますが、割り当てられたか変換されたかは記録されません。この情報を追加するようにバージョン情報を編集することができます。

レガシーファイルへのカラープロファイルの割り当て

[非管理]設定は2023年8月以降利用できなくなりました。非管理に設定された以前のデザインファイルには特定のカラープロファイルがなく、優先プロファイルと同じ(優先カラープロファイル) に設定されます。優先カラープロファイルセットがない場合は、このレガシーファイルはsRGBで描画されます

レガシーファイルにカラープロファイルを割り当てるには、次の手順に従います。

ファイルを開いたまま、ファイル名の横にあるをクリックします。
[ファイルのカラープロファイル] > [Display P3に割り当て]または[sRGBに割り当て]に進みます。

カラープロファイルを割り当てると、そのファイルを異なるカラープロファイルに変換できるようになりますが、優先プロファイルと同じ設定には戻せなくなります。

アセットのエクスポート

デフォルトでは、ファイルのカラープロファイルを使用してアセットをエクスポートしますが、エクスポートの際に別のプロファイルを選ぶことができます。カラープロファイルを使用してアセットをエクスポートする方法→

···