対象プラン：全プラン
カラースタイルとは
カラースタイルは、ブランドカラーなどサイト上で頻繁に使用する色を登録・管理できる機能です。
よく使う色を事前に登録しておくと、要素を追加するたびにカラーコードなどで指定することなく、登録済みのスタイルからすぐに適用できます。また、登録済みの色はラベルを付けたりや階層を分けたりして整理できるため、効率的に管理できます。
この記事では、カラースタイルの登録・管理方法をご紹介します。
カラースタイルで色管理
カラースタイル機能では、色の登録に加えてラベルの設定と階層分けができます。
ラベル設定
カラースタイルで管理する色には、任意のラベル名が設定できます。（例：プライマリーカラー、背景色、など）分かりやすいラベルを付けることで、チームでの共同作業やプロジェクト全体で使用する色の管理がスムーズになります。
登録したラベル名は、後から編集することも可能です。
階層管理
ラベル名を「/（半角スラッシュ）」で区切ると、カラースタイルを階層で整理できます。
階層を使えば、フォルダのように色をグループでまとめられるため、複数の色を追加する場合でも管理がしやすくなります。
例えば、見出しと本文に使用するテキスト用の色をまとめて管理したい場合、見出しに「Text/Heading」、本文に「Text/Body」と登録すると、「Text」という親階層の中に「Heading」「Body」が格納されます。
注意：ラベル名は、全角・半角問わず50文字まで設定可能です。「/（半角スラッシュ）」で階層分ける場合、スラッシュも含めて文字数をカウントします。
ユースケース
この機能を活用することで、以下のようなシーンで制作・運用の効率化を実現できます。
チーム制作時の色の統一管理
あらかじめカラースタイルへ色を登録しておくことで、編集メンバー全員が同じ色を使用できます。異なる色が使われてしまうことを防ぎ、サイト全体の一貫性を維持できます。
効率的な使用色チェック
選択色機能を使うと、カラースタイルで定義されていない色を簡単に見つけられます。意図しない色の使用を公開前に素早く特定し、すぐに修正できます。
サイト全体の色変更を効率化
カラーテーマの変更が決定した場合でも、カラースタイルへ登録していれば一括で変更できます。手作業で1つずつ色を変更する必要がなく、大幅な時間短縮が可能です。
カラースタイルの登録方法
下記の手順でカラースタイルへ色を登録します。
エディタ上でボックスを選択します。
エディタ上部の[色]にカーソルを当てます。
[カスタム]タブを開き、カラーコードなどで色を選びます。
[カラースタイルとして登録 +]をクリックします。
ラベルを編集しチェックボタンをクリック、またはEnterを押します。
ラベルと階層の設定・編集方法
下記の方法で、カラースタイルに登録した色のラベルとフォルダの設定・編集が可能です。
カラースタイル登録時のラベル・階層設定
カラースタイルへ色を新規登録する際に、ラベル名が設定できます。ラベル名を「/（半角スラッシュ）」で区切ると、階層が設定できます。
登録後のラベル・階層編集
カラースタイルへ登録した色のラベル・階層は、スタイルパネルとスタイルバーから編集できます。
スタイルパネル
エディタ左側のスタイルパネル内、[カラー]タブを開きます。
ラベルまたはフォルダを編集したいカラースタイルをクリックします。
ラベル名を編集し、キーボードのEnterを押すと変更が保存されます。
Tips：スタイルパネルでは、同じ階層内の登録スタイルをドラッグ＆ドロップで並べ替えられます。
この順序はスタイルバー上の一覧と連動しているので、よく使うスタイルを上部に配置すると色選択が効率的になります。ただし、スタイルバー上では並べ替えはできません。
スタイルバー
エディタ上でボックスを選択します。
エディタ上部の[色]にカーソルを当てます。
[スタイル]タブを開き、色の右端にある編集アイコンをクリックします。
ラベル名を編集し、キーボードのEnterを押すと変更が保存されます。
注意：
フォルダは、3階層（例：Text/Primary/Hover）まで作成できます。それ以上の階層は作成できないため、別フォルダ作成をご検討ください。
登録済の色をフォルダ外や別のフォルダへ移動するには、ラベルの手動変更が必要です。
カラースタイルの適用方法
カラースタイルへ登録した色は、次の手順でボックスに適用します。
エディタ上でボックスを選択します。
エディタ上部の[色]にカーソルを当てます。
[スタイル]タブを開き、カラースタイルを選択して適用します。
注意：カラースタイルへ登録した色を、CMSカラープロパティとリストのカラープロパティへ適用することはできません。プロパティごとに手動で色を設定してください。
カラースタイルの編集方法
カラースタイルへ登録済みの色は、次の手順で編集できます。編集すると、適用中の全ての箇所で色の変更が反映されます。
エディタ上でボックスを選択します。
エディタ上部の[色]にカーソルを当てます。
[スタイル]タブを開き、色の右端にある編集アイコンをクリックします。
色を選択すれば、変更完了です。
カラースタイルの削除方法
カラースタイルへ登録した色はいつでも削除できます。削除後も適用済の色は維持されます。
エディタ画面左側のスタイルパネル内、[カラー]タブを開きます。
削除したいカラースタイルをクリックします。
詳細画面右上の3点メニューを選択し、[スタイルを削除]をクリックして削除します。
カラースタイル一覧の確認方法
カラースタイルへ登録済みの全ての色は、スタイルパネルとスタイルバーで確認できます。
スタイルパネル
エディタ左側のスタイルパネル内、[カラー]タブで一覧が確認できます。
スタイルバー
スタイルバー内、[色]の[スタイル]タブから一覧が確認できます。
使用ページの確認方法
カラースタイルに登録済みの色が使用されているページは、下記の手順で確認できます。
エディタ画面左側のスタイルパネル内、[カラー]タブを開きます。
使用ページを確認したいカラースタイルをクリックします。
使用ページをクリックしそのページへ移動します。
使用ページにカーソルを乗せると使用箇所がハイライト表示されます。ただし、コンポーネントとリスト内の要素はハイライト表示の対象外です。
よくある質問
Q. カラースタイルを適用したボックスを、他のプロジェクトへコピー&ペースト移動するとどうなりますか？
Q. カラースタイルを適用したボックスを、他のプロジェクトへコピー&ペースト移動するとどうなりますか？
A. 他のプロジェクトへコピー&ペースト移動した場合、下記の条件で移動します。
使用色は維持された状態でペーストされます。
カラースタイルが引き継がれることはありません。移動先のプロジェクトでは通常の色として扱われます。
カラースタイルで管理したい場合は、移動先のプロジェクトで改めてカラースタイルへ登録する必要があります。
Q. バージョン管理機能の対象データに入りますか？
Q. バージョン管理機能の対象データに入りますか？
A. はい。カラースタイルは、変更箇所や変更者などの情報を「バージョン」として保存し、復元できるバージョン管理機能の対象データになります。必要に応じて復元が可能です。