こんにちは！ひろみです。
Webサイトやバナー広告などのデザインを作るとき、使う色や配色の割合について悩んだことはありませんか？
今回はWebサイトやバナー広告など、デザインをする際の効果的な配色構成についてお伝えします。
Webサイトやバナー広告の色選びについて
Webデザインやバナー広告に使う色の数について
ズバリ！デザインをする際に使う色の数は３色までとするのが効果的です。
Webサイトや広告デザイン（バナー広告・サムネイル画像）、プレゼン資料などを作成する際、色を多く使いすぎることで視認性が低くなり、ユーザーに伝えたい訴求事項が色に埋もれてしまうことがあります。
そのためデザインに使う色の数は３色までとし、色で訴求事項を強調し目立たせることがポイントです。
トンマナとは？
WebデザインやWeb広告（以後バナー とします。）におけるトンマナとは、「何を訴求しているデザインなのか？」ユーザーが直感的に認知や判断をすることができるよう、デザインの色調や明暗、フォントなどを統一させるために使うWeb用語です。
例えば、ベビーシッターサービスのWebサイトやバナー広告があったとします。
赤ちゃんを思い出してみてください。
明度の高いパステルカラーをイメージした人が多いのではないでしょうか。（明度が高くなるほど白に近づき、明度が下がるほど黒に近くなります。）
- 海と言えば青、山といえば緑
- 熱いといえば赤、寒いといえば青
といったように、人間は色について潜在的にインストールされてるので、それらに合わせた色をWebデザインやバナー広告に使うことがトンマナとして効果的です。
また、商品やイメージキャラクターがある場合、メインカラーはそれらと同じ色を使うとデザインの統一や構成のまとまりが高くなり、メインカラーに合ったベースカラー（背景色）を選ぶことで最適なトンマナ構成となるでしょう。
【テーマカラー】配色構成について
配色構成の好ましい比率
- ベースカラー70%
- メインカラー25％
- アクセントカラー５％
ベースカラー
背景色…メインカラーを引き立たせる役割
メインやアクセントカラーではないとはいえ、デザインにおける面積比の割合が一番多いことから、ユーザーが見たときの第一印象を左右する大切な色です。デザインのトンマナを考慮する際は、訴求事項と制作意図に合ったベースカラーを選びましょう。
メインカラー
商品やロゴなどに使われていることが多いことから、Webサイトやバナー広告など制作する際、訴求順位の高いものに使うと効果的です。
アクセントカラー
お問い合わせやお申し込みボタン、イベントなど強調させたい情報に使うと効果的です。
WebサイトやWeb広告（バナー・サムネイル）において訴求事項の優位度が高く、一番強調させたい箇所に使うことがポイントです。
アクセントカラーはメインカラーの補色を使うとより効果的ですが、アクセントカラーの使いすぎには注意が必要です。アクセントカラーはユーザーの視覚に入るデザインコンテンツ内に一カ所に留めておきましょう。
【初心者向】Webデザイン配色ポイント
ポイント１
可読性を高めるため、明度の高い画像やイラストの上に文字を置くときは明度の低いフォントカラーを選び、逆に、背景の明度が低いときは明度や彩度の高いフォントカラーを選びましょう。
ポイント２
視認性や可読性が低くなることから、画像の上に直接文字を配置する構成は控えましょう。
まとめ
今回はWebサイトやバナー広告など、デザインをする際の効果的な配色構成についてお伝えしました。
トンマナに合った配色を選び、ユーザーへ伝えたい情報を訴求しましょう！
