Webデザインのカラーに迷ったら。配色の基本と参考サイトを紹介

2019.03.04

Webデザインの悩みで多いのがカラーに関する問題です。配色は、センスも知識も求められる大変な作業です。デザインにおいて、カラーはとても大切な要素となります配色の基本知識を学び、便利なサイトを知ることでよりよいデザインを生み出しましょう。

デザインにおけるカラーの重要性

色は、私たちの生活に欠かせない要素としてさまざまな場所で使用され、人の心に大きな影響を与えます。

どのように色を使用すれば、その効果を発揮することができるのでしょうか?デザインにおけるカラーの重要性について考えてみましょう。まずは、カラーに関する基礎知識を見ていきます。

カラーによる影響

カラーは、私たちにさまざまな影響を及ぼします。特に、『心理的な影響』『生理的な影響』『感情的な影響』『文化的な影響』などがあげられます。

心理的な影響とは、私たちの暗記力や記憶力に関わります。生理的な影響は、リラックス効果など精神面に関わります。

感情面では、パステルカラーは柔らかな印象を、ビビットなカラーは元気な印象を与えることが多いですね。

文化的な影響といえば、同じ赤色でも、中国では幸運を連想するカラーであるのに対し、ケルト民族では死や来世を意味する色といように、異なる意味で捉えられます。

カラーごとの印象

それでは、カラーが人に与える印象について具体的に見ていきましょう。

『赤』は、人間に刺激や興奮を与える色として認識されています。そのため、生理的な効果で言えば、体温や血圧を上げるとされていています。

『黄』は、心理的に明るさや希望を与えてくれる色とされています。運動神経を活発にしたり、脳の働きを早くしたりする効果があるとされています。

『緑』からは、リラックス効果を得ることができます。身体の疲れや精神の安定が期待でき、ヒーリング効果が高い色として活用されています。

『青』にも似たような効果があり、鎮静作用に加え、爽快感のある色です。カラーごとの特徴を理解して、Webデザインの際にうまく活用してみましょう。

Webデザインにおけるカラー配色の基本

カラーの基本的な効果や影響力についてまとめたところで、より具体的にWebデザインをするときのカラー配色について見ていきましょう。

たくさんの影響力があるカラーだからこそ、うまく活用して効果的なカラー配色を心がけたいものです。カラー配色の基本についてまとめていきます。

サイトのイメージを決めるメインカラー

サイトのイメージを決めるのが『メインカラー』です。イメージを決めると言っても、サイト全体でこのカラーが占める割合は25%程度が一般的だとされています。

最初に決める色なので、このカラー次第で残りの配色が決まっていきます。サイト内で最も目立つカラーなので、派手な色を選びたくなりますが、閲覧者が見にくくなってしまうことを避けるためにも、明度が低めの色が好まれます。

また、サイトの狙いを反映しやすい色でもあります。カラーの印象や効果を意識しながら選ぶとよいでしょう。

サイトの背景になるベースカラー

サイトの背景になるカラーが『ベースカラー』です。ベースカラーはサイト内で最も占有率の高いカラーで、メインカラーを引き立てる役割を果たします。

余白を埋める色として活用されるので、白や黒など、色彩を持たないカラーだと使いやすいでしょう。高めの明度で、淡い印象になる色を選んでいくと、サイト全体にうまくなじませることができます。

メリハリをつけるアクセントカラー

メインカラーに負けず劣らず、閲覧者の注意を引く必要があるのが『アクセントカラー』です。このカラーには、サイト全体にメリハリを与える効果を期待します。

サイト内で目立つ色であるため、特に注目してほしいポイントなどに活用して、サイト全体のバランスを整えます。

一色だけに絞る必要はありませんが、色が増えれば増えるほど、全体のバランスを整えるのが難しくなるので、多色を使いたいときには注意が必要です。

カラーバランスを確認できるパレットツール

Webデザインにおけるカラー配色についてまとめてきましたが、実際に無数の色からバランスよく配色を決めるのは、なかなか難しいものです。

そんなカラーバランスを確認できる便利なパレットツールがあります。カラーバランスに不安があるときにうまく活用してみましょう。

Coolors

『Coolors』は、さまざまな配色を提案してくれる便利なパレットツールです。使い方も簡単で、画面上に並べられている5色のカラーをスペースキーを押して変更していくだけです。

スペースキーを押すと、別バランスの5色が配色されます。自分が使いたい色が見つかったら、その色だけをキープして、それに合わせた配色を展開してくれるため、徐々に自分好みの配色を選んでいくことができます。

気に入ったカラーパレットを保存しておくこともできるので、Webの配色に困ったときに役立つツールとして人気を集めています。

Coolors.co – The super fast color schemes generator

Adobe Color CC

『Adobe Color CC』では、5色を使って、補色やモノクロマティックなどテーマ別に7種類のカラーパレットを作成できます。

ユーザーは、カラーホイールと呼ばれる円形のパレットから、自分好みの色を選択して配色を決めていきます。それぞれのテーマごとに配色が異なるので、テーマを決めるところから始めるとよいでしょう。

Adobe Color CC

HUE/360

シンプルな操作性と手軽に配色を決めることができる利便性で人気を集めているのが『HUE/360』です。ワンクリックでさまざまな配色を探すことができます。

まずは基準の明るさを設定し、その明度に合わせた色相環の中から自分好みの1色を選ぶだけです。

選んだ色と相性のよい色だけが色相環に残るので、一目でおすすめの配色を見つけることができます。

[ HUE / 360 ] The Color Scheme Application

色の組み合わせに役立つWebサイト

カラーバランスを確認できるパレットツールの次は、色の組み合わせを決めたいときに役立つWebサイトについて紹介していきます。

何色を使うか迷ったとき、ウェブサイト上で好みの組み合わせを見つけることができるので非常に便利です。それぞれのサイトごとに特徴が異なるので、自分に合ったサイトを見つけて利用してみましょう。

Color of Books

『Color of Books』では、本や雑誌のページからWebデザインで使用できる色の組み合わせを検索できます。

例えば、自分が好きな雑誌や本の表紙があったときに、その表紙と同じような色の組み合わせを見つけることができるので、自分好みの組み合わせを簡単に調べることができます。

参考にしたい雑誌や本の表紙がある人にとっては、非常に便利なサイトです。

Color of Book – 雑誌の色からhtml,cssで利用できるカラーチャートの紹介

design shack

海外で人気を集めているサイトが『design shack』です。好みの色を選択すると、その色を使用しているサイトやロゴを見ることができます。

自分の使いたい色がサイトで使われている様子を見ることができるので、どのようなイメージになるのか想像しやすいという特徴があります。

Design Articles, Inspiration & Guides | Design Shack

配色の見本帳

Web上のカラーに特化して色の組み合わせを提案してくれるのが『配色の見本帳』です。メインカラーを軸に、さまざまな配色を調べることができます。

色の系統や想像力を刺激する色から好みの色を探せるため、メインカラーを決めたいときにも役立ちます。

配色の見本帳 | キーカラーで選ぶ配色パターン – 色見本と理想の配色との出会い

サイトデザインに合ったカラーを選ぼう

私たちが普段目にするサイトも、実はさまざまな狙いを元にカラーが使われています。サイトデザインには適した配色があるため、自分のイメージと狙いに合ったカラーをうまく使って、Webデザインに落とし込みましょう。

その他のテーマ

ART

CULTURE

CRAFT

FOOD

TIME