Web制作としての色を考えてみる

Webデザインで使う色の基本原則

「３つのカラー」
Webサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。

ベースカラー
最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。

メインカラー
その名の通りサイトの印象を決定づける主役の色です。

アクセントカラー
全体の5％と少ない使用量ながら一番目立つ色で、全体を引き締める、ユーザーの目を引く役割があります。

色を決める順番としてはメインカラー、ベースカラー、アクセントカラーの順番で決めていきます。

メインカラーの決め方
サイトイメージを大きく左右するメインカラーは一番初めに決めます。 メインカラーの傾向は、文字が読みやすいなどの可読性の問題から、明度を低くした色が使用しやすいとされています。また、サイトに使うロゴのカラーをメインカラーに使用しているサイトも多く見かけますね。使用する色を決める基準としては、ターゲットイメージに合わせた色を探す必要があるので、色の印象を把握しながら決めると良いと思います。

ベースカラーの決め方
メインカラーの次は70％の面積を占めるベースカラーを決めていきましょう。 このカラーは主にサイトの背景色となる色です。白、黒、グレーの無彩色カラーは他のメイン・アクセントカラーの色の妨げになりにくいので、よく使われている色かと思います。
ベースカラーは、文字間、コンテンツ間の余白などにも使われることが多いので、明度の高い色、淡い色を意識して使ってみるとしっくり収まります。

アクセントカラーの決め方
単調なトーンにメリハリをつけたい時などに使う色です。全体に占める面積の割合は一番小さく、最も目立つ色となることが理想です。
アクセント色はお問い合わせフォームのボタン色に使用すると効果絶大ですね！色は1色使いでなくてもいいのですが、色が増えるほど扱うのは難しくなります。「賑やか」「楽しい」といったサイトイメージを表現したい場合には多色使いが有効です。

色の持つ意味、イメージ

Web制作をする際に、色の使い方として覚えておくべきことは、その色の持つ意味を理解することから始めると良いと思います。

メジャーな企業様のロゴを見ながら色が持つ意味、色のイメージを見ていきましょう。（企業のイメージカラーに関しては個人的な見解です）

赤色（暖色）

赤色と聞いて思い浮かぶイメージで代表的なコカ・コーラさんのロゴ。　　赤色のイメージは”情熱的で意欲的”です。

赤色が持つ効果

・アドレナリンの分泌が盛んになり、元気にさせる効果がある

・自己主張を増加させる

・心拍数を上げ、食欲増進させる

赤色のイメージ

・女性的、華やか、情熱、行動力、祝い、生命力、生きる、リーダーシップ

主張が強い色なので、メインカラーとして使うとかなりインパクトがありますので、使いどころは難しい色かもしれません。アクセントカラーとして使う場面の方が多いかもしれませんね。

橙色（暖色）

橙色と聞いて思い浮かぶイメージはコメダ珈琲さんのロゴですね。　　　　橙色のイメージは”陽気、親しみやすさ”です。

橙色の持つ意味

・気持ちが明るくなり、前向きな気持ちにさせる

・健康的で躍動感、賑やかさを感じさせる

・人に好かれ、新しい出会いを運ぶ、人間関係をスムーズにさせる

橙色のイメージ

・活気、明るい、親しみ、暖かい、健康、庶民的

赤色ほど主張が強くなく暖かい感じで、メインカラーとしてもアクセントカラーとしても重宝する色だと思います。ボタンなどに橙色を配置すると、押されやすいとも言われています。

黄色（暖色）

黄色と聞いて思い浮かぶイメージはイエローハットさんのロゴですね。　　黄色のイメージは”脳を刺激して明るい気持ちに”です。

黄色の持つ意味

・注意力を高める

・気分が明るくなる

・重たく見えない

黄色のイメージ

・希望、幸福、明るい、賑やか、知恵、かわいい、未来、楽天的

赤色と並んで主張が強い色で、注意を促す感じで使われていることが多いです。また、幸せな雰囲気も出るので、とても明るい感じになります。

茶色（暖色）

茶色と聞いて思い浮かぶイメージはSeriaさんのロゴでしょうか。　　　　　茶色のイメージは”落ち着いた印象とリラックス効果”です。

茶色の持つ意味

・安心感と心の安定をもたらし、怖れやストレスを軽減します

・土、大地、樹木の色で、ナチュラルで自然をイメージする癒しの効果

茶色のイメージ

・安定、安心、生命の根源、リラックス、自然、落ち着き、堅実

茶色は他の色を邪魔することが少なく、イメージの通り落ち着いた印象を与えます。メインカラーとして使用しても、アクセントカラーとして使用してもインパクトが少ない分、使いやすい色ではないでしょうか。

桃色（暖色）

桃色と聞いて思い浮かぶイメージはゼクシィさんですね。　　　　　　　　桃色のイメージは”若くて可愛い女性的な印象”です。

桃色の持つ意味

・優しい気持ちにさせる

・若くて可愛く女性的な印象を与える

桃色のイメージ

・かわいい、女性的、若い、幸福、やさしい、ロマンティック、メルヘンチック

桃色は女性的な要素が強いので、使い方は限定されていますが、ピンポイントで女性をターゲットとしたサイトなどには最適ではないでしょうか。

緑色（中性色）

緑色と聞いて思い浮かぶイメージはスターバックスさんですね。　　　　　緑色のイメージは”リラックスと安心感”です。

緑色の持つ意味

・リラックスの作用があり、安心感を感じられる

・目の疲れを安らげる。（アイレストグリーン）

・頭の回転や記憶を活性化させます

緑色のイメージ

・自然、安らぎ、安全、健康、平和、平等、新鮮、調和、おいしさ、堅実

緑色は自然、安心感、リラックスと企業イメージとして考えると、職種を問わず使いやすい色なので、メインカラーとして、とても使いやすい色ではないでしょうか。

青色（寒色）

青色と聞いて思い浮かぶイメージはLAWSONさんですね。青色のイメージは”リラックス効果と集中力の促進”です。

青色の持つ意味

・血圧を下げ、食欲を減退させる

・リラックス効果と集中力が生まれる

・発汗を抑える効果がある

青色のイメージ

・知的、誠実、男性的、さわやか、涼しさ、几帳面、成功、活発、沈着冷静、信頼、常識的

青色は爽やかで誠実なな印象が強いので、クリーンなイメージを与えるので多くの企業さんが使っています。

黒色（無彩色）

黒色と聞いて思い浮かぶイメージはAppleさんでしょうか。　　　　　　　黒色のイメージは”高級感があり気持ちを引き締める”です。

黒色の持つ意味

・重要な気持ち、適度な重さを感じる

・気持ちを落ち着かせ、引き締める

黒色のイメージ

・重厚、格調高い、都会的、上品、歴史、威厳、高級、神秘、力強さ、リッチ

黒色は何色にも染まらない唯一の色で最も使用頻度が多い色です。基本的にテキストなどで使うことが多いと思いますが、ベースカラーとして使うことでガラリと印象が変わるので強い色といえるでしょう。

最後に

それぞれ色が持つ意味、色のイメージはおおよそ理解して頂けたかと思いますが、配色パターンの「3つのカラー」さえカッチリと決めてしまえば、制作するサイトでの色使いには困ることもなく、サイト全体に統一感も出て一石二鳥です。
逆に配色パターンを決めずに制作を始めると、統一感がなくなりごちゃごちゃとして見にくいサイトとなり、迷走してしまいます。

最近のトレンドとしては、写真や動画をメインにしたシンプルなデザインが主流になっているので、ベースカラーは白、メインカラーは黒とシンプルな感じで、アクセントカラーに元々の企業カラーになるカラーを使うパターンもオシャレな感じですね。

以上、色についてでしたが少しはお役に立てたでしょうか？