NEWS & COLUMN
お知らせ・コラム
SCROLL
DESIGN
WEBデザインの参考にしたい赤色を基調としたホームページ4選
2022
.09.22
赤色はユーザーの目を引く誘目性が高く、WEBデザインでもよく用いられる色です。情熱的、活気的、セール感など赤色から連想できる印象をユーザーに与えたいときはもちろん、使い方次第では女性的な印象やベンチャー企業の先進感などを印象的な配色で表現することもできます。単純にコーポレートカラーとして使用されるのが多い色でもあり、他の要素との組み合わせで様々な印象を与えられる色とも言えます。一方で刺激の強い色という側面があるので、多用することでユーザーの眼精疲労や情報の押し付け、過度なセールス感のあるWEBデザインになってしまい、離脱率が上がる恐れもあります。今回は、WEBデザインの参考にしたい、赤色を基調としたホームページをご紹介します。
【目次】
1. 色彩学における赤色のもたらす心理効果
2. 赤を基調としたWEBデザイン
a. シンプルにコーポレートカラーを打ち出した「DENSO」
b. モードな雰囲気と女性らしさが調和した「J-Beauty Technology Platform」
c. ITのイメージとポップで遊び心を具現化した「ax Inc.」
d. シンプルさとダイナミックさのバランスが絶妙な「OYOGE」
3.今回のまとめ
色彩学における赤色のもたらす心理効果
赤色は熱さ、強さ、情熱、興奮などを連想させる色であり、WEBデザインに用いることで前向きな印象を持たせることが可能です。また、赤色は実際の位置より近くに見える進出色であり、誘目性が高いインパクトのある色でもあるため、注目を集めやすい色であり、逆に言えば使い方によって悪目立ちしてしまうというリスクもあります。
赤を基調としたWEBデザイン
赤色とは一口に言っても、紫寄りの赤なのか、オレンジ寄りの赤なのか、明度や彩度、フォントとの組み合わせでも印象が大きく異なり、他のデザイン要素との組み合わせで印象も大きく異なります。
シンプルにコーポレートカラーを打ち出した「DENSO」
DENSOのコーポレートサイトは、白地に黒文字のシンプルな配色ですが、ポイント的にコーポレートカラーである赤色を使うことでユーザーの印象に残るシンボリックなコーポレートサイトに仕上がっています。色の面積は少なくても、他の要素や配色をシンプルにすることでアクセントカラーとして使用している赤色を印象的に見せる、昨今のシンプルやミニマルといったWEBデザインのトレンドに適合したデザインです。
モードな雰囲気と女性らしさが調和した「J-Beauty Technology Platform」
三井物産ケミカル株式会社が運営するJ-Beauty Technology Platformのホームページでは、メインカラーのレッドに加え、グラデーションや曲線的なフォント、背景のグレーなどとの組み合わせによって企業感のあるモードな雰囲気と女性的な雰囲気を両立しています。
ITのイメージとポップで遊び心を具現化した「ax Inc.」
ax Inc.のコーポレートサイトでは、動きのあるアイソメトリックの3Dイメージなどを用いることによって赤をメインカラーとしながらもポップで賑やかな遊び心のあるデザインを成立させています。同じホームページ内でも、ロゴカラーはシンボリックな赤、角丸のボタンなどはポップさを演出するピンクよりの赤など要素要素で絶妙に配色を変えることで様々な表情を楽しむことができるホームページです。
シンプルさとダイナミックさのバランスが絶妙な「OYOGE」
鯛のないたい焼き屋 OYOGEのコーポレート・プロダクトサイトは、シンプルなイラストで商品の雰囲気を演出したかと思えばダイナミックな写真と背景のレッドでダイナミックにコンセプトを打ち出すなど、配色のバランスが絶妙なホームページです。赤色の背景もかなり多用していますが、白背景との緩急の付け方や色味の絶妙な調整によって「ちかちかしない」限界を攻めた上で、飽きのこない構成になっています。赤色をはじめとする暖色は食品との相性も良く、店舗のコンセプトを体現したようなWEBデザインが魅力的です。
今回のまとめ
赤色は有彩色の代表とも言える色ですが、鮮やかで誘目性の高い色という面から、光で色を表現するWEBデザインでは特に使い所が難しい色でもあります。目立たせたいから、インパクトを与えたいから、というのも一つの理由にはなり得ますが、ユーザーが自ら望んでホームページを閲覧しに訪れているという背景を考慮して、より上手く赤色を活用したホームページ制作を行いましょう。