ノンデザイナーこそ押さえておきたい!グッとくるWebサイト配色パターン集

    
2013/07/30
    

color-01-01 配色・カラーデザインに悩んだ経験、ありますよね! 今回はWebサイトの配色についてまとめました。

エンジニア・ディレクターの方にも読んで後悔なんかさせません。もちろん本職デザイナーの方々にも役立つ怒濤の配色大事典です!

】楽観的・明確・暖かさ

黄色は「楽観的」や「明確」といった感情を想起させやすい色です。例を見てみましょう。
http://www.daiichisankyo-hc.co.jp/site_regain/
スクリーンショット 2013 07 30 0 43 40

配色スライド 03#040000   #F5E83F   #CF1724

ペルソナ4の公式サイトには少しだけライトな黄色が使われています。リゲインの例と比べるとベースカラーとメインカラーが入れ替わっただけなのにずいぶん違った印象です。たとえるならリゲインが20代、ペルソナ4が10代といった感じ。
http://p4.atlusnet.jp/
スクリーンショット 2013 07 30 1 03 57

配色スライド 13#F4FF3D   #150908   #E1541F

配色スライド 12 #FFD412   #FF821C   #ABD406

配色スライド 10 #F6EF82   #C92818   #7A8BC5

ダイヤブロックのWebサイトは心理四原色(赤、青、黄、緑)が使われています。子供らしさあふれる色使いです。
http://www.diablock.co.jp/diablock/
スクリーンショット 2013 07 30 0 49 19

配色スライド 05 #F5D136   #CE1E15   #0C59AC

配色スライド 11#FFF226   #00A0E9   #6FBE79


】親しみ・快活・大胆

橙(オレンジ色)は「快活さ」や「大胆」な感情を人に与えます。
http://c.cocacola.co.jp/fanta/
スクリーンショット 2013 07 30 0 37 33

配色スライド 14#FF9302   #FFF12B   #09308A

配色スライド 18#1B1521   #E86E1C   #ECBA09
配色スライド 16 #FF934B   #FFF8C2   #A99770

HOOTERSはやはり大胆な配色。目を惹きます。
http://www.hooters.co.jp/
スクリーンショット 2013 07 30 0 36 11

配色スライド 15 #F7B72A   #ED6712   #792A00

配色スライド 17 #FF9036   #D6254D   #FF5475

ほかにもクックパッドやmixiなど、親しみを与えたいサービスもオレンジ系の配色が多め。


】興奮・はつらつ・果敢

赤は「興奮」「はつらつ」「果敢」といった印象を与えやすい色です。欲求を喚起させるのによく使われます。
http://www.kfc.co.jp/menu/index.html
スクリーンショット 2013 07 30 0 17 05

配色スライド 19 #C70230   #900130   #E98218
配色スライド 20 #FF337A   #FCF8F0   #00B7D1

http://cp.cocacola.jp/
スクリーンショット 2013 07 30 0 23 25

配色スライド 22 #F40009   #277FD8   #FFF100
配色スライド 21 #EF0A78   #3F0F28   FFB717

無彩色をベースカラーにするのもオススメ。メインカラーやアクセントカラーに赤を入れると、画面が引き締まりグッとオシャレになります。VOGUEとかMarc Jacobsといったモードな雰囲気でいい感じ。
http://www.vogue.co.jp/
スクリーンショット 2013 07 30 0 01 30

配色スライド 24 #000000   #E21B22   #F8D9E9

配色スライド 23#909D9E   #A88C8C   #F42177


】クリエイティブ・想像力・賢さ

紫は「クリエイティブな発想」や「賢い」印象を与えやすい色です。諸葛孔明や聖徳太子が描かれる時はたいてい紫でカラーリングされますよね。そういうことです。
ペンタブレットで有名なWacomや、知識の泉・米Yahoo!は紫がメインカラー。

http://wacom.jp/jp/products/cintiq/
Wacom  Cintiq

配色スライド 09#8C1274   #000000   #E7CEE2

緑と組み合わせるとややモダンな印象に。
配色スライド 25 #BA00FF   #F2F1E4   #D1E751

配色スライド 26#623470   #F17663   #FDCA63

http://creativetouch.it/
スクリーンショット 2013 07 30 1 11 55

配色スライド 08#CDB6C3   #4F453E   #74074E

配色スライド 27#8F776A   #901DDB   #E23079

http://www.yahoo.com/
スクリーンショット 2013 07 30 0 11 38


配色スライド 28#FAFAFC   #6E329D   #366AD3


】信用・信頼・強さ

青は「信用」とか「信頼」、「強さ」をイメージさせる色です。銀行、クレジットカード、はてな、Facebook、Twitterといった信用・信頼の大事なSNSや、リポビタンD、レッドブルといったエナジードリンクを想像してください。
https://www.americanexpress.com/japan/
スクリーンショット 2013 07 30 0 09 26

配色スライド 29#7AC2E8   #021F4D   #FDC734

配色スライド 32#8AC7DE   #D9EB52   #F26B7A

配色スライド 33#343838   #008C9E   #00DFFC

配色スライド 34#EFEFE4   #20C2D3   #E6781E

https://www.facebook.com/
スクリーンショット 2013 07 30 0 06 30

配色スライド 31#E7E8F2   #3B5998   #EBB848

http://www.taisho.co.jp/lipovitan/
スクリーンショット 2013 07 30 0 04 54

配色スライド 30#16A8E9   #00315D   #E70008

同じ青系でも、こちらはやや青紫ベース。蛍光色の緑をアクセントカラーにすることでPOPで都会風な印象に仕上がっています。
http://exe-creation.com/index.html
業種特化ホームページ制作 株式会社エグゼクティブクリエイション HP リニューアル 東京都 台東区

配色スライド 04 #7985DA   #203FB7   #2DF39E


】平穏・健康・成長

緑は「平穏」や「健康」をイメージさせます。
http://www.obayashi.co.jp/eco/biodiversity/
スクリーンショット 2013 07 30 1 06 58

配色スライド 07 #A6C752   #85D4E8   #147616

配色スライド 39#259959   #ABD406   #FFD412

アクセントカラーに赤を挿してもオシャレです。
配色スライド 38#808F12   #FAEDD9   #EA2A15

http://www.subway.co.jp/index.html
スクリーンショット 2013 07 29 23 59 43


配色スライド 37#F3F3E8   #005331   #FFF100

http://www.lego.com/ja-jp/
LEGO com ホーム

配色スライド 06 #6DB551   #20AAF9   #EA1021

こちらは蛍光黄緑を黒と組み合わせ大胆にあしらった、自転車メーカーのWebサイトです。
ハイコントラストな緑を無彩色と組み合わせるとモダンな印象になります。
http://www.cannondale.co.jp/
スクリーンショット 2013 07 30 0 02 27

配色スライド 35#000000   #78BA00   #CAF571

配色スライド 36#F5F0CF   #23E274   #452C0A


無彩色】中立・気品・冷静

白や黒といった無彩色は「中立」「冷静」なイメージを与えます。「上品」に仕上げたいWebサイトにも使えます。
http://www.apple.com/jp/ios/ios7/
スクリーンショット 2013 07 30 1 09 37

配色スライド 41#FCFCFC   #616161   #49A5D8

配色スライド 44#080E11   #F5F5E9   #FFEBEE

配色スライド 43#FFFFFF   #D7ECF4   #515151

http://www.thekiss.co.jp/
スクリーンショット 2013 07 29 23 47 50

配色スライド 02 #FAFAFA   #E8E8E8   #440A06

http://www.royalasscher.jp/
ROYAL ASSCHER DIAMOND ロイヤルアッシャーダイヤモンドの公式サイト  ROYAL ASSCHER DIAMOND ロイヤルアッシャーダイヤモンドの公式サイト

配色スライド 01 #ECF3F3   #C6C9C9   #2a2c2b

http://www.audi.co.jp/jp/brand/ja.html
スクリーンショット 2013 07 30 0 33 59

配色スライド 42#ADB1B7   #010101   #CA0007

ちょっと色味を足すとこんな感じ。
http://www.mcdonalds.co.jp/campaign/mccafe/
スクリーンショット 2013 07 30 0 26 51

配色スライド-40 #EDEBE3   #A67A16   #002F4C

まとめ

いかがでしたか? 「雰囲気こんな感じ……」じゃ伝わるものも伝わりません。自分のイメージをしっかり相手に伝えることは、もはやWebサイトに関わる方々全員に必須の知識と言えるでしょう。

今回取り上げた配色は、以前のエントリでご紹介したベースカラー:70%メインカラー:25%アクセントカラー:5%という配色ルールにのっとったものです。Webサイトカラーバランス(どの色をどの程度使うか)を知りたい時にどうぞ!

参考エントリ

ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド


少しでもみなさんの参考になりましたら幸いです。

(監修 坂本紀子)

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.