こんにちは。
ナナシロです。
みなさん。
デザイン、やってます？
デザイナーではないからやらないって？
いやいや、それでもちょっとしたデザインをしなくてはならないこと、ありませんか？
例えば、
……なんてこと、ありますよね？
そんな非デザイナーだけど、少しでも見栄えのいいものを作りたいというあなたに！
これを抑えるだけですぐにプロっぽいデザインになるテクニックを紹介いたします。
プロっぽく見せるためには、レイアウトやフォント、配色等、さまざまな要素があるのですが、
今回は「配色」にこだわってご紹介します。
色を考えるのが苦手……なんていう初心者デザイナーの方も必見！
それでは、どうぞ。
目次
色のトーンを揃える
ダサいデザインになってしまう人に確実に共通していることは、色のトーンが揃っていないということです。
逆を返せば、色のトーンが揃っていれば一気にそれっぽいイケてるデザインになるのです。
今回はあくまでテクニックだけをシンプルに紹介するため、 「色のトーン」など色彩理論については一切解説を入れません。 ご興味がある方はググってみてください！
というわけで、色のトーンを揃えるということがどういうことか、
実際にデザインツールのカラーパレットを開いて実践してみましょう！
１．Photoshop等のデザインツールを開く
今回はPhotoshopを使いますね。
２．複数の四角を作って、カラーパレットを開く
2つ以上の四角を作りましょう。
サイズや形は自由です。
色をつけたいだけなので、四角でなくてもいいです。
例では3つの四角を作りました。
その上で、このうちの1つの四角を選択し、色指定するためのカラーパレットを開いてください。
３．1つの四角に適当な色をつける
1つの四角に適当な色を設定しましょう。
有彩色（モノクロ以外）で、お好きな色でかまいません。
４．もう1つの四角に同じ色を設定する
隣の四角にも同じ色を設定しましょう。
５．2つ目の四角の色、カラーパレットのHSBのうちHだけを変える
はい、ここからが大事です。
まず、2つ目の四角の色を設定するカラーパレットを開いてください。
そして、カラーパレットの中でHSBの項目が並んでいる箇所があると思うのですが、
そのうちのHの数値だけを変えてみてください。
Hだけを触る、ということです。
Hの数値を変更すると、RGBやCMYKなどの数値も変わると思いますが、気にしなくて大丈夫です。
ちなみに、数値で設定しなくても、すぐ近くにあるカラースペクトルバーを触って色を変更しても良いです。
さぁ、これでトーンが揃っている色を2色を用意できましたね。
こんな感じ。
せっかくなので3つ目も同じようにトーンを揃えてみました。
ざっくりと赤・青・緑になっているかと思いますが、見ていて心地よいかと思います。
ちなみに、同じ赤・青・緑でも色のトーンが揃っていないと……。
こういうことになります。
こうやって比較して見てみると、気持ち悪さが分かるかと思います。
7 : 2.5 : 0.5の割合で配色する
色のトーンが合っていれば、色同士が喧嘩している感じはなくなりますが、
色の使い方次第では、それでもダサい配色になってしまいます。
ここで意識するべきは、各色の割合です。
濃い色同士で、すべての色を近い割合で使ってデザインすると……、
……ご覧の有り様です。
色同士が喧嘩しないようにするためには、色のトーンを揃える以外に、色の割合を意識して配色する必要があります。
そのときに意識すべきなのが、
ベースカラー : メインカラー : アクセントカラー
を、
7 : 2.5 : 0.5
という割合にすること。
さらに言うと、
全体の7割を占めるベースカラーのところにできる限り薄い色を入れ、
メインカラーとアクセントカラーにトーンを合わせた色を入れると、
とても見やすいデザインになります。
と言う人もいるかもしれませんが、今回はあくまで
「非デザイナーでも書かれていることを実践するだけで綺麗に見せることができる」
というところをゴールにしているので、デザインロジックについての知識と、それが体に染み込むほどの経験が必要な「グラフィカルなデザイン」は目指しません。
では、
ベースカラー、メインカラー、アクセントカラー、それぞれの配色の仕方をもう少し細かく解説していきましょう！
ポイント１．ベースカラーは薄い色を採用する
「パッと見プロっぽい！」デザインにするには、
7 : 2.5 : 0.5 の割合をおおよそ守りつつ、例のようにベースカラーになるべく薄い色を設定しましょう。
今回は白にしました。
ポイント２．メインカラーとアクセントカラーは同じトーンで揃える
メインカラーとアクセントカラーについては様々な決め方がありますが、今回は同じトーンで補色に近い色同士を選ぶ方法をご紹介します。
「補色」については中学校の美術で学んだ内容かと思うので、説明を割愛します。
もし分からない方はググってみてください！
例えば、このブログのトップページのデザインを見てみるとこんな感じかと思います。
これを先ほど紹介した配色の割合に当てはめてみると、こうなります。
ベースカラーとアクセントカラーがそれぞれ2色ありますが、配色の割合としてはおおよそ
- 白と薄いグレーがベースカラー（7）
- 緑がメインカラー（2.5）
- 赤と紫がアクセントカラー（0.5）
となっているかと思います。
ここでメインカラーとアクセントカラーに注目してください。
緑・赤・紫は、実はすべて色のトーンを合わせています。
それにより、全体的に調和のとれたデザインになっているのです。
実はここまで例として使ってきた白・紫・黄の配色も、
紫と黄のトーンを同じにしています。
というわけで、7 : 2.5 : 0.5の割合でうまく配色して作ったデザインがこちら。
フォントはよくあるヒラギノ角ゴですし、文字詰めも何もしていません。
せいぜいちょっと見やすくなるように揃えて並べたぐらいです。
ですが、かなりそれっぽく見えませんか？
おまけ：真っ黒を使わない
最後に、素人っぽいデザインから卒業する武器をもう一つ授けます。
それは、「真っ黒を使わない」ということです。
真っ黒とは、カラーコード「#000000」のことです。
黒を使う機会が多いのはフォントカラーだと思いますが、
デザインの中で黒文字を使うとき、#000000の真っ黒を設定している人が多々います。
真っ黒はかなり強い色のため、他の色と合わせるのが大変難しいのです。
そこで、黒を使いたいと思ったときも、#000000よりは少し明るい色にすることをお勧めします。
なお、例としてお見せしたデザインの黒文字部分は、#555555で設定しています。
こうするだけで、落ち着きのあるデザインになっていますよね。
まとめ
今回は、非デザイナーや初心者デザイナー向けに一気にプロっぽくなる配色テクニックをご紹介しました。
具体的には、
- 色のトーンを揃える
- 7 : 2.5 : 0.5の割合で配色する
- 真っ黒を使わない
の3つのテクニックですね。
この記事で書かれているとおりに実践するだけでも、学生のパワポやスーパーのポップのようなど素人丸出しデザインから卒業できると思います。
ぜひ試してみてください。