もう迷わない！最適な配色を見つけるための7つのヒント

デザインの大きな要素である、配色。みなさんはどのように考えていますか？

よくわからないままになんとなく決めてしまい、どこかパッとしなかったり、既視感のあるものになってしまったり、「どうやって決めればいいの？ 」と悩んだ経験のある人は多いのではないでしょうか。

そこで今回、配色の決定プロセスについてGoodpatchのデザイナーに聞いてみたところ、実践的な7つのヒントを得ることができました。
デザインを勉強中のみなさんにぜひ知って欲しいものばかりなので、参考にしてみてくださいね。

1つめのヒント：セオリーに逆らわない

色のセレクトにはある程度セオリーがあります。配色を決めるときにはまずメインとなるカラーを決め、その後にサブカラーを決めます。
例えば企業のサイトを作る案件なら、メインカラーはコーポレートカラーやロゴの配色から自ずと決まってきますし、クライアントから色の指定があることも多いので、セオリーに逆らわないことをお勧めします。

さて、ここで問題です。
「自然保護」を掲げる団体のサイトは何色がいいと思いますか？

まず、蛍光ピンクなど毒々しいイメージを連想することは少ないはずです。

このように、どの色をメインカラーにするか考えるとき、大体どんな色にするべきかの「あたり」がつくと思います。この「あたり」は、企業やテーマに対するイメージ、あるいはそこから連想される色のことです。あたりをつけるためには、時には自分の直感を信じることも大切なのです。
そして、導き出されたメインカラーを元に、サブカラーやアクセントカラーとして何色が合うかを考えましょう。

2つめのヒント：キーワードから拾う

クライアントワークにおいて、配色を決定する際は、サービスあるいはプロダクトの目指す方向性が何であるかを明確にすることにトライしてみてください。
コンセプト、方向性を分解して出てくるキーワードを拾ってくることから始めます。

以前デザインのリニューアルを担当した、グループ内における情報共有サービスの案件では、はじめにクライアントの希望をヒアリングしました。それから類似サービスのリサーチをして、トレンドが明るめのカラーリングであるということを掴みました。

この時のクライアントの要望は「洗練された新しいイメージ」へのリニューアル、かつ新しいユーザーを増やすと同時に既存のユーザーの利便性も向上させたい、ということでした。そこで、「洗練された」というところから「画面が暗くならない色にする」という軸を決定しました。また、既存のデザインも考慮し、コーポレートカラーのブルーを使い、明度・彩度を上げてよりはっきりした新しい印象になるようにしました。

配色を決めるときには、ちゃんと言葉にして説明できるということを意識しましょう。クライアントに対して、なぜその色にしたのかという理由を説明して、チーム全員が納得して進めていけるように、根拠を言語化できる色選びが大事になってきます。

3つめのヒント：コンテンツを意識する

配色を決めるときは、コンテンツを邪魔しない配色を心がけましょう。
つまり、誰もが持つイメージに沿う配色や、実際のコンテンツと並べたときにしっくりくる配色を選択するということです。

あなたがグルメサイトを作るとしたら、美味しそうなごはんの写真を用意して、実際に背景の上に置いてみるとわかりやすいでしょう。

このように、写真などの具体的なコンテンツからインスピレーションを得て配色を考えると、意識的な決定をすることができます。

4つめのヒント：コンセプトを言語化する

新しくプロダクトを立ち上げる場合は、そのプロダクトが

・どのような立ち位置にあるか
・どういったコンセプトを持っているか
・どういった性格、キャラクターと言えるか
・どのような体験を提供したいのか

といったところを言語化して、色に落とし込みます。

自社でプロダクトを0からデザインするようなケースでは、プロダクトをユーザーにどう使ってもらいたいか、そのためにプロダクトはどうあるべきなのかを言語化し、可能であればコアワードを設定してみましょう。言語化されたコンセプトが、具体的なUIやインタラクションやイラスト、そして配色に活きてくるのです。

5つめのヒント：印象を色に落とし込む

印象を色に落とし込むとはつまり、体験の価値や位置付けから色味を考えるということです。

クライアントワークにおけるカラー選定は、ある程度ブランドカラーが決まっているため、その色を使うことが多いかもしれません。しかし、色味のブラッシュアップをすることは可能ですよね。

Goodpatchがデザインリニューアルをお手伝いしたプロジェクトでは、「きっちり丁寧に作り込んでいる」「安心感を出す」というゴールが求められていたことから、元々の色味は変えずに色味のブラッシュアップを行いました。具体的には、色相は変えずに彩度や明度を上げてよりフレッシュに、古い印象を持たせないように意識したことで、サービスに対して「安心感」を持ってもらえるような配色を心がけました。

6つめのヒント：ターゲットと目的を掴む

企業のキャンペーンを考えるようなケースでは、配色を考える前に「そのキャンペーンをどの層に届けたいか」を掴むフェーズがあり、それからターゲットごとに「どのようなカラーリングがいいか」をリサーチするはずです。
例えば、原宿系ファッションを好む若い女性がターゲットならパステルカラーを使ってみるなど、ターゲットの特性を掴むということが重要になります。

キャンペーンとして価値を生み出したい場合は、コーポレートカラーとは異なる色をあえて選ぶこともあるでしょう。しかし、一目で「あ、あの企業だ」と分かること、ブランド価値を高めることが目的の場合はコーポレートカラーを使うことが多いはずです。
つまり、キャンペーンが目指すものが何なのかを明確にすることが、この場合の配色においては重要になります。
ターゲットに合わせてなのか、企業イメージに合わせてなのかを考えることで、適切な配色を見つけられるのではないでしょうか。

7つめのヒント：日常的にインプットをする

毎日過ごす中で、どこにヒントがあるのかはわかりません。日頃から「いい色だな」と思ったものを記憶しておくこと、こまめなインプットは、良質なアウトプットに欠かせない行動だと言えます。
机に向かっているだけではなく、書店や美術館に足を運んでみることもおすすめです。

Dribbble、Land-book、Pinterestを見て、色やレイアウトのトレンドをつかんだり、「いいな」と思ったものを自分の中に取り込んで解釈し、実際に手を動かすことも効果的です。ひたすら試してみることで、「この色の組み合わせはちょっと違うな」といった感覚が身につくはずです。

---

配色とは、デザインの重要な要素であり、サービスやプロダクトがターゲットに届けたいメッセージを表現する上で、大きな力を持つものなのかもしれません。そんな最適な配色を見つけるためにも、サービスやプロダクトの体験価値を明確にし、方向性をチームで共有することが大切だと私は考えます。

しっかりとコンセプトを踏まえた上で、しっくりくる色味を目指して、理由ある配色やデザインを実践していきたいですね。