この記事は次のような方のために書きました。
・Webデザインを制作したいだけれど、配色で迷ってしまうので知識を知りたい
・配色を決める方法を知りたい
この記事を読んでもらったら、カラーについての基本的なことから知ることができて、Webデザインを作るときに、適した配色を作れるようになります。
どうぞ最後までご覧になってください。
Webデザインを作るときのカラーの効果

普段は意識していないようでも、私たちは勝手に色とイメージを組み合わせて判断しています。
デザインではただ好きな色を選ぶのではなく、Webデザインをみた人に伝えたい情報や印象を考えながら配色をすることが大切です。
Webデザインでカラーを効果的に使う3つの方法

・デザインのイメージに合ったトーンを選ぼう
・デザインの配色の基本カラーを決めよう
・カラーの特性を利用しながら使おう
デザインのイメージに合ったトーンを選ぼう

・色相 ⇨ 色味を示す
・彩度 ⇨ 鮮やかさを示す
・明度 ⇨ 明るさを示す
デジカメやスマートフォンで撮った写真の色味を加工したりする時、色をはっきりとビビッドにしたものは、彩度が高くなります。
そして、肌の色などを白く際立たせる場合は、明度を高くします。
3つの属性のうち、この彩度と明度の変化を示しているものが「トーン」です。
人が色を見て感じるのは、ただ単純な色の組み合わせだけではなく、「トーン」が大きな作用を起こしていると言えます。
トーンには次の5種類があります。
・ビビッド(vivid)
・ブライト(bright)
・ディープ(deep)
・ライト(light)
・ダーク(dark)
ビビッド(vivid)

ビビッドは、5種類のトーンの中でも最も彩度が高く、純色の色調です。
鮮やかで派手な印象を見る人に与えます。
ブライト(bright)

ブライトは、ビビッドよりも少し明度が高く、彩度を落とした色調です。
ビビッドほどは力強い印象ではないですが、健康的だったり、華やかなイメージを見る人に与えます。
ディープ(deep)

ディープは、ビビッドよりも明度と彩度を少し落とし、ブラックの色味を加えています。
落ち着いていて上品な印象で、シーズカラーでいうと秋や冬のイメージです。
深みがある配色であり、和の演出をするときに使われるトーンです。
ライト(light)

ライトは、ブライトから彩度を落として明度を上げて白が混ざった色味で、パステルカラーと言われるものです。
春や夏のイメージで女性的なので、男性向けのWebデザインには向いていない配色です。
ダーク(dark)

ダークは、ビビッドに黒を多く混ぜてできた、澄んだ調子の暗いトーンです。
格式が高い感じで、大人っぽく落ち着いた印象を与えます。
デザインの配色の基本カラーを決めよう

私たちがデザインをするときには、カラーの配色を考えることは欠かせません。
配色は見る人に与える印象や対象を大きく左右し、センスも知識も必要な大変な作用です。
カラーには人それぞれに好みがあるかもしれませんが、基本的な配色のルールを頭に入れておくことで、効率よく作ることができます。
・ベースカラー ⇨ 70%
・メインカラー ⇨ 25%
・アクセントカラー ⇨ 5%
これ以上の配色もできますが、色が増えるほど扱いが難しくなります。
まずはこの基本の3色を組み合わせることで、全体的にバランスが取れますし、綺麗な配色を作ることができます。
ベースカラー ⇨ 70%

ベースカラーは、余白や背景などに用いることが多い色で、メインカラーとアクセントカラーを引き立てる脇役的なカラーです。
ベースカラーの配分は70%で、3つのカラーの中でも最も大きな比率になります。
白やライトグレーなどの明度が高い濁色を使うことが多いです。
濃い色の背景にすると文字が読みづらくなるので、特別な意図がある場合以外は使わないようにした方が良いです。
メインカラー⇨ 25%

メインカラーは全体の25%ではありますが、Webサイトの印象を決定する主役の色なので、基本的に最初に決めます。
見出しやキャッチコピーなど、ユーザーの目に入りやすい部分に使用するのがメインカラーの特徴です。
また、Webサイトに使用するロゴの色をメインカラーに使うことで統一感が出るので、おすすめです。
メインカラーは、Webサイトをみるユーザーが好んでいそうな色やサイトの世界観を表現するのに良いと思える色を設定すると良いと思います。
アクセントカラー ⇨ 5%

アクセントカラーは、少ない比率でありながら、最も目立つ色で、ユーザーの目を引く役割もあります。
メインカラーの反対色を使うことで、鮮やかさが引き立ちます。
単調なトーンにアクセントをつけてメリハリを表現する時などに使うと良いです。
そして、注目させたいコンテンツに使うことでその効果を発揮します。
カラーの特性を利用しながら使おう

カラーは次の4つに分類できます。
・暖色
・寒色
・中性色
・無彩色
暖色はポジティブなイメージでインパクトも強いので、他の色と比べて進出して見える特性があります。
寒色は逆に資格に与える刺激が少なくて後退して見えますが、落ち着いた印象を与えるおで、長い時間見ていても疲れにくいという効果もあります。
中性色は暖色や寒色のような温度を感じない色で、赤と青を混ぜ合わせた紫色などがその色です。
無彩色は、白や黒、灰色が属していて、無機質な印象を見る人に与えます。
色彩がないので、他の色との組み合わせに向いています。
主な色の印象

・赤(暖色)
・青(寒色)
・オレンジ(暖色)
・黄色(暖色)
・緑(中性色)
・紫(中性色)
・グレー(無彩色)
・黒(無彩色)
・白(無彩色)
赤(暖色)
・エネルギッシュ
・強いインパクト
・興奮
・怒り
・心拍数を高める色
・情熱
・情熱
・勝利
・警告
赤はエネルルギッシュさがあり、ポジティブな印象を与えます。
海外の祝い事の場面ではレッドカーペットが使われていますが、成功者や勝者を表す色です。
販売においてはセール品のイメージが強く、購買意欲を向上させる効果もあります。
逆に赤の与えるネガティブな印象としては、赤信号で使って警戒を表したり、興奮する印象から暴力的なイメージにも結びつきます。
青(寒色)
・信頼
・安全
・安心
・知的
・誠実
・理性
・清潔感
・寒さ
青が与える印象は、寒さ、水や空のような自然を表します。
涼しい印象を与えるので、夏に使うことで爽やかな清涼感を演出しますし、また冬では氷や寒さを連想させます。
黄色(暖色)
・明るい
・楽観的
・快活
・希望
・陽気
・若々しい
・幸福
・利益
・注意
黄色は明るい印象が強く、希望や幸福を表す色としてよく使われます。
軽快さを感じる色なので、同じ有彩色の赤や青と組み合わせてキッズ用のサイトや商品に多く使われています。
ネガティブなイメージとしては、注意というのも表すように、踏切や工事現場のコーンのように黄色と黒の組み合わせで注意を促したりもします。
オレンジ(暖色)
・元気
・親しみ
・楽しい
・活発
・活動的
・喜び
・暖かい
・家庭的
・安価
ポジティブな印象なので、コミュニケーションやエンターテイメントな業種の企業に適しています。
ECサイトで買い物するときの「購入する」ボタンの色にもよく使われていますし、この色が最もクリックしてもらいやすい色だと言えます。
ただ、ポップでカジュアルな印象が強い反面、安っぽさや大衆的というイメージを与えることもあります。
緑(中性色)
・健康
・リラックス
・安らぎ
・穏やか
・自然
・調和
ナチュラルさを出したいときや、青よりももう少し親しみのある感じの企業サイトを作りたいときにも使われる色です。
緑に関しては、ネガティブな印象はほとんどないように思われますが、中性色なので、強いインパクトは感じにくいようです。
紫(中性色)
・神秘的
・高貴
・優雅
・不安
・癒し
・宇宙
・嫉妬
・下品
紫は、赤と青を混ぜ合わせた中性色で、暖色と寒色という相反した印象を持ち合わせています。
高貴なイメージも与えますが、ときには不良や水商売など、正反対のイメージも持ち合わせています。
日本では古い歴史から地位の高さを象徴する色として使われていたので、高貴な印象が強く、着物の色に使われることも多いです。
また、ヨガのイメージもあって、ヨガのWebサイトなどでは紫色がよく使われています。
黒(無彩色)
・神秘
・威厳
・高級
・極限
・自信
・高級感
・男性
・恐怖
・死
男性が持っている威厳も感じるし、都会的で洗練された印象も持ち合わせています。
ネガティブな印象としては、お葬式などで使われている色で、闇や死のイメージも持っています。
白(無彩色)
・清潔
・純粋
・神聖
・新しい
ネガティブな印象としては白色だけだと殺風景な印象になりかねないところです。
グレー(無彩色)
・落ち着き
・穏やか
・信頼
・上品
・安定
・迷い
・不安
・曖昧
・過去
グレーは白と黒の中間色なので、曖昧で主張が弱いのですが、どの色とも相性がいい色です。
Webサイトのベースカラーとして、他の色を際立たせることができて、上品な仕上がりになります。
ネガティブな印象もありはしますが、それ以上に高級感やスマートさを感じることができる色でもあります。
配色を選ぶのに良いおすすめのサイト

>>【2021年版】もう配色デザインには迷わない!すごい無料カラーパレットツール83個まとめ

Webデザインで配色をする際に注意すること

まとめ

・Webデザインを作るときのカラーの効果
・Webデザインでカラーを効果的に使う3つの方法
・デザインのイメージに合ったトーンを選ぼう
・ビビット(vivid)
・ブライト(bright)
・ディープ(deep)
・ライト(light)
・ダーク(dark)
・デザインの配色の基本カラーを決めよう
・ベースカラー ⇨ 70%
・メインカラー ⇨ 25%
・アクセントカラー ⇨ 5%
・カラーの特性を利用しながら使おう
・主な色の印象
・赤(暖色)
・青(寒色)
・オレンジ(暖色)
・黄色(暖色)
・緑(中性色)
・紫(中性色)
・黒(無彩色)
・白(無彩色)
・グレー(無彩色)
・配色を選ぶのに良いおすすめのサイト
・Webデザインで配色をする際に注意すること
私たちは頑張るあなたを応援しています。