デザイン
【Webデザイン初心者必見！】効果的な色の選び方・色が与える心理的効果を解説！
2023年09月29日 13:00 2023年10月01日
はじめまして！Webデザイナーのhrです。
9月も終わりに近づいてきました。
気温もだいぶ下がり、秋の気配を感じる今日この頃ですが、皆様いかがお過ごしでしょうか。
Webデザインを制作するとき色選びに悩む人も多いのではないでしょうか？
私もWebデザインをするとき色選びに悩むことがあります…
今回は、Webデザイン初心者の方々に向けてWebデザインの色の選び方・色が与える心理的効果と各色の特徴を活用したWebサイトをご紹介します。
もくじ
色の配色比率「70:25:5の法則」を意識
Webデザインでは、使用する基本的な色数は3色程度に制限するとまとまりがでやすいです。
相性の良い色を組み合わせても、色の配分がおかしかったり、たくさんの色を使用するとデザイン自体がまとまりのない印象を与えることになります。
基本カラー3色を「70%：25%：5%」の比率にして配色することでバランスの取れた美しい配色になります。
最も大きな面積を占める色を「ベースカラー（70%）」、ブランドや企業のロゴなどのイメージカラーなどWebサイトの中心になる色を「メインカラー（25%）」、画面にアクセントを持たせるための色を「アクセントカラー（5%）」と呼びます。
ベースカラー・メインカラー・アクセントカラーの役割
ベースカラーの役割
ベースカラーはWebサイトの中で最も大きな面積を占める色になります。
「背景」や「余白」に用いることが多く、メインカラーやアクセントカラーを邪魔しないような色を選びましょう！
文字が読みやすい白や薄い色が使われることが多いです。
メインカラーの役割
メインカラーはその名の通り、主役となりWebサイトのイメージカラーになる色です。
ブランドや企業のロゴ、コーポレートカラーなどのイメージカラーから選びます。
企業イメージや商品イメージとWebサイトの印象が大きく異ならないようにメインカラーを選ぶことをおすすめします。
アクセントカラーの役割
アクセントカラーは、ファッションでいう「差し色」です。
メインカラーとベースカラーだけでは単調になってしまうため、ワンポイントやメリハリをつけるために使用します。
ベースカラーやメインカラーと比べて使用する色の面積が少ないので、色合いが強かったとしても問題ありません。
色の面積は小さいですが最も目を引く色になるので、、目立たせたいボタンなどに使用すると良いです。
色が与える心理的効果
色には、心理的な効果と特有なイメージがあります。
生まれた国や文化、環境によって異なりますが、見る人の感覚・感情や印象を大きく左右する力を持っています。
今回は、一般的な色のイメージを紹介します。
赤
イメージ：情熱、熱い、おめでたい、興奮、怒り、禁止、警告、刺激・愛など
赤は目を引く色でもあるので目立たせたいときに使うと効果的です。
商売において購買意欲を高める効果をもたらせる色と言われているので、Webサイトのボタンなどで赤を使用します。
ピンク
イメージ：可愛らしさ、優しい、若さ、やわらかさ、⼥性らしさ、恋など
ピンクは赤と白を混ぜることで柔らかい色になります。
桜の色でもありますので、春の旬の食べ物、新生活、入学に関連するWebサイトでよく使われています。
黄色
イメージ：明るい、活発、好奇心、幸福、希望、注⽬、警告、⼦供らしさ、ポップなど
黄色は他の色に比べて明るい色なので活発な印象を与えます。
黄色背景に白文字は見えないため黒など暗めの色と一緒に使うのがおすすめ！
オレンジ
イメージ：にぎやか、家庭、楽しさ、自由、暖かい、好奇心、親しみなど
オレンジは温かくて、解放感を与えて、楽しい気分にさせる色です。
採用サイトで使用した場合は職場の明るくフレンドリーな印象を与えます。
また、食欲を増進させる効果があり、食べ物や料理に関連するサイトによく使われます。
緑
イメージ：⾃然、環境、健康、平和、安らぎ、安⼼感、癒し、リラックスなど
緑は木や草の色なので自然と関わりのあるサイトに使われていることが多いです。
また、 コーポレートサイトにも使われていることが多いです。
青
イメージ：安⼼感、信頼性、落ち着き、静寂、知性、冷静、冷たい、理論的、クリア、爽やか、清潔、水、空、海、など
青は安心感、信頼感のイメージを与えるの企業のロゴやコーポレートサイトによく使われています。
紫
イメージ：高級、上品、ロマンス、幻想的、知性、洗練、創造性など
紫は日本では位の高い色として使われてきました。
配色によっては、高級感や上品なイメージを与えるサイトになります。
茶⾊
イメージ：⼤地、温もり、実⽤性、歴史、安定感、落ち着き、静けさ、素朴など
茶色は土や木を連想させ、自然や温かみのある印象を与えます。
木の特長のである落ち着きや温もりが色と共通しています。
ナチュラルな雰囲気サイトにしたいときに使われています。
黒
イメージ：高級、豪華、洗練、力強さ、都会的、気品、優雅など
黒は有彩色をもっとも引き立たせる色です。
黒は暗いイメージが強いですが、使い方次第で洗練されたデザインになります。
白がものを軽く見せる効果があるのと反対に、黒はものを重く見せる効果もあります。
白
イメージ：清潔、クリーン、純粋、神聖、シンプルなど
白は他の色と喧嘩することなく引き立ててくれるため、使用頻度も高めの色になります。
また清潔感を感じさせ、余白を広く明るく見せる効果もあります。
ウェディングや医療関係のWebサイトでよく使われています。
各色の特徴を活用したWebサイトを紹介
ここまでは、色が与える心理的な効果と特有なイメージについて解説しました。
次に、実際に各色の特徴を活用したWebサイトを紹介していきます。
赤を基調にしたWebサイト
名古屋グランパス
名古屋グランパスのチームカラーである赤を基調とし、情熱や勝利の赤といったイメージを感じさせるサイトです。
情熱や勝利をアピールしたいときにおすすめの色ですが、色の組み合わせや配色を間違えるとごちゃごちゃしたWebサイトになってしまうので注意しましょう。
ピンクを基調としたWebサイト
BOTANIST|SPRINGシリーズ Bloom Your Memory
https://botanistofficial.com/special/limited/spring/
全面ピンクで桜香るように繊細なデザインになっております。
女性向け商品のサイトによく使われる色です。
黄色を基調としたWebサイト
魚動クライミングジム
黄色の明るくて元気、ポジティブさを感じるデザインです。
三角のパターンが入ったイエローがとても鮮やかですね。
オレンジを基調としたWebサイト
横井チョコレート株式会社
オレンジを基調としたチョコレートのサイト。
暖色が食欲をそそる、親しみのあるデザインになっています。
親しみやすいオレンジとスタイリッシュなグレーの配色によりブランドの個性を伝えています。
緑を基調としたWebサイト
株式会社 広島千茶荘
https://www.senchasou.co.jp/html/
株式会社 広島千茶荘のサイト。
抹茶のような緑が「和」と「茶」のイメージを与え、同時に安心感とリラックス感を高めます。
青を基調としたWebサイト
ジェイエムシー 株式会社
ジェイエムシー 株式会社のサイトは、明るい青色で爽やかさを際立たせたデザイン。
また青のグラデーションに清潔感や誠実さが表れており、製品や企業への信頼感を高めています。
紫を基調としたWebサイト
立教大学
大学のイメージカラーの深い紫をメインに配色したデザイン。
紫といっても深い紫で、重厚な雰囲気から立教大学の伝統が伝わってきます。
茶色を基調としたWebサイト
高浜市かわら美術館
https://www.takahama-kawara-museum.com/
茶色の特徴の温もりや親近感が湧くサイト。
ベージュと茶色を基調とした配色は温かみや親近感があり、画面越しにも優しさの印象を受けます。
黒を基調としたWebサイト
Cellato
黒をベースカラーに置き、赤の差し色が特徴的な上品で高級感のあるサイト。
扇子をイメージさせる画像の現れ方が日本の和を演出しています。
白を基調としたWebサイト
灸PLUS
白を基調にすっきりとしたレイアウトや余白により清潔感のあるデザインとなっています。
古臭さを感じさせない、現代のお灸にマッチしたデザインで若い世代にも魅力的です。
まとめ
いかがだったでしょうか。
色の選び方、色が与えるイメージ、色を特徴的に使ったサイトをご紹介しました。
配色がうまくなるために色が与えるイメージや意味をしっかり理解することです。
そして何より実際に色を組み合わせてどれがよいかよくないか確かめてみることが大切です。
最後までお読みいただき、ありがとうございました。
関連記事
この記事を書いた人
hara
