Web制作

もう色選びで迷わない!知っておきたい配色デザインのコツと配色ツール

アイキャッチ
【フォントの選び方】書体でイメージが変わる!テキストで声色を表現する方法テキストにどんなフォントを使用するかでそのイメージは大きく変わります。キャラクターに合わせたフォントが選べれば、その人の声色もテキストで表現できます。デザイン制作のヒントにしてみてください。...

少し前の記事で、フォントの選び方や表記の仕方についてお話をしましたが、
今回のテーマは「色」です!

テキストと同じように、色もデザインには欠かせない重要な要素です。

しかし、どうやって選べばいいでござるか?

っていう人も多いですよね。

選んだ色や配色によって全体のイメージは大きく変わってくるので
伝えたいイメージにマッチした色を選択したいところです。

そこで今回は、色の選び方配色についてお話ししたいと思います!

メインで使う色を3つ決める

配色を決めるときは、まずメインで使う3色を決めましょう。

メインカラーベースカラーアクセントカラー
と呼ばれているぽ。

この3色を「70%:25%:5%」の割合で配色していくと
全体的にバランスの取れた配色にすることができます。

【参考】GK-POSTの配色

 ベースカラー:70%
 メインカラー:25%
 アクセントカラー:5%

では、それぞれどのような観点でカラーを決めていくのか
順番に見ていきましょう。

メインカラー

その名の通り、サイトのメイン、顔となる色です。

サイトのロゴマークで使われている色をそのまま使うことが多く、
白文字をのせても可読性が高い、明度の低い色を選ぶのがオススメです。

【サンプル】明度の差による色の違い

明度が低い色
読みやすい
明度が高い色
読みにくい
明度が高い色とは、色味の薄い色のことだぽ。

薄い色に白文字をのせると字が沈んでしまうほどに薄いので、
色としてのインパクトが非常に弱く、メインカラーには向いていません。

ベースカラー

ベースカラーは、背景や余白など全体の70%の面積に使用する色です。

メインカラーと親和性が高く、他の要素を邪魔をしない色が良いとされていて
一般的には白や薄いグレーなどの無彩色を利用することが多いです。

ベースカラーにも色味がほしいという場合は
メインカラーの明度を高くした色を設定すると調和がとりやすくなります。

【サンプル】ベースカラーによく利用される色

目に痛い発光色や、明度が低い濃い色はやめておいたほうが良いぽ。

アクセントカラー

アクセントカラーは、とくに目立たせたい部分に使います。

全体の色味に負けないくらい目を引く色を選択する必要があるので
メインカラーの補色(反対色)を選択するのがオススメです。

補色(反対色)というのは、色相環で正反対の位置にある色のことで
補色同士の組み合わせは、互いの色を引き立てあう相乗効果があります。

【参考】色相環
色相環
じーぽのピンクとグリーンも補色の組み合わせだぽ!

無料で使える便利な配色ツール

メインカラーが決まれば、その他のカラーも決めやすいですが
可愛い感じにしたい!オシャレにしたい!といった抽象的なイメージだと
なかなかカラーを決めるのは難しいです。

そんなときは、Web上にある配色ツールを使ってみるのも良いかもしれません。

ぜんぶ無料で使えるツールだぽ!

Color Supply

Color Supply

色相環から好みの配色パターンを選択できるツールです。

選択した配色パターンのイラストやグラデーションのサンプルも確認できるでござる。

Color Supplyを使ってみる

Material Design Colors – Material Palette

Material Design Palette

画面左側のカラーパレットから好みの2色を選択すると
その色に合うカラーデザインサンプルを表示してくれるツールです。

相性のいい色が8色も表示されるから色数を増やしたいときに便利でござるな。

Material Paletteを使ってみる

Colormind

colormind

ボタンをクリックするだけで配色パターンがランダム表示されるツールです。

気に入った色があった場合は、その色だけをロックすることで
その色をもとにした配色パターンを生成してくれます。

色を指定できるのはすごく使いやすいでござる。

Colormindを使ってみる

配色パターン見本40選

配色パターン見本40選

あらかじめ用意されている配色パターンを選択すると
画面右側でプレビューが確認できるツールです。

配色パターンは「万人受けする」「かわいい系」「個性的」など
複数のカテゴリが用意されているので、イメージに近いものを選ぶことができます。

おしゃれな配色がたくさんあるでござる。

配色パターン見本40選を使ってみる

Grabient

Grabient

こちらはグラデーションに特化した配色ツールです。

あらかじめ用意されたグラデーションパターンをカスタマイズできるので
好みの色でサンプルを確認することができます。

最近はグラデーションの配色がトレンドでござる。

Grabientを使ってみる

まとめ

デザインをする上で色はとても重要な要素ですが
バランスよく配色するのは難しいと感じることも多いのではないでしょうか。

でもそれは、デザインの論理やルールを知らないからかもしれません。

実はデザインというものはものすごく論理的で
それを知っているかどうかでデザインの質スピードも大きく変わってきます。

今回ご紹介した配色のコツも、そんな論理のひとつです。

ちょっとした知識ですが、知っているだけで色選びで悩むこともきっと減るはずです。

ぜひ活用してみてください!

アイキャッチ
【フォントの選び方】書体でイメージが変わる!テキストで声色を表現する方法テキストにどんなフォントを使用するかでそのイメージは大きく変わります。キャラクターに合わせたフォントが選べれば、その人の声色もテキストで表現できます。デザイン制作のヒントにしてみてください。...
ABOUT ME
サムライ
元デザイナー。いまは技術全般いろいろ見てます。 デザインのちょっとしたコツやトレンド情報など、分かりやすくて役に立つ記事を公開していくでござる。

ネットショップ運営でお困りのことはありませんか?
お気軽にご相談ください。