「売れる」Webサイトの色彩設計

見やすいWebサイト、居心地の良いWebサイト、使い勝手の良いWebサイト……Webサイトの印象を決める要素は、掲載されている情報そのものやコピーワーク、コンテンツの配置など様々ですが、色彩もそのうちの一つです。色彩の微妙な違いだけでも、Webサイトの印象は大きく異なってきます。

皆さんは、Webサイトに使う色をどのように決めていらっしゃるでしょうか？

色彩設計を大切に

Webサイトで商品やサービスを「売る」ためには、伝えたい情報を確実にユーザーに伝達させ、機会損失を減らすことが重要です。

とにかくカッコいいデザイン、とにかく美しいデザインのWebサイトを作りたい！とオーダーする方もいらっしゃいますが、そういった「見た目重視」のWebサイト＝モノを売れるWebサイトではありません。

とは言え、もちろんデザインを蔑ろにして良いというわけでもありません。白と黒の2色で、まるで新聞のように情報がびっしりと敷き詰められたWebサイトで、お買い物をしたいと思うでしょうか？

Webサイト内で使用する色彩を設計することでより情報を伝わりやすくし、ユーザビリティに配慮した購入の流れを作り出すことが可能になります。

人の心理と色の関係

商品や価格、写真、キャッチコピーなどすべての要素において、色は大きな影響を与えます。

色の違いは人の購買意欲を左右するのです。

海外の調査では、実に85％もの人が、モノを買うときに色がファーストチョイスとなっているというデータがあります。

色は人の情動の働きを促します。情動とは怒りや恐れ、喜び、悲しみといった一時的な感情の動きを指しますが、色を見ることでそれが好き、嫌いか、かっこいい、かわいいなどの表現感情と、暖かい、冷たい、明るい、暗いといった固有感情が情動の働きによって表出します。

またこの固有感情には、連想作用と体覚作用の2つがあります。

例えば赤色の場合、火や炎を連想し、熱さや温かさをイメージとして感じるかと思いますが、これが連想-体覚の関係性です。

Webサイトを含めたマーケティングの世界では、このような人の心理と色の関係を利用し、商品やWebサイトを生み出しているといっても過言ではありません。

Webサイトにおける「良い色」とは？

Webサイトにおける良い色とは「Webサイトの目的を達成させる色」です。

Webサイトの目的はいろいろあると思います。

商品を売る、サービスを知ってもらう、自分の作品を紹介する、受注したい、共有したいなどの目的を、より最適な形で達成するための「色」が「良い色」なのです。

ただし、色はあくまで目的を達成するために使われる「手段」なので、こだわりすぎる必要はありません。

Webサイトはいろいろな流入口があり、いろいろな目的を持った人が訪れます。

その際に、「目的を達成するための色」だけではバランスが悪くなってしまうこともあるので、それに加えて「見た目の美しい色」と「ターゲットに対して好まれる色」、これら3つの色をバランスよく配することが大切です。

※この3つの色のうち、美しい色とは、色彩の調和を保つことを指します。

配色の大原則

「美しい色」の達成には、配色の大原則にそって色を決めていく必要があります。

配色の大原則とは、まずはいろいろな色を使ってごちゃごちゃさせないこと、メインカラーをユーザーの嗜好やブランドイメージと乖離したものにしないことが必須です。加えてWebサイト制作においてはベースカラー（70％）、メインカラー（25％）、アクセントカラー（5％）の3色を決めてWebサイトデザインを進めていくことが肝要になります。

ベースカラーは背景色など広い面積を占める部分の色です。背景色が暗すぎると文字が読みにくくなるので、注意が必要です。

メインカラーは一番重要で、ページ全体の印象を決める色になります。そのためターゲットの好みやブランドイメージに適合した色にするのが一般的です。

アクセントカラーはキャッチコピーなど、協調したい部分などに使用する色として設定します。

まとめ

Webサイトに限りませんが、デザインにおいて色彩の設計というのは非常に重要な要素です。

その色が美しいか美しくないかという判断は人それぞれの価値観であり操作できないものですが、情報が伝わりやすい色彩を設計することは、配色の大原則や配色バランスを保つことで可能になります。

Webサイトを新しく立ち上げる際やリニューアルする際は是非、より成果の出せる色彩設計を意識してみてくださいね。