元は同じテンプレートでも、写真を入れ替えて、コンバージョンボタンを追加して、などのカスタマイズ作業を経た後では、デザインにまとまりを保てているサイトとそうでないサイトという違いが現れます。
BiNDでのサイト制作において、テンプレートをカスタマイズするほどまとまりのないサイトになってしまったとしたら、色を使いすぎていることが原因かもしれません。
モノトーンの配色や同系色のみのサイトで、バランスが悪い、まとまりがないと思うことはほとんどないでしょう。しかし、そこに原色や色味や明るさの違う色が入ると、配色は一気に難しくなります。そんなときは、同系色の配色を使うとまとまりやすくなります。
そこで今回は、テンプレート「TOMMY Yoga Studio」を使い、幼児教室の楽しさや親しみやすさを表現したサイトを例に同系色が初心者にオススメな理由をWebデザイナーが伝授します。
▼非認知能力を伸ばす幼児教室「ストレリチア」さん。
ストレリチア（極楽鳥花）のカラーを取り入れた、明るい色調の幼児教室です。
テンプレートの配色を活かし親しみやすいサイト作りに成功
メインカラーを大きく使い、色を印象付ける
テンプレート「TOMMY Yoga Studio」の配色とデザインを活かして、幼児教室の楽しさや親しみやすさを上手に表現しています。メインで使いたいカラーがある場合は、同系色の配色を選ぶとページがまとまりやすく、色の印象を強く残すことができます。
サイトを同系色で揃えると写真も目に入りやすい
新・BiNDupのここで設定
コーポレートカラーと同じ色をメインに使ったテンプレートがあれば、こちらのサイトのようにそのまま使うのが正解ですが、メインで使いたいコーポレートカラーがテンプレートにない時や配色を変更したいときは、一度設定すれば色や要素を一気に変えられる新・BiNDupのDressカラーが便利です。メインで使いたい色しか決まっていない時もカラーパレットが配色の候補を出してくれるので、直感的に好みの配色を選択できます。この時、初心者は同系色の配色を選ぶと、メインカラーがどんな色だったとしてもサイトをまとめやすくなります。
配色にはさまざまな法則があり、Webデザイナーは通常、色のトーンや色が持つイメージなどを考慮に入れて、時間をかけて組み合わせを選びます。Dressカラーはそれと同じ作業をカラーパレットの候補から直感的に選ぶだけで完了できます。
既存サイトにDressカラーを設定する手順について詳しくは、以下の記事を参照してください。
Dressカラーを活用して認識しやすくボタンを統一
伝わりやすいルールを使う
サイトが本来の目的を果たしやすくするには、この文字の大きさで伝わりやすいか、わかりにくくないかなど、細部への配慮も大切です。例えば、同じ用途で使われているのに異なる色やデザインのボタンがあると、サイトを見ている人が混乱してしまいます。使い分けに自分なりの理由があったとしても、そのデザインの差に意味があるかをもう一度考え、同じ用途なら同じ色やデザインを使うようにしましょう。
同じ用途で使われるボタンは色を統一して認識しやすく
新・BiNDupのここで設定
ボタンの色をサイト全体で統一する際も、Dressカラーを設定しておけば設定時に出てくるので重宝します。サイトの配色は、使用する色が増えるほどコントロールし辛くなるので、ページやコンテンツを追加した際にもDressカラー以外は使わないなどと決めて運用すると、まとまりのあるサイトにできます。
写真の色も配色のひとつ
背景にイメージとして大きく使う写真の場合、その写真の色も配色のひとつと考えて選びましょう。こちらのサイトは、元のヨガテンプレートの配色を引き継ぎ、壁の色が水色の教室の写真をチョイス。水色と黄色の組み合わせは元テンプレートと同じなので、雰囲気を壊さずに調和しています。
なお、現在ビルボードに全部同じ写真が使われていますが、ページを遷移した時の現在地がわからなくなりがちです。見出しで見分けは付きますが、ページが切り替わった印象が乏しいので、パンくずリストなどを設置するなど工夫するとさらにいいでしょう。
BiNDのパンくずリストの設定方法はこちら
サイトで使う色をコントロールして印象強化
いかがでしょうか？
今回紹介したサイトを参考に、Dressカラーを使ってぜひコーポレートカラーの印象を強める、同系色でのサイト作りを実践してみてください。
POINT
- 同系色の配色は初心者も扱いやすい
- Dressカラーでは、メイン色が決まると配色パターンをいくつか提案してくれるので安心
- ボタンなど導線のデザインは必ず統一するなど、伝わりやすいルールを作る