非デザイナーのための、ちょっと得する「色」のこと #初心者

はじめに

数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。

ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。

一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。

「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。

デザインの構成要素にはいくつかの考え方がありますが、非デザイナーがUIやバナー制作で特に意識する必要があるのは以下の4つだと思います。

今回はこの中の「色」をテーマに記事を書いていきたいと思います。

Webデザイナーの有名なセオリーとして「黒（#000）はNG」というものがあります。ここでは、その理由をご紹介します。
まずはこちらの画像をご覧ください。

比較してみると黒（♯000）を使った上の画像は、目がチカチカして少し読みにくいと思いませんか？
その理由は単純で「明度」の位置が真逆なんです。

明度？となると思うので、まずは「色の三属性」の説明をしますね。
色を構成する要素は「色相」「彩度」「明度」に分けられます。

先ほどの画像で使われていた「♯000」は最も黒い色、白は「#FFF」で最も白い色。つまり、最も暗い色と最も明るい色の組み合わせなのです。

人間の目には、見える光の量やピントを調整する機能があります。
極端に明暗が強いものを見ると、入ってくる光の量の調整が難しくなり、目への負担も大きく、結果的に読みにくい文字となるんですね。

もちろん、明暗を対極にすれば極端に目立ちます。一方で目への負担の高いチカチカした見た目になってしまうので、適度な範囲に押さえてあげましょう。

デザインの現場では黒（#000）を避けて、グレーを使うことが多いです。白（♯FFF）は使われることも多いですが、目の負荷が高いことは確かなので、少しだけ色をいれて、避けてあげた方が無難でしょう。

「白と黒の注意点は分かったけど他の色は？」となると思いますが、こちらも極端な色は避けた方が無難です。特に彩度と明度が100%になる「純色」には注意が必要です。純色は目への負担が高く、チカチカしてしまいますし、デザインで一番重要な「伝えたい内容」が伝わらなくなってしまいます。

「明度や彩度は下げたけど、なんだか見えにくい気がする…」そんな場合もあると思います。そんな時は、色数を減らしてみましょう。

「3色にしぼる」こちらもデザインのセオリーとして良く使われる言葉です。
伝えたいメッセージ、演出したい雰囲気に合わせて3色を選び「70% : 20~25% : 10~5%」くらいののバランスで使うと、きれいにまとまりやすいと思います。

「まだ、なんかイマイチだな...」というときはモノクロにしてみましょう。
良いデザインは明度のメリハリが効いているものです。

一度グレースケールにして確認することで、目立たせたい場所が目立っているか、見えにくい場所はないかなどを確認することができます。少し珍しい手段ですが、一度モノクロで作ってから色を載せるという手もあったりします。
（Chromeの拡張機能を使ってカラーの画像を白黒にして確認することができます）

以上、ちょっと得する「色」のことでした。
このテーマは本当に奥が深いので、もっとたくさんのTIPSがありますが、一度にたくさんご紹介するとお腹一杯になってしまうと思うので、次の機会とさせてください。

プロのデザイナーも頭を悩ませながら色を決めています。避けるべき強い色を、意図的に使う場合もありますし、印刷とWebでも色の扱いに違いが出てきます。

世の中にある制作物で使われている色を「これはどういう意図でやってるのだろ？」と考えたりすることで、新たな発見も多いと思いますので、ぜひやってみてください。