もう迷わない！グレー背景色選び

はじめまして！
デザイナーになりたくて勉強を始めたばかりのヤナギナツと申します。

webサイトをデザインする上で白背景と区別させたいときなどによく使うグレー系の背景色。
半分自分用にそれぞれのメインカラーに合う背景色をまとめてみました！

グレー系背景のメリット

まとめに入る前に、まずグレー系の背景を使うメリットですが、大きく分けて2つあります。

①情報構造の明確化
先に述べたようにセクションの切り替わりなどに使用することによって、情報の構造が分かりやすくなります。

②視覚的負担の軽減
突然ですが、人間は強い光を見ると光量を調整しようとし、眼球周辺の筋肉や神経に負担をかけてしまいます。
白の背景はオーソドックスですが、白の量が多ければ多いほど強い光となり、視覚的負担になるわけです。
なので、グレー背景は負担軽減の役にも立ちます。
優秀！

使用上気を付けるべきこと

そんな便利で優秀なグレー背景ですが、注意すべきことが1つ！
使用するスクリーン、デバイス、モニターの色調整によっては適切な色が表示されない場合がありますよね。
グレーは薄いので「ほとんど白になってる！」なんてことになると、せっかくのメリットがデメリットに早変わり……。
必ず確認するようにしましょう！

それではまとめに入ります！

赤系

ピンク系

青系

緑系

ブラウン・オレンジ系

黒系

まとめ

だいぶざっくりとしたメインカラー分けですみません。
彩度や明度の差でも選ぶポイントは変わってくるかと思います。
気になる色から少しいじるだけでぴったりの色が見つかると思うので、ぜひ使ってみてください！