WEBサイトのカラーについて | WEB制作 | コラム | 岡山,広島,ホームページ制作,CMS構築,複合機の導入は株式会社BtoBホールディングス

Webサイトを作っていく上で、重要になってくるのがカラーコーディネートです🎨

 

例えば、ブルーをメインカラーにしてサイトを作りたい！と思っていても、誰に向けたWEBサイトを作りたいのか、それによって、暗めのブルーを使うのか、明るいブルーを使うのかが変わってきます。

 

WEBサイトのカラーは

✔メインカラー

✔サブカラー

✔アクセントカラー

の三色で構成されています。

 

メインカラーは配色の構成要素の中で、最も大きな面積を占める色のカラーのことをいいます。

全体のイメージを作り出す役割をもっています。

 

サブカラーはメインカラーに次いで面積が大きく、メインカラーを補う役割を持っています。

 

アクセントカラーは配色の構成要素の中で最も小さい面積ですが、一番目立つ色です。全体を引き締める効果や、ユーザーの目を引く効果があります。

 

メインカラー70％、サブカラー20％、アクセントカラー10％の割合で配色をしてあげるとバランスのいいものが、制作出来ます。

 

この中で重要なのはアクセントカラーです。

いかに目立つ色を使うかでお問合せへの誘導や、採用情報を目立たせるなど、サイトの目的を達成できるかを大きく左右する重要な要素の一つです。

 

最初に例を出したブルーをメインカラーにサイト制作していきたい場合、

アクセントカラーはイエローを選択するとまとまります。

なぜかというと目立つ色を選ぶポイントが、色相・明度・彩度のうち、

2つ以上がメインカラーと異なる色を選ぶ事が重要です。

明度は色の明るさ、彩度は色の鮮やかさです。

色相はなにかわからない人もいるかと思います。

「色相環」というものがあり、その図を見るとわかりやすいです。

 

色相が異なる色というのは、メインとなる色、その向かい側に位置する色が色相の異なる色ということになります。

今回はメインカラーがブルーなので、その向かい側に位置するイエローを選ぶことで、目立たせたい場所を際立たせることが出来ます👌

 

重要な役割があるアクセントカラーですが、仕組み、配色のコツさえ押さえてしまえば、簡単に色の決定が出来ます👍

 

サイトのカラーに悩んでいる方は参考にしてみてくださいね😉