Dressカラーを使ってサイトの色を管理する

現在開発中の新しいDress（デザイン管理機能）にはサイトデザインの配色を管理しやすくするための新機能「Dressカラー」が加わります。

Dressカラーとは

サイトをデザインする際、配色は重要なポイントになります。ブランドカラーをメインに使用して印象づけたり、季節感やターゲット層など目的に合わせた色を使用したり、デザインルールに基づいた色を使用することが大切です。

例えば下記サイトの場合、キーカラーは赤（#c5011a）、サイト全体の文字色は黒（#333333）、背景色は白などの配色ルールに基づいてデザインされています。色を統一することによりまとまりのある印象になっていますね。

こういったデザインの中で共通して使用する色を一元管理するための機能がDressカラーです。

DressカラーはページデザインのDressで設定します。
メインカラーを1色、サブカラーを5色、計6色を定義できます。メインカラーはブランドカラーにして、サブカラー1はアクセント用、サブカラー4は文字色、サブカラー5は背景色……などのように自分のサイトにあったルールに基づいて設定するとよいでしょう。

Dressカラーでテンプレートの色を変える

Dressカラーに対応したテンプレート^※であれば、テンプレート全体を自社のブランドカラーに合わせた色に調整することも簡単にできます。
※2018年9月以降に搭載されたテンプレート（一部除く）

テンプレートに設定されているDressカラーの赤を緑に変更すると、それだけで連動した箇所がその色に置き換わります。

Dressカラーを使ってサイトをデザイン

自分でデザインしたい時もDressカラーを使うことで、配色が統一されたサイトを作りやすくなります。

DressカラーはDressの中だけではなく、ブロック編集時にも利用することができます。

Dressカラーを指定できる主な場所

あらかじめDressカラーを設定しておけば、ブロック背景色やリンクボタンなどの色を設定する時にDressカラーを指定できます。

Dressカラーは連動しているので、Dressで設定済みの色を変えるだけでその色を指定している箇所が一括で変更されるようになります。

後から色だけ微調整したり、配色を完全に変えてしまうことで違った印象のサイトに仕上げることもできます。

上記で紹介しているDressの機能は、BiNDupに今冬搭載予定の新機能です。Dressカラーのほかにも、設定箇所が探しやすくなるなど、大幅に進化する新Dressにご期待ください。

BiNDupについて詳しくみる