配色とは2色以上の色の組み合わせをいいます。
WEBデザインでは配色が大事です。
例えばコカ・コーラと聞いて思い浮かぶ色はなんでしょうか？
おそらく「赤色」だと思います。
このように企業のイメージカラーを配色によって、印象付けることができるのです。
しかし配色と聞いてこんな悩みが出てくるのではないでしょうか。
「Webデザインの全体的な配色が合っているかわからない」
「ポップでおしゃれな配色にしたい」
「デザインにアクセントをつけたい」
今回の記事では配色の基礎からWebデザインで使えるツール(無料)を紹介します。
間違った配色を選ばないためにも、基礎をしっかり学んでいきましょう。
Contents
色の三属性とは
Webデザインで配色をする上で必要な知識として、色の三属性があります。
「色相」「彩度」「明度」の3種類です。それぞれ解説していきます。
色相
色相とは、色の相違(違い)をいいます。
色相を輪のような円形に配置したものを色相環といいます。下図のようなものを一度は見たことがありますよね。
※図は日本色研事業株式会社から引用
人は光の反射によって、色を連続的に認識しています。
赤色→赤色に近い黄色→黄色というように認識しているのです。このように色の連続的な色相を表した図が色相環になります。
色相環の向かい合う対角線にある色同士を補色といいます。補色はお互いの色を鮮やかに見せる性質があります。
例えば緑色の対角線上にある色は赤色になります。スマートフォンの有名な無料通話・メッセージの某アプリでは、アプリ色は緑、バッジ(通知の知らせ)は赤色と補色を利用していますよね。
このように補色を意識して配色を組み合わせれば、Webサイトで見せたい箇所を強調できます。
ただし色合いによっては、目がチカチカする可能性があるので調整が必要になるでしょう。
彩度
彩度とは色の鮮やかさの度合いのことをいいます。
無彩色という言葉を知っていますか？無彩色は彩度が0％の状態のことをいいます。
「白・黒・灰色」は彩度0％なため無彩色です。それ以外の色は有彩色になります。
彩度が低いほど、色は無彩色に近づいていきます。
逆に彩度が高いと、色は鮮やかになります。彩度が100％の状態を純色といいます。
上記で説明した補色は、彩度を調整して目に優しい色合いにしましょう。
明度
明度とは色の明るさの度合いのことをいいます。
明度は無彩色と有彩色の両方に適用されます。
有彩色の明度が高いと、明るい色になり白色に近づいていきます。太陽が差し込んで眩しい印象の色合いになりますね。
反対に明度が低いと暗い色になり、黒色に近づきます。写真に影がかかって暗くなるイメージです。
トーンの解説
トーンとは
トーンは明度と彩度の組み合わせによって決められる色のグループです。
トーンの種類によっていろいろな印象を与えることができるでしょう。
人は色によって印象を決めます。
赤色を見て警告や危険といったことをイメージしませんか？
「赤信号は止まれ」や「車の警告灯の色」などさまざまな所で赤色が使われているため、イメージしてしまうのです。
Webデザインの配色をする際、イメージと違う色を選択しないためにも、トーンの種類と与える印象を理解しましょう。
4つの分類とトーンの種類
トーンは4つの分類に分けられます。純色、中間色、明清色、暗明色の4つです。
それぞれのカラー特徴と印象を解説していきます。
明度と彩度の関係性をPCCS(日本色研配色体系)で表した図になります。
※図は日本色研事業株式会社から引用
純色
トーン名：ビビットトーン
絵の具のチューブをそのまま出したような色になります。明度は中間で彩度が最も高い色になります。
とても鮮やかで派手な色なので、生き生きとした印象がありますよね。
目を引くインパクトある色のため、補色のアクセントに使える色でもあります。
スポーツウェアなどにもビビット色がよく使われますよね。
スポーツブランド用品を扱うサイトにビビットトーンを多く使用すると、活気がでて良い印象になるでしょう。
中間色
トーン名：ライトグレイッシュ・グレイッシュ・ソフト・ダル・ストロングトーン
淡くて大人しい、落ち着いた印象の色です。
スモーキーで霧がかかったような中間色は、上品な大人っぽさを演出できます。
色自体は目を引く色ではないため、さりげない箇所に使用するのが良いでしょう。
おしゃれで大人っぽさを出したいデザインに向いている色ですね。
明清色
トーン名：ペール・ライト・ブライトトーン
純色に少量の白を混ぜたような明るい色です。
淡くて澄んだ色は清々しい印象を与えるでしょう。
ペールトーンは春や夏に外を出ると、よく見かける色ではないでしょうか？
おしゃれな方ならファッションによく使う配色です。
明るくてポップなWebデザインの配色をするのに最適なトーンだといえます。
暗清色
トーン名：ダークグレイッシュ・ダーク・ディープトーン
純色に黒を混ぜた、重たくて暗い色味になります。
黒色が多いため無彩色に近い色です。
色に濁りがないため、高級感を出したいときに使用すると良いでしょう。
高級車やブランドなどのサイトにはダークトーンな写真が使用されており、ゴージャスな印象を与えることができますね。
Webデザイン配色を決める3つの手順
1.テーマカラーを考える
Webサイトでメインに使用したい色を考えましょう。
クールな印象にしたいなら暗清色を、ポップなイメージに仕上げるなら明清色を基調に配色すると効果的でしょう。
2.アクセントカラーを考える
アクセントをつけたい項目に使う色を考えましょう。テーマカラーの補色を意識して考えると、より強調できます。
アクセントカラーは使用頻度は少なめにしましょう。強調したい色を頻繁に使用すると、なにを強調したいかわからなくなってしまうからです。
3.サブカラーを考える
二番目に多く使うカラーになります。テーマカラーに近いトーンを選びましょう。
Webデザインで便利な配色ツールおすすめ3選
Webデザインで使われるおすすめの配色ツールを紹介していきます。
どのツールもブラウザ上で使用できるので、操作性を考慮して自分に合ったツールを選んでみてください。
デザインをするなら本記事で紹介するツールと合わせて、こちらの記事内に出てくるツールもおすすめです。
▸初心者でも使いやすいおすすめの無料・有料デザインツール6選 (p-image.net)
Adobe Color CC
有名メーカーAdobeの配色ツールになります。同じAdobe社のPhotoshop・Illustratorと連携ができるため非常に便利です。操作も簡単でテーマカラーの選択をするだけで大体の配色を決めてくれるので悩む必要がありません。
また写真から色を抽出する機能があるので、いろいろな場面で利用できますよね。
Nippon Colors
名前の通り日本の和風な配色をブラウザ上で再現できるツールです。
サイトをクリックすると、トップページから和の雰囲気が出ていておしゃれですよね。
明朝体で書かれている文字をクリックすると、イメージカラーが表示されます。
カラーコードも表示されるため、非常にシンプルで操作性に優れていますね。
Sorted Colors
カラーバーをスライドすると、配色が選択できます。
色を選択するとカラーコードが表示されるので誰でも簡単に配色のデザインができて便利ですよね。
Webデザインで必要な配色の基礎知識まとめ
配色の基礎知識を身につけたことで、色の組み合わせが大切であることを理解できましたね。
さっそくWebデザインで配色をしてきたくなってきたのではないでしょうか。
紹介した無料ツールを活用して、おしゃれな配色をデザインをしていきましょう。
