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

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

Dressカラーとは

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

例えば下記サイトの場合、キーカラーは赤(#c5011a)、サイト全体の文字色は黒(#333333)、背景色は白などの配色ルールに基づいてデザインされています。色を統一することによりまとまりのある印象になっていますね。
サイトにおける配色
こういったデザインの中で共通して使用する色を一元管理するための機能がDressカラーです。
Dressカラーを設定
DressカラーはページデザインのDressで設定します。
メインカラーを1色、サブカラーを5色、計6色を定義できます。メインカラーはブランドカラーにして、サブカラー1はアクセント用、サブカラー4は文字色、サブカラー5は背景色……などのように自分のサイトにあったルールに基づいて設定するとよいでしょう。

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

Dressカラーに対応したテンプレートであれば、テンプレート全体を自社のブランドカラーに合わせた色に調整することも簡単にできます。
※2018年9月以降に搭載されたテンプレート(一部除く)
テンプレートのDressカラーを変更
テンプレートに設定されているDressカラーの赤を緑に変更すると、それだけで連動した箇所がその色に置き換わります

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

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

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

Dressカラーで色指定でできる場所

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

あらかじめDressカラーを設定しておけば、ブロック背景色やリンクボタンなどの色を設定する時にDressカラーを指定できます。
設定ずみのDressカラーを指定
Dressカラーは連動しているので、Dressで設定済みの色を変えるだけでその色を指定している箇所が一括で変更されるようになります。
Dressカラーを変更したページ
後から色だけ微調整したり、配色を完全に変えてしまうことで違った印象のサイトに仕上げることもできます。

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

BiNDupについて詳しくみる