配色の基本３つのテーマカラー

ホームページを作成にあたって「配色」には３つのテーマカラーがあります。ホームページの内容は同じでも、色使いによってユーザーに与える印象は変わってきます。カラフルに色数が多いとかえって見栄えが悪くなり、内容がユーザーに伝わらなくなってしまいます。配色にもある程度のルールがあり、ルールを知っていれば短時間でバランスのいい色選びが出来るようになります。

今回は、ホームページを作成する際に気を付ける「配色の比率」について解説します。

基本のテーマカラー

３色の配色比率

「ベースカラー」は、余白や背景色などに用いられます。サイトの大部分を占める色でメインカラーやアクセントカラーを引き立てる脇役のような役割で、白や薄い色合いが使われることが多いです。

「メインカラー」は、企業又はサイトのイメージとなる色です。企業のロゴマークや色が持つ印象から選ぶことが多いです。

「アクセントカラー」は、目立たせたいポイントに使用する色です。例えば、お問合せボタンや最新情報など、特にユーザーに見てほしい箇所に使われます。

配色を決めるポイント

「配色」する際、サイトによっては３色では物足りなさが出てきてしまう時があります。その場合はカラーを分割する方法があります。メインカラー又はアクセントカラーがほぼ等分になるように分割し色を増やします。ポイントは同じ色でも「明るい・暗い」「淡い・濃い」「弱い・強い」などバリエーションがあります。これを色の「明度」や「彩度」といいます。これらをうまく組み合わせて色を決めると統一感を維持しやすくなります。「Adobe」が提供するWebサービス「Adobe　Color」など利用すると、色の組み合わせの参考になります。

【Web制作のカラーコードについてはこちら】

Web制作のカラーコードとは

---

「テーマカラー」のそれぞれの役割を理解し、最適な配色をすることでバランスのとれたサイトに仕上げる事ができます。ホームページ作成の参考になれば幸いです。