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

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

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

【黄】楽観的・明確・暖かさ

黄色は「楽観的」や「明確」といった感情を想起させやすい色です。例を見てみましょう。


■#040000　　　■#F5E83F　　　■#CF1724

ペルソナ4の公式サイトには少しだけライトな黄色が使われています。リゲインの例と比べるとベースカラーとメインカラーが入れ替わっただけなのにずいぶん違った印象です。たとえるならリゲインが20代、ペルソナ4が10代といった感じ。


■#F4FF3D　　　■#150908　　　■#E1541F

■#FFD412　　　■#FF821C　　　■#ABD406

■#F6EF82　　　■#C92818　　　■#7A8BC5

ダイヤブロックのWebサイトは心理四原色（赤、青、黄、緑）が使われています。子供らしさあふれる色使いです。


■#F5D136　　　■#CE1E15　　　■#0C59AC

■#FFF226　　　■#00A0E9　　　■#6FBE79

【橙】親しみ・快活・大胆

橙（オレンジ色）は「快活さ」や「大胆」な感情を人に与えます。


■#FF9302　　　■#FFF12B　　　■#09308A

■#1B1521　　　■#E86E1C　　　■#ECBA09
■#FF934B　　　■#FFF8C2　　　■#A99770

HOOTERSはやはり大胆な配色。目を惹きます。


■#F7B72A　　　■#ED6712　　　■#792A00

■#FF9036　　　■#D6254D　　　■#FF5475

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

【赤】興奮・はつらつ・果敢

赤は「興奮」「はつらつ」「果敢」といった印象を与えやすい色です。欲求を喚起させるのによく使われます。


■#C70230　　　■#900130　　　■#E98218
■#FF337A　　　■#FCF8F0　　　■#00B7D1

 
■#F40009　　　■#277FD8　　　■#FFF100
■#EF0A78　　　■#3F0F28　　　■FFB717

無彩色をベースカラーにするのもオススメ。メインカラーやアクセントカラーに赤を入れると、画面が引き締まりグッとオシャレになります。VOGUEとかMarc Jacobsといったモードな雰囲気でいい感じ。


■#000000　　　■#E21B22　　　■#F8D9E9

■#909D9E　　　■#A88C8C　　　■#F42177

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

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

 
■#8C1274　　　■#000000　　　■#E7CEE2

緑と組み合わせるとややモダンな印象に。
■#BA00FF　　　■#F2F1E4　　　■#D1E751

■#623470　　　■#F17663　　　■#FDCA63

 
■#CDB6C3　　　■#4F453E　　　■#74074E

■#8F776A　　　■#901DDB　　　■#E23079

 

■#FAFAFC　　　■#6E329D　　　■#366AD3

【青】信用・信頼・強さ

青は「信用」とか「信頼」、「強さ」をイメージさせる色です。銀行、クレジットカード、はてな、Facebook、Twitterといった信用・信頼の大事なSNSや、リポビタンD、レッドブルといったエナジードリンクを想像してください。


■#7AC2E8　　　■#021F4D　　　■#FDC734

■#8AC7DE　　　■#D9EB52　　　■#F26B7A

■#343838　　　■#008C9E　　　■#00DFFC

■#EFEFE4　　　■#20C2D3　　　■#E6781E

 
■#E7E8F2　　　■#3B5998　　　■#EBB848

 
■#16A8E9　　　■#00315D　　　■#E70008

同じ青系でも、こちらはやや青紫ベース。蛍光色の緑をアクセントカラーにすることでPOPで都会風な印象に仕上がっています。


■#7985DA　　　■#203FB7　　　■#2DF39E

【緑】平穏・健康・成長

緑は「平穏」や「健康」をイメージさせます。


■#A6C752　　　■#85D4E8　　　■#147616

■#259959　　　■#ABD406　　　■#FFD412

アクセントカラーに赤を挿してもオシャレです。
■#808F12　　　■#FAEDD9　　　■#EA2A15

 

■#F3F3E8　　　■#005331　　　■#FFF100

 
■#6DB551　　　■#20AAF9　　　■#EA1021

こちらは蛍光黄緑を黒と組み合わせ大胆にあしらった、自転車メーカーのWebサイトです。
ハイコントラストな緑を無彩色と組み合わせるとモダンな印象になります。


■#000000　　　■#78BA00　　　■#CAF571

■#F5F0CF　　　■#23E274　　　■#452C0A

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

白や黒といった無彩色は「中立」「冷静」なイメージを与えます。「上品」に仕上げたいWebサイトにも使えます。


■#FCFCFC　　　■#616161　　　■#49A5D8

■#080E11　　　■#F5F5E9　　　■#FFEBEE

■#FFFFFF　　　■#D7ECF4　　　■#515151

 
■#FAFAFA　　　■#E8E8E8　　　■#440A06

 
■#ECF3F3　　　■#C6C9C9　　　■#2a2c2b

 
■#ADB1B7　　　■#010101　　　■#CA0007

ちょっと色味を足すとこんな感じ。


■#EDEBE3　　　■#A67A16　　　■#002F4C

 

【あわせて読みたい！】
配色はiPhoneだけでOK！WebデザイナーのためのiOS版Adobe Kuler入門
累計22種！UIが優れたiPhoneアプリの部分デザイン（ナビゲーション/メニュー編）

 

まとめ

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

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

参考エントリ

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

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

（監修　坂本紀子）