【Webデザイン】コンバージョン率を無視した「やってしまいがち」配色あるあるについて話します。

Webサイトの「テーマカラー」に潜む落とし穴

Webサイトを制作するとき、多くの人がまず「テーマカラー」を決めますよね。例えば、青色をベースにして信頼性をアップさせるようなイメージにしようとか、赤色を使って情熱的な雰囲気を出そうとか、あるいは真っ黒なモノトーンで少しお洒落な感じを演出したりとか。様々なWebサイトで、こうしたテーマカラーが効果的に使われているのを目にすると思います。

しかし、このテーマカラーの決め方には、実は少し注意したい点があります。これは、Web制作に携わる私たち自身も、常に気をつけなければいけないなと感じていることですので、今回はその情報を共有していきたいと思います。

特に注意すべきウェブサイトとは？

では、具体的にどのような時に気をつけなければいけないのでしょうか。
おそらく、ビジネス系のWebサイトで一番多く使われている色は「青色」ではないでしょうか。特にBtoB（企業間取引）のサイトでは、最も多い色だと思います。

ここで、一般的なホームページの構成を思い浮かべてみてください。画面の左上に会社のロゴがあって、その隣にメニューがいくつか並んでいる。そして中央には、サイトの顔となるメインビジュアルが大きく配置されていて、その下には会社紹介のテキストが続く…といったレイアウトです。

このようなサイトで青をテーマカラーに設定した場合、多くはロゴを青色にしたり、メインビジュアルに青っぽい画像加工を施したりと、サイト全体を青で統一していくデザインを進めることになるかと思います。

最も重要な「あのボタン」まで同じ色にしていませんか？

全体のデザインをテーマカラーで統一していく。ここまでは全く問題ありません。しかし、今回の本題はここからです。サイトを読み進めていくと、ページの途中やフッターあたりに「お問い合わせはこちら」といったボタンやリンクが設置されていますよね。

問題は、ここまでテーマカラーである青色にしてしまうのは、まずくないですか？ というお話なんです。

Webサイトには、お客様に具体的なアクション（例えば、問い合わせ、資料請求、購入など）を起こしてもらうためのボタンやリンクがあります。これを専門用語で「CTA（コールトゥアクション）」と呼びます。

Webサイト全体のカラーが青色だからといって、この非常に重要なCTAまで青色のボタンで作ってしまうと、どうなるでしょうか。お客様の視点からすると、背景や他のデザイン要素にボタンが溶け込んでしまい、見逃してしまったり、そもそもそれがボタンであることに気づかなかったりすることにつながってしまうのです。

ホームページが意味をなさなくなる瞬間

考えてみてください。皆さんのWebサイトの最終的なゴールは何でしょうか。お問い合わせボタンを押してもらい、見込み客（リード）が生まれる。そして、そこから商談が成立すれば、会社の利益につながっていく。多くの場合、このような流れを期待しているはずです。

その最初のきっかけが生まれて初めて、このホームページを運営している意味が出てくると言っても過言ではありません。それなのに、その肝心な部分であるCTAが見逃されてしまっては、せっかく作ったホームページが機能していないのと同じことになってしまいますよね。

CTAは「あえて」目立たせる

もう一度、青色で統一されたサイトを想像してみてください。そこに同じ青色の「お問い合わせ」ボタンがあっても、正直あまり目立っていないと思いませんか。

では、このボタンを例えば「赤色」に変えてみましょう。
どうでしょうか。今この文章を読んでいる範囲に赤色のボタンがポンと置かれているだけでも、かなり目立っていると感じるはずです。「お問い合わせはこちら」といった誘導ゾーンも、はっきりとその存在を認識できるじゃないですか。

ですから、CTAのような重要な要素は、テーマカラーから大きく外れる色を使い、せめて目に留まるようなデザインにしておく必要があります。「あえて目立たせろ」とまでは言いませんが、ユーザーが探さなくても自然と認識できる状態が理想です。

デザインとマーケティングの視点

もちろん、デザイナーさんの中には、美しいデザインを作ることは得意でも、マーケティングの視点まで持つのは得意ではない、という方もいらっしゃいます。これは当然のことです。
だからこそ、サイト制作を依頼する側が「デザインはお洒落にしてほしいけど、CTAボタンだけはしっかり目立たせてほしい」といった知識を持っておくことが大切になります。

今回は青と赤という極端な配色で説明しましたが、何かを目立たせる方法は色だけではありません。ボタンの周りに余白（スペース）を大きく取ったり、文字の大きさを変えたりと、様々な方法が考えられます。大切なのは、サイトのゴールであるCTAがちゃんと目立っているかを常に確認することです。

ユーザーは正直に「迷って」いる

私たちが「Microsoft Clarity」のようなツールを使って、お客様がサイト内でどんな操作をしているかの録画データを見ていると、驚くような事実がわかります。やはり、テーマカラーとCTAが同じ色だとボタンが目立っていないせいか、ボタンではない領域を「ここがリンクかな？」と思ってクリックしてしまっているのです。

これはユーザーにとって非常に大きなストレスになります。リンクだと期待してクリックしたのに何も起こらない、という経験が続けば、サイトから離脱してしまうでしょう。リンクを分かりやすく示してあげるという意味でも、CTAを他の要素とは別のカラーにしてあげるのが非常に重要だと言えます。

テーマカラーを否定するわけではない

ここまで聞くと、「じゃあテーマカラーなんてやめてしまえ」と思う方もいるかもしれませんが、そういう話ではありません。

例えば、ショッピングサイトなどで、様々な色のバナーやボタンが雑多に並んでいる、いわゆる「ガチャガチャした」デザインを見かけることがありますよね。ああいった配色がゴチャついている状態も、逆に本当に目立たせたいものがその他大勢に埋もれてしまい、目立たせづらくなってしまうのです。

テーマカラーをしっかり設定することには、「目立たせたいものを、それ以外の要素から際立たせることができる」という大きなメリットがあります。だからこそ、テーマカラー自体がダメというわけでは全くありませんので、そこは注意していただければと思います。

今回は、Webサイトの配色を決める際に、サイトのゴールであるCTAやリンクの色が、お客様に不便をさせないような設定になっているか、改めて考えていただくきっかけになればと思い、このお話をさせていただきました。