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

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

こんにちは、Mako(@makokamiya)です。

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

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

色の基礎知識

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

色相(Hue)・色相環

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

https://iro-color.com/dictionary/

彩度(Chroma

彩度は色の鮮やかさの度合いを表す。彩度が高くなると色の純度が上がり鮮やかな色となる。

https://iro-color.com/dictionary/

明度(Brightness)

明度は色の明るさの度合いを表す。明度が高くなると色は明るくなり、低くなると暗くなる。

https://iro-color.com/dictionary/
サイト「HUE/360」の説明

配色の基礎知識

類似色

色相環で隣に接している色を類似色という。

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ページを使った例

スターバックス

「スターバックス」サイトの例
「スターバックス」サイトの例

まとめ

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