MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

MINWEB[ミンウェブ]

みんな使えるWeb活用術『ミンウェブ』
by株式会社セルリア

フェイスブック

ツイッター

RSS

Webサイトデザインの配色【メイン11色の特性一覧表】

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

サイトデザインを決定する際、配色は一つの重要な要素です。基調色一つでサイトの醸し出す雰囲気やブランドイメージは変わり、隣り合う色の選択一つで使いやすさ・機能性は変わってきます。

本記事では、色ごとの特徴を端的に述べた後その色を基調色としたサイトをあげ、学ぶべき点をしめします。特に気になる色に注力して見て頂ければと思います。

(なお、サイト毎に色を定義していますがあくまでサンプルですのでその点ご了承下さい。)

【赤】Webサイトの配色

赤の特性

赤は生命を具現化する色です。「火」「血」「喜び」「幸せ」「愛」「勇気」などを示す熱い色として、激しい感情を換気させたい場合にも使用される色です。また、非常に誘目性の高い色でもあります。そのため、安全標識などの人の注意を喚起するものに多く利用されています。周りの全ての色を支配できる色の王者とも言える色です。

赤をベースカラーとしたWebサイト例


 ▼ コカ・コーラ社 ブランドサイト <URL>http://www.cocacola.jp/

ベースカラー(赤) コカ・コーラサイト

 


コカ・コーラのブランドサイトはブランドカラーの赤一色です。サイト全体から強烈なインパクトを放っている印象です。コーポレートではなくブランドサイトということもあり文字情報を多数載せる必要はなく、色彩の変化が単調でもユーザーはボタン配置やメッセージ情報に迷いません。それに対し公式コーポレートサイト(http://www.cocacola.co.jp/)はブランドカラーの赤を使いながらも白と黒でしっかり文字情報を伝えています。Webサイトの用途によって、配色を変えるのは非常に重要ですのでとても参考になります。


 ▼ 株式会社LOTTE Webサイト <URL>http://www.lotte.co.jp/

ベースカラー(赤) LOTTE

 


コーポレートの赤を中心に鮮やかな配色で構成されています。アクセントカラーの緑や青はベースカラーが赤の場合目立つ色になります。掲載する商品にも赤が使われいるものが多く、全体が調和しています。

【青】Webサイトの配色

青の特性

青は緑と同様に「空気」や「水」を表す生命の色です。「冷たさ」「誠実さ」「高貴さ」「洗練」といった印象をもちます。さわやかなイメージや誠実なイメージを持つことから多くの企業サイトで使用されています。青を使った配色は非常に人気が高く、誰からも好かれる配色です。そのため、主観的な好みに左右されにくい配色といえます。ただし、「寒色」と呼ばれるように冷たい印象も持っています。

青をベースカラーとしたWebサイト例


▼ SBIホールディングス Webサイト <URL>http://www.sbigroup.co.jp/

ベースカラー(青) SBIホールディングスサイト


濃い目の青をベースカラーとし、色味の強い印象を与えますが、白とグレーを組み合わせることで、くどさを軽減しています。赤はサイト内にほとんど使われていませんが、注意を引きたい箇所のみに配置され存在感がありロゴに使われいる青の要素と赤の要素をうまく組み合わせていると言えます。


▼ NTTグループ Webサイト <URL>http://www.ntt.co.jp/

ベースカラー(青) NTTグループサイト


白との組み合わせにより青の持つ「誠実さ」「洗練」といった印象をより強めています。また、Webサイトの利用ユーザーがグループか持ち株会社どちらの情報を欲しいかに合わせてコンテンツを変えており、それぞれ青と緑で表しています。そうすることに印象をあまり壊さないまま、ひと目で違いを視認できるようになっております。

【黄色】Webサイトの配色

黄色の特性

黄は生命を育む太陽の色であり、春を代表する花の色です。また澄んだ黄色はビタミンを連想させます。「若さ」「元気」「かわいい」「幸福」「ポジティブ」などの連想作用もあります。白以外の色の中で最も明度が高い色で、黒との組み合わせで注意喚起の標識やロープに利用されたりします。サイドの高い黄色は爽やかで前向きな印象を与え、サイドの低い黄色は乳幼児に好まれる色です。

黄色をベースカラーとしたWebサイト例


▼ Lipton Webサイト <URL>http://www.lipton.jp/

ベースカラー(黄色) リプトン サイト


ベースカラーに明度の高い黄色と白を設定することで軽やかな配色を実現しています。また、アクセントカラーを除き、ページ全体の要素を同系色で揃えることで、Liptonのイメージカラーである黄色が引き立つように計算せれていることがわかります。


▼ 株式会社リッチメディア BLOGサイト <URL>http://www.rich.co.jp/blog

ベースカラー(黄色) リッチメディアblogサイト


全体的にサイドの低い色が使われており、レトロでおしゃれな印象を与えます。ベースカラーに黄色以外に緑色の要素も利用しているが色相環で近い色通しで相性がよく、全体に統一感を持たせています。

【緑】Webサイトの配色

緑の特性

緑は生命そのものを表す色です。目の疲れをとってくれる働きもあります。「安心」「平和」「新鮮」「自然」などを連想させます。そのため、アースカラーとして環境保護の問題などを訴える場合に使用されることもあります。青の落着き、黄色の明るさの双方を兼ね備え、落ち着いた印象を与えます。ただし、緑はくどくなる傾向が出やすい色でもあるので、、全面に敷き詰める場合は注意が必要です。

緑をベースカラーとしたWebサイト例


▼  沢井製薬株式会社 Webサイト <URL>http://www.sawai.co.jp/

ベースカラー(緑) 沢井製薬サイト

 


彩度の低い緑と白をベースカラーに設定することで、落ち着きがあり安らぐ印象を演出しています。アクセントカラーに色相の遠いオレンジを使っていますが、主張しすぎない程度に使用頻度を抑えることで、緑をうまく引き立てています。


 ▼ JA東京あおば Webサイト <URL>http://www.ja-tokyoaoba.or.jp/

ベースカラー(緑)JA東京あおばサイト


「緑=野菜」という印象を全面に打ち出した個性的な配色を採用しています。黄色と赤が目を引き、調度良いアクセントになっています。全体的に鮮やかな配色とポップなデザインを、少し彩度低いブラウンで落ち着かせているような印象です。

【橙色・オレンジ】Webサイトの配色

オレンジの特性

オレンジは赤と黄色の混色として存在する色であり、原色ではありません。「親しさ」「明るさ」「陽気さ」「若さ」の色です。大らかで温かい色であり、人をリラックスさせる効果があるため、間接照明としてよく利用される色でもあります。また、果物を連想させる色でもあり、「みずみずしい」「はつらつ」とした印象を人に与えます。ただし、「親しい」、「若い」などの印象は未熟さや安価といったイメージに繋がることも有ります。

オレンジをベースカラーとしたWebサイト例


▼ 株式会社大塚商会 Webサイト <URL>http://www.otsuka-shokai.co.jp/

ベースカラー(オレンジ) 大塚商会サイト


オレンジと白をベースカラーに設定した暖かみのある配色です。大きな文字や優しいタッチのイラスト画像などと相まって、「安心」「親しみ」などを感じるデザインになっています。また、全体にグラデーションを利用することでオレンジの持つ「若さ」「安価」といった印象を和らげています。


▼ ペディグリー ブランドサイト <URL>http://www.pedigree.jp/index.aspx

ベースカラー(オレンジ)ペディグリーサイト


全体にオレンジを敷き詰めて、サブカラーやアクセントカラー含めほとんどが同系色で構成されています。オレンジのもつ、「親しみ安さ」「陽気さ」などを見ている人に上手に与え、ペットの可愛い画像と相まって非常に引き込まれるWebサイトに仕上がっています。

【紫】Webサイトの配色

紫の特性

紫は黄色の補色であり、暗く落ち着いた色です。色の感覚値では黄赤が最も高い興奮度を示し、紫が最も低くなります。これらのことから、紫は「神聖」「正義」「高貴」「妖艶」などの印象を与えます。女性的なイメージを強く持つ特殊な色で、繊細な模様とくみあわせるとひときわ優美でロマンティックな印象になります。一方で、「ミステリアス」「狂気」などの印象になることもあるので注意が必要です。

紫をベースカラーとしたWebサイト例


▼ ガンホーゲームス Webサイト <URL>http://www.gungho.jp/

ベースカラー(紫) ガンホーゲームスサイト

 


ブランドイメージの紫を全面に使った配色です。淡い紫では示しきれない「高貴」や「妖艶」といったイメージをうまく表現しています。明度の低い、濃い紫は扱いが難しい色の1つですが、このサイトでは濃淡のある紫をバランスよく配置することで、上品な雰囲気を醸し出しています。


▼ イオン銀行 Webサイト <URL>http://www.aeonbank.co.jp/

ベースカラー(紫) イオン銀行サイト


コーポレートである彩度の高い紫と淡い紫による配色が美しく繊細な雰囲気を作っています。アクセントカラーとしてオレンジや赤も彩度を合わせて統一感を出しています。適度に見やすさを重視した配色で、デザイン性とユーザビリティをうまく組み合わせている印象です。

【ピンク】Webサイトの配色

ピンクの特性

ピンクはパステルカラーの代表色で、「優しさ」「穏やか」「幸福」などの連想作用があります。私達の心を和ませ、優しさの感情を伝えるイメージカラーです。色味によって表情を変える、とても繊細な色なので、使用方法を間違えるとイメージをうまく相手に伝えることができなくなるという扱いにくい一面も持っています。

ピンクをベースカラーとしたWebサイト例


▼ ゼクシィ Webサイト <URL>http://zexy.net/

ベースカラー(ピンク) ゼクシィサイト


ゼクシィはブライダル系のサイトですが、テーマにぴったりのデザインといえます。ピンクのプラスイメージである「幸福」「優しさ」をサイト全体をフルに使って表現しています。また、紫や黄金色を使って随所に利用しさり気なく高級感も演出しています。


▼ ビューティーラボ Webサイト <URL>http://www.beautylabo.jp/

ベースカラー(ピンク) ビューティーラボサイト

 


こちらのサイトは女性をターゲットにしたサイトで、ピンクを使って「可愛さ」を表現しています。全体に濃淡のあるピンクを設定していますが、この配色で重要なのはサブカラーに薄い青、アクセントカラーで黄色を設定している点です。全てをピンク系統の色にしてしまうと、何を見て欲しいのかメッセージは何なのかわかりににくなってしまうためこういった配慮が必要です。

【茶色・ブラウン】Webサイトの配色

ブラウンの特性

ブラウンは「土」「大地」」「木」を表す色です。全ての生き物、食物連の底辺を支えている大地です。オレンジの明度を低くするとブラウンになることから、オレンジの印象(親しさ、明るさ、陽気さ、若さなど)も併せ持っていますが、明度が低いのでオレンジに比べて重厚感が増します。また、、緑に似た癒しの効果もあり、心理に働きかける配色となります。

ブラウンをベースカラーとしたWebサイト例


▼ TULLY’sコーヒー Webサイト <URL>http://www.tullys.co.jp/

ベースカラー(ブラウン) タリーズコーヒーサイト


サイト全体にコーヒーを連想させるブラウンを配置し、サービスイメージをユーザーに植え付けると同時にレトロで落ち着いた印象を持たせることに成功しているといえます。ベースカラー、サブカラー、アクセントカラーにそれぞれ明度の違うブラウンを利用していますが、白やグレーを適度に配置することでくどさを軽減しています。


▼ 築地住建 Webサイト <URL>http://tukizi.jp/

ベースカラー(ブラウン) 築地住建サイト

 


ベースカラーで使われている薄いブラウンサブカラーで使われている濃い目のブラウン、そしてアクセントカラーの緑が合わさって、「自然」「木目」「森林」といった連想を誘います。ポップな要素と落ち着きのある要素が共存し、おしゃれな雰囲気を演出しています。

【白】Webサイトの配色

白の特性

白は「清純」「気品」「平和」「清潔」を表す色です。どの色とも相性が良く、薄い色と組み合わせると色を引き締め、濃い色と組み合わせるとくどさをやわらげます。例えば、黄色やオレンジなどの明るいイメージを持つ色と組み合わせると明るさが増し、青と組み合わせると青の清潔なイメージがより一層強くなります。

白をベースカラーとしたWebサイト例


▼ 任天堂Wii ブランドサイト <URL>http://www.nintendo.co.jp/wii/

ベースカラー(白) 任天堂Wiiサイト


シンプルな配色から商品に対する「確かな自身」を読み取る事ができます。なお、Webページだけでなく各商品やコーポレートロゴにも白を使用することで企業全体のイメージを印象づけています。「シンプルだけど伝えたいことをきっちり伝えるデザイン」の好例です。


▼ 4℃ Webサイト <URL>http://www.fdcp.co.jp/

ベースカラー(白) 4℃サイト


サイトの大部分を白と青の要素で構成し、「清潔」「気品」「洗練」といったイメージを非常に上手に表現しています。随所に黄金色に近い黄色と薄い紫を散りばめ、高級感を演出しています。

【黒】Webサイトの配色

黒の特性

黒は「力強い」「暗い」「重厚」「争い」などのイメージをもたらす色です。カラフルないろの中に黒を使うと、その色の存在を際立たせながらも、落ち着いた印象をもたせることが可能です。心理的には負のイメージをもつ要素もありますので、配色の際は注意が必要です。

黒をベースカラーとしたWebサイト例


▼ WILLCOME D4 ブランドサイト <URL>http://www.sharp.co.jp/d4/

ベースカラー(黒) WILLCOMD4

 


大部分を占める黒は、WILLCOMED4のプロダクトカラーを示すとともに重厚感、格式高さをしめし、同時に高機能・高級といったプラスのイメージをユーザーに印象付けることに成功しています。ベースカラー以外は明度の高いものを使用し、見やすさも忘れないデザインです。


▼ 資生堂MAQUillAGE ブランドサイト <URL>http://www.shiseido.co.jp/mq/index.html

ベースカラー(紫) イオン銀行サイト


黒と黄金色を合わせて使うことにより、高級感を演出しています。また、ピンク色も随所に利用することでプロダクトの色合いと女性らしさを同時に表現しています。サイト内でモデルの画像を起用していますが、シンプルな構成・色合いがモデル画像の存在感を際立たせています。

【灰色・グレー】Webサイトの配色

グレーの特性

グレーは黒と白の中間であり曖昧な色のため、ニュートラルな印象を持ちます。上手に他の色と組み合わせるとバランスのとれた美しいページに仕上がります。心理的な抵抗感がなく、安心で上品な優しい感じのするプラスイメージも含んでいます。単色で設定すると「シャープ」や「モダン」な雰囲気がありますが、「無機質」、「地味」な印象も与えます。

グレーをベースカラーとしたWebサイト例


 ▼ コクヨ株式会社 Webサイト <URL>http://www.kokuyo.co.jp/

ベースカラー(グレー) KOKUYOサイト


各コンテンツ内に多彩な配色を使用しているので、ベースカラーにニュートラルな色を設定しています。グレーがもつ暗いイメージや地味なイメージを、上手に実直なイメージに転換している配色と言えます。また、コーポレートロゴやナビゲーション周辺にグラデーションを使用することで、シャープな印象を付与しています。


▼ apple.inc Webサイト <URL>https://www.apple.com/jp/

ベースカラー(グレー) appleサイト


アップルのページデザインは多くのサイトが参考にしていますが、配色においても学ぶべき点が多いサイトです。サイトの印象は質素で無機質ですが、その裏にはカラフルな商品郡の存在が見えます。商品を最大限キレイに見せるデザインの好例です。

【余談ですが】think the web の配色


▼ think the web Webサイト <URL>http://think-the-web.com/

ベースカラー(灰) think the web


think the web の配色はどうかと言うと全体をグレーと白の配色にして主張しないデザインにしました。理由は 簡単で、文字が見やすいからです。「文章で見せるサイトにしよう」というコンセプトのもと立ち上げたので見づらい要素は極力軽減しています。また、サブカラーを青に設定したのは、「誠実さ」を示すためというのと20~40男性に最も好かれやすい色と言われているからです。

薄めの青を使うと若さや軽さが全面にでてしまって、僕自身の年齢の若さと相まって安っぽい印象がでてしまうと感じたため明度を下げて少し重い雰囲気をもたせました。

あとはカーソルの位置や特に見てもらいたい箇所など、見やすくすべき部分にアクセントカラーを設置しました。アクセントカラーには一番目を引く赤系統の色を採用し、サイト全体の雰囲気に合わせて少し明度を落として使っています。

たくさんのサイトを参考にする

上記にあげた色彩ごとの特徴や用例をもとになんとなく色の用途がわかったら、その他たくさんのサイトを見て自分なりに色彩を考察してみるとより感覚が研ぎ澄まされます。

多数のサイトを一度に見るのに便利なサイトは以下の3つです。

こちらも合わせて御覧ください。


 ◯ 【イケサイ】http://www.ikesai.com/

 ◯ 【YSIG】http://www.ysig.jp/

 ◯ 【Webデザインの見本帳】http://www.web-mihon.com/


まとめ

サイトの配色は、ブランド・コーポレートイメージをサイト閲覧者に感じ取ってもらう上で非常に重要な役割を担っています。また、案に伝えたい事やふわっとしたニュアンスを伝えたり、サイトの機能や使いやすさを向上させる効果もあります。

配色はユーザーにサイトの閲覧を楽しんでもらうのに一役かっているといえるでしょう。サイトデザインを設計する際は上述した色彩ごとの特徴や用例、その他にもたくさんのサイトを見て参考にし、ユーザーへの思いを存分にこめて配色を決めてみてください。

【関連記事】


 ◯ Webサイトデザインの配色【色の基礎知識】

Webサイトのデザインに利用できる形で、色に関する知識を体系的にまとめています。


-カテゴリ:サイト制作・デザイン

Webマーケティング think the web

Date: Category: Webソリューション活用
  • このエントリーをはてなブックマークに追加

Webソリューション活用のウェブアクセル

最新記事一覧
カテゴリー

Webソリューション活用のウェブアクセル