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

この記事について

この記事は、スマートフォン時代の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

Webコーディングスクール 体験レッスン受付中

配色を使用した例

かわいい配色と高級感・シックな配色を使用したサンプルを見比べてみます。

かわいい雰囲気の配色で作成した例

高級感やシックな雰囲気の配色で作成した例

このように同じ写真素材、パーツ、レイアウト、フォントを使用しても、配色で随分と印象が変わることがわかります。
リンク:使用した写真素材はこちらです

まとめ

今回作成したサンプルのように、同じ素材やパーツを使用していても配色だけでガラッと雰囲気が変わることがわかりました。
さらに使用するフォントもそれぞれ雰囲気に合ったものを適用すると、より作りたい雰囲気に近づけることができます。

今回サンプルとして作成したかわいい配色は案件によって「かわいい」の定義がそれぞれ違うと思います。
色選びが慣れないうちはAdobe Colorのような印象のキーワードで配色を検索できるWebサイトを使ってみましょう。

リンク:Adobe Color「かわいい」

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index