Webデザインを始めたばかりの頃は配色に悩むことも多々あるかと思います。
私もデザインの専門学校で配色について学んだり、カラーコーディネーター検定試験を受けようと思い独学で学んだことがありますが、慣れないうちは、いざWebデザインをしてみると実戦でどう適用すべきか迷うこともありました。
配色ルールや学術的な配色のノウハウはたくさんあるのですが、今回の記事では、初心者向けに、最低限これだけ分かっていれば、実戦ですぐに使えて、それなりの配色ができる３つのポイントをご紹介します。
３つのポイントとは？
それでは、いきなり３つのポイントをご紹介します。
- ベースカラーを決める
- 色を多用しない（特にベースカラーと同系色以外）
- クリックさせたい、目立たせたい箇所が強調されるようにする
これだけです。簡単ですよね？
では、ひとつずつ、解説していきます。
【１】ベースカラーを決める
まずはサイト全体の基礎となる色＝ベースカラーを決めます。
ベースカラーの決め方ですが、Webサイトを制作する際はロゴに合わせることが多いですね。
例えば、Yahoo!なら赤、LINEなら緑といった感じです。
最近のWebサイトの配色の傾向はロゴの色以外は、黒やグレー系でまとめるサイトをよく見かけます。
ヤフー株式会社（コーポレートサイト）の例
ロゴが赤なので、赤をベースカラーとし、グローバルメニューなどはグレー系を配色しています。
右上のスライドを選択できる丸や、下の方のコンテンツをオンマウスした際の枠の色は赤系の色を使っていますね。
画面をスクロールして、コンテンツの続きを表示させる際のくるくる画像も、下の図のように赤色を使っています。
ベースカラーを自由に決めることができる場合
ロゴ自体が無い場合や、ロゴを白にして自由にベースカラーを決めることができる場合は、以下の点を考慮してベースカラーを決定します。
- Webサイトで紹介する商品やサービスのイメージ
- 競合サイトとの差別化
特に競合サイトとの差別化では、競合サイトとするWebサイトのトップページを紙に印刷して、机にズラズラ～っと並べて比較すると、ベースカラーや配色、デザインの検討がしやすいのでオススメです。
【２】色を多用しない（特にベースカラーと同系色以外）
ベースカラーが決まったら、ベースカラーと同系色か、どんな色でもマッチする黒やグレー系以外の色はなるべく使わない方が統一感のある、まとまった配色になります。
前述のヤフー株式会社のコーポレートサイトもロゴの赤をベースカラーにして、赤の同系色かグレー系を配色して、すっきりとまとめていましたよね。
色を使いすぎた極端な例とリニューアル後の改善例
上のWebサイトのキャプチャ画像は、2013年に閉鎖された愛生会病院（埼玉県久喜市）という病院のWebサイトです（今はリニューアルされています）。
Internet Archive: Wayback Machineで保存されていますのでこちらからご覧いただけます。
今から10年以上も前にネット上で話題になりましたが、このWebサイトを初めて見た時の衝撃は今も忘れられません…
いろいろなパーツが点滅しまくりで、すごいWebサイトでした…
白目の招き猫からレーザービームでも飛んできそうで、子どもが泣きそうです…
今だったらバズ狙いで作ろうにも、狙って作れるものではないですね。これはある種の芸術作品に近いです。
…少し脱線しましたので戻しますと、これは極端な例ではありますが、このように色を使いすぎるとごちゃごちゃして見づらいですし、目立たせたい箇所やクリックさせたい箇所を強調できなくなります。
次に比較すると分かりやすいので、上のパンクなWebサイトからリニューアルしたものを見てみましょう。
全然素敵でまったく問題無いですが、アレを知っているだけになんか普通でちょっと残念…というのはおいといて、ベースカラーはロゴの緑とオレンジで、グローバルメニューやコンテンツの見出し部分でベースカラーの緑とオレンジ系を使いつつ、あとはグレー系でまとめていますよね。
ベースカラーではない赤とか青は使っていない、というのはお分かりいただけますでしょうか。ここで赤とか青を入れてしまうと、前述のパンクなWebサイトに一歩ずつ近づいていきますｗ
【３】クリックさせたい、目立たせたい箇所が強調されるようにする
Webサイトの中には、商品の購入ボタンやお問い合わせページへのボタンなど、ユーザーにクリックしてもらいたい、目立たせて見てもらいたいなど、アクションを狙うボタンやパーツがあります。
それらのボタンやパーツは、基本的には画面の中で目立つように配色する必要があります（あえてそこまで目立たせない場合もありますが、それはボタンやパーツの目的や優先具合によって変わります）。
ネットで商品の販売をすることが目的のamazonを例に解説します。
amazonのロゴは文字が黒で矢印がオレンジです。
ベースカラーは黒とオレンジですね。
amazonで最もユーザーにアクションを起こしてほしいのは、上の画像だと、右側にある「カートに入れる」ボタンです。
amazonではこの「カートに入れる」ボタンや「検索」ボタン、上の画像にはありませんが、「レビューの★」画像リンクがオレンジです。
amazonにとってはこれらのボタンやリンクが売上に直結する重要な要素なので、オレンジで目立たせているだろうと思われます。
amazonのように、ロゴに複数の色がある場合は、目立つほうの色をクリックさせたいボタンやパーツに配色し、目立たないほうの色をグローバルメニューやその他のパーツのベースカラーにすることで、統一感のあるすっきりした配色になります。
先ほどの愛生会病院のリニューアル後のサイトのようなロゴが緑とオレンジの場合は、ベースカラーを緑にして、クリックさせたいボタンや目立たせたいパーツにオレンジを配色すると良いでしょう。
※病院サイトの場合は、ネット上で何かボタンをクリックさせたいという必要性はあまり無く、電話で問い合わせというケースが多いと思われるので、愛生会病院のWebサイトでは、ボタンに対して強調させる配色はされなかったのだと思われます。
ロゴに複数の色が無い場合は、ベースカラーを決めたら、ベースカラーと比較して強調される色を、クリックさせたいボタンや目立たせたいパーツに配色すればOKです。
ベースカラーが青なら赤を強調する色に使う、などですね。
まとめ
今回ご紹介した３つのポイントを最低限おさえておけば、それほど配色で外すことはないでしょう。
なお、これらのポイントはバナー作成やPowerPointでの資料作成など、配色に関係することなら何でも当てはまりますので、ぜひご参考下さい。
