デザインするときによく使う、キーカラーの選定方法

Webデザインセオリー Advent Calendar 2015の20日目を担当させていただきます。

何色にするべき?

Web上のコンテンツをはじめてつくるとき、悩みがちな項目のひとつに「色」が挙げられると思います。 特に、長く続いていくかもしれないサービスだと、キーカラーの選択は年単位であとを引くので、適当な色をチョイスするわけにもいきません。
この記事では、デザイン(とくに新規でなにかサービスをデザイン)するときにわたしが行っている、「キーカラーの選定方法」を紹介します。

「どんな印象を持って欲しいか」を言語化する

まず、すぐに筆をとるわけではなく、サイトに訪れた人が「どんな印象を持って欲しいか」を言語化することからはじめます。
たとえば、レストランなどの外食を紹介するメディアだとしても、以下のふたつだとだいぶ特徴が違います。

パターン1

  • 日常的に使う、ひとりでも楽しめるお店の情報
  • 更新は毎日
  • 新鮮な情報がいつも得られる

パターン2

  • ここぞ、というときに使いたいお店の情報
  • 更新は週1回
  • 数は少ないけれど、情報が洗練されている

この「サービスの特徴」から「ユーザーにどんな印象を持って欲しいのか」を考えていきます。
(ここではパターン1を掘り下げていきます)

  • 親しみがある
  • 新鮮な情報が得られる
  • 毎日開きたい
  • 眺めるだけでもワクワクする

……などなど。

この言語化した印象をクライアントやチームに共有して、「こんなイメージで」とあらかじめ伝えておくことで、この先の工程をよりやりやすくします。

言語化された印象から、キーカラーを絞り込む

印象を絞り込んだらはじめて、カラーリングのアタリをつけます。
連想ゲームのように、こんな色合いがいいかな。というのをイメージしていきます。

キーカラーイメージのパターン

  • オレンジ系は食欲をそそる色だし、見るだけでもワクワクするという印象に合いそう。
  • グリーン系は、サラダ系の色合いに近いし、新鮮さを感じさせるかも。
  • 明るいブラウン系は親しみが有り、写真を惹き立ててくれるのでは?
  • ブルー系だと食べものがおいしく見えなさそう、今回はNGかな…

比較のために数パターンの候補をつくると良いです。
ここから連想してきたカラーリングに近い画像を集めてイメージボードとしてまとめておくと、ビジュアルデザインを進めていく上でも良い資料になったりします。
私はよくPinterestのボードを作ってシェアしたりしています。

カラーリングをデザインにあてこむ

白黒のワイヤーフレーム
白黒のワイヤーフレーム

白黒の状態から、実際にデザインしたビジュアルデザインにキーカラーをはめこみ、比較していきます。
百聞は一見にしかず、というのはそうで、ここで「最初に言語化したイメージに合うかどうか」を改めて見つめなおします。

サービス上での色の使い方にもよりますが、ロゴ上でのキーカラーの見え方と、サービスに色を当て込んだときの見え方では差があることも多いです。私はこうして、サービスでの見え方も考慮しながら、キーカラーを決定することがほとんどだったりします。

色をあてこんだ状態
色をあてこんだ状態

こうしてパターンをつくった状態で、クライアントやチームに共有します。
あまりパターンがありすぎたり、差分が多すぎると選べなくなってしまうので、自分が良いと思った2〜3パターンで展開すると良いです。
このとき、最初に決めていた「言語化した印象」をあらかじめ関係者に伝えていると、それを軸に話ができるので、結果的に意見をまとめやすくなります。

結論

競合サイトのことも考える

また、なにかサービスをつくるときは大抵「競合サービス」が存在していることもままあると思います。 競合サイトが多い場合、印象がかぶらないように、サイト上のキーカラーを選定するということも必要です。

競合のサービス特徴の表
競合のサービス特徴とキーカラーの分布

  • サービスA:一番有名な老舗サイト
  • サービスB:毎日更新されていて記事が多い
  • サービスC:更新は少ないが記事の質が高い

という図式の分布とカラーリングになると、敢えてグリーンやブラウンなど、別の色にしたほうが印象づきやすい、という結論になることもあると思います。

まとめ

という感じで、悩みがちで正解を見つけづらいカラーリングについてのお話でした。
こうまとめてみて思うのですが、大事なのは「作りながらみんなで相談して納得のいく結論」を出すことだなあと常々思います。
すべてをクライアントやデザイナーひとりで決定するのではなく、お互いの認識を揃えるために「言語化する」という工程をやってみるの、おすすめです。