NEWS & COLUMN
お知らせ・コラム
SCROLL
DESIGN
WEBデザインの参考にしたい青色を基調にしたホームページ4選
2022
.10.13
青色はさわやか、誠実なイメージを持ち、「世界で一番好まれる色」とも呼ばれ、コーポレートサイトをはじめ、さまざまなホームページのWEBデザインにも使用されています。実際にギャラリーサイトなどを見ても他の色に比べて青色をメインカラーとして設定したホームページの比率がかなり高いことが分かります。しかし、使われる機会が多く人に好まれやすい青色だからこそ青色のWEBデザインには差別化の難しさがあります。また、青色の個性により相性の悪い業界もあるため、「多くの人に好まれる色だから青色を使う」という考えにはリスクもあります。今回は青色を使用した優れたホームページを交え、WEBデザインにおける青色の特徴をご説明します。
【目次】
1. デザインにおける青色の特徴
2. 青色を基調としたWEBデザイン
a. 先進感と工業感がマッチした「マイクロ波化学株式会社」
b. 紺色と青色で誠実感のある「牛島総合法律事務所」
c. 水のイメージで自然の豊かな恩恵を演出した「きなりと」
d. 沈静やリラックスの印象を利用した「MOGU（モグ）」
3.今回のまとめ
デザインにおける青色の特徴
青色は水、海、空、地球などを連想させる色であり、心理的なイメージだと堅実さ、誠実さ、信頼感、知性、冷静さ、爽やかさを与える色でもあります。また、冷静さという心理的なイメージとも関連しますが、青色は寒色であり、温度的、心理的な「冷たさ」を感じる色でもあります。その他にも青色は後退色としての性質があり、実際の位置よりも色が離れて見える効果があります。そのため、赤などの進出色に比べ、すっきりとしては見えますが見た目のインパクトなどや誘目性には劣る一面もあります。赤色と比較した時、赤色が食欲を増進させる色であるのと対照的に、青色は食欲を減退させるという特徴も持っているため、食品を扱うホームページではあまり使用されない傾向もあります。
青色を基調としたWEBデザイン
同じ青色のホームページでも、青紫よりの青なのか青緑寄りの紫なのかで印象は大きく異なります。また、青系統の色は明度の違いで水色〜紺色に変化し、この差もホームページがユーザーに与える印象に大きく関わります。
先進感と工業感がマッチした「マイクロ波化学株式会社」
工業系や建築系の業界のホームページで青色が用いられることは多く、業界のイメージから直線的なデザインやコントラストが強めな写真と合わせて硬派、力強いイメージを演出しているホームページが多い傾向にあります。ブランディングとしてはそれで成立している場合もありますが、取引や採用を目的に訪れたユーザーからは「厳しそう」「前時代的」などのマイナスなイメージを持たれるリスクもあります。マイクロ波化学株式会社のホームページは、青色と機械の写真で工業感が十二分にありますが、曲線やグラデーション、IT感のあるベクターイラストやアニメーション、コントラストを上げすぎない写真の使い方で先進感、清潔さ、明るさを担保したWEBデザインが行われています。IT企業のような目新しさもありつつ、自社のものづくりに対する想いや事業の概要をしっかりと伝えているホームページです。
紺色と青色で誠実感のある「牛島総合法律事務所」
牛島総合法律事務所のホームページは、紺色をベースに青色をアクセントカラーに使用し誠実感を高めた、法律系業種ホームページのお手本にもなり得るWEBデザインです。企業感や信頼感、大手感を出す＝ベースは白背景という考え方もありますが、昨今では各メディアでダークモードの背景が普及したこともあり、暗色や色付きの背景が不信感などのマイナスイメージにつながることはほとんどありません。むしろ思い切って背景色を変えてみることで業種によっては垢抜けた雰囲気が演出でき、他社との差別化を行うことができる場合もあるため、業種問わず一つの選択肢として取り入れてみてもいいかもしれません。
水のイメージで自然の豊かな恩恵を演出した「きなりと」
青色は水を連想させる色として、緑色や茶色と同様、豊かな自然を想起させる色でもあります。自治体や地域振興課が発信する地域のホームページでは豊かな自然がフォーカスされ自然＝緑がそのままメインカラーとして使用されることも多いですが、水産物や名川が有名な土地では水色をメインカラーの候補とすることもできます。郊外や地方の地域の写真では自然と緑の写真も多くなるため、色数が多くなり賑やかな印象が演出できるという副次的な効果もあります。
鎮静効果を利用した「MOGU（モグ）」
青色には静寂、冷静などのイメージがあり、興奮を抑え気持ちを落ち着かせたり時間経過を遅く感じさせるリラックス効果、睡眠を促進させる色などの心理効果が期待できます。新発想の全身枕「MOGU（モグ）」のホームページはそんな青色の特徴を十分に活かしながら、寝具、ファブリックのイメージを損ねないような曲線的なWEBデザインが特徴のプロダクトサイトです。配色こそ最初に紹介した「マイクロ波化学株式会社」に近いものがありますが、レイアウトやフォント、オブジェクトなどのデザイン要素でユーザーに与える印象が大きく異なってくることも分かります。
今回のまとめ
WEBデザインに用いられる色には、青色の鎮静効果やリラックス効果など色自体の心理効果の応用を狙ったものもあれば、ネイビースーツを連想させる紺色の信頼感、男性を思わせる青色の力強さなど、慣例的、連想的な色の使い方もあります。WEBデザイナーなどの作り手がどれだけ意図を持ってホームページを作り込んでも、それをユーザーが一眼見てどう感じるかが何より重要です。WEBデザインを客観的に見てどう感じるかを判断し、配色をはじめとしたデザイン要素を選定しましょう。
