【応用編】おしゃれなデザインにする配色のコツ

デザイン歴23年、ガチデザイナーの「Tetsuya」です。

こちらの記事では「おしゃれなデザインになる配色のコツ」として、
色数を絞ってデザインしましょうということをお伝えしましたが、

今回はその応用編。

僕がこのサイトでもやってる配色方法についてお伝えします。

デザインは色のトーンを絞ることでもおしゃれにできる

さて、このサイトは全体的にカラフルにしているのですが、
デザインがきちんとまとまって見えるように色のトーンを絞っています。

具体的には、

サイトやアイキャッチ画像の背景色は最も淡い「ペールトーン」。
※記事の内容によって一部トーンを変えいています。

また、イラストの色は基本的に

ペールトーンより少し濃度を上げた「ライトトーン」で統一。※一部例外あり

文字色については、デザイン全体がボヤてしまわないように締める意味でも

「ダークトーン」を使っています。

もちろん、これら3つのトーンだけで完璧にコントロールしているわけではありませんが、
ある程度、自分がどの要素にどんなトーンを使うか決めておくことで、

カラフルな色使いにしても全体的にごちゃつかず、統一感のあるまとまったデザインにすることができます。

【デザインするなら必須】色のトーンを把握しよう！

僕はこのサイトで、ペールトーン、ライトトーン、ダークトーン、
3つのトーンを使ってますが、色のトーンは他にもあります。

デザインをする時にもっとも大事なのは、自分勝手に好きな色で配色するのではなく、
「誰に向けたデザインなのか？」を考えた上で、きちんと配色すること。

例えば、ターゲットに対して「優しい柔らかい印象を与えるデザイン」にしたいなら

これら3つのトーンがおすすめですし、

「ポップで楽しい元気な印象のデザイン」にしたいなら

この辺りのトーンがおすすめです。

特にビビッドトーンやストロングトーンは色の中でも鮮やかで
強烈な色でもありますので、

若くて元気いっぱいな「中高生〜大学生向けのデザイン」を作る時に
組み合わせると、反応が取りやすくなります。

さらに女性が大好きな「大人可愛いデザイン」を作りたい場合は、

＋「ソフトトーン」。

この辺りのトーンがおすすめです。

実際に、大人可愛いデザインを謳っている女性のインスタデザインを見ても
ふんわりとクリアな色ではなく、少しグレーがかった

彩度（色の鮮やかさ）が低い色味のアカウントが多かったりします。

最後に、重厚感があり格好良く、高級感漂う「大人の雰囲気のデザイン」を作りたい場合は、

この辺りのトーンでまとめることをおすすめします。

サンプルを4つ並べてみましたが、同じレイアウトでもトーンを変えて配色するだけで、
全く違う印象になることは、パッと見でお分かりいただけるかと思います。

ちなみに4つのイメージを1つのトーン表でまとめると、

こうしたこんな感じで分けられます。

実際、そうしたことを知った上で配色するかしないかで、デザインの制作速度からクオリティ、
相手が受ける印象まで全てのことが変わってきます。

つまり、大事なのは、

デザインの理由や目的を決め、ターゲットが好むデザインの傾向を掴んでおけば、
デザインのレイアウトやフォント選び、配色の迷いがなくなり、

世間に対して響きやすいデザインを作ることができるようになります。

同じトーンで配色できる便利ツール

1色決めても同じトーンでどう色展開すれば良いか分からない。

もしかするとそんな悩みにぶつかることがあるかもしれません。
実際、僕はよくあります。

だからと言って、自分で色を作るのは大変ですし、
自分で作ろうとすると無駄に時間もかかります。

なのでそんな時は、潔く便利なツールを頼りましょう！

僕がよく使っているのは、
「Palx: Automatic UI Color Palette Generator」というサイトです。

このサイトは検索窓に自分が決めたカラーコードを入力するだけで、
淡い色から濃い色まで各トーンカラーを抽出してくれる非常に便利なツールです。

ただし、検索する色によっては目がチカチカする色もピックアップされてしまいますので、
検索した際に目がチカチカしそうな色になっている場合は、

色の彩度（鮮やかさ）を調整し、見やすい色にしてください。

リンクを貼っておきますので、使えそうならブックマークしておいてくださいね。

まとめ：理由を考えればデザインは自然とできる

今回は「おしゃれなデザインにする配色のコツ」応用編ということで、

色数を絞るのではなく、色のトーンを絞ってデザインする方法について
お伝えしました。

そもそもデザインは大事な情報を「伝えるために設計するもの」で、
伝わるデザインにするには、デザインの意図が必要です。

デザインを勉強したことがない人にとってはデザインを難しく感じたり、
センスがないとできないと思ってしまうかもしれませんが、

デザインの目的を明確にして、デザインの意図を考れば、
センスに関係なく誰でもきちんとデザインできます。

ただ、多くの人がそもそも義務教育でデザインの考え方をきちんと教わっていないため、
自分の感覚だけでデザインを作ろうとしてしまいます。

だから「デザインにはセンス（感性）が必要だ」と思ってしまうというわけです。

そもそもセンスというのは、自分に蓄積した情報の中から生まれるものですので、
しっかりと勉強しなければ、絶対にセンスは磨けませんし、身につきません。

なので、少しでも「自分らしいデザインを作りたい」と思う場合は、
デザインの全てを学ぼうとするのではなく、

自分が作りたいデザインのことだけでも学びましょう。

そうすれば、自分の世界観を自分の手で作ることができるようになりますし、
プロのデザイナーを目指さないなら、そもそもいろんなデザインが作れる必要はありません。

実際、プロのデザイナーにも得意不得意はありますし、
特にフリーランスの場合は、独自性を出すために、得意ジャンルだけに特化したデザイナーも存在します。

いずれにしても、自分を表現するためのデザインだけでもできるようになれば、
ライバルから余裕で頭一つ抜け出せますので、

自分らしい世界観につながるデザインの作り方だけでもぜひマスターしてみてください。

ということで、僕の記事が少しでも参考になれば嬉しいです。
こちらの記事も参考にどうぞ。