top > コラム > Web配色 > センスはいらない!?初心者でもわかるWeb配色のこと

センスはいらない!?初心者でもわかるWeb配色のこと

色の基本を理解する

色って一体何なんでしょうか?科学的に言うと、光の波長ですね。ある物体に当たった光のうち反射したものを色として認識しています。また、人が見える光の波長の範囲も決まっています。不思議ですね。

そんな不思議だけど、当たり前のように目に触れる色。ホームページを作る際にも、色は非常に大切です。なぜならば、そのホームページの第一印象を決定づける要因の一つになるからです。そのことに関しては後述します。

色は非常に奥深いです。ここでは、Webサイトを作成するために最低限必要な知識について説明しますね。

色は3属性と呼ばれる、色にしかないものを持っています。それが「色相」「明度」「彩度」です。

色相

色みのことです。虹は7色と言いますよね。Webの世界では、マンセル・カラー・システムと呼ばれる、色を定量的に表す手法がよく用いられます。

一般的には「赤」「黄赤(橙)」「黄」「黄緑」「緑」「青緑」「緑」「青」「青紫(紺)」「紫」「紫赤(桃)」の10種類に分類され、円(環)で表します。これを色相環と言います。

色相環

補色

色相環で言うと、円の反対側にある色のことを補色といい、これらの色同士は横に並べるとお互いを際立たせますが、混ぜてしまうと無彩色(に限りなく近い色)になってしまうという性質があります。

例えば、「赤」の補色は「青緑」、「黄緑」の補色は「紫」になります。

明度

明度は明るさの強弱のことです。無彩色の場合は、白に近いほど明度が高く、黒に近いほど明度が低くなります。

よく「コンストラクト」が強い・弱いという言い方をしますが、コンストラクトが強いというのは明度差が高く、コンストラクトが低いというのは明度差が低いことを言います。

彩度

彩度は色み(鮮やかさ)の度合いのことです。同じ色でもくすんだ色に見えたり、目が痛くなるような鮮やかな色みであったりします。

トーン

音や色の調子を表すときに「トーン」という言葉を使いますよね。色のトーンは、「明度」「彩度」によって決まります。例えば、彩度が100%で明度が60%は「ビビットカラー(鮮やかな色み)」、彩度が70%で明度が90%は「パステルカラー(柔らかい色み)」というトーンになります。

色のイメージを理解する

色にはその色が持つイメージというものがあります。また、トーンによって、同じ色でも持つイメージが異なります。

ここからが本題になりますが、Webサイトを制作する際、Webサイトの色は非常に重要になってきます。先ほど述べたように、Webサイトの色みによって、Webサイトそのもののイメージが決定されてしまうからです。

色の持つイメージ
情熱、興奮、危険、革命、太陽、炎
黄赤(橙) 嫉妬、明快、喜び、健康、快活、夕焼け、落ち葉
好奇心、軽快、陽気、冗談、明快、明朗、注意、レモン、向日葵
黄緑 若い、新緑、若葉、レタス
平和、自然、安全、芝生、ピーマン
青緑 爽やか、冷たい
鎮静、静寂、清涼、爽快、清純、清潔、空、海
青紫(紺) 堅実、信頼、知識、革新的、法則
高貴、優雅、気品、神秘、心配、葡萄、すみれ
紫赤(桃) かわいい、キュート、美しい、女性的、春、桃、桜
清潔、平和、潔白、清楚
平凡、憂鬱、退屈、陰鬱
高級、厳粛、暗黒、悲哀

例えば、幼稚園のサイトは、「かわいい」「安心」「明朗な」「豊かな」「楽しい」「賑やかな」といったイメージを付加したいと思うはずです。その場合、選ぶ色としては、「紫赤(桃)」「黄」「黄緑」がベストでしょう。逆に、「黒」や「青」といった色は持たせたいイメージとは異なるため、メインの色として使用するのは避けたほうが良いかもしれません。

配色のルール

1色だけでホームページを作るということはほとんどありませんよね。普通は数色を使うと思います。しかし色の組み合わせをどのようにしたらよいか迷いますよね。そこで先程出た色相環を参考に色の組み合わせを考えるとわりとうまくいきます。

1.共通性の調和

1-1.同一色相の調和

色相が全く同じで、明度や彩度、トーンなどを変化させた色の組み合わせ。よくまとまった印象になります。初心者の方に一番お勧めする色の組み合わせです。ただし、1色だと単調になりやすくなります。その場合、グラデーションやテクスチャを使うと変化が出やすくなります。

1-2.隣接色相の調和

色相環が隣同士の色の組みわせ。例えば、赤と橙。これもよくまとまった印象になります。

1-3.類似色相の調和

色相環が隣の隣同士の組み合わせ。色の幅が広がるので、まとまりがある中にも変化が付きます。

1-4.トーン共通の調和

色は異なるがトーンが同じ色の組み合わせ。つまり、彩度と明度が同じで、彩度が違う色の組み合わせです。様々な色があるので華やかさがあります。

2.対比の調和

2-1.中差色相の調和

色相環の90度に位置する色同士の組み合わせ。ただし、トーンを合わせるなどしないと調和しない場合もあるので注意です。少し難しい組み合わせです。

2-2.対象色相の調和

色相環の正三角形の2点に位置する色同士の組み合わせ。例えば、赤と緑と青。ただし、トーンを合わせるなどしないと調和しない場合もあるので注意です。少し難しい組み合わせです。

2-3.補色色相の調和

色相環の反対に位置する色同士の組み合わせ。例えば、赤と青緑(シアン)。反対の色なのでハレーションを起こしやすいので注意です。使いどころが難しいです。

2-4.トーン対照の調和

トーンが異なる、あるいはかけ離れた色同士の組み合わせ。トーンはホームページのイメージをコントロールする作用がありますので、むやみに変化させると調和しない場合もあります。

ホームページの配色に役立つサイト・書籍

色の組み合わせはほぼ無限大です。イメージにあった配色を見つける手助けをするサイト・書籍を紹介します。

ホームページの配色に役立つサイト

色の組み合わせだけ知りたいならこちらも便利です。

ホームページの配色に役立つ書籍

初心者向けなのでとてもわかりやすいです。最初の一冊目としては最適です。

ホームページ向けの配色辞典ではないのですが、色について学ぶには易しく書いてあるので初心者でもわかりやすいです。非常に面白い内容なので読み物としてはよいですよ。

イメージ別に色がわかるチャートです。イメージから色を決める際、最初のメインカラーを決定するのには非常に役に立つ書籍です。

参考サイト

数が多いですが、配色に関するヒントがたくさん散りばめられたサイトです。時間があれば是非目を通してください。

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る