デザイン

デザイン

【配色の基本】Webデザインにおいて彩度と光度の高い背景色を避けるべき理由

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、Why You Should Avoid Bright, Saturated Background Colors
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

960 views

読了時間 : 約2分47秒

あなたはWebデザインのUIにおいて閲覧者の目に負担をかけるような色の選択をしていませんか。特に、背景色としてに彩度も光度も高い色を使用している場合、ページへの訪問者は長くその画面を見ていられないものなのです。

 

彩度も光度も高い色はユーザーの注意を引きますが、その色合いが広範囲に渡ってしまうと、網膜に過剰な刺激を与えてしまい、目に負担をかける可能性があるのです。

 

 

例として画像の色の見本をご覧ください。左列は最大の光度と彩度の色合いの配色となっています。右列は、光度と彩度が80%に抑えられた配色となっています。光度も彩度も高い色は目に刺激があるため、左列を見つめ続けることは右列に比べて難しくなることがお分かりいただけると思います。

 

 

光度 VS 彩度

 

光度と彩度は異なる色の要素です。光度とは色の中の白と黒の混在率を示します。彩度は、色の中の灰色の混在率を示します。

 

光度が増すことと、彩度が下がることはイコールではありません。彩度が下がると、色は灰がかってきます。光度が上がると色の明るさは増しますが灰がかることはありません。(参考

 

 

色のもたらす注目と覚醒への影響

 

「色相および彩度、光度のもたらす影響」という名前の研究において、彩度と光度の高い色は最も人の注目を集めることが分かりました。この色の特性は、研究の中で、色相より更に高い注目を集める上でより重要な特性であるとであると結論付けられています。

 

「彩度のもたらす覚醒の効果」と「色と感情の関係性」という他の2つの研究は、光度も彩度の高い色は覚醒との関連が深いことを発見しました。覚醒に影響するのは色相も同様ですが、彩度と光度はより深く大きな影響を与えるのです。

 

 

 

ボタンには光度も彩度の高い色を使用する

 

 

光度も彩度も高い背景色はユーザーの注意を強く引きますが、その刺激性から注目を持続させることが難しいことが分かりました。この種類の色を使用することは、WebデザインのUIにおいてユーザーに向けて叫び声をあげるようなものです。彼らの注意は引けるものの、じきにユーザーに不快感を与えてしまうため、すぐに目をそらされてしまうでしょう。

 

反対に、ユーザー操作が必要なボタンなどにこの色を活用することは有効です。この種類の色はボタンなどそれらの要素への注目を集め、ユーザーがアクションしようとしたときそれらを見つけやすい効果があります。

 

 

Webデザインの背景色には濃く彩度の低い色を使用する

 

背景色の色は濃くし彩度の低い色にしてみてください。暗い色は白が薄く、彩度を下げれば灰色が濃くなります。この濃さは目への刺激を和らげるものです。

 

また、人の注目を集めるうえでページのテキストやコンテンツの邪魔をすることもありません。このことにより、ユーザーへの視覚的な注意を保ちながら視線をそらすことなく読みやすいページを構成することができます。

 

 

 

 

背景色の良い例と悪い例

 

以下の色合いをご覧ください。目に負担をかけるWebページのUI背景の例です。良いページと悪いページのどちらに視線を注ぎ続けられるか、その点に注目してください。

 

 

 

緑バージョン:悪い例 Panic & Prismic / 良い例 FreshDesk & Sigstr

 

 

 

 

赤バージョン:悪い例  Telepath & Meat /良い例  AppFigures & Jackie

 

 

 

青バージョン:悪い例  Compose & DareIt /良い例 Republic & MailTag

 

 

配色の美学と利用性

 

 

今後は背景色を決めるにあたって、その色がユーザーの目にどのような印象を与えるかを考えてみましょう。光度と彩度は最適化されていますか?閲覧者がテキストを読むのに妨げになりませんか?

 

 

配色はデザインの美しさを生み出します、Webページの使いやすさにも影響を与えます。デザイナーは双方へ注意を払い、ユーザーの目を楽しませるためにそれらの要素が良いバランスで連携して機能するよう心掛ける必要があります。デザインの美学のためにユーザビリティを犠牲にする必要はなく、両立させることができるのですから。

 

 

 

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ