「アプリのUIを作ってみたいけど、配色センスが皆無だ…」 「UIを作ってみたけど、なんかピンと来ない色だ…」
このような配色に対する悶々をかかえていませんか？ 今回はそんな方に向けた「UI 制作における色選びのコツ」を伝授しちゃおうと思います。 難しい技術の話はありませんので、リラックスして読んでみてください！
まずは「センス」の基を知る
「色選びはセンスのいいやつが感覚でいい感じに選ぶもの」
と思われているかもしれませんが、センスというものは知識の積み重ねによって得られるものです。 林檎を見たことがない人が林檎を描けないように、配色を知らないことにはよい配色を作ることは出来ません。配色を決めるための手法や理論は色々ありますが、とりあえず今は置いておいて。。。
まずは身近にあるものや風景を写真に撮り、画像編集ツールなどにあるスポイト機能を使い、色の数値を調べてみましょう。 色を頭の中だけ作るのではなく、実際の「もの」から色を取ってきて、色の選び方を学びます。
たとえば料理のレシピアプリを作ってみたいと思ったとき、配色も料理のおいしさを引き立たせるような色を使いたいですよね。そんな時は、実際おいしそうなものから色を取ってきましょう！ ピザの例では、チーズ、生地、ピーマン、サラミ、ブラックオリーブから色をピックアップしています。
おいしそうな色を選びたいときは、実際においしそうなものから。 優しい色を選びたいときは、実際に優しそうなものから色を取ってくれば、色選びは簡単！
このような作業を積み重ねることで「センス」が蓄積され、写真がなくてもどのような色が相応しいのかがわかってきます。
色をコントロールする
スポイトで色の値を調べていて気づいた方もいるかと思いますが、現実の色ってrgb(255,0,0)みたいな激しい色って少ないですよね？
世のイケてないUIの配色は「彩度（色の鮮やかさ）」が高すぎる傾向があります。これは現実の配色を無視して、頭の中だけで色のスライダーを動かしてしまっているからなんです。
上の 2 つの配色を見比べてみてください。 図1は彩度が高すぎる配色の例です。図2は、色2以外の彩度を落としたものです。どちらも色相（色合い）は同じですが、実際にありそうな色の配色である図2のほうが自然に感じないでしょうか。
さらに下の図3、図4を見て下さい。
図3、図4とも他の色に比べ、2番目の色が強調されました。 よく「使う色数を抑えろ」などと言われていますが、それは色にも重要度があるからです。色数が多くなると、調和がとりにくくなりますし、目立つ色と目立たなくてよい色がわかりにくくなります。
これまでの4つの図の場合、2番目の色はすべて同じ色です。しかしそれぞれ、2番目の色の「強調されている度合」が違います。
- 図1では、すべて彩度の高い色のため、散漫に見えてしまい、どれが強調色かはわかりません。
- 図2では、2番目の色以外の色の彩度を抑えたので、2番目の色が強調色と判断しやすくなります。
- 図3では、2番目の色以外をすべて同じ色相に統一したので、色相の異なる2番目の色がより強調されます。
- 図4では、2番目の色以外は色味がなく、唯一色味がある2番目の色が強調色なのは明らかです。
このように、強調色以外の色を調整してあげることで、色の重要度を変えることが出来ます。
どんな色とも喧嘩しない色
先ほどの図4は、色2以外が「無彩色」という色味のない色で構成されています。 この白、黒、グレーといった無彩色は基本的にどんな色でも馴染みやすいです。
図5、図6では図4から色2だけを変えています。図5では濃い目の紫に、図6ではライトグレーが強い緑ですが、どちらも自然ですね。
無彩色＋メインカラーという配色は失敗しづらい鉄板の組み合わせ
といえるでしょう。
今回のまとめ
- 使う色を選ぶ時は、頭の中だけでなく現実の色から取ってくる。
- 配色においては、強調したい色以外の色をコントロールしていく。
- どんな色がきても喧嘩しない無彩色を使いこなす。
この3つを覚えて、使いやすい色選びを行っていきましょう。
第 2 回では、配色を具体的にどのようにUIに落としこんでいけばいいのかをご紹介したいと思います。 次回もお楽しみに！
