色を味方につけるビジネスカラーコラム

Webサイトの第一印象は5秒で決まる
色彩戦略と信頼性の関係とは?

「デザインにこだわっているのに、お問い合わせが少ない…」
「信頼感が足りないって言われるけど、何が原因かわからない…」そんな声を多く聞きます。
実はそれ、“見た目”の第一印象で損をしているのかもしれません。
人はWebサイトを訪れたとき、たったの50ミリ秒(0.05秒)でそのサイトの印象を決めてしまうという研究があります。(※1)
ブランド認知や印象は、色彩が効果的な手段になります。第一印象を整えるヒントをいくつかご紹介します。

試してみよう「5秒テスト」

5秒だけそのサイトを初見の参加者に見せ、記憶に残ったことや、直感的な印象をインタビューする。この「5秒テスト」は多くのWebサイト評価手法の中でも、特に重要な改善ヒントが得られると言われています。
そのサイトが「何の会社・サービスなのか」「結果として何が得られるのか」を5秒間の間に効率よく伝えられていれば、コンバージョンとROIを向上させることに貢献できるでしょう。(※2)

「色彩戦略」と「視認性」は、売上と信頼を左右するビジネス要素

Webサイトを作る際、「コーポレートカラーだから」「なんとなくキレイだから」といった感覚で色を決めてしまっていませんか?
実は、その“なんとなく”が離脱や信頼低下の原因になっているかもしれません。
「読めない」「見えない」はストレスになりえます。
訪問者は、初めて見るWebサイトの色や視認性の悪さに無意識のストレスを感じます。
特に以下のような状況はよくある課題です:

  • 文字と背景のコントラストが低くて読みにくい
  • 重要なボタンが背景と同化して目立たない
  • 高齢者や色覚多様性を持つユーザーへの配慮がない
これではどれだけ良いコンテンツでも、そもそも「読まれる前に離脱」されてしまいます。
キーワードは「色彩戦略」と「視認性」です。

縁取りやシャドウで工夫する
視認性(可読性)をあげる例

色彩戦略とは「伝えたい印象」と「視認性」の両立

DICカラーガイド

色にはそれぞれ固有のイメージがあります。捉え方は個人によって変わりますが、大別すると暖色系、寒色系、彩度、明度でも色のイメージは大きく変わります(本サイトコラム:「カラーイメージを味方につける」をご参照ください)。例えば、活動的なイメージを醸成したい場合は「赤」が多く使われます。
ただ同じ赤の中でも、黄み寄りの赤、紫寄りの赤などの違いがあり、それぞれ印象が変わってきます。
色は言葉ではなかなか伝わりにくいので、色見本帳などで現物の色を見ながらイメージすることが大切です。
DICグループでは「DICカラーガイド」シリーズという色見本帳を発行しており、企業のコーポレートカラーの色指定などにご活用いただいています。

一方で、視認性の確保は配色において重要です。
例えば、色覚特性の違いに配慮されているか、アクセシビリティやユーザビリティが確保されているか、は重要な指標とされています。

今すぐ見直せる!チェックポイント

コントラスト比の確認無料ツール「WebAIM Contrast Checker」や
Adobeのアクセシビリティツール「コントラストチェッカー」などで確認
(詳細はコラム「カラーパレットジェネレーター「Adobe Color」をつかいこなす【後編】」を参照ください)
ボタンの目立たせ方メインカラーの背景に対してボタンなどは補色で視線を誘導など
カラーユニバーサルデザインの採用色覚多様性を考慮した配色設計参照:カラーユニバーサルデザインウェブアクセシビリティ導入ガイドブック
色相やトーンの統一ターゲットユーザーに向けた色彩戦略

視認性は“誰もが快適に使える”ことへの第一歩

視認性=文字や要素が読みやすく認識しやすいことを指します。これは、視覚に課題のある方だけでなく、すべてのユーザーにとって重要です。

具体的な対策としてはこちらのポイントが挙げられます:

  • フォントサイズを必要以上に小さくせず(例:16px以上)、行間を確保
  • 背景と文字のコントラスト比を充分に確保(例:WCAGによると 少なくとも 4.5:1 のコントラスト比)
  • スマホ閲覧時でも、拡大せず読める
  • マウスホバーやフォーカス時の変化が明確(例:色変化、アンダーライン)

ユニバーサルデザイン視点での色設計

Webにおけるユニバーサルデザインとは、「すべてのユーザーが使いやすい配色・情報設計」を目指す考え方です。
たとえば、色に頼らず形状やアイコン、パターンでも区別できるようにするなどの対応をするだけで様々な方への情報伝達が可能になります。

色だけでなく形やパターンで区別できる例、罫線などを用いてグラフを作成参照:カラーユニバーサルデザイン推奨配色セット

色相やトーンが与える“無意識の信頼”

「ちゃんとしてるな」「ここに問い合わせしても大丈夫そう」ユーザーにその信頼感を持たせる。
そのために色彩戦略では、

  • どのようなターゲットユーザーか
  • 使う色数
  • トーンの統一

などを念頭に、目的を持って色を活用することが大切です。
色に対する嗜好は年齢や性別にも違いが表れ、個人差が出やすくなるといわれています。
若年層向けのサイトであれば、カラフルになるように有彩色を多く使う傾向があり、ビジネス向けのサイトであれば無彩色の色を基本に色数は抑えて使われる傾向があります。
色相の違う色を多く使うほど、賑やかで派手な印象になり、色数が抑えられるほど、安定や秩序のあるサイトになります。
ただし、色数を多く使うにしても、そうでない場合もトーンを意識すると良いでしょう。上の図で言えば横の列の色を揃えることでトーンが統一された印象を持たせることが可能になります。
ただカラーイメージは一律ではありません。国籍、居住地、性別、年代など、多様な要因でカラーイメージの抱かれ方は変わります。そのため、ユーザーインタビューも時には重要になってくるでしょう。
グローバル化が進み、海外市場向けのビジネスも広がっている時代において、色によるイメージコミュニケーションはますます重要性を増しています。
Webサイトの色彩を見直すことで“なんとなく”のデザインから戦略的な設計をしてみてはいかがでしょうか。

DICカラーデザインでは、デザイナーをサポートする客観的なデータの提供をはじめ、企業の商品やサービスを展開する国や地域、ターゲット層への訴求力を向上する色提案など、ご要望に基づき豊富な色の知識を活かしたオーダーメイドなご提案をいたします。 詳細はこちらからお問い合わせください。