ウェブサイトでの色遣いについて

色は、ほぼ全ての人の日常に溶け込んでおり、また、体験するものです。
光が届く限り無色透明なものはなく、目に見えるものにはすべて何かしらの着色がされています。色は、まだ言葉を離さない子どもでも扱える不思議なツールです。最近はパーソナルカラー診断という、自分の肌に似合う色を診断するテストが流行ですね。ウェブサイトにも、まさに“似合う色”があります。
今回は、サイトに“似合う”色選びについての解説になります。

色の基本

色は、いくつかにグループ分けをすることが出来ます。下の図のように、Ｘ軸を「色味」、Ｙ軸を「明るさ」で表現します。
まず色味は、プラス（右）に行くほど色が強く鮮やかに感じ、これを「有彩色」と言います。また、マイナス（左）に近いほど「無彩色」となります。があります。明るさには、プラス（上）に行くほど明るく、明清色と呼ばれ、マイナス（下）に行くほど暗く暗清色と呼ばれます。この図の真ん中あたりが、「色味」と「明るさ」が混ざった状態であるので「濁色」と呼ばれます。
これらの座標で「トーン」が決まり、印象を形づくります。

では次の章では、3つのトーンをピックアップしてそこから得られる印象を見てみましょう。

• ビビットカラー
• ライトカラー
• グレイッシュカラー

3つのトーンと印象比較

もしも市役所のウェブサイトがビビットカラーだったら、皆さんはどう感じますか。幼稚園のウェブサイトがグレイッシュメインだったら？病院サイトの背景が黒一色なら‥？ちょっと怖いですよね。そして私自身、このようなサイトに出会った経験はまだありません。選定した色に、素晴らしい考えやテーマが含まれてあったとしても、ユーザーとのギャップがあまりにも大きい場合、ユーザーが違和感を感じることになります。これはせっかく労力をかけた作品を台無しにしてしまうことに繋がり、残念な結果に。このような悲劇を起こさないためには、ある程度“一般的な色の印象“を知っておく必要があります。

今回は、3つのトーン「ビビット」「ライト」「グレイッシュ」を比較してそれぞれの印象を見てみましょう。皆さんも、ユーザー目線に立ちどんな印象を受けるのか一緒に考えてみてください。

ビビット

色味が最も強いトーンです。元気で、活発な印象を与えます。くすみが無く、目につきやすいためロゴマークなどにも使用されやすいグループです。安っぽく見えたり、誠実さに欠ける場合もありますが、カジュアルで親しみやすさを感じます。

ライト

最も明るく、色味もまだ十分残っているグループです。青や緑は特に爽やかな印象を感じ、ふんわりとやわらかなグループなので、インパクトには欠けます。女性向け商品や、ベビー用品、生活用品などに使用されることが多くあります。

グレイッシュ

色味は抑え気味で、明度も低いグループです。ビビットカラーやライトカラーと比べて落ち着いた印象を与えます。暗すぎず、色味の違いもまだしっかりと感じられる色相群です。アースカラーとも呼ばれており、ナチュラルなイメージを感じます。一方で冷たい印象もあたえます。

いかがでしょうか。当たり前ですが、それぞれのトーンに良い印象と悪い印象があります。誤った色を選定すると、ユーザーの抱くイメージとのギャップで、あなたが意図しない印象を与えてしまうリスクがあるのです。

ウェブサイトの色選び、たった1つのポイントとは

これまでの章では、色味や明るさの違いからそれぞれのトーンごとに印象を持っているという話でした。では皆さんが感じたそれぞれの色トーンの印象は、ユーザーも同じように感じてくれるのでしょうか？
前述の通り、色に伝えたい全ての意味を込めることはとても難しいことです。しかし、色に抱く印象は、一般的にはそう変わらず固定化されていることも多いため、大きくイメージを外すことなく選定することが最も大切だと言えるでしょう。

つまりポイントは、【ユーザーと制作者の大幅なイメージギャップを避ける】ということです。

目立たせたいから「○○色」、高級感を与えたいから「△△トーン」といったように、主語を製作者にするのではなく、ユーザーにしてみましょう。ユーザーとのイメージギャップを減らすことで気持ちよくサイトを閲覧することができ、ユーザビリティ（特定の利用状況において、特定のユーザーによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い。）の向上にも繋がるのです。

まとめ

色について、固定化されたイメージで語ることはナンセンスだと個人的には思っています。しかし、ウェブサイトにおいては違います。重要なビジネスツールであり、会社の顔といっても過言ではありません。見る人によって解釈が異なる芸術作品とは違い、万人に同じような解釈がなされて初めて力が出せるツールであるという事です。
それでも、競合他社との激戦を勝ち抜くためには個性も大変重要です。違和感のない印象を持ってもらった上で、奇抜な配色で個性を出す、あるいは、より一般的なイメージに近い色を選んで安心感を出すなど、様々な方法で独自のウェブサイトを築き上げてはいかがでしょうか？何か、ウェブサイトのデザインについてご不明な点がありましたら、お気軽にお問合せください。