Webデザインの色の決め方

ryu316

·

Follow

3 min read

·

Sep 12, 2017

--

Share

Webサイトを作成していく上で、色の配色はとても重要です。今日はWebデザインにおける色の配分比率や色の与える印象などについて学んだことを書いていきます。

色の配分比率

まず、Webサイトを作っていく際に設定する色の種類には、ベースカラー・メインカラー・アクセントカラーというものがあります。
ベースカラーとは、名前の通りサイトのベースとなる色です。ベースカラーとは主に、背景などに使われる色で白や黒、グレーなどはメインカラーなどの妨げになりにくいため、よく使われます。
次に、メインカラーについて説明します。こちらも名前の通りサイトのメインとなる色を指しており、可読性を上げるために明度の低い色を使うのが良いとされています。また、メインカラーはサイトのイメージに大きな影響を与えるため、サイトのロゴと同じ色を使う場合も多いらしいです。

最後は、アクセントカラーについてです。アクセントカラーは単調になりがちなサイトの色にアクセントを与えるための色です。この色は、サイトの中でも目立たせたい部分、例えば検索ボタンやお問い合わせフォームなどによく使われます。

それでは、どのような配分でこれらの色を設定していくかというと、これらの色の配分には「70(ベースカラー) : 25(メインカラー) : 5(アクセントカラー)」という割合を意識するとサイトが美しく見えるということです。

色の印象やフラットデザインの配色などについても書こうと思いましたが、他のサイトによくまとめられているので、参考にしたサイトを以下に載せておきます。

色の印象に関する記事

【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」

WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」

デザインの印象は色が左右する！配色パターンについて考えよう

フラットデザインの色使いに関する記事

フラットデザインなWebサイトで使われている色ってどんな色？配色パターン事例・カラーコード付き

今流行のフラットデザインの配色を決めるときに役立つ3つのサービス

Flat UI Colorsの使い方は?フラットデザインにぴったりな色が見つかるサイト

カラーパレットに関する記事

UIデザイナーがカラーパレットで悩んだ際に参考になるサイト5選

配色のトレンドのパターンと便利なツールのまとめ

本日の勉強は以上です！