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

こんにちは、Mako(@makokamiya)です。
今回は、学校で習った「WEBページの配色を決める方法」がいいなーと思ったのでシェアします!
こちらのサイトを使ってWEBサイトの配色を決める方法をご紹介します。
色の基礎知識
説明の前にまずは基礎知識からおさらいしましょう。
色相(Hue)・色相環
色味の変化や種類を示したもの。赤、黄、緑、青といった色の状態の違いをいう。これを円状にわかりやすく、体系的にまとめたものが「色相環」
https://iro-color.com/dictionary/
彩度(Chroma)
彩度は色の鮮やかさの度合いを表す。彩度が高くなると色の純度が上がり鮮やかな色となる。
https://iro-color.com/dictionary/
明度(Brightness)
明度は色の明るさの度合いを表す。明度が高くなると色は明るくなり、低くなると暗くなる。
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/360」の使い方
「Hue Step(色相)」と「Chroma Step(彩度)」の段階を上げると選べる色が増えます。



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


1、メインカラーを決める
まずはサイトのメインとなるメインカラーを決めます。
ロゴなどに使われるコーポレートカラーをメインカラーにするのが一般的です。
今回は2色選びました。
選んだ色は左下に表示されます。1番右の色を基準に明度を下げていきます。

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

3、ベースカラーを決める
次にベースカラーを選びます。ベースカラーは主に背景色となる色で、「メインカラーの明度が低く・彩度が高い色」または白っぽい色を選びます。
実際のWEBページを使った例
スターバックス


まとめ
わかりやすい。迷わない。便利。