強い色を多用してもダサくならない、サイト作りの秘訣

ロゴに使われているコーポレートカラーの彩度が強くてビビットな色ばかりのときは、きちんとルールを定めて色を使わないと色同士が喧嘩してしまい、派手なだけで内容が伝わらないサイトになってしまいがちです。
特にビジネスサイトで軽薄な印象を与えてしまっては本末転倒です。ルールを作って色を使い分け、コンテンツ量や写真のクオリティーに気を配れば、彩度が強くても信頼感を感じさせるサイト作りは可能です。

そこで今回は、会社のロゴカラーを上手に活用している実在のサイトを例に、彩度の強い色をサイトデザインに使う際のポイントをWebデザイナーが解説します。

BiNDで作成したサイトを紹介しているナイスサイトより、まずはサイトをご覧ください。

▼山梨県の建設会社のリフォーム部門「芙蓉建設 リフォーム事業部」さん。
強い色を多用してもダサくならない、サイト作りの秘訣
山梨県の大手建設会社のリフォーム事業部のサイトです。新作テンプレートの「office MIYAZAKI」をベースにロゴカラーを活かしたオリジナリティーあるデザインに仕上がっています。

こちらのサイトはさすがプロのWebデザイナーの仕事、というポイントが抑えられています。
具体的には以下の項目です。

プロのデザインはここが違う

  • 多色の場合は色の役割を使い分けている
  • 原色はポイントで使っている
  • 配色のバランスに気を配っている
  • コンテンツの量が適量
  • 写真のクオリティーに手を抜かない
  • 無彩色を上手に使っている
  • コンバージョンが意識されている など

次で詳しく紹介していきましょう。

強い色を多用するときのバランスの取り方

3色のカラーの使い分けが明確

コンテンツの分量やレイアウトのバランスが取れていてとても見やすいサイトです。3色のカラーの使い分けと無彩色の取り入れ方がいいですね。インフォグラフィック(アイコン)も効果的に使われています。

強い色を多用してもダサくならない、サイト作りの秘訣
それぞれの色の役割を明確にすれば色同士が喧嘩しません。

新・BiNDupのここで設定!Dressカラーを活用しよう

強い色を多用してもダサくならない、サイト作りの秘訣
彩度の高い強めの色をサイトで多用するときは、ルールを決めて運用するのがセオリー
こちらのサイトも、ボタンはグリーン、タイトルの下線がマゼンタ、大見出しやベタ塗りに用いるのはパープルなど、3色の役割を決めて運用しています。それらのバランスを取るための無彩色(ブラック、グレー、ホワイト)の使い方も良いですね。
Dressカラーなら、色の割り当てや管理が簡単です。

  • マゼンタ:タイトル下線
  • パープル:大見出し・アクセントカラー
  • グリーン:ボタン
  • ブラック:文字色
  • グレー:装飾
  • ホワイト:文字色・背景

PCとスマホそれぞれでコンバージョンを意識

ウィジェットや固定メニューの導線を用意

ウィジェットで設定されたお問合せボタンや、スマホでの電話とお問合わせへの固定表示など、コンバージョンが明確できちんと動線が考えられています。
強い色を多用してもダサくならない、サイト作りの秘訣
ウィジェットで常に見える位置にお問合せボタンを表示

強い色を多用してもダサくならない、サイト作りの秘訣
スマホでは、電話とお問い合わせをウィンドウの下に固定

新・BiNDupのここで設定!ウィジェットを活用しよう

強い色を多用してもダサくならない、サイト作りの秘訣
BiNDupの新機能ウィジェットは、注目させたい要素をページの上にポップアップ表示する機能です。PCではお問合わせへのリンクとTOPへのボタン。スマホでは電話とお問合せへの誘導と、PCとスマホの出し分けもできるので、サイトの目的に合った動線作りが可能です。

ボタンの色分けでさらにコンバージョンを強化

あえて同じにしているのかもしれませんが、さらにコンバージョンボタンを主張したい場合は、別ページへの通常のリンクボタンとお問い合わせへのコンバージョンボタンの色を分けてもいいかもしれません。
強い色を多用してもダサくならない、サイト作りの秘訣
ボタンの色は目的によって変えてみても

自社サイトの魅力を伝える配色を実践

いかがでしょうか?
Dressカラーを使えば、既存のテンプレートの配色を使いたい色に置き換えるだけで基本的にはOK。
細かい部分を変更していけば今回のサイトのように、ビジネスの信頼度もアップするロゴカラーを活かしたオリジナルデザインのサイトが作成可能です。
こちらのサイトを参考に、ぜひ自社のコーポレートカラーにあったサイト作りを実践してみてくださいね。

BiNDupのDressを使ってみよう