Webサービスの配色をどう決めるか
ご無沙汰しております、大堀です。
いつかきっと役に立つと信じて先週末はウイスキー検定を受験してきました。
第一回目ということなので、これで受かれば国内初の【公認】ウイスキーに詳しいUIデザイナー です。
ウイスキー関連のお仕事お待ちしております。
さてタイトルにも書いた通り、今回はWebサービスの配色の決め方について書いてみたいと思います。
仕事柄、新規サービスの配色を決める場によく立ち会います。
すぐに決まることは稀で、デザインラフを制作して実際に見てみないと…なんてこともよくあります。
それでも最後に決める瞬間はやってきます。今回は「なんでその色にするのか」をきちんと理解し、皆が納得できる決定をするために考えなければいけないことは何でしょうか。
ただ先に結論を言えば、配色に唯一の正解なんてありません。笑
＊＊＊
まず漠然と”配色”と言っていますが、色について語る前に、
・色は単独では存在しえず、隣接する色の組み合わせで印象は大きく変わる。
同じ肌色ですが、右の方がくすんで見えます。
・色の組み合わせはもちろん、比率も大切。
同じ色の組み合わせでも比率が違えば印象はまったく異なります。
あとは当然ながら、白も黒も立派な”色”ですし、日本国内であれば問題になりませんが、文化が違えば同じ色でも与えられる印象は違います。
中国では黄色は皇帝が着る神聖な色でしたし、喪服という概念も世界共通ではないそうです。
＊＊＊
サービスのカラー決定要因
ではどうやって色を決めていくのか、考えうる要因を5つ上げてみます。
A.一般的に期待される配色
占いなら妖艶な紫色、エッチ系ならピンク色、お化け屋敷なら黒 etc.
いわゆる「それらしいと認識されやすい配色」です。先に書いたように文化的な背景が同じであることは前提です。
B.ターゲットが好む配色
男性的な配色、女性的な配色、子供向け、年配の方向け etc.
ユーザー層が画一的であればその好みに合わせていきます。世代的な好みは洋服の色とも関係があるように思います。
C.サービスが持たれたい印象から決まる配色
誠実な印象→青、情熱的な印象→赤 etc.
持たれたい印象を言葉にすると、暖色系や寒色系と言ったメインカラーはもちろん、多色使いやモノトーン、トリコロールなどその配色についても提案ができます。
D.個性が表される色
U/F/J銀行なら赤、み/ず/ほ銀行なら青 etc.
「この会社（サービス）といえば××色だよね。」とまで言われるには通常広い認知と蓄積が必要とされます。
大企業の新規サービスや会社のカラーに思い入れがあるのであれば、それに合わせるということも多々あります。
E.他サービスから逆算する配色
競合サービスの印象が強いため、特定の配色を避ける etc.
上に書いたABCの決め方はメジャーなため、同じ業態であればすでに使われていることがほとんどです。
そこで差別化を図る意味で反対の色相や使われていない色相を選択することがあり得ます。
メディア系では、Facebook、Twitterのシェアボタン（青系）を目立たせるために青以外の色相をメインにするメディアもあるそうです。
配色のパターン出しをする際、上記A~Eそれぞれを考えておくと提案に網羅性と説得力が生まれます。
きちんと上記を伝えることで、クライアントも感性的なフィードバックではなく論理的な言葉で返してくれるはずです。
それと上記どれか一つの理由で決まるというよりも、それぞれのせめぎ合いでちょうど良いところを探っていくことが多いです。
根拠の8割はAで、残りはEというような決め方でも良いはずです。
＊＊＊
配色決定の前に下調べすべきこと
次に配色を考える上で事前にしておくべき項目をあげてみます。
・類似/競合サービスを調べる（AやEの検討に必要）
見ておかないより、見ておいた方が良いです。大事な部分を盲目的に決めるのはあまりにリスクが大きいものです。
・配色のサンプル集め
ターゲットが好む配色や、それらしい配色については書籍やネットで十分調べられます。最近はこの2冊を書いました。
配色デザインの見本帳
カテゴリー別配色アイディア100
・自己（自社）分析
だれが使うサービスか、どういった印象を持たれたいのか。
自分たちについてきちんと考えて明文化し、チーム内に共有しておきましょう。
ここがブレてしまうと何度でも振り出しに戻ります。
＊＊＊
最後に余談ですが、「トーンだけ決める」という例もあります。
Googleは何色でしょうか。同じトーンで多色使いをすることもあり得ます。
The Vergeというサイトがありますが、彩度の高いグラデーションを用いるだけで個性を持ちました。
16進数で表される色数は1677万色、組み合わせまで考えるとその使い方は無限大です。そしてサービスの価値は配色ではなくてコンテンツ自体で決まります。（それを言うか）
正解はたくさんあるんだと考えて、まずは皆が納得できる配色を考える参考にしてもらえればと思います。
ではでは
///////////////////////////////////
Webサービスの新規立ち上げ、UI/UX改善にお困りの方はお気軽にお問い合わせください。
また、株式会社DenDesignではサービスデザインに興味があるWebクリエイターを募集しています。求人情報はこちらからご覧ください。