デザイン Nao

売れるWebサイトの色を選ぶコツと色の持つ意味

こんにちは！世界をめぐるWebクリエイターNao（@nao_tips）です。
自身の体験を元にWeb＆デザイン、海外生活などについての情報を発信しています。
初めての方はぜひプロフィールもご覧ください。

◇◇◇

さてみなさん、ブログやサイト、その他何かを作るとき、どうやって色を決めていますか？
何となく好きな色だから？たまたま気になったから？

今回はサイトの色を選ぶときに迷わず選べるようになる色選びと色の知識をご紹介します！

色選びを間違えるといいものも売れない！

先日旦那さんと買い物に行っていた時のこと。

そろそろシャンプーが切れるので色とりどりのシャンプーコーナーを見ていたら旦那さんがこんなシャンプーを差し出してきました。

▼黒いボトルのシャンプー

「あ、これ、男性用だよね？○○（旦那さんの名前）はこれにするの？」

「これ女性用だよ。」

「うそだーこの色、どう見ても男性用でしょ〜。（説明読む）ほんとだ。男性用って書いてない。ってかこのブランドのシャンプー、色々あるけど全部黒じゃん。笑」

▼こんな感じ。ずらり。

正直差し出されるまで全く目に入っておらず、差し出されてからも「なんかこれ私のじゃない」感があって結局買うに至りませんでした。

この色で女性用ってなんかなー。違うなー。全然自分のためのものに感じられないなー。

と思ってしまったんです。

ちなみにこの黒いシャンプーのデザインに補足をしておくと、「高級感」「スタイリッシュ感」「ランウェイ感」を出したかったのでこの色にしているんだと思います。
しかしやっぱり、、、高級感やスタイリッシュ感出すにしても、女性の日用品に黒かつこのデザインはどうよ？と思っちゃった。
イギリスでは有名なメーカーらしいんだけどね。

このように、サービスや商品と全く結びつかず、お客様（ユーザー）の期待しているものではない色を選んでしまうと、それだけで売れる機会を減らしてしまうことになります。

売れるサイトにするための正しい色選びの手順

ということで、サイトや商品などの色を選ぶときにはきちんと正しい理屈で色を選ぶ必要があります。

結論から言ってしまうと、サイトの色を選ぶときは下記のような基準で選んでください。

  • まず「範囲外」「アウトオブ眼中」になる色を避ける

次に、色の持つ印象から下記の3点を考慮して決める。

  • お客様がサービスに期待するイメージの色
  • 自分のビジネスの特徴に合う色
  • 自分が印象付けたい色、サービスを受けた後の未来の状態をイメージさせる色

詳しく説明していきます。

まず「範囲外」「アウトオブ眼中」になる色を避ける

まず、「範囲外」「アウトオブ眼中」になる色を避ける、とはどういうことかを説明します。

先ほど挙げた例でいうと、

「女性である私が、シャンプーを買う際に、シャンプーのボトルが黒だったため、無意識のうちに男性用と思い込み、購入対象から外していた」

ということでした。

この例が表すように、人はそれが自分に関係あると思えない限り、実際そこに存在していても目に入りません。

以前スーパーで新しい世界を見れるワークでお伝えしたのと同じことですね。
自分が意識していないものはたとえそこにあっても気づきません。

なので、売りたい相手が「自分のためのものだ」と感じるような色使いが重要になってきます。

例えば、男性に売りたい「髭剃りグッズ」という商品が淡い優しいピンクだったら、多分ぱっと見で髭剃りって気づいてもらえません。

この例はあからさますぎですが、

例えば「優しいふんわりした女性にクッキー作りを教えるサロンの集客がしたい」と思った時に、

「人気って言われてるから」というだけで青を基調としたビジネステンプレートなどを使ってしまうと、

来てほしいはずの「優しいふんわりした女性」はそのサイトが自分に関係があると感じられず、

すぐさまページを閉じてしまったり、そもそもページに気づかなかったりしてしまうのです。

こう聞くとうっかりやっちゃうシーンありそうでしょ？！

このようにまず第一歩として最低限「来てほしいお客様（ターゲット）」の興味の範囲に入る色を選ばないといけません。

正確にいうと色だけの話ではなく、パーツや文字などのデザイン全体でお客様の興味を引く形になっていないといけないのですが、サイト全体の色はかなり印象を決めるものですし、これからブログを始めるといった方には話がシンプルな方がわかりやすいので、ここでは色についてだけお話ししています。

「直感」や「自分が好きだから」という理由で色を決める前に、

「この色はお客様が好きな色かな？」

「この色はお客様が自分のサービスに期待しているイメージかな？」

と考えてみましょう。

色の持つ印象を知ろう

「そんなこと言われても、、、お客様の好きな色や期待している色なんてわからない」

とお考えの方もいるかもしれません。

これは各々のサービス内容やターゲット層によって変わってくるので、「○○には××！」と一言で言えるものではないのですが、

大まかな傾向として、それぞれの色から連想するイメージというものがあります。

またそのイメージと結びつきやすい業種やカテゴリも自ずと決まってくるため、業種ごとにある程度、使われやすい色があったりします。

今回は色の持つ意味とその色が使われやすい業種やカテゴリを、リンクとキャプチャを出しながら解説します。

それぞれの色が持つ印象、意味

赤色の持つ印象・意味

≪赤色の持つ印象・意味≫
熱い、熱血、熱烈、情熱、強さ、攻撃的、破壊、激しさ、興奮、危険、好戦的、血、生命力、行動力、衝動、安い、セール、祝い、華やか

「赤」は炎や血の色を連想させますね。
そこから派生して上記のようなイメージを与えます。

WEBサイトで赤がよく使われているものは下記です。

オレンジ色の持つ印象・意味

≪オレンジ色の持つ印象・意味≫
暖かい、団らん、和合、円満、恵み、親しみやすい、明るい、庶民的、にこやか、フレンドリー、包容力がある、健康、幸せ、活気、家庭

「オレンジ」は太陽の色です。恵みの色です。
そこから派生して上記のようなイメージを与えます。

WEBサイトでオレンジがよく使われているのは下記です。

黄色の持つ印象・意味

≪黄色の持つ印象・意味≫
危険、注意、警戒、目立つ、中性、若い、未熟、にぎやか、うるさい、カジュアル、軽い、希望、明るい、未来、他とは違う、好奇心

「黄色」は明度が高く、遠くにいても目に飛び込んできやすい色です。
注意を引く箇所などに使われています。

ベースが他の色でもワンポイントで黄色がアクセントになっていたりすることも多いです。

「黄色」がよく使われているWEBサイトは下記です。

緑色の持つ印象・意味

≪緑色の持つ印象・意味≫
自然、森、山、ナチュラル、環境、田舎、リラックス、癒し、暮らし、安心感、やすらぎ、健康、平和、調和、バランス、協調、公平、安全

「緑」は山や森などの木の色を連想させますね。
そこから派生して、自然やナチュラル感、癒しをイメージさせます。

緑がよく使われているWEBサイトは下記です。

青色の持つ印象・意味

≪青色の持つ印象・意味≫
海、空、水、清凉感、清潔感、信頼感、冷静、静か、平和、安全、ビジネス、クール、堅実、誠実、論理的、爽やか、知的、保守的

「青」は空や海などの大自然、冷たい水の静けさを連想させますね。
そこから派生して、冷静さや清凉感、をイメージさせます。

青がよく使われているWEBサイトは下記のようなジャンルです。

紫色の持つ印象・意味

≪紫色の持つ印象・意味≫
神秘的、伝統、高貴、崇高、優雅、上品、セクシー、妖艶、女性的、感覚、美意識、癒し、嫉妬、不安定、精神、宇宙、霊的、非現実的

「紫」は古の時代は色を作るのが難しく王侯貴族や神官など身分の高い人しか使えなかったという歴史のある色です。
女性のセクシーさ、妖艶さなども表します。
そこから今でも高級さや神秘的な印象を与えます。

紫がよく使われているWEBサイトは下記のようなジャンルです。

ピンク色の持つ印象・意味

≪ピンク色の持つ印象・意味≫
柔らかい、優しい、赤ちゃん、若い、女性的、可愛い、愛らしい、愛情、弱い、幸せ、やすらぎ、甘い、春、心

「ピンク」は生まれたての赤ちゃんの肌のような柔らかや、
守られないと生きていけない弱々しいイメージを連想させます。
そのまま柔らかさ、優しさ、弱さなどを象徴し、転じて守られたい女性が比較的好む色でもあります。

ピンクがよく使われているWEBサイトは下記のようなジャンルです。

白色の持つ印象・意味

≪白色の持つ印象・意味≫
純粋、清潔、潔癖、誠実、真実、正しい、無、勝ち、善

「白」は色がないことを表す色です。
白いキャンバスはまだ何にも染まっていない状態。
白いシャツは洗濯後のまっさらのように綺麗で清潔な状態をイメージさせますね。
そのように白は純粋さや清潔感、無を表現します。

白がよく使われているサイトは、、、ほぼ全部です。笑
というのも白は地の色として使われているからです。
白地にクロモジは紙に書かれた文字と同じ、読みやすさNo.1ですね。
（というかそれが普通と思って色という認識もしないと思います。）

Webサイトの地の色はよっぽどの理由がなければ白がいいです。
色に気を紛らわされず、内容に集中してもらえるからです。

あえて白が似合うジャンルを挙げるとすると下記です。

シンプル、ミニマリスト系は文字通りシンプルかつ必要最小限を目指すので「白」が合います。
デザイン会社や写真家などのクリエイティブ系のサイトは作品集を載せていることが多く、色々な色が作品の中に入ってくることが多いので、土台としての自分たちのサイトカラーは極力ニュートラルな白を選ぶことも多いです。

黒色の持つ印象・意味

≪黒色の持つ印象・意味≫
高級、スタイリッシュ、モダン、威厳、力強さ、重厚、格調高い、威圧感、闇、死、悪、強い、無、暗さ、深さ、負け、男性的、沈黙

「黒」は白と同じく色がない状態ですね。
白が色々な色の光が重なり合って真っ白になった状態だと考えたら、
黒はその逆で色々な色の絵の具を塗り重ねて真っ黒になった状態を表します。
ですので、白の時と同様、ニュートラルなベースにもなりえます。

ただし黒なだけに明るさはゼロですので、使う用途は限られてきます。
叙情的に訴えたい写真家サイトや、暗い印象を与えたい大人向け、夜系、闇系のサイトのベースになっていたりします。

黒はかなり強い印象を持っており、少量でもすごく目を引くので、あまり大分量で使わず、ページ全体を引き締めるようにポイントやラインで使うのが黒をうまく使うコツです。

闇、暗さ、死などのネガティブなイメージもありますが、量を極力減らして使うことで、深さを連想させて高級感やシックさ、スタイリッシュさを出すこともできます。

黒が使われているサイトは下記のようなものです。

金色の持つ印象・意味

≪金色の持つ印象・意味≫
お金、富、繁栄、派手、成功、めでたさ、祭りごと、イベント、高級感、頂点、豪華、輝き

「金色」はそのまま金の色ですね。
金は太古の昔から価値のあるものとして扱われ、富の象徴でもありました。
そこから金色は富や繁栄、成功をイメージさせます。

金色が使われているサイトは以下のようなものです。

銀色の持つ印象・意味

≪銀色の持つ印象・意味≫
スタイリッシュ、金属感、大人っぽさ、洗練、メタル、メカニック、人工的、未来

「銀色」はそのまま銀の色ではありますが、銀に限らず銀色の金属は多く、金属全体をイメージさせます。
金属の輝きは人工的で未来の世界などのイメージにつながります。
また、部品などを連想させることから精密機械なども連想させます。

銀色がよく使われているサイトには以下のようなものがあります。

以上、よく使われている色の持つ意味とよく使われているカテゴリを紹介してみました！

まとめ

最後にもう一度まとめると、サイトの色を選ぶときには次のように選ぶのが良いです。

  • まず「範囲外」「アウトオブ眼中」になる色を避ける

次に、色の持つ印象から下記の3点を考慮して決める。

  • お客様のイメージに合う色、お客様がサービスに期待するイメージの色
  • 自分のビジネスの特徴に合う色
  • 自分が印象付けたい色

それぞれの色とよく使われてるジャンルについては本文を参照してください。

ぜひこちらを参考にあなたのサイトにぴったりの色を選んでみてくださいね☆

以上、Naoでした♪^^

あなたのサービスにぴったりの色を見つけるには、、、

今回紹介したのは色選びの一つにすぎません。

例えば同じ30代女性でもバリキャリ系の女性なのか、子育て中の女性なのか、商品の特性などでも最適な色が変わってきたりします。

自分のサイトやサービスにぴったりの色やデザインがわからないという方は是非ご相談ください☆

代表的なメニューはこちら
・効果が出てセンスも良いオリジナルデザインサイト制作
・アメブロヘッダー制作

提供中のメニューはこちら
※ご予算とご要望に応じてメニューにない内容でも対応します！

シェアしてあなたの考えを聞かせてください

コメントを残す

メールアドレスが公開されることはありません。

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

早稲田大学卒業後、代官山のデザイン事務所にもちこみをしてデザイナーのキャリアをはじめる。その後20代後半でロンドンの美大セントマーチンズに社会人留学。約10年間グラフィック＆Webの仕事を続けており、趣味はネットショッピングというWEB大好き人間。 【主な仕事】 WEBの制作・運営／Nao Creativeの商品企画・制作 提供中のメニューはこちら

NEW POSTこのライターの最新記事