配色について-2

はじめに

色は人に印象を与えます。しかし、閲覧環境によって色の差が認識しづらかったり、ディスプレイの性能によって細かな色の差を表現できない場合もあります。また、WEBサイトを利用する方が目に疾患があれば見え方も変わってきます。
また、WEBサイトの配色を検討するうえで、リンクやボタンの配色は操作性にも大きく関わってきます。ユーザーがストレスを感じずに目的を達成するためには適切な配色の知識を身につけることが非常に重要になります。

利用者の視点に立った配色

上記でも述べたように、WEBサイトは誰にでも同じように見えるとは限りません。ここで大切になることは、様々な環境と見え方があることを理解し、多くの人に情報が伝えられように、ユーザーの視点に立って配色を選んでいくことになります。

コントラストを意識した配色

コントラストは、色相、明度、彩度の対比のことをいいます。WEBサイトでコントラストが大きく影響してくるのは文字や図形などの配色です。前景色(文字など)と後景色のコントラスト比が高いほど可読性が上がり、見やすくなります。
また、コントラスト比が高いほど野外などの環境でも差がわかり、多くの人にも見やすくなります。
【※参考：コントラスト比を調べるツール】
「WCAG Contrast Checker」https://contrastchecker.com/

色だけの情報伝達と注意点

色を用いた情報伝達だけでは、色の見え方が一般の人と異なる人にとっては、リンクの色による情報の差が伝わらず、同じ色に見えてしまいます。
多様な色覚に配慮して、情報が的確に伝わるようにリンクにアンダーラインを引くようにするなど、色以外の視覚情報で伝える手段も取り入れるべきです。

WEBサイトの目的に合った配色と比率

配色

WEBサイトには、コーポレートサイトやEコマースサイト、ポータルサイトの種類があり、それぞれに役割やコンセプトを持っています。そして、色はWEBサイトのコンセプトを引き出すために重要な要素をもっていて、配色を変更するだけでWebサイトのイメージを大きく変化させることができます。
目的に合わせて配色を決める方法は大きく分けると2種類あります。

1. 一つの色から配色を選ぶ
2. 写真から配色を選ぶ

一つ目は一つの色から配色を選ぶ方法です。
まず、サイトのコンセプトとなるメインカラーを決め、それを基準にして、ベースカラーとアクセントカラーを決めます。
ベースカラーは背景色やホワイトスペースに使用し、アクセントカラーはリンクテキストや重要なボタンなどに使用します。
下記のANAのサイトでは、機体やロゴマークに使われている青色をメインカラーにして、白色をベースカラーとしています。そして、アクセントカラーは、重要なポイントでユーザーの視線が向くように、補色の黄色を採用しています。
≪例１≫
「ANAのサイト：https://www.ana.co.jp/」

二つ目は、写真から配色を選ぶ方法です。
こちらの場合はWEBアプリケーションである「Adobe Color CC」を使うと便利です。
【※参考「Adobe Color CC」：https://color.adobe.com/ja/create/color-wheel/】
このツールは画像をアップロードするだけで、配色を自動で抽出してくれる機能があります。

比率

WEBサイトの配色でよく使われるのは「70:25:5」の比率です。
70%はベースカラー、25%はメインカラー、5%はアクセントカラーの配色の割合が、美しい配色になりやすい傾向があります。

リンクの配色

リンクはWEBページを結びつける要素であり、未訪問リンクと訪問済みリンクなどで色を分けます。ブラウザによっては微妙な色の違いはあるものの、デフォルトの未訪問リンク色は「青」、訪問済リンクは「柴」が採用されています。
デザイン的に青が合わない場合は、メインカラーを採用されている傾向があります。
メインカラーであれば、違和感を感じずにリンクの存在を主張できます。

最後に

WEBサイトを作る際には、前提として、様々な環境と見え方があることを理解し、ユーザーの立場に立ってデザインしていくことが非常に重要になってくることを学びました。配色を決める方法も、これまでは感覚的に選んだ時もありました。でもそれは、自分が良いと思った配色であって、ユーザーの視点に立てていなかったことになります。
今後はサイトのコンセプトを基準に比率を意識して、サイトの配色をしていこうと思います。

【参考書籍】

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)