業種や雰囲気による配色の決め方

この記事について

この記事は、スマートフォン時代のWebデザインスクールや Web制作の基礎から学べる「Webコーディングスクール」の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。

emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。

この記事ではWebデザインを制作する際に、業種や雰囲気によってどのように配色を決めていけばいいのか、業種による配色の特徴、配色で変わる雰囲気について説明します。

業種による配色の特徴

業種によってよく使われる色と使われない色があるかを飲食店と金融会社や保険会社などについて見ていきます。

飲食店のWebサイトで使用されている色

まずは飲食店です。
飲食店のWebデザインでは店舗のイメージの色などをもとに作成しますが、食べ物を扱うので美味しそうに見えるような色を選びます。

リンク：muuuuu.org
リンク：カテゴリ：飲食店・グルメ

リンク：SANKOU!
リンク：カテゴリ：カフェ･レストラン･飲食店･居酒屋･食品製造

リンク：I/O 3000
リンク：カテゴリ：飲料・食品・グルメ

明るい色がベースになっていたり、濃い色がベースになっていたりさまざまです。
気軽に行くことのできる店舗なのか、それとも高級なレストラン、料亭なのか、価格帯についても配色によってうける印象も変わってきます。

カジュアルな店舗では明るい色がベースになっています。
高級なレストランや老舗の料亭では濃い色が多く、また与えたい雰囲気に合わせたフォントを使用することでよりカジュアルや高級な雰囲気を出していることがわかります。

金融・保険業のWebサイトで使用されている色

金融会社や保険会社などのWebサイトです。
これらのWebデザインでは、安心して任せることのできるイメージを与える色を使用していることが多いです。

リンク：muuuuu.org
リンク：カテゴリ：金融・証券・保険・法律

リンク：SANKOU!
リンク：カテゴリ：銀行･金融･投資･お金･保険･法律

リンク：I/O 3000
リンク：カテゴリ：金融・証券・保険

全体的に爽やかな色合いが多く見受けられます。
青は信頼感を与える色、緑は安心感を与える色と言われます。
そのため全体的に緑や青系のWebサイトが多くなっています。

配色で変わる雰囲気

飲食店では配色によって店舗の雰囲気が伝わるように、士業では安心や信頼感を与えたいというように、配色をうまく使うことによって与えたい雰囲気を出しています。

では、雰囲気を表すためにどのような配色にすればいいのでしょうか。
配色で以下の雰囲気を表してみます。
ここであげる配色やフォントはほんの一例としての組み合わせです。

可愛い
ふんわり
清潔
高級感とシック

かわいい雰囲気の配色

/* かわいい雰囲気の配色 */
.かわいい-1 { color: #FAA0C7; }
.かわいい-2 { color: #FAC8E0; }
.かわいい-3 { color: #E9E3FC; }
.かわいい-4 { color: #F3F9FF; }
.かわいい-5 { color: #C2E2FB; }

リンク：使用したフォント：砧丸丸ゴシックB

ふんわりした雰囲気の配色

/* ふんわりした雰囲気の配色 */
.ふんわり-1 { color: #FFEEE6; }
.ふんわり-2 { color: #FFF7FA; }
.ふんわり-3 { color: #FFEBF7; }
.ふんわり-4 { color: #FFD1E6; }
.ふんわり-5 { color: #FEB6BD; }

リンク：使用したフォント：砧丸丸ゴシックA

清潔を感じる配色

/* 清潔を感じる配色 */
.清潔-1 { color: #D3D6FC; }
.清潔-2 { color: #D1E8FF; }
.清潔-3 { color: #FFFFFF; }
.清潔-4 { color: #F5FEDF; }
.清潔-5 { color: #EAFFA5; }

リンク：使用したフォント：A-OTF UD黎ミン Pr6N

高級感・シックに感じる配色

/* 高級感・シックに感じる配色　*/
.高級感・シック-1 { color: #2A2D57; }
.高級感・シック-2 { color: #4A5059; }
.高級感・シック-3 { color: #1C1C1C; }
.高級感・シック-4 { color: #D1CCAB; }
.高級感・シック-5 { color: #E8E8E8; }

リンク：使用したフォント：A-OTF リュウミン Pr6N