ブランドアットは、ブランドアセット内のカラーが適用されるエレメントやページ背景に使用されている色を一覧で確認し、一括で設定することができます。

brandaseet.mp4

左側パネルの〔キャンバスアイコン〕のカラーセクションで、ブランドの色(プライマリカラー、セカンダリカラー、テキストの色、ページ背景色(現在調整中))を設定できます。 (もちろん、エレメントの色を好きな色に変更することもできます)。

ブランドタブで色を変更すると、そのブランド色を使用しているすべてのエレメントが一度に自動的に更新されます。

※ブランドアセットは新規に追加したエレメントのみに適用されるため、既存のエレメント(ブランドアセットリリース前)に関しては手動で設定を行ってください。

▼目次

設定方法

カラーの各項目にカーソルを合わせるとペンシルアイコンが表示されます。ペンシルアイコンをクリックし、お好みのカラーに設定してください。

image.png

各エレメントの右側パネル スタイルタブのカラーピッカーのカラーパレットに自動的に追加されます。

image.png

デフォルトの色番号・できること

名称 プライマリーカラー セカンダリーカラー テキストカラー
カラーコード(デフォルト) #0175FF #F9FBFC #1A2737
設定されている個所に一括変更ができる
変数 @primaryColor @secondaryColor @textColor

セカンダリーカラーは一括でエレメントの色を変更できませんが、各エレメント内のカラー設定から個別に変更できます。 各エレメントのカラー設定は、右側パネルの各エレメントスタイルの〔塗りつぶし〕から設定できます。プライマリーカラーやテキストカラーが適用されるエレメント(一覧は下記参照)の初期値には、上記に記載の変数が設定されています。

プライマリーカラー・テキストカラーを使用しない方法

各エレメントの右側パネルの〔スタイル〕タブから、エレメントごとに色コードを直接設定できます。

image.png