サイト運営を開始する上で、誰もが迷うことと言えば、サイトのメインカラーではないでしょうか？
言うまでもなく色の種類は数えられないほどあるので、迷うのも当然です。
そこで各色の特色を理解し、自身の構築するサイトのジャンルとマッチングさせることで、おのずと採用すべき色が見えてきます。
今回は「レッド・赤系」デザインの持つ効果と、参考になるサイトをいくつかピックアップしてみました。
ぜひ参考にしてください。
目次
レッド・赤系の色を使うことによる効果
まず、レッド・赤系の色をサイトに使用することによって、読者にどのような印象や効果を与えるのでしょうか？
それぞれ見ていきましょう！
熱や暖かさ（温かさ）を感じさせる
赤色は「火」や「血液」の色でもあることから、暖かい（温かい）もしくは暑い（熱い）イメージを与えることができます。
火の写真などを使うと、あたたかそうな印象のサイトを作ることができますね。
冬の暖かグッズや辛い食べ物などをアピールするのに使うのも効果的です。
また、体感温度を上げる効果もあるので、商品自体を赤色にして、その写真を積極的に使うのもいいですね。
ただし、使いすぎると暑苦しいと思われてしまう可能性があるので、注意してください。
注目や関心を集める
パッと目に入った時に思わず目が行ってしまうのは、赤色という人が多いですよね。
そのため、企業のロゴや注目してほしいお知らせ部分に赤色を使うのは効果的です。
普段は違う色をベースにしたサイトでも、「ここぞ！」という場面には赤色を使って、メリハリをつけましょう。
いつもサイトを見ている人にも、初めてサイトを見た人にも、「これは何かな？」と思わせることができますよ！
食欲を増進させる
お肉や魚の赤身の部分は、自然と食欲を刺激されますよね。
野菜でもトマトや人参など赤色系の食材は、サラダなどに入っていると、とても綺麗に見えます。
ベーコンなどもその役割を果たしていますね。
さらに、赤色の補色（一番遠い・反対の色）である緑色を一緒に使うことで、赤色がより引き立つようになります。
飲食店のサイトは赤色と緑色をうまく使って、購買者の食欲を刺激する写真を載せましょう。
欲望を刺激する
赤色は食欲だけではなく、購買欲などの欲望を刺激する色でもあります。
注目を集めるのはそのためだとも言われていますね。
例えば、セールやオープンのチラシ、通販サイトなどには赤色が使用されていることが多いです。
これは、見ている人の「買いたい」という気持ちを刺激し、積極的に行動することを促しています。
愛情を感じさせる
赤色は女性的なイメージを与えることもできます。
ハートなども赤色のことが多いですよね。
バレンタインのポスターや商品にも赤色が多く使用されています。
恋愛や贈り物のサイトに赤色を使うと、愛情深いイメージをアピールできます。
官能的で誘惑的な色でもあるので、セクシーな印象を与えたいときにも効果的ですよ！
緊急性をアピールできる
パトカーのサイレンや消防車、非常ボタンなどはすべて赤色を使用していますよね。
これは、危険や緊急性をアピールするためです。
サイトに使う場合は、「今だけ！」や「期間限定！」などの文字を赤色にすると、「買わなくちゃ」「行かなくちゃ」という気持ちを刺激することができます。
あまり使いすぎると効果が薄れてしまうので、本当に大事な場面に使うようにしましょう。
その他レッド・赤系の色が与える効果
その他、レッド・赤系の色が与える効果としては、下記のようなものがあります。
- パワーやエネルギーを感じさせる
- 闘争本能や攻撃性を刺激する
- 時間の経過を早く感じさせる
- ポジティブな気持ちにさせる
- 注意や危険をアピールできる
- 性的魅力をアピールできる
- 勝利のイメージを与える
- リーダーの印象を与える
- 膨張して大きく見せる
- 積極性を感じさせる
- 体感温度を上げる
- 興奮や怒りを促す
赤色は全体的に「強め」なイメージがあるので、真面目なジャンルや暗くネガティブな印象を与えたい場合には使わない方が無難ですね。
さらに、使いすぎるとどこに注目していいかわからなかったり、「暑苦しい・見づらい」というマイナスなイメージを与えてしまうことがあるので、注意してください。
サイトの中で一番訴求したい部分にだけ使うなど、使い方を見極めるのが大事な色です。
全体的に赤色を使う場合は、他の色との組み合わせや赤色自体の色味（彩度や明度など）に気をつけて。バランスが崩れないようにしましょう。
レッド・赤系の色を使ったWEBサイトデザイン
ここからは、レッド・赤系系の色を使用したWebサイトをご紹介していきます。
シンプルなサイトからビビッドなサイト、女性らしさを感じられるサイトまで様々ですので、ご参考にしてくださいね。
シンプルなデザインのサイト
エッグフォワード
グレーと赤の二色でまとめたシンプルなデザインのサイトです。
やはり赤色というのは、ただ使うだけで目立ちますね。
赤色を使ってシンプルにまとめたいときには、赤色以外の色を地味にするというのがポイントです。
主な使用カラー
#e7152d
#f44432
#4e575c
そば処 東家
赤と黒のお椀をモチーフにしたデザインが目を引きます。
お店のロゴはネイビーですごくシンプルなのですが、真っ赤なお椀のイラストのおかげでとても引き立っていますね。
主な使用カラー
#ff2401
#012c82
#010101
クールでスタイリッシュなサイト
資生堂
黒と赤の組み合わせがスタイリッシュです。
商品のパッケージの色とロゴの色を合わせているのもおしゃれですね。
主な使用カラー
#a2061d
#be0022
参照元：https://brand.shiseido.co.jp/
stimmt
背景と赤色のコントラストはもちろんなのですが、使われている写真の中にも赤色が使われているのがポイントです。
ロゴや文字をシンプルにすることにより、スタイリッシュに仕上がっています。
主な使用カラー
#ff1c3b
#97212f
#fe8754
#1f2823
赤色をメインに使ったビビッドなサイト
RINGO アイスバー
ビビッドな赤色と淡い水色、そしてアイスバーの写真を使って、鮮やかなコントラストを表現しています。
食欲増進の赤色を涼しげな水色をうまく使っているので、「アイス食べたいなー！」という気持ちにさせてくれますね。
主な使用カラー
#df0629
#ff4463
#fff34e
#cde9ec
参照元：https://ringo-applepie.com/lp/icebar/
苺が主役
「苺の赤」をふんだんに使ったとても鮮やかなサイトです。
食べ物の赤というのはすごく目を引き、また緑とのコントラストも綺麗です。
主な使用カラー
#d10000
#ed0001
#556e2d
#dbddb6
参照元：https://ichigogashuyaku.com/
暖かみのあるサイト
&Post
紙っぽいベージュの背景に朱色を使った、暖かみのあるデザインです。
「手紙を贈る」というイメージにもぴったりですね。
主な使用カラー
#b10721
#e3373d
#faf3e2
ミキハウス出産準備サイト
こちらは赤色の中でもオレンジやピンク寄りの、やわらかい色味を使っています。
赤ちゃんの血色もあいまって、とても穏やかな印象を与えますね。
主な使用カラー
#e60e11
#ff6865
#f19c9f
#ffeded
参照元：https://baby.mikihouse.co.jp/
女性らしさを感じられるサイト
あきた舞妓
舞妓さんの艶やかな写真とすこし暗めの赤が、とても女性らしい雰囲気を醸し出しています。
メイクと着物の赤も印象的ですね。
主な使用カラー
#a92326
#563927
#a04f22
#f6a20c
ecruspose
お花や小物を赤系にまとめて、ウェディングドレスの女性らしさをアピールしています。
白いものがメインの際には、赤色を差し色として使うことが効果的です。
主な使用カラー
#8e2133
#bb7b80
#b08940
まとめ
レッド・赤系の色を使ったサイトが与える効果と、サンプルサイトを10つご紹介しました。
赤色を使うと、「エネルギッシュなイメージ」を作ることができるので、老若男女の注目や関心を集めることができます。
また、温かさや女性らしいイメージも与えるので、愛情をアピールしたいときにも効果的です。
他のカラーについて、下記記事でご紹介しております。
よろしければご覧くださいね！
最後までお読み頂き、ありがとうございました。
