MD-Blog_Web Creative

WEBデザインを生業にしている皆様、こんにちは。
早いものでもう6月。いかがお過ごしでしょうか？
個人的にも忙しい日々を過ごしておりますが、4月から入社の新人デザイナーの皆様もあっという間に毎日がすぎているはず。
覚えることがいっぱいで大変だと思います。
今回は、そんな新人デザイナーでも覚えておくと便利な『プロっぽいカラーの使い方』について書いてみたいと思います。

プロっぽいデザインとは

少しの知識を持つことで、デザインは格段に変化します。
今回は、そんなプロが使っている、またはやらないデザインについて紹介していきます。
知識を持ち、実践することで、良いデザインが生まれると思います。
今回は、そんなプロっぽいデザインの作り方『カラー編』をお届けします。

プロっぽいカラーの使い方

カラーの使い方にはプロが使う、もしくは、使わない手法が多々ありますので、
ここでいくつか紹介させていただきます。

色数を厳選する

使用するカラーを増やせば増やすほど、デザインは難しくなります。
バランスよく運用するにはかなりの経験やテクニックが必要となりますので、基本的に使う色を3色+白黒くらいに抑えましょう。
使用割合としては、
「ベースカラー：メインカラー：アクセントカラー」が「70%：25%：5%」になると. バランスよく見えます。
使用するカラーに迷ってしまった時には、カラーパレットを作成してくれる『Adobe Color CC』のようなサービスやツールがありますので、活用できると便利です

文字色などに強弱をつけ、コントラストに気を付ける

カラーはコントラストが弱いと情報が伝わりにくくなります。
なので、背景と文字のコントラストが弱いと、視認性が悪くなり読みづらく伝わりにくいです。
デザインは情報を伝えることが大事なので、「誰でも認識できる」カラーを目指しましょう。
背景の上に載せた文字も同様です。そのままだと視認性が低いので上に半透明の黒や白を置くなどして、読みやすくすることが重要です。
最近では、WEBアクセシビリティも注目され、視認性を確保することは最も重要な項目です。
最適なカラーを選択し、情報が伝わることを意識しましょう。
また、アクセシビリティに最適かどうかを判定するサイトもあります。
こちらでカラーの視認性を確認できますので、活用してみてください。

視認性を確保する

使用カラーに工夫をするだけで、視認性を確保することができます。
左の画像のように. 同じ色の文字ばかり続くと、わかりづらく垢抜けない印象になってしまいます。
右の画像のように. 文字と下地で色の明るさを反転させるなどして、メリハリをつけることでよりはっきりと識別できるようになります。

蛍光色を使わない

基本的にあまり使わないカラーです。
先ほども視認性の話をしましたが、単純に視認性が良くないカラーですので、
特別なデザインに使用する場合以外には、なるべく使用を控えましょう。
もしテキストなどに蛍光色を使わないといけない場面があれば、明度を落とすと視認性がよくなります。

デフォルトの色を使わない

これも基本的に使用しないデザイナーが多いと思います。
強いカラーなので、チカチカとした印象から視認性が悪く世界観を構築しにくいです。
デフォルトカラーを使用したい場合には、ちょっとだけカラーパレットをズラすだけで解消しますので、ぜひ試してみてください。

BGのカラーを真っ白ではなく、少しずらして使う

ゆったりとした余白を使用したデザインに、真っ白のバックグラウンドを使用すると、
隙間が空いてしまって、手抜き感が出ることがあります。
そんな時は、バックグラウンドに少しだけ色を入れてあげるだけで、
格段によくなります。
単純にグレー（#eeeeee）ではなく、少しだけ青や赤などを入れてあげると、
さらに良い雰囲気を演出できます。

まとめ

プロっぽいデザインの作り方、カラー編についてお話をさせて頂きました。
取り上げた知識意外にもたくさん覚えないといけないことはありますが、
今回は、最低限知っていると間違わないデザインの手法を取り上げてみました。
やはり、知識はしっかりとあった方が良いですので、
こちらも忘れないように、デザインをすることをオススメします。
みんなで良いクリエイティブを作成しましょう！　 ではー。