中学生が「UIの正しい背景色の決め方」を考えてみた
中学生を名乗れるのも残りわずかということで、記念に（記念に？）なにか残しておこうと思います。
本当はフロントエンド関連で書こうと思っていたのですが、半年近くコードを書いていなかったのと（言い訳）、そもそも僕の技術関連の知識のほとんどは既に知られていることばかりだと思ってしまった（勉強してください..）わけですが、UIならなんとか語れる気がします。
この記事について
僕がUIを作る際の感覚的なマイルールを言語化してみました。
この記事の内容は僕の蓄えてきた感覚だとか直感を基にして書いているので、一般的な考えと合わないところがあるかもしれません。そういうときはぜひコメントで指摘してください。
色の決め方
さて、本題です。UIを構成する要素は、余白、大きさ、構成、... とまあ様々です。そして「色」はこれらの中でもトップレベルで重要な要素ではないでしょうか。例えば、背景色の小さな違いでも画面全体の印象を大きく左右させます。これは、色には心理的あるいは感覚的な側面を少なからず含んでいるからです。
ですから、よく考えて合理的な色を設定することでページの構成やUIの意図をユーザーに視覚的に伝えることができます。
UIコンポーネントにおける背景色
まずはじめに、ユーザーのアクションを伴うボタンなどの強調させるべき要素は、目立たせるために有彩色を使用しましょう。 灰色や白といった無彩色がベースとなる画面の中で、有彩色は画面全体のアクセントを生みます。よって、要素がユーザーの目に留まりやすくなります。
アンチパターン
有彩色を使う場合、背景色との組み合わせを考慮する必要があります。 正しくない色を選択すると、ユーザーの注意を散漫にしてしまいます。気をつけましょう。
Containerにおける背景色
ページ全体(root)やモーダルウィンドウといった、要素を内包するような要素(container)に使用する背景色は、白と薄い灰色(一般的なカラーパレットでのgray.50くらい)の２色を使います。
これはデザイン全般に言えることですが、通常の直線や文字とは違い、大きな面積を単色で塗ると予想以上に色が濃く見えがちです。なので、その分明度を高くすることで調節する必要があります。
それでは、この２つの色を使うことでどのような効果を生むことができるのでしょうか。
複数の領域を区別する
１つ目に、「複数の領域を区別する」ことがあります。
以下のZennのUIを見てみましょう。別々のエリアを区切るために異なる背景色を使用していることがわかります。
もしこれが、背景色ではなく、中間に灰色の区切り線が引かれているだけだったらどうでしょう。この例のようにページの中の大きなまとまりを区切る場合、スクロールしたら線は隠れてしまい区切られていることが分かりづらくなるでしょう。
一方で、サイズの小さなコンポーネントの集まりといった比較的小さいスペースでは、上に書いたような区切り線を使うのが良いと思います。
視覚的な階層を作る
２つ目は、UI上での視覚的な階層を作り出すことがあります。
白背景は最も明るく、最も基本となる背景色です。一方で、灰色はそれに対して少し下がった階層を表現し、ユーザーにサブ的な、二次的な印象を与える役割があります。これにより、情報の優先度を色の明暗で自然と示すことができるので、ユーザーはどこに注目し、どの要素が重要なのかを直感的に理解することができます。
アンチパターン
先ほども書いたように、灰色の背景は「二次的」な印象を与えるために用いるべきです。よって、階層の上部の領域に対して、灰色を使うのは好ましくありません。
以下に例を挙げます。
すべて白色の背景色は見た目的には悪くないかもしれないですが、画面が単純に見えます。２つの色を効果的に使って、「階層」を正しく表現できるようにしましょう。
まとめ
- 画面の無彩色・有彩色のバランスを考えよう
- 異なる背景色を使って、大きな領域を区別しよう
- z軸の上下関係を表現するのにも白色・灰色を使い、階層の上位の要素は白背景、下位は灰色がよい
おまけ
ボタンを作ったときに、色が平面的に見えることはありませんか？なんというか、のっぺりとしている感じです。
そんなときは、グラデーションを使って、ボタンに「質感」を持たせることができます。
まずグラデーションのベースとなる色を選びます。それから、その色を基準に、ほんの少しだけ明度を暗くして、彩度を上げたもう一つの色を用意します。この２つの色使い、垂直方向のグラデーションを作ることで、深みが表現できます。
これをやるときには１つ注意点があって、上下の色の違いは見分けがつかないレベルで微妙な程度にしておきましょう。
UIにおいて、「変なこと」をする場合、「言われなければ気づかない」程度に抑えたほうがいいです。
デザインマスターになろう！
UIに関する知見を得たいと思ったとき、この記事のように知見が直接紹介されているものを見つけられればそれはそれで良いですが、僕は日常的に利用するサービスの中で気に入ったUIを「パクる」のも良いかなと思います。あとは既存のデザインシステムのUIを参考にするのも良いです。何事も真似することが一番手っ取り早いですからね！
Discussion