前回は色の選び方の基本についてお話しましたが、今回は選んだ色を具体的にどのように UI に落としこんでいけばいいのか、その配色のポイントを紹介したいと思います。
画面内の色のバランスに気をつけて
画面内の色のバランスは、ユーザーに重要度を示す指標としてとても大切です。ここではわかりやすい「無彩色＋メインカラー」の配色のアプリ例を見てみましょう。
iOS7 のカレンダー画面です。 白＋薄いグレー＋文字の黒＋ビビットめな赤で構成されています。
この中でタップできる重要なボタンは赤色（メインカラー）になっています。 画面内の 9 割は無彩色ですが、残り 1 割の赤色がアクセントになって、注目してほしい所が一目でわかります。 これをもし、タップできる所はなんでもかんでも赤にしてしまうと、画面内の配色バランスが崩れ、どの要素が画面内で重要なのかを示せなくなってしまいます。
注目してほしい所の色の面積は、他の色より少なめに！
これは鉄則なので、ぜひ覚えてください。
コンテンツファーストな配色!?
昨今「コンテンツファースト」というキーワードがトレンドになっていますが、 この考え方は色だって無関係ではないのです。
例えば写真が主体となったアプリでは、メインコンテンツである写真を邪魔しないために、どんな色とも仲良くできる黒や白といった無彩色の色が多く使われています。
仮に、背景色がビビットな赤色だったらどうでしょうか？
背景色に負けない、強い、ビビットなイメージの写真ばかり投稿されるのであれば耐えられるかもしれませんが、ふんわりとした繊細なイメージを持つ写真が投稿された場合、背景色が写真の雰囲気を壊してしまいます。 どんなにカッコイイ配色だったとしても、せっかくのコンテンツを潰してしまうような配色は、UIの配色としては好ましくありません。
また、要素が固定されているポスターなどとは違って、アプリのUIでは画像が違う、ボタンのあるなし、など動的に変化する場合が多く、どのようなコンテンツが来ても何が一番目立つべきなのかを配慮して配色を決める必要もあります。
少し考えることが多くて大変かもしれませんが、何がメインかを常に考慮して、それらを引き立たせる、コンテンツをもっと見てもらえるような配色にしていきましょう。
「ちょい足し」でイメージが変わる
今までの例にあげたアプリのように、無彩色は色々なアプリで本当に良く使われています。ですが、実は先項の例であげた写真アプリ達、黒い所すべてが完全な「無彩色」ではないのです！
たとえば Instagram の「フィルタ」と書かれている部分の背景色はこんな色になっています。
上が完全なる「無彩色」のグレー。下が Instagram に使われているグレーです。一見するとほとんど違いを感じないかもしれませんが、しばらく眺めていると少し違う印象を持ちませんか？
このように無彩色にもほんの少しだけ色味をつけると、無彩色の持つ特性を生かしながら、足した色の持つイメージを与えることができます。
右図では全ての無彩色に青を足しています。左図、右図どちらも「グレー」と呼べる色ですが、左の無彩色なものより、右のグレーに「ちょい足し」の方が、青色が持つ「知的」「誠実」「さわやか」といったイメージを帯びていると思いませんか？ このような一工夫が、アプリの印象を左右することになるのです。
赤！青！黄！といった大きな色の違いだけでなく、グレーはグレーでも、少し青みがかかった、黄味がかかった…のような繊細な色の違いに気づき、使い分けできるようになれば、アプリの印象をもっと良くできます。
おわりに
さて今回は、UI における配色の 3 つのポイントをご紹介しました。
- 画面内の色のバランスに気をつける
- コンテンツを邪魔せず、引き立たせる配色にする
- 「ちょい足し」で印象をコントロールする
第 1 回の色の選び方で選んだ色を今回のポイントに気をつけながら、アプリに活用してみてくださいね。 UI 配色講座は今回で終了ですが、いいなと思ったアプリの配色は、これからもぜひ研究してみてください！
