みなさんこんにちは。不破@エンジニアです。最近はWordPressのお仕事を頂いており、高速WordPressを実現させるべく日々がんばっております。あと最近はスプラトゥーンにはまりつつある感じです。
今日のテーマは「色彩のお話」です。 最近のアプリケーション開発ではプロトタイプを制作するケースが非常に増えてきました。 Bootstrapの登場や普及などもあり、デザイナーやコーダーではないエンジニアもWebアプリケーションやスマートフォンアプリのプロトタイプを開発するようになりました。 その一方で、色彩についてよく考えないスマートフォンアプリやWebサイトが増えているように思えます。
そんな私もデザインや色彩については素人です。色々思うところがあって、色彩検定3級の勉強をしています。 今回は、エンジニアが知っておくべき色彩の知識についてまとめました。
色の三属性
「色の三属性」は学校で習った人も多いと思います。色には
- 色相
- 明度
- 彩度
があります。 色相は「色みの違い」を意味し、「青緑」「紫」「赤紫」など10の色相がJIS規格で決まっています。 色相を順番に配置したものを、「色相環」(下図)といいます。
明度は「明るさ」を示し、彩度は「鮮やかさ」を示します。彩度が低くなると灰色に近い色になり、逆に彩度が上がると派手な色になります。
補色
色相間の対面にある色の組み合わせを「補色」といいます。 先ほどの色相環図を見ると、非常におおざっぱな見方をすると「赤」の補色は「緑」になります。
例
補色は、背景色を決定するのに使用します。たとえば、「赤色文字の背景色」を考えましょう。今回は背景色の上に文字(「あ」)を描いてみます。
「赤」の補色は「緑(緑と青を混ぜた感じ)」です。補色を背景にすると、こうなります。
いい感じに赤色の「あ」が映っています。これなら「あ」という文字をすぐ認識することが出来ます。
今度は補色ではなく、色相環的に隣り合わせの色を組み合わせてみます。するとこうなってしまいます。
お互いの色が似通っているせいでよくわからなくなりました。 このように、補色になっていないと読みにくくなります。
Webサービスで「なんかこの色見にくい・・・」と感じた場合、「お互いに補色になっていない」ことが多いようです。
色がもたらす心理的効果
「暖色」と「寒色」
赤・橙・黄のように「暖かさ」を感じるような色を「暖色系」といいます。 この時期にヨドバシカメラの暖房機コーナーに行くと、オレンジ色や赤色をベースにしています。暖房機コーナーにある色は基本的に「暖色系なんだ」と思っていただけるといいとおもいます。 文字通り「暖かさ」を示すだけではなく、食欲を訴える色としても使われます。食品パッケージにもよく使われています。また、レシピサイトにも暖色系を使ったサイトが多く見られるのもこのためだそうです。(寒色系が全く使われないわけではありません。)
逆に青系の色は「寒色」といい、文字通り涼しさを感じます。夏になるとヨドバシカメラでエアコンコーナーへ行くと青基調の配置になっているのはこのためです。 また、夏のかき氷やアイスも寒色系を使うことで涼しさを引き立てています。この場合は「おいしい！」よりも「涼しい！」をアピールするために寒色系の色を使うことが多いみたいです。
Webアプリケーションを作るにあたっても、ターゲットに合わせて「暖色」「寒色」を意識してみましょう。 たとえば、食品を扱うサイトであれば明度を低めにしたオレンジ色を使うなど考えることができます。プロトタイプ開発にあたっても、この点だけでも気にしてみるとだいぶ変わります。
色の「視認性」
これはドキュメントを作る時にも心掛けたいポイントです。文字が読みにくいWebサイトになってしまうと、PV数にも直結することになるので注意が必要です。 色の視認性は「背景との明度の差(コントラスト)が大きい」ほど認識しやすくなります。 明るい背景色に対して文字を載せたい場合、明度が低い(黒色など)色を選択します。
違和感を感じたら？
開発中のUIに「なんか見にくい・・・」や「目が疲れる」といったことを感じることが多々あると思います。 ただ、デザイナーさんに「なんか目に悪くない？」と言っただけではなかなか理解されないこともあるかもしれません。 そんなときに、「補色にすればどうですか？」のような具体的な用語が使えると、デザイナーさんにもスムーズに理解してもらえます。
間違いがあったら
この記事は素人が書いています。参考文献をベースにしながら書いていますが、間違いがありましたらお手数ですが不破までメール(fuwa at atware.co.jp)でお知らせください。できるだけ早く修正します。
明日はどうなる？
気づけばアドベントカレンダーも明日で終わりのようです。今年もあとわずかで、今週金曜日は弊社の最終営業日です。 ラストを決めるのは、あの新人です。
参考・引用文献
今回この記事を執筆するにあたって、下記の書籍を参考にさせていただきました。 また、色相環の画像はWikipediaより引用しています。 Wikipedia 色相
いずれの本も、デザイナーではない私が読んでもわかりやすい内容で今後の開発にも活かしたい内容でした。年末休みに更に深く読んでいきたいですね。