【WEBデザイン】配色の基本の解説と参考になる配色サービスを紹介

デザインの重要ポイントである「配色」ですが、デザイナー入門の方やデザイン初心者には何を基準に色を選んだらいいのかとても難しいところです。

また、色はたくさんの種類があり、組み合わせると無限大…！
色を知れば知るほど、どんな色を使ったらいいのかわからなくなる…そんなお悩みを解決するために、今回は、現役のWEBデザイナーが配色を決めるときのポイントや、参考になる配色サービスをいくつかご紹介します！

おすすめの方

モグモグさん

デザイナーの方じゃなくても、配色を知っていることで

センスに頼らずに目的にあったデザイン(パワポ資料などでもいかせます)を作ることができるよ！

配色選びのポイント

まずは配色選びのポイントから解説します。

モグモグさん

ポイントを抑えておけば、イチから配色を選ぶときにとても参考になり、スムーズに決めることができるよ！

ポイント

1.それぞれの色の印象を知る

2.配色の比率を知る

3.カラーホイールを参考にしてみる

色には心理的な要素があり、色から与える印象や影響があるのをご存知ですか？例えば、赤だと情熱的、活発的などの印象を与えます。

色が与える印象例

デザインを作るときに、ユーザーにどんな印象を与えたいのかを基準に配色を選ぶのがポイントです。

WEBサイトなどを作る際には、ベースカラー、メインカラー、アクセントカラーという３つのカラーを使用して、使用する比率を知るだけで美しい配色ができるようになります。

もっとも使用する比率が大きいカラーで、主に背景や余白などに使用する、ベースとなるカラーです。

サイトのメインとなるカラーで、先ほど述べた、どんな印象にしたいのか？のカラーはここのメインカラーに配置するととても綺麗な配色にすることができます。

全体の5%だけ使用するカラーで、メインカラーよりも目立つ色を配置することがポイントです。このアクセントカラーがあることで、全体が引き締まり、ユーザーの目を引く役割があります。

モグモグさん

これらの配色の比率を守ることで、綺麗で見やすく美しいWEBサイトを作ることができます。

色相環(しきそうかん)とは、色相を環状に配置したもので、これを使えば簡単に反対色（補色）や類似色などを見分けて配色に生かすことができます。

例えば、先ほど「2.配色の比率を知る」で紹介した「メインカラー」と「アクセントカラー」がありましたね。

メインカラーの反対色（補色）をアクセントカラーに使用すると、アクセントカラーがとっても綺麗に映えて、綺麗な配色を作ることができます。

モグモグさん

最初は、色相環を全て覚えるのは大変なので、印刷して壁に貼っておくなどしていつでも見れるようにしておくと、配色に迷わなくなりますよ！

配色だけでもデザインの印象も変わってくるので、さまざまな世の中にあるデザインの色を意識しながら見てみると面白い発見があるかもしれません！

また、色は専門の資格が存在するほど、奥が深く、学べば学ぶほど楽しくなる知識です。初心者でもチャレンジできる「色彩検定」というものもあるので、今回の記事をきっかけに色の勉強をトライしてみるのもいいかもしれませんね！