配色・カラーデザインに悩んだ経験、ありますよね! 今回はWebサイトの配色についてまとめました。
エンジニア・ディレクターの方にも読んで後悔なんかさせません。もちろん本職デザイナーの方々にも役立つ怒濤の配色大事典です!
【黄】楽観的・明確・暖かさ
黄色は「
楽観的」や「
明確」といった感情を想起させやすい色です。例を見てみましょう。
http://www.daiichisankyo-hc.co.jp/site_regain/
■#040000
■#F5E83F
■#CF1724
ペルソナ4の公式サイトには少しだけライトな黄色が使われています。リゲインの例と比べるとベースカラーとメインカラーが入れ替わっただけなのにずいぶん違った印象です。たとえるならリゲインが20代、ペルソナ4が10代といった感じ。
http://p4.atlusnet.jp/
■#F4FF3D
■#150908
■#E1541F
■#FFD412
■#FF821C
■#ABD406
■#F6EF82
■#C92818
■#7A8BC5
ダイヤブロックのWebサイトは
心理四原色(赤、青、黄、緑)が使われています。
子供らしさあふれる色使いです。
http://www.diablock.co.jp/diablock/
■#F5D136
■#CE1E15
■#0C59AC
■#FFF226
■#00A0E9
■#6FBE79
【橙】親しみ・快活・大胆
橙(オレンジ色)は「
快活さ」や「
大胆」な感情を人に与えます。
http://c.cocacola.co.jp/fanta/
■#FF9302
■#FFF12B
■#09308A
■#1B1521
■#E86E1C
■#ECBA09
■#FF934B
■#FFF8C2
■#A99770
HOOTERSはやはり大胆な配色。目を惹きます。
http://www.hooters.co.jp/
■#F7B72A
■#ED6712
■#792A00
■#FF9036
■#D6254D
■#FF5475
ほかにもクックパッドやmixiなど、親しみを与えたいサービスもオレンジ系の配色が多め。
【赤】興奮・はつらつ・果敢
赤は「
興奮」「
はつらつ」「
果敢」といった印象を与えやすい色です。欲求を喚起させるのによく使われます。
http://www.kfc.co.jp/menu/index.html
■#C70230
■#900130
■#E98218
■#FF337A
■#FCF8F0
■#00B7D1
http://cp.cocacola.jp/
■#F40009
■#277FD8
■#FFF100
■#EF0A78
■#3F0F28
■FFB717
無彩色をベースカラーにするのもオススメ。メインカラーやアクセントカラーに赤を入れると、画面が引き締まりグッとオシャレになります。VOGUEとかMarc Jacobsといったモードな雰囲気でいい感じ。
http://www.vogue.co.jp/
■#000000
■#E21B22
■#F8D9E9
■#909D9E
■#A88C8C
■#F42177
【紫】クリエイティブ・想像力・賢さ
紫は「
クリエイティブな発想」や「
賢い」印象を与えやすい色です。諸葛孔明や聖徳太子が描かれる時はたいてい紫でカラーリングされますよね。そういうことです。
ペンタブレットで有名なWacomや、知識の泉・米Yahoo!は紫がメインカラー。
http://wacom.jp/jp/products/cintiq/
■#8C1274
■#000000
■#E7CEE2
緑と組み合わせるとややモダンな印象に。
■#BA00FF
■#F2F1E4
■#D1E751
■#623470
■#F17663
■#FDCA63
http://creativetouch.it/
■#CDB6C3
■#4F453E
■#74074E
■#8F776A
■#901DDB
■#E23079
http://www.yahoo.com/
■#FAFAFC
■#6E329D
■#366AD3
【青】信用・信頼・強さ
青は「
信用」とか「
信頼」、「
強さ」をイメージさせる色です。銀行、クレジットカード、はてな、Facebook、Twitterといった信用・信頼の大事なSNSや、リポビタンD、レッドブルといったエナジードリンクを想像してください。
https://www.americanexpress.com/japan/
■#7AC2E8
■#021F4D
■#FDC734
■#8AC7DE
■#D9EB52
■#F26B7A
■#343838
■#008C9E
■#00DFFC
■#EFEFE4
■#20C2D3
■#E6781E
https://www.facebook.com/
■#E7E8F2
■#3B5998
■#EBB848
http://www.taisho.co.jp/lipovitan/
■#16A8E9
■#00315D
■#E70008
同じ青系でも、こちらはやや青紫ベース。蛍光色の緑をアクセントカラーにすることで
POPで都会風な印象に仕上がっています。
http://exe-creation.com/index.html
■#7985DA
■#203FB7
■#2DF39E
【緑】平穏・健康・成長
緑は「
平穏」や「
健康」をイメージさせます。
http://www.obayashi.co.jp/eco/biodiversity/
■#A6C752
■#85D4E8
■#147616
■#259959
■#ABD406
■#FFD412
アクセントカラーに赤を挿してもオシャレです。
■#808F12
■#FAEDD9
■#EA2A15
http://www.subway.co.jp/index.html
■#F3F3E8
■#005331
■#FFF100
http://www.lego.com/ja-jp/
■#6DB551
■#20AAF9
■#EA1021
こちらは蛍光黄緑を黒と組み合わせ大胆にあしらった、自転車メーカーのWebサイトです。
ハイコントラストな緑を無彩色と組み合わせるとモダンな印象になります。
http://www.cannondale.co.jp/
■#000000
■#78BA00
■#CAF571
■#F5F0CF
■#23E274
■#452C0A
【無彩色】中立・気品・冷静
白や黒といった無彩色は「
中立」「
冷静」なイメージを与えます。「
上品」に仕上げたいWebサイトにも使えます。
http://www.apple.com/jp/ios/ios7/
■#FCFCFC
■#616161
■#49A5D8
■#080E11
■#F5F5E9
■#FFEBEE
■#FFFFFF
■#D7ECF4
■#515151
http://www.thekiss.co.jp/
■#FAFAFA
■#E8E8E8
■#440A06
http://www.royalasscher.jp/
■#ECF3F3
■#C6C9C9
■#2a2c2b
http://www.audi.co.jp/jp/brand/ja.html
■#ADB1B7
■#010101
■#CA0007
ちょっと色味を足すとこんな感じ。
http://www.mcdonalds.co.jp/campaign/mccafe/
■#EDEBE3
■#A67A16
■#002F4C
【あわせて読みたい!】
配色はiPhoneだけでOK!WebデザイナーのためのiOS版Adobe Kuler入門
累計22種!UIが優れたiPhoneアプリの部分デザイン(ナビゲーション/メニュー編)
まとめ
いかがでしたか? 「
雰囲気こんな感じ……」じゃ伝わるものも伝わりません。自分のイメージをしっかり相手に伝えることは、もはやWebサイトに関わる方々全員に必須の知識と言えるでしょう。
今回取り上げた配色は、
以前のエントリでご紹介した
ベースカラー:70%、
メインカラー:25%、
アクセントカラー:5%という配色ルールにのっとったものです。Webサイトカラーバランス(どの色をどの程度使うか)を知りたい時にどうぞ!
参考エントリ
ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド
少しでもみなさんの参考になりましたら幸いです。
(監修 坂本紀子)