AdMarket

お気軽にご相談ください。

[ フォーム:24時間受付 ]

  • 東京 / 03-6206-6466
  • 関西 / 075-365-0571

[ 電話:平日9:00-18:00受付 ]

コラム

マーケティング
【もう迷わない】WEBサイトのカラー配色の基本その1―テーマカラーの決め方

2020年3月23日

WEBサイトをデザインするときに欠かせないのが「色」。どんな色を使うかによってサイトの印象は変わってきます。今回は、WEBサイトのカラーの基本をご紹介します。

1.基本は3色

WEBサイトのテーマカラーは、「メインカラー」「ベースカラー」「アクセントカラー」の3種類があります。

●ベースカラー:サイトのベースとなるカラーで、主に背景や余白に使われる色。

●メインカラー:そのサイトをイメージつける、主役の色。コーポレートカラーなど、イメージに合わせた色を使うことが多いです。

●アクセントカラー:注目させたいポイントとなる箇所に使用していることが多く、メインカラーよりも目立つ色がいいと言われています。

この3色でカラー構成をすることで全体的に統一感のあるサイトになります。

2.ベース・メイン・アクセントカラーの配色比率

それぞれのカラーをバランス良く使用することで見やすい配色のサイトに仕上げることができます。

【3色の比率】
ベースカラー:70%
メインカラー:25%
アクセントカラー:5%
20200323_img02.png

この比率が、見た目が美しくなる配色比率だと言われています。この比率が大幅に崩れると、何が重要なのかがわからず目が散らかるサイトになってしまいます。

3.3色以上使用したいときに気をつけること

3色でまとめることが基本ですが、必ずしも3色におさまるわけではないと思います。4色以上になってしまうときは、以下のことに気をつけると、統一感がでるでしょう。

●2色以上は同系色や類似色でまとめる

●明るさや鮮やかさを統一する

●比率を分割する

20200323_img03.png

色が増やすほどまとまりがなくなり見づらくなります。基本は3〜4色を目安にしましょう。

まとめ

皆さんが普段目にしているサイトも3色程度で構成されているものがほとんどではないでしょうか。サイトを制作する際は、他のサイトをみて、使用カラーや、アクセントカラーの使用部分などを参考にしてみるのもいいですね。

同じカテゴリの記事

コラム記事一覧

PAGE TOP

Web広告&SNS広告運用 AdMarket