Webデザインの制作過程において、配色がしっくりこなくて困った経験はないでしょうか。
配色作業を効率的に行うためには「配色ツール」を利用するのがおすすめです。ただ、配色ツールを効果的に利用するためには、Webデザインにおける配色の基本をあらかじめ理解しておくことが重要です。
本記事では、配色パターンに迷った際に使えるおすすめの配色ツールを紹介しています。使いやすいツールを活用しながら、Webサイトのイメージにピッタリの配色を心がけましょう。
Webデザインにおける配色
Webデザインにおける配色は、色が持つ3種類の性質である「色の三属性」をベースとしています。色の三属性とは、「色相」「明度」「彩度」のことです。下記ではそれぞれについて説明します。
色相
色相とは「色の違い」のことです。
Webデザインで使用する色の種類としては、赤、黄色、青などがあります。これらの色合いが混ざることによって、紫や黄緑、黄赤（オレンジ色）などのさまざまな色も表現できます。
色合いのうち、赤系は「暖色」、青系は「寒色」と呼ばれます。また、緑系や紫系の色は「中性色」となります。暖色と寒色は真逆の色合いといえますが、Webデザインにおいては暖色と寒色のように真逆の色合いを組み合わせることによって、目を引きやすいデザインを制作できます。
このように、色相をうまく組み合わせることは、Webデザインの効果を高めるための基本といえます。
明度
明度とは「色の明るさ」を指します。
明度が高いほど色合いが明るくなり、明度が最も高くなると白になります。また、明度が低いほど色合いが暗くなり、明度が最も低くなると黒になります。
彩度
彩度とは「色の鮮やかさ」のことです。
彩度が低いほど薄く落ち着いた色合いとなり、彩度が高いほど濃い色合いで原色に近づきます。
明度と彩度の組み合わせ
明度と彩度を組み合わせることによって色のトーンを変えることができます。色のトーンとは「色の調子」を指します。色のトーンの種類として以下のものがあります。
・ビビッド：明度は中間。彩度は最も高く、色合いが鮮やか
・ブライト：ビビッドより彩度は低く、明度が高めで明るいイメージ
・ソフト：明度はやや高めで彩度は低め。やわらかな印象の色合い
・ダル：明度・彩度ともにやや低め。落ち着いて真面目な雰囲気の色合い
配色における注意点
配色する場合は以下の点に注意して行うようにします。
・使う色は3～4色を基本にする
・使う色は、メイン・サブ・アクセントそれぞれのカラーを選ぶ
詳しく内容については以下で説明します。
使う色は3～4色を基本にする
Webデザインで使用する色は3～4色程度を基本として、多くても6色程度までとします。
その理由としては、色の種類が増えるほどそれぞれの色が主張し合ってしまい、まとまりのないデザインとなってしまうためです。
その中で、メインの色を1色、メインの色を引き立てる色として2～3色、合計で3～4色程度に抑えることでデザインとしてのインパクトを高めることができます。
使う色は、メイン・サブ・アクセントそれぞれのカラーを選ぶ
Webデザインの配色で利用する色は「メインカラー」「サブカラー」「アクセントカラー」の3つに分けられます。
メインカラーとは、デザインの大部分に使用する色のことです。
サブカラーは、デザインの一部分に使用する色で、デザインを引き立てる役割を果たします。
アクセントカラーは、デザインを目立たせるために使う色です。
メイン、サブ、アクセントの各カラーを使用する割合は、メインが70％、サブが25％、アクセントは5％程度が適切です。
デザインの背景にメインカラーを、デザインを引き立てるためにサブカラーを使用します。デザインを目立たせるために、ほんの少しだけアクセントカラーを含ませると、デザインとしてまとまりが感じられます。
それぞれのカラーは、配色ツールを使うと簡単に選べます。配色ツールについては次の項目で説明します。
配色ツールとは
配色ツールとは、Webサイトのデザインを制作する場合に、どの色を使えば良いかが一目でわかるツールのことです。
実際にWebサイトのデザイン制作時には、どのような色を使うのが適切なのか、どの色とどの色を組み合わせればいいか、など配色を決めることに関して時間がかかってしまいがちです。
その点、配色ツールを利用することでどの色の組み合わせが効果的であるかが明確化するほか、Webサイトのユーザー層に応じて明るい雰囲気にしたり、あるいは落ち着いた雰囲気に仕上げたりすることも可能となります。
おすすめの配色ツール
おすすめの配色ツールとして以下の4つを紹介します。使いやすいツールを選んでデザイン性の高いWebサイトに仕上げましょう。
Adobe Color CC
Adobe Color CCは、Adobe社が提供している配色ツールです。配色パターンを簡単に決められることで人気の高いツールとなっています。
カラーホイールという機能を利用すれば5色のパターンが作成できるため、Webデザインに必要な色のパターンをすぐに決めることができます。また、スマートフォンで撮影した写真をもとにカラーパターンを作成することも可能です。
Adobe IDを持っていれば、作成した配色パターンを保存できるので、他のプロジェクトでも使用できます。
Scheme Color
Scheme Colorは、1万種類以上もの配色パターンがある配色ツールです。
シチュエーションに応じた配色パターンを提案しており、たとえば配色パターンの下には「明るい愛」「夕暮れと夜明け」「メンズの秋」（注：サイト上での表記は英語）と記載されているため、Webサイトの雰囲気に応じた配色パターンを簡単に選ぶことが可能です。
HUE/360
HUE/360では、メインで選びたい色とサブ・アクセントのカラーを手軽に選ぶことができます。
画面の左端には、明るさを意味する「Brightness」という項目があり、色合いの明るさを選べます。好みの明るさを選ぶと、画面の中央に表示されているさまざまな色の見本が明るくなったり暗くなったりするので、その中から好きな色を選択します。
選択した色の配色パターンが残る仕組みとなっているので、好みの色に合った配色パターンを自分で作ることができます。
NIPPON COLORS
NIPPON COLORSはタイトルの通り、日本ならではの風情が感じられる配色パターンが選べる配色ツールです。
「桜」「曙」「紅梅」などの名称が付いた配色パターンがあり、サイトのイメージに合わせて雰囲気に合う色を選択することができます。和のテイストを前面に出したWebサイトを制作する場合に最適です。
まとめ
配色ツールは、種類豊富な色の組み合わせを提案してくれる便利なツールです。利用することでデザインのイメージに合った色を簡単に探すことができるため、Web制作において非常に役に立ちます。
まずはどんなWebサイトに仕上げたいのかをイメージし、それに合った配色ツールを使用することで、魅力的なWebサイトを作成しましょう。
