ELEMENT, INC.

Webサイトを制作するうえで配色は、サイトイメージを左右する大切なもの。ところが色の組み合わせは多岐にわたり、その色一つをとっても明るさや鮮やかさを変えれば無数にあります。そのため、マッチする組み合わせを探しているうちに、出口の見えない迷路に入り込んでしまうことも少なくありません。

今回は、これだけを押さえておけばデザインで大きく悩むことはないだろうという基本ポイントをまとめました。

Webデザイン初心者や、配色に迷ってしまった中級Webデザイナーにとって、押さえておきたい3つの基本をご紹介します。

1．配色の基本的なバランス

配色で大切なのは、組み合わせる色の配分（バランス）です。Webデザインでは、ベースカラー・メインカラー・アクセントカラーの3つの配分によって、ユーザーに与える印象が大きく変わってきます。

ベースカラーの比率と概要、決め方

ベースカラーとは、Webサイトの背景色や余白部分に表示する色を指します。モニターに映るWebサイトの画面を100％と考えると、全体の70％に当たる部分です。他のメインカラーやアクセントカラーを引き立てる役割があり、Webサイトのイメージに大きな影響を与えます。

色味には、メインカラーやアクセントカラーを妨げないものを選びます。文字間やコンテンツ同士の空間にも表示される色のため、ユーザーの視認性・可読性を妨げない色であることも大切です。そのため、よく使われるのは白や灰、黒といった無彩色です。

メインカラーの比率と概要、決め方

Webサイトのイメージを決定づける色で、ロゴマークのメインカラーを転用することもあります。配色バランスは、全体の25％です。ベースカラーとのつり合いが取れていないと、見栄えに大きな影響を与えます。

メインカラーには可読性の高い色で、なおかつターゲットイメージに合わせた色を使うのがベストです。ベースカラーとの色味が近いと可読性・視認性を妨げてしまい、ユーザーにストレスを与えることがあります。

アクセントカラーの比率と概要、決め方

いわゆる差し色といわれるもので、全体を引き締める役割があります。目立つ色を使うことが多く、ユーザーの目を引く役割も担っています。配色バランスは全体の5％ととても少なめです。

アクセントカラーを多色使いすると、扱いが難しくなります。しかし、POPで明るいWebサイトを表現する場合には多色使いが有効です。どんなイメージを与えたいのかによって、使うアクセントカラーの色と数を決めるといいでしょう。

初心者Webデザイナーにとって多色使いは、難易度が上がります。慣れるまでは単色か、多くとも3色までに抑えるのがおすすめです。

なお、ECサイトや資料請求などのように、最終的にユーザーを誘導したいページがある場合は、ワンポイントでアクセントカラーを使用しましょう。ボタン色を目立たせることによって、CVアップ効果を狙いやすくなります。

2．色から受ける基本的な印象

配色を決めるときに注意すべきなのが、それぞれの色が持つ印象がWebサイトのイメージやユーザーの心理に影響する点です。配色を決定する場合には、何を訴求したいのか、どんなイメージをユーザーに与えたいのかによって選ぶようにしましょう。

有彩色と無彩色について

色は、色味を持つ有彩色と、色味を持たない無彩色に分類できます。有彩色とは、赤や青、黄色などモノクロではない色味です。無彩色とは、白や灰、黒といった白から黒の間に位置する色味です。

無彩色は、有彩色や他の無彩色とも馴染みやすく、ベースカラーからアクセントカラーまでカバーできるオールマイティな一面があります。有彩色同士の組み合わせでは、バリエーション豊かな表現ができる一方で、互いの効果を打ち消してしまうこともあるので、組み合わせには注意が必要です。

有彩色・無彩色は、各色味でユーザーの心理に与えるイメージが異なります。それぞれの色味が持つイメージを把握しておくと、何を軸にデザインすればいいのか、方向性やイメージが湧きやすくなるでしょう。

色から受ける印象

●赤（有彩色／暖色）
血液、炎、太陽、情熱、勇気、勇敢、エネルギッシュ、活動的、積極的、外向性、興奮、怒り、危険、欲望など

●緑（有彩色／中性色）
草木（自然）、健康、穏やか、癒し、安らぎ、リラックス、安定、安心、安全、秩序、平和、調和、若さ、地球など

●青（有彩色／寒色）
安心・安全、信頼、清潔、爽快感、理性、知的、冷静、冷徹、誠実、鎮静、安定、知恵、調和、落ち着きなど

●黄（有彩色／暖色）
快活、明るい、希望、陽気、楽しい、若々しさ、愛嬌、元気、協力、好奇心、決断力、注意、警戒など

●オレンジ（有彩色／暖色）
慈善、親しみ、友情、元気、健康的、陽気、楽しい、活発、活動的、行動、冒険、成功、発展、好意、幸福、食欲、大衆的など

●ピンク（有彩色／暖色）
好意、愛情、恋愛、慈愛、可憐、感謝、女性的、幸福、優しい、尊敬、快活など

●紫（有彩色／中性色）
神秘的、妖しさ、高貴、優雅、気品、高級感、威厳、忍耐、自信、精神、不安、不遜、性、不健康、想像力、直感、宇宙など

●黒（無彩色）
神秘、威厳、重厚感、伝統、硬質さ、高級、極限、洗練、自信、不安、死、闇、悪魔、暗い、古い、冷酷、陰鬱など

●グレー（無彩色）
落ち着き、大人っぽさ、高級感、穏やか、信頼、上品、スタイリッシュ、安定、迷い、曖昧、保守的、人工的、産業的、先進的、鋭敏、無機質、など

●白（無彩色）
純潔、潔白、清潔、高貴、洗練、平和、献身、単純、明快、公正、神聖、衛生的、空虚、冷淡、淡白など

3．彩度と明度と色相で変わるサイトイメージ

配色のバランスを考えるときに欠かせないのが、「彩度」「明度」「色相」です。これらのバランスが悪いと、ユーザーが受け取るイメージにも不調和を引き起こし、それがときに不快感になってしまうこともあります。

彩度とは？　高低差で受ける印象の違い

彩度とは、色の鮮やかさの度合いです。彩度が高いと派手な印象になり、彩度が低いと地味な印象になります。高低差を使い分けることで、力強い印象から落ち着いた印象までカバーできます。

明度とは？　高低差で受ける印象の違い

明度とは、色の明るさの度合いです。明度が高いと軽い印象になり、明度が低いと重い印象になります。高低差を使い分けて、ポップな印象から重厚感ある印象まで対応できます。

色相（トーン）とは？　色相グループによる印象の違い

色相はトーンとも呼ばれ、日本色研配色体系（略称PCCS＝Proctical Color Cordinate System）によって彩度と明度を軸に体系化されています。彩度や明度によって「ライト」「ビビッド」「ディープ」などのグループに分けられており、彩度と明度が低いグループは黒に、高くなるほど白に近づいていきます。

同じグループの色味は相性が良く、異なるトーンの色を使う場合は明度の差を大きくすると視認性が高まります。

配色時に気を付けておきたいこと

配色を決めるときに気を付けておきたいのは、背景色と文字色のバランスです。明度が近い色同士を合わせると、文字の輪郭がぼやけてしまい、視認性が低くなります。また、ユーザーのなかには、色覚に障害を持つ人もいます。

色覚障害の人にとって同じ系統の色味は判別しづらいため、反対色を使って視認性を高める必要があります。たとえば、赤と緑では同じ色に見えてしまうため、赤と青といったように暖色・寒色で色調を変えるようにしましょう。

作成するWebサイトのターゲットユーザーがどんな人なのかを意識することで、ユーザーにとって見やすく、馴染みやすいデザインを作り上げることができます。

まとめ

Webデザインの配色は、一度悩みだすとなかなか決まりません。しかし、基本をしっかりと押さえておけば、配色で大きく迷うことはないでしょう。これからWebサイトでデザインを手掛ける方は、この配色の基本に注意しながらデザインしてみてください。