サイトの配色について考える

Contents

サイトの印象を作る配色選び

サイトを運営する上で欠かせないのが配色選び。

自分では良かれと思っている配色でも訪問者にとっては深いと感じることもありますし、配色によってそのサイトのイメージが作られてしまうものです。

私が運営しているこのブログも見た目は非常にシンプルで緑色になっていますけど、これが例えば黒一色とか、オレンジと黄色が混ざっていたりすると不気味だし目がチカチカしてきますよね。

まあこれはちょっとオーバーな表現ですけど、配色によってサイトの印象がガラリと変わってしまうことに違いはないかと思います。

そこで今回は、サイト作りに相応しい配色選びについてご紹介していきたいと思います。

配色はサイトのイメージそのもの、人間で言えば洋服を決めるのと同じような効果があるわけですが、この洋服選びによって約半数の方がサイトの中身を覗くかどうかを判断すると言われています。

コンテンツにぴったりとマッチしてない配色を選んでしまった場合、何となくイメージと違う、ちょっとここはタイプじゃない、といった具合に訪問者はタブを閉じてしまいます。

つまりせっかくアクセスしてくれたユーザーを配色1つで逃してしまうということなんですね。

基本的に配色は3つのパターンから成り立っています。

同一色相は同じ色の集合体、もしくは全く同じじゃなくても明るさが似通っているものを指します。例えば青、緑、黄緑、紫、など。こういった色の集まりを同一色相と言います。

隣接色相と呼ばれるものは、これは明るさよりも色の中身が酷似している場合に当てはまります。赤とピンク、青と水色などが隣接色相ですね。

類似色相と呼ばれるものじゃ、色としては似ているわけではないけどジャンルとしては同じ分類に入るものを指します。緑と黄緑、青とエメラルドグリーンなど。

この3つのパターンを駆使して全体のバランスを整えていきますが、ベースとなる色は淡い色、文字が浮かび上がる色を選ぶ方が目にも優しいですし訪問者もコンテンツが見やすくなります。
ベースの割合はだいたい70％程度が目安。

次にメインカラーの選択ですが、こちらは淡い色とは対照的にパンチのある明るい色、個性的な色を持ち出してもいいと思います。
メインカラーはサイトの印象をより引き立たせるものなので慎重に決めてくださいね。こちらは割合としては25％が目安です。

最後にアクセントカラーを決めていきますが、こちらはメインの補助的な役割なのであまり強調する派手な色は好ましくありません。
どちらかと言うとメインよりも少し控えめの明るさを選択した方が上手くまとまるかと思います。こちらの割合は5％が目安。

配色の基本を上手く活用して魅力的なサイトを作ってみたいと思います。