背景は白、文字は黒、シンプルデザインでサイトを構築してみたものの、どうにもメリハリに欠けるというか殺風景に見えてしまうものである。前回ではシンプルさについて言及したが、今回は色使いについて考察する。

Webにおける色とは何か

Webサイトに関わらず色は大切である。例えば戦隊シリーズ、仮面ライダー、交通標識などなど色をアイコンとしているものは数多ある。そういった意味では色使いこそ、Webサイトの印象に強く働きかけるツールになると思う。

Qiitaなら緑、PixivやTwitterは水色といった具合に色はWebサイトと強力に関連付くことがある。一方で色使いをミスしてしまうことで、ユーザーからのイメージが悪化するなど様々な問題を発生させる可能性すらある。

実際に発生した事例では、Slackのアイコンの下地が濃い紫になったことが記憶に新しい。結果としてUXの低下を招き、ユーザーからの声を受けて白に戻すという結果となった。この例は幸福なパターンであり、Slackが元々ユーザーの支持を受けていたサービスだったからこそである。もし新サービスならば見向きもされなかったかもしれない。

ダークカラーは避けるべきか

個人的にダークカラーは大好物だが、一般的に使われることは少ない。黒を始めとする暗色はディスプレイへの映り込みを誘発しやすいという欠点を持っている。非光沢ディスプレイなら問題ないとはいえ、読みにくいと感じさせることがあるだろう。

故にダークカラーを使う際は注意深くデザインを行う必要がある。特にテキストの下地として使う場合はコントラストなども十分に考えなければならない。可読性を犠牲にしてもインパクトやイメージを重視する場合以外では、背景に濃いダークカラーを使うのは避けた方がよい。

ただし夜間などダークカラーを使うことによってメリットが発生することもある。そういった場面においてはユーザーに対して切り替えの選択肢を与えることも考慮したほうがよいだろう。

色の数について

３～５色にまとめるのが良いというのが通説である。エンジニアがコードを書く際など複数のものを分類するような場面でなければ、この原則は適応可能だと思われる。実際に多くのカラーピックツールなどにおいて、３～５色のサジェストを出していることからも分かるだろう。

まとめ

• 色はイメージに直結するので超大事
• ダークカラーを使う際は吟味すること、テキスト背景は注意
• 色の数は３～５色に纏めること