【初心者】WEBページの配色を決める方法

こんにちは、Mako（@makokamiya）です。

今回は、学校で習った「WEBページの配色を決める方法」がいいなーと思ったのでシェアします！

こちらのサイトを使ってWEBサイトの配色を決める方法をご紹介します。

色の基礎知識

説明の前にまずは基礎知識からおさらいしましょう。

色味の変化や種類を示したもの。赤、黄、緑、青といった色の状態の違いをいう。これを円状にわかりやすく、体系的にまとめたものが「色相環」
https://iro-color.com/dictionary/

彩度は色の鮮やかさの度合いを表す。彩度が高くなると色の純度が上がり鮮やかな色となる。
https://iro-color.com/dictionary/

明度は色の明るさの度合いを表す。明度が高くなると色は明るくなり、低くなると暗くなる。
https://iro-color.com/dictionary/

色相環で隣に接している色を類似色という。
https://iro-color.com/dictionary/

色相環でちょうど反対側にある色のことをいう。
https://iro-color.com/dictionary/

メインカラーはその名の通り、主役となりデザインの中心になる色です。
https://chot.design/concept-of-design/02d49c79f19a/#id3

ベースカラーはデザインの中で最も大きな面積を占める色になります。
https://chot.design/concept-of-design/02d49c79f19a/#id3

アクセントカラーは、ワンポイントで画面にアクセントを持たせるときに使用する色です。
https://chot.design/concept-of-design/02d49c79f19a/#id3

「Hue Step（色相）」と「Chroma Step（彩度）」の段階を上げると選べる色が増えます。

「Brightness（明度）」で明るさの度合いを調節できます。

まずはサイトのメインとなるメインカラーを決めます。
ロゴなどに使われるコーポレートカラーをメインカラーにするのが一般的です。
今回は2色選びました。

選んだ色は左下に表示されます。1番右の色を基準に明度を下げていきます。

次にアクセントカラーを決めます。アクセントカラーは「メインカラーの補色」か、「明度・彩度が高い類似色」を選びます。
今回は補色を選びました。

次にベースカラーを選びます。ベースカラーは主に背景色となる色で、「メインカラーの明度が低く・彩度が高い色」または白っぽい色を選びます。

わかりやすい。迷わない。便利。