失敗したくない方必見！ホームページの配色の基礎知識

会社のホームページであるコーポレートサイトなどを作成する際デザイン的な部分で気をつけなくてはいけないポイントがいくつかありますが、その中でも特に意識するべきなのが「配色」についてです。

「配色なんて好きな色を使えばいいんじゃないの？」と考えている方も多いかと思いますが、配色はホームページにおいて非常に重要な要素の一つとなっています。

今回は、そんなホームページの配色に関する基礎知識について紹介していきます。

ホームページの作成で失敗したくないと考えている方は、ぜひ参考にしてみてください。

ホームページの配色にこだわるべき理由

ホームページの配色にこだわるべき理由は、「ユーザーにもう一度訪れたいと思ってもらえるようなホームページにするため」です。ユーザーは、デザインが好みではないホームページにはアクセスしようとしません。約半数のユーザーが、「デザインが好みでないホームページには再訪問しようと思わない」と答えているデータもあるくらいです。

そして、ホームページのデザインに大きな影響をあたえるのが「配色」です。

色の世界は非常に奥が深く、配色をおこなうときは色同士の相性や彩度、明度などを意識して配色していかなくてはいけません。それらを無視して配色してしまうと、ユーザーが違和感を感じたり、不快感を感じるようなホームページに仕上がってしまうわけです。

そのため、ホームページを作成するときには、配色にこだわりながら作成していく必要があると言えます。

配色の基本「3つのカラー」とは？

ホームページの配色をおこなうときは色同士の相性や彩度、明度などを意識するべきと紹介してきましたが、同じように意識するべきなのが色の数についてです。

使用する色の数が多いと落ち着かないごちゃごちゃとしたデザインになってしまうため、ホームページの配色は3つのカラーをベースにする必要があります。

●ホームページのベースとなる3つのカラー

①ベースカラー
②メインカラー
③アクセントカラー

それぞれのカラーについて詳しくみていきましょう。

1. ベースカラー

ベースカラーはその名のとおりホームページのベースとなるカラーです。ホームページとして表示される面積の大半を、このベースカラーで埋めていくことになります。

ただ、ベースカラーと言ってもその立ち位置は主役ではなく脇役的な立ち位置となっていて、ホームページのコンテンツの背景や余白部分に使用されることが多いカラーとなっています。

2. メインカラー

メインカラーは、サイトの主役となるカラーです。使用される面積こそベースカラーの方が大きくなっていますが、サイトの印象を決めるのはこのメインカラーです。

そのため、その企業を連想させるカラーやテーマカラーが使用されることが多くなっています。

3. アクセントカラー

アクセントカラーはここぞというところに対して使用されるカラーです。ユーザーの目を引きたい箇所などに使用されることが多く、使用される比率的にはかなり少なくないのですが、ユーザーにインパクトをあたえるカラーとなっています。

それぞれのカラーの比率は「70：25：5」が理想

ここまで紹介してきた、

ベースカラー
メインカラー
アクセントカラー

は、使用する比率にも注意が必要です。

●理想的なカラーの比率

ベースカラー：70%
メインカラー：25%
アクセントカラー：が5%

この比率を意識して配色をおこなっていくようにすると、バランスの取れた美しい配色のホームページが作成できるようになっています。

まとめ

ホームページを作成する際の配色について紹介してきました。

この記事で紹介してきたように、ユーザーの約半数は違和感や不快感を覚えたホームページには二度とアクセスしないという驚きのデータがあるため、ホームページを作成する際の配色には本当に気をつけなくていはいけません。

ただ、配色は本当に奥が深いので、自社で考えるのが難しい場合は、デザインのプロである制作会社に依頼するようにしましょう。