選択色とは

選択色とは、ボックス選択時にその要素内で使用されている色を一括で確認・変更できる機能です。

この機能を使うことで、使用されている色の確認・変更が効率的に行えます。

使用されている色の確認

子ボックスを含むボックスを選択すると、エディタ上部の[選択色]機能から、選択した要素内で使われているすべての色を一覧で確認できます。

カラースタイルなどに登録済の色と未登録の色は、一覧での表示が異なります。

一覧で個別の色にカーソルを乗せると、その色が使用されている箇所がエディタ上でハイライト表示されます。

Tips：ページ全体の使用色を確認するには、レイヤーパネルの最上部レイヤー <Base> を選択します。

注意：

選択色パネル上で色の変更ができます。複数要素に適用されている色を選択色パネル上で別の色に変えると、適用された全ての要素で色が変わります。

なお、選択色を使った色の変更は選択した要素・ページ単位でのみ反映され、プロジェクト全体での一括変更はできません。

Tips：別機能の「カラースタイル」を使うと、プロジェクト全体を通して色の一括変更が可能です。詳細は、カラースタイルの設定方法をご覧ください。

この機能を活用することで、以下のようなシーンで制作・運用の効率化を実現できます。

公開前に色の使用状況をチェック
カラースタイル機能と組み合わせると、ブランドカラー以外の色が使用されている箇所などが一目で確認できます。公開前に意図しない色が使用されていないか確認し、すぐに修正できます。
ページ全体の配色をエディタ上で変更できる
選択色を使えばページ全体の配色を一括で変更できるため、異なる配色のデザインをStudio上で簡単に作成し確認・検討できます。

子ボックスを含むボックスを選択します。
ページ全体を選択する場合は、レイヤーパネルの最上部レイヤー <Base> を選択します。
画面上部のスタイルバーの[ボックス]を開き、[選択色]にカーソルを合わせます。
使用されている色の一覧が表示されます。一覧に表示される個別の色にカーソルを乗せると、使用されている要素がハイライト表示されます。