ジャンル毎に選ぶウェブサイト配色参考カラーコード

 

webサイトの印象作りに欠かせないのがカラーです。デザインの入り口としては「それっぽい」と思わせるデザインができたなら吉です。webデザインの傾向的にジャンル毎にそれっぽいと言われるキーカラーがあるので、webデザインの参考になればと思います。

メインカラーとは

主にwebサイトの配色は「ベースカラー」「メインカラー」「アクセントカラー」の3つで構成されています。

メインカラーとは主に文字色などに使われ、サイト全体の印象を決めるカラーのことです。

メインカラーはサイト全体の25%くらいで使われ、ヘッダーナビ、ボタン、文字等に使われることが多いです。

文字にも使われるので比較的濃いめのカラーが多いです。

今回はメインカラーに絞って見て行きます。

ここから先はデザインクリップさんのページの画像を使わせていただいています。m(_ _)m

 

業種別に見る配色

業種別にみる配色の傾向です。

コーポレートサイトの配色

 

#268CC5        #504E94        #B61F22        #B4CA69

コーポレートには信頼と安心感を与える青が多い印象です。

 

デザインの傾向

・スタイリッシュな斜め線

・明朝体など、かためなフォント

 

スポーツ系サイトの配色

#BB1D28        #DC5418        #D85449        #F5D635

 

 

元気で健康的な黄色系やオレンジ系が多い傾向です。

 

デザインの傾向

・インパクトのある写真

・ワンカラム

病院、医療系のサイトの配色

 

#57B8E3        #117CB7        #7EB42B        #369B68

 

 

緑や青がよく使われている印象です。

 

デザインの傾向

・アイコンが多用された、誰にでもわかりやすいデザイン

・ベースカラーが白が多く、清潔感がある

・安心感を与える優しい笑顔の写真などが多い

 

キッズ系のサイトの配色

 

#72B44C       #DA4037       #E9D330       #C3502A

 

黄緑やオレンジ、濃いめの黄色など、ポップな印象のカラーがよく使われます。

 

デザインの傾向

・丸みを帯びたデザインが多い

・カラフル

 

 

食品、レストラン系のサイトの配色

#E1B43E       #326432       #BA1B2D       #956432

 

食欲促進の効果があるオレンジ系がよく使われます。

 

デザインの傾向

・料理の写真は明度、彩度を上げる

・料理の写真の上に白字の英字を乗せるデザインが多い。

 

より実践的で充実したデザインスキルを学ぶなら

ねこ
やっぱり転職とか独立に強いデザインスキルをもっとしっかり学びたいにゃ
ちづみ
実際、私がそうだったように未経験からデザイナーになるのは可能です!

キャリアチェンジに強いデザインスキルをしっかり身につけるのであればスクールが一番です。

より本格的なデザインを学ぶのであれば、TECH::EXPERTのデザインクラスがおすすめです。カウンセリングは無料でできますので、ぜひ利用してみてください。(^_^)

TECH::EXPERTをみてみる

 

以上です!