新Dressで簡単!よく使う色を登録する方法

こんにちは!デザイナーのオモトです!

サイトを作る時にコーポレートカラーなど、同じ色を使い回したいなと思う時ってありますよね。
新Dressの「Dressカラー」に1度登録さえしてしまえば、サイト上のさまざまな場所で、設定した色を呼び出すことができます。
今回は、その設定方法についてお教えします!

Dressカラーを設定しておけば、#aaa〇〇〇のようなカラーコードを、いちいち手入力せずに済みますし、微妙に違う色をあちこちに使っているせいで統一感がなくなり、デザインがちぐはぐしてしまう、ということがなくなりますので、ぜひ使ってみてください。

練習用のダウンロードデータを用意しているので、まずは、試しに使ってみて下さいね!

Dressカラーって何個まで登録できる?おすすめの順番は?

Dressカラーのおすすめ配置例

Dressカラーは、メインカラー1つ、サブカラー5つの最大6つの色を登録できます。
私の場合、メインにコーポレートカラー、次によく使う色をサブカラーの1・2・3に設定、
サブカラーの4に背景色用の白や、サブカラーの5に文字色用の黒などを設定
することが多いです。

これだと、カラーとモノクロに別れていて見た目もきれいですし、整理整頓されて管理しやすいパレットにすることができます。

Dressカラーに色を登録する

(1)Dressカラーの設定を開く

Dressカラーの設定方法UI
Dressの基本設定[1]のDressカラー[2]を選択すると、メインカラーとサブカラーの設定画面が表示されます。

(2)メインカラーを設定する

Dressカラーの色を指定する
表示されたカラーパレット[1]をクリック、またはカラーコード[2]を入力することで、メインカラーを設定できます。
これでメインカラーの登録は完了!

(3)サブカラーを設定する

サブカラーは、すでに用意された、カラーパレットから選択することも出来ますが、
使用したい色がある場合、右横の「自由に設定」タブをクリックします。

各サブカラーのボタン[1]を有効化し、カラーパレット[2]をクリック、またはカラーコード[3]を入力することで、サブカラーを5色まで自由に設定できます。

Dressカラーのサブカラーを設定する

これでサブカラーの設定も完了しました。

設定した色の呼び出し方

1.Dressで使う

DressでDressカラーを設定する

文字色をDressカラーに変更する場合を例に解説します。画面左のプレビューから、何もDressが設定されていない場合、ページタイトル[1]すると、画面右側の「基本デザイン」タブに、「ページタイトル」が出てくるので、それをクリック[2]します。

編集からDressカラーを選択
文字色の「編集」をクリック[3]し、Dressカラー[4]を選択します。
これで完了です!「ページタイトル[1]」はすべて、一気に変更することができ便利です。

2.ページデザインで使う

ページデザインでのDressカラーの使い方
サイトエディタのプロパティ設定内のページデザイン[1]より、背景色[2]Dressカラーで指定することが可能です。
Dress内で設定したDressカラー[3]が表示されます。
例えば、ビルボードの背景色をDressカラーに変更したい場合は、[2]のビルボード欄にチェックを入れ、右隣の背景色に色を指定します。

3.文字色やマーカーに使う

文字色にDressカラーを設定する手順
ブロックエディタの編集で、文字を範囲指定[1]して、文字色アイコン[2]から文字色やマーカーの色を指定することが可能です。
Dress内で設定したDressカラー[3]が表示されます。

4.リンクボタンに使う

リンクボタンにDressカラーを設定する手順
リンクパーツ[1]設定のデザイン[2]より、各箇所[3]の色を指定することが可能です。
Dress内で設定したDressカラーが表示されます。

いかがでしたでしょうか?
Dressカラーを設定しておくと、Dress以外でもBiNDの様々な編集画面で同じ色を指定できるようになります。
とっても便利なので、この機会にぜひ使ってみてください!

練習用のサイトデータをダウンロード

Dressカラーを試しに使ってみたいという方のために教材を用意しました。
上記で説明した、「ページタイトルの色を変える」「背景色を変える」「リンクボタンの色を変える」を実際に試してみましょう。
やってみればとても簡単です。

練習用のサイトデータをご用意しましたので、以下よりログインしてダウンロードしてみてください。
※本サイトデータは「BiNDup」でのみ使用できます