ロゴに使われているコーポレートカラーの彩度が強くてビビットな色ばかりのときは、きちんとルールを定めて色を使わないと色同士が喧嘩してしまい、派手なだけで内容が伝わらないサイトになってしまいがちです。
特にビジネスサイトで軽薄な印象を与えてしまっては本末転倒です。ルールを作って色を使い分け、コンテンツ量や写真のクオリティーに気を配れば、彩度が強くても信頼感を感じさせるサイト作りは可能です。
そこで今回は、会社のロゴカラーを上手に活用している実在のサイトを例に、彩度の強い色をサイトデザインに使う際のポイントをWebデザイナーが解説します。
BiNDで作成したサイトを紹介しているナイスサイトより、まずはサイトをご覧ください。
▼山梨県の建設会社のリフォーム部門「芙蓉建設 リフォーム事業部」さん。
山梨県の大手建設会社のリフォーム事業部のサイトです。新作テンプレートの「office MIYAZAKI」をベースにロゴカラーを活かしたオリジナリティーあるデザインに仕上がっています。
こちらのサイトはさすがプロのWebデザイナーの仕事、というポイントが抑えられています。
具体的には以下の項目です。
プロのデザインはここが違う
- 多色の場合は色の役割を使い分けている
- 原色はポイントで使っている
- 配色のバランスに気を配っている
- コンテンツの量が適量
- 写真のクオリティーに手を抜かない
- 無彩色を上手に使っている
- コンバージョンが意識されている など
次で詳しく紹介していきましょう。
強い色を多用するときのバランスの取り方
3色のカラーの使い分けが明確
コンテンツの分量やレイアウトのバランスが取れていてとても見やすいサイトです。3色のカラーの使い分けと無彩色の取り入れ方がいいですね。インフォグラフィック（アイコン）も効果的に使われています。
それぞれの色の役割を明確にすれば色同士が喧嘩しません。
新・BiNDupのここで設定！Dressカラーを活用しよう
彩度の高い強めの色をサイトで多用するときは、ルールを決めて運用するのがセオリー。
こちらのサイトも、ボタンはグリーン、タイトルの下線がマゼンタ、大見出しやベタ塗りに用いるのはパープルなど、3色の役割を決めて運用しています。それらのバランスを取るための無彩色（ブラック、グレー、ホワイト）の使い方も良いですね。
Dressカラーなら、色の割り当てや管理が簡単です。
- マゼンタ：タイトル下線
- パープル：大見出し・アクセントカラー
- グリーン：ボタン
- ブラック：文字色
- グレー：装飾
- ホワイト：文字色・背景
PCとスマホそれぞれでコンバージョンを意識
ウィジェットや固定メニューの導線を用意
ウィジェットで設定されたお問合せボタンや、スマホでの電話とお問合わせへの固定表示など、コンバージョンが明確できちんと動線が考えられています。
ウィジェットで常に見える位置にお問合せボタンを表示
スマホでは、電話とお問い合わせをウィンドウの下に固定
新・BiNDupのここで設定！ウィジェットを活用しよう
BiNDupの新機能ウィジェットは、注目させたい要素をページの上にポップアップ表示する機能です。PCではお問合わせへのリンクとTOPへのボタン。スマホでは電話とお問合せへの誘導と、PCとスマホの出し分けもできるので、サイトの目的に合った動線作りが可能です。
ボタンの色分けでさらにコンバージョンを強化
あえて同じにしているのかもしれませんが、さらにコンバージョンボタンを主張したい場合は、別ページへの通常のリンクボタンとお問い合わせへのコンバージョンボタンの色を分けてもいいかもしれません。
ボタンの色は目的によって変えてみても
自社サイトの魅力を伝える配色を実践
いかがでしょうか？
Dressカラーを使えば、既存のテンプレートの配色を使いたい色に置き換えるだけで基本的にはOK。
細かい部分を変更していけば今回のサイトのように、ビジネスの信頼度もアップするロゴカラーを活かしたオリジナルデザインのサイトが作成可能です。
こちらのサイトを参考に、ぜひ自社のコーポレートカラーにあったサイト作りを実践してみてくださいね。
POINT
- 彩度の高い強い色はポイントで使う
- 多色使いをするときは、色の役割を決める
- PCスマホそれぞれのコンバージョンを用意する