自分のサイトでDressカラーを設定してデザインアレンジしやすくしよう

皆様こんにちは。
先日、新しいDressが漸くリリースになりました。お待たせしました。
使い勝手がかなり向上してますので是非触ってみて下さい。

新しいDressでは、サイトのカラー定義を設定できるようになりました。これが目玉機能の『Dressカラー』です。カラー定義が決まっていると一気にサイトの配色が変えられるため便利なのですが、残念ながら予めカラー定義されているのは、BiNDupから搭載された最新テンプレートだけになります。

つまり、皆さんが現状運用されているサイトに於いては未設定のため、ご自身で行っていただく必要があります。
とは云え、Dressカラーを用いる事で受けるメリットはとても大きいので、今回は既存サイトにDressカラーを設定する方法を解説したいと思います。

最初は手間が掛かりますが、一度設定してしまえば後の運用が非常に効率的になりますので、是非お試しください。

Dressカラーとは

通常Webサイトのデザインを行う際に、予め使うカラーを定義します。
例えばメインカラーを赤にしようと云っても、使う箇所によってバラバラな赤を使ってしまっては、統率された美しいデザインになりません。
なので、どの赤を使うのかと云う事を厳密に定義します。
Webデザインでは#d21d1fの様にカラーコードで決める事が殆どですね。

Dressカラーは、「赤は#d21d1fを使う」と云う様にWebサイトのデザインで使用するカラーを定義する機能になります。
これまでのDressでは、それぞれ赤を用いる箇所に#d21d1fをそれぞれ設定しておりましたが、Dressカラーに設定する事で「メインカラー」と云う設定値に置きかわります。

「赤のカラーコード何だっけ？」となっていたのをDressカラーから「メインカラー」を選択するだけになりますので、迷いなく同じカラーを設定する事が出来ます。
また、Dressカラーは「メインカラー」の他に「サブカラー」を5種類設定しておく事が出来ます。

「6色しか登録出来ないの？」と思われるかもしれませんが、実際Webサイトをデザインする際にそんなに多色を使う事はありません。
色数が多いほど全体のデザインバランスの調整がシビアになりますので、個人的にはメインカラーとサブカラー、あとは白と黒くらいのシンプルな色数で充分かと思っております。
Webサイトをデザインしていてうまくまとまらないなぁと思われたら使用している色数を減らしてみて下さい。
BiNDのテンプレートも意図してカラフルなデザインでない限り、基本カラーは6色以内に収まっていると思います。

そしてここが重要なのですが、Dressカラーは単に登録して使い回せるだけではありません。
後から色を一括で変更する事が出来るのが大きなポイントです。

例えば「メインカラー」に赤（#d21d1f）を設定していた場合、後から「メインカラー」を緑（#26ccae）に設定変更すると、「メインカラー」を設定していた箇所全てが一括で緑に置き換わります。
デザインを管理し易くかつ変更に強いWebサイト運用が出来る訳ですね。

そんな訳で既存で運用中のサイトでもDressカラーを設定する事でメリットが出てきます。

Dressカラーの設定方法

具体的なDressカラーの設定方法を解説致します。

先に設定の流れを説明すると、
1.Dressカラーを定義する
2.Dressカラーに置き換える（Dress内で設定）
3.Dressカラーに置き換える（Dress外で設定）
と云った感じになります。

それではそれぞれ詳しく見て行きましょう。
ここではサンプルとして、『CHISATO Plant』のDressにDressカラーを設定していく流れで解説します。

1.Dressカラーを定義する

前途の通りDressカラーは、メインカラーと5種類のサブカラーの計6種類を定義する事が出来ます。
例えばですが、
・メインカラー：ブランドカラー
・サブカラー1：アクセントカラー1
・サブカラー2：アクセントカラー2
・サブカラー3：リンクカラー
・サブカラー4：文字色
・サブカラー5：背景
と云った感じでルールを決めてしまいます。
後からカラーを調整変更する事は可能ですので、最初は曖昧なイメージでも構いません。

カラールールを決めたら実際にDressで設定していきます。
サイトエディタ「デザイン編集」＞「基本設定」＞「Dressカラー」を開くとメインカラーの設定フォームがあるので設定します。
サブカラー＞「自由に設定」をクリックするとそれぞれのサブカラーを設定出来ます。

既にDressテンプレートを使っている場合

BiNDupのレスポンシブ対応テンプレートから作成したサイトは既にDressが設定されていますので、そこにDressカラーを設定していきます。

サイトテンプレートの殆どは予めカラールールが定義されてますので、そこを抽出します。
テンプレート選択時のカラーバリエーション名（CHISATO Plant / Navy）をメインカラーとして捉えて頂ければほぼ問題ありません。
『CHISATO Plant』であればNavyなのでネイビーカラーをメインカラーとして設定します。

Dressテンプレート使用時のサブカラー抽出に関しては後述します。
この時点ではメインカラーが定まっていれば問題ありません。

2.Dressカラーに置き換える（Dress内で設定）

Dressカラーの定義が出来たら次は実際に各パーツに設定して行きます。
Dressカラーを使用する場合は、カラーコード（#1D2F5Fなどの数値）を指定せずにカラーパレット下にあるDressカラーの一覧から指定して行きます。

これまではそれぞれのスタイルにカラーコードが表示されていましたが、「メインカラー」や「サブカラー1」などのテキストに置き換わります。
この設定をカラー指定してあるパーツ全てに行います。

既にDressテンプレートを使っている場合

Dressテンプレートは基本的に全てのスタイルに対して設定が施してあるので修正箇所が膨大です。
大変かと思いますがひとつひとつ置き換えていく必要があります。

少しでも早く置き換えられる様パーツの抽出方法を解説します。

Dressに於いて色を設定する要素は、「文字色」、「背景色」、「枠線」、「テキストシャドウ」、「ボックスシャドウ」の5種類です。
「詳細設定」を開くと絞り込みフォームの下に設定項目で絞り込めるボタンがあります。この中に「文字色」と「背景色」と「枠線」を絞り込む事が出来ます。
この要素で絞り込まれた要素を置き換えます。

Dressテンプレート使用時のサブカラー抽出方法ですが、上記絞り込みで出てきたカラーをそれぞれサブカラーに割り当ててからDressカラーに置き換えます。
最初の時点では何のカラーが使われているか全て把握する事は難しいので、実際の設定値から抽出するのが早いと思います。

3.Dressカラーに置き換える（Dress外で設定）

続いてDress外で設定されている要素をDressカラーに置き換えます。
Dress外でDressカラーを設定出来る要素は、
・ページデザイン
・背景色
・ブロックエディタ
・背景色
・文字色
・マーカー
・リンクボタン
・背景色
・文字色
・ボーダー
です。
これらもそれぞれDressカラーに置き換えてください。

これでDressカラーへの置き換えは完了です。

Dressカラーを変更してみる

Dressカラーへの置き換えが完了したら試しにメインカラーのカラーコードを変更してみましょう。
適切に設定されていればネイビーの色が全て変更したカラーに変わると思います。
※Dress上のプレビュー画面ではDress外で設定した項目のプレビューが出来ませんが、適用後に反映されるのでご心配なさらず

今までは各設定値を変更しないと色の変更が出来ませんでしたが、Dressカラーのカラーコードを変えるだけで即時にカラーバリエーションが作れます。
これは非常に嬉しいですね。

まとめ

如何でしたか。
置き換え作業は手間が掛かるのですが（私の作業感覚では1時間半〜2時間くらい）、一度設定さえしてしまえばDressカラーパレットから色を選ぶだけなので毎回カラーコードを思い出す必要もありません。
新しくページを追加したり更新したりする際にもカラールールに従うのでデザインのクオリティを維持する事が出来ます。
最初にDressカラーを設定だけしておいて、後からカラーを定義するなんてやり方もありそうですね。
是非お試し下さい。

今回記事の中で、Dressカラーを設定したテンプレート『CHISATO Plant』をサイトデータでプレゼントします。
ヘッダーのロゴ部分も特別カスタマイズしてDressカラーが適用される様にしました。
以下よりダウンロードして、設定の方法など参考にしてみて下さい。