UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
Post on:2018年5月29日
sponsors
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？
Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。
Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds
下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 背景に明るく彩度の高い色を使用してはいけない理由
- 1. 明度と彩度
- 2. 注目と喚起に対する色の効果
- 3. ボタンのために明るく鮮やかな色を予約しておく
- 4. 背景に濃くて不鮮明な色を使用する
- 5. 背景に適した色の選び方
- 6. 見にくい背景と見やすい背景の例
- 7. 美しさとユーザビリティ
背景に明るく彩度の高い色を使用してはいけない理由
あなたはインターフェイスの色を選ぶ時、ユーザーの目に負担をかけてしまう色を選んでいませんか？
もし背景に明るく彩度の高い色を使用している場合には、注意が必要です。ユーザーはあなたのページを見たり、読んだりするのが困難になります。
明るく彩度の高い色は確かに、ユーザーの注意を引きつけます。しかし、広範囲で使用してしまうと、ユーザーの目を過剰に刺激します。
背景における明度と彩度の割合
上記の色見本を見て、どちらを長時間見続けることができますか？
左の色は明度と彩度を最大にしており、右の色はそれぞれ80%ほどにしています。左の明るく彩度の高い色はどぎつく、右の方がより落ち着いて見ることができると思います。
1. 明度と彩度
明度と彩度は、色において異なるプロパティです。
明度とはホワイトまたはブラックがどれくらい色に混ざっているかを示し、彩度とは色の中にあるグレーの量を示しています。
明度を上げることは、彩度を下げることと同じではありません。彩度を下げると、色はグレーの色合いに変わります。明度を上げると、色は明るくなりますが、グレーにはなりません。
参考: Hue, Saturation and Brightness
2. 注目と喚起に対する色の効果
「色相、彩度、明度の影響（Effects of hue, saturation and brightness）」という研究では、彩度と明度の高い色は最も注目されるということが見いだされました。この2つの特性が色相よりも注意を引くことにおいて、より重要であると結論づけられています。
また、「彩度の喚起効果（An arousal effect of color saturation）」と「色と感情（Color and emotion」という2つの研究では、明るく鮮やかな色がより高い喚起と関連していることが分かりました。同様に色相も喚起に影響しますが、明度と彩度はさらに大きな影響を与えます。
3. ボタンのために明るく鮮やかな色を予約しておく
明るく鮮やかな背景色はユーザーの注意を引きつけますが、その注意は長く持たないでしょう。これは常に大声で叫んでいるような状態です。つまり、注意を引きつけることはできても、ユーザーはそれに嫌悪感を抱き、すぐに離れてしまいます。
明るく鮮やか色は、ボタンのようなユーザーのアクションを必要とするUI要素でのみ使用する方が効果的です。ユーザーがアクションする準備ができた時に、色はその要素に注意を引きつけます。
4. 背景に濃くて不鮮明な色を使用する
背景色を暗く、不鮮明にした方が良い結果を生み出します。色を暗くするとホワイトが減少され、色の彩度を減らすとグレーが増えます。こうすることで、色の強烈さを和らげることができるからです。
しかも、効果はそれだけでなく、ページ上の他のテキストやコンテンツと競合することもありません。これによりユーザーは気を散らすことなく、集中してページを簡単に読むことができます。
5. 背景に適した色の選び方
背景に適した彩度と明度の割合は、さまざまな組み合わせがあります。カラープロパティのグリッドを作成すると、最適な背景色を見つけることができます。
さっそく実践してみましょう。
最初に色相を決め、100%の明度と彩度で色見本を中央に配置します。
その色見本を左右に2つずつ複製します。左の2つは彩度を下げ、右の2つは明度を下げます。下げる値は10の倍数でよいでしょう。
これらの色はまだ彩度か明度のどちらかが100%であるため、使用するには適していません。適した色を見つけるためのベースラインとして機能します。
背景に適した色を見つけるためのベースライン
次に、1段目の色見本から彩度と明度を下げて、2段目の色見本を作成します。1段目で彩度を下げた色見本は明度を下げ、1段目で明度を下げた色見本は彩度を下げます。
これで、2段目の色見本はすべて、100%の明度と彩度を持っていません。
これで、デザインに使用できる色見本ができました。
彩度と明度のレベルを少し下げた新しい色見本
もし2段目の色見本で満足できない場合は、さらに多くの色を作成できます。
2段目の色見本を複製し、3段目を作成し、再び彩度と明度のレベルを下げます。これで、彩度と明度の割合が異なる8種類の最適な色を使用できます。
彩度と明度のレベルをさらに下げた新しい色見本
6. 見にくい背景と見やすい背景の例
実際に見にくい背景を使用したデザインと見やすい背景を使用したデザインを見てみましょう。良い色と悪い色で、どれだけ長く見ていられるかを確認してください。
-
- 見やすいレッド
- AppFigures, Jakie
7. 美しさとユーザビリティ
次のプロジェクトでは、背景の色を決める前に、その色がユーザーの目にどのように感じられるか考えてみてください。
あなたが使用する色の明度と彩度は、最適化されていますか？
ユーザーはテキストを簡単に読むことができますか？
色はデザインの美しさに影響を与えますが、同様にユーザビリティにも影響を与えます。デザイナーはその両方に注意を払う必要があり、ユーザーを喜ばせるために美しさとユーザビリティを両立させる必要があります。
優れたインタフェースを作成するために、使いやすさを犠牲にする必要はありません。
sponsors
