Webデザインの印象を左右!カラーの基本知識と便利な配色ツールとは

この記事は次のような方のために書きました。

この記事を読んでもらったら、カラーについての基本的なことから知ることができて、Webデザインを作るときに、適した配色を作れるようになります。

どうぞ最後までご覧になってください。

Webデザインを作るときのカラーの効果

普段は意識していないようでも、私たちは勝手に色とイメージを組み合わせて判断しています。

Webデザインでカラーを効果的に使う3つの方法

デザインのイメージに合ったトーンを選ぼう

デジカメやスマートフォンで撮った写真の色味を加工したりする時、色をはっきりとビビッドにしたものは、彩度が高くなります。

そして、肌の色などを白く際立たせる場合は、明度を高くします。

人が色を見て感じるのは、ただ単純な色の組み合わせだけではなく、「トーン」が大きな作用を起こしていると言えます。

トーンには次の5種類があります。

ビビッド（vivid)

ビビッドは、5種類のトーンの中でも最も彩度が高く、純色の色調です。

鮮やかで派手な印象を見る人に与えます。

ブライト（bright）

ブライトは、ビビッドよりも少し明度が高く、彩度を落とした色調です。

ビビッドほどは力強い印象ではないですが、健康的だったり、華やかなイメージを見る人に与えます。

ディープ（deep）

ディープは、ビビッドよりも明度と彩度を少し落とし、ブラックの色味を加えています。

落ち着いていて上品な印象で、シーズカラーでいうと秋や冬のイメージです。

深みがある配色であり、和の演出をするときに使われるトーンです。

ライト（light）

ライトは、ブライトから彩度を落として明度を上げて白が混ざった色味で、パステルカラーと言われるものです。

春や夏のイメージで女性的なので、男性向けのWebデザインには向いていない配色です。

ダーク（dark）

ダークは、ビビッドに黒を多く混ぜてできた、澄んだ調子の暗いトーンです。

格式が高い感じで、大人っぽく落ち着いた印象を与えます。

デザインの配色の基本カラーを決めよう

私たちがデザインをするときには、カラーの配色を考えることは欠かせません。

配色は見る人に与える印象や対象を大きく左右し、センスも知識も必要な大変な作用です。

カラーには人それぞれに好みがあるかもしれませんが、基本的な配色のルールを頭に入れておくことで、効率よく作ることができます。

これ以上の配色もできますが、色が増えるほど扱いが難しくなります。

まずはこの基本の3色を組み合わせることで、全体的にバランスが取れますし、綺麗な配色を作ることができます。

ベースカラー　⇨　70％

ベースカラーは、余白や背景などに用いることが多い色で、メインカラーとアクセントカラーを引き立てる脇役的なカラーです。

ベースカラーの配分は70％で、3つのカラーの中でも最も大きな比率になります。

白やライトグレーなどの明度が高い濁色を使うことが多いです。

メインカラー⇨　25％

メインカラーは全体の25％ではありますが、Webサイトの印象を決定する主役の色なので、基本的に最初に決めます。

見出しやキャッチコピーなど、ユーザーの目に入りやすい部分に使用するのがメインカラーの特徴です。

また、Webサイトに使用するロゴの色をメインカラーに使うことで統一感が出るので、おすすめです。

アクセントカラー　⇨　5％

アクセントカラーは、少ない比率でありながら、最も目立つ色で、ユーザーの目を引く役割もあります。

メインカラーの反対色を使うことで、鮮やかさが引き立ちます。

単調なトーンにアクセントをつけてメリハリを表現する時などに使うと良いです。

そして、注目させたいコンテンツに使うことでその効果を発揮します。

カラーの特性を利用しながら使おう

カラーは次の4つに分類できます。

暖色はポジティブなイメージでインパクトも強いので、他の色と比べて進出して見える特性があります。

寒色は逆に資格に与える刺激が少なくて後退して見えますが、落ち着いた印象を与えるおで、長い時間見ていても疲れにくいという効果もあります。

中性色は暖色や寒色のような温度を感じない色で、赤と青を混ぜ合わせた紫色などがその色です。

無彩色は、白や黒、灰色が属していて、無機質な印象を見る人に与えます。

色彩がないので、他の色との組み合わせに向いています。

主な色の印象

赤（暖色）

赤はエネルルギッシュさがあり、ポジティブな印象を与えます。

海外の祝い事の場面ではレッドカーペットが使われていますが、成功者や勝者を表す色です。

販売においてはセール品のイメージが強く、購買意欲を向上させる効果もあります。

逆に赤の与えるネガティブな印象としては、赤信号で使って警戒を表したり、興奮する印象から暴力的なイメージにも結びつきます。

青（寒色）

青が与える印象は、寒さ、水や空のような自然を表します。

涼しい印象を与えるので、夏に使うことで爽やかな清涼感を演出しますし、また冬では氷や寒さを連想させます。

黄色（暖色）

黄色は明るい印象が強く、希望や幸福を表す色としてよく使われます。

軽快さを感じる色なので、同じ有彩色の赤や青と組み合わせてキッズ用のサイトや商品に多く使われています。

ネガティブなイメージとしては、注意というのも表すように、踏切や工事現場のコーンのように黄色と黒の組み合わせで注意を促したりもします。

オレンジ（暖色）

ポジティブな印象なので、コミュニケーションやエンターテイメントな業種の企業に適しています。

ECサイトで買い物するときの「購入する」ボタンの色にもよく使われていますし、この色が最もクリックしてもらいやすい色だと言えます。

ただ、ポップでカジュアルな印象が強い反面、安っぽさや大衆的というイメージを与えることもあります。

緑（中性色）

ナチュラルさを出したいときや、青よりももう少し親しみのある感じの企業サイトを作りたいときにも使われる色です。

緑に関しては、ネガティブな印象はほとんどないように思われますが、中性色なので、強いインパクトは感じにくいようです。

紫（中性色）

紫は、赤と青を混ぜ合わせた中性色で、暖色と寒色という相反した印象を持ち合わせています。

高貴なイメージも与えますが、ときには不良や水商売など、正反対のイメージも持ち合わせています。

日本では古い歴史から地位の高さを象徴する色として使われていたので、高貴な印象が強く、着物の色に使われることも多いです。

また、ヨガのイメージもあって、ヨガのWebサイトなどでは紫色がよく使われています。

黒（無彩色）

男性が持っている威厳も感じるし、都会的で洗練された印象も持ち合わせています。

ネガティブな印象としては、お葬式などで使われている色で、闇や死のイメージも持っています。

白（無彩色）

ネガティブな印象としては白色だけだと殺風景な印象になりかねないところです。

グレー（無彩色）

グレーは白と黒の中間色なので、曖昧で主張が弱いのですが、どの色とも相性がいい色です。

Webサイトのベースカラーとして、他の色を際立たせることができて、上品な仕上がりになります。

ネガティブな印象もありはしますが、それ以上に高級感やスマートさを感じることができる色でもあります。

配色を選ぶのに良いおすすめのサイト

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

グラフィックデザインの配色の選び方や考え方について便利ツールも紹介この記事はこんな人に向けて書いています。 ・デザインをしたいんだけれど、どんな色使いにしようか迷ってしまう ・自分で選ん...

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

>>ウェブサイトの配色で気を付けたい9つのこと

まとめ

私たちは頑張るあなたを応援しています。