同色系でまとまりのある配色、WebデザインにするためのTips

Posted under - Web Design

12

いろいろな色相を使わずに、ひとつの色相の彩度違い、明度違いなどでデザインしていく同系色デザイン。 多くの色相を使わない同色系デザインは、たくさんの Webサイトでも使われている人気の配色です。 同色系でデザインしていくと、ページの統一感がでて色の持つ力を印象付け易いというメリットがあるだけでなく、初心者でも比較的まとめやすい ... という作り手側のメリットもありますね!

monochromatic

同色系でまとめられたデザインは、ページに統一感があって、よくまとまって見えますよね。そして色の持つメッセージを、強く印象付けるのにとっても効果的だと思います。いろいろな色相を使ったデザインに比べて、比較的まとめ易いし、色的な効果を発揮しやすい同色系デザイン。同色系は簡単 … というか、カラフルデザインに比べれば簡単かもですけど、配色における基本的なポイントは、他の配色方法にも通じています。今日は基本的なところを押さえながら、同色系デザインのポイントを見ていきます。

1. 色んな同系色デザインWebサイト

まずは同色系(プラス、アクセント)でまとめられた Webサイトを、いくつかご紹介します。どれもスッキリとまとまっていて、色の印象を強く残しますねー。

Blue – 青いサイト

cellzone.co.uk

パレット

cellzone.co.uk – ブルーでまとめられてる中、オレンジをちょっとアクセントに。ヘッダーの上部にも、細いオレンジのラインがあしらわれてますね!

Green – 緑のサイト

Easy*Peasee

カラーパレット

Easy*Peasee – ちょっと彩度が低めの緑、プラスアクセントでオレンジ。

Red – 赤いサイト

Republic2

カラーパレット

Republic2 – 彩度の低い赤。黒がページを引き締めていてカッコいいですね!

Orange – オレンジのサイト

TagDiri Tag Directory

カラーパレット

TagDiri Tag Directory – 全体的に暗めのオレンジですけど、ロゴマークだけは明るめ + アクセントのグリーンで、目立たせるものはしっかり目立たせてる配色ですねー。

Red – 赤のサイト

tweetCC

カレーパレット

tweetCC – 彩度の低い赤 … 茶色かな?でまとめられたデザイン。無彩色と合わせることで、よりいっそう「色」が目立ってきますねー。

記事の最後でも、いくつか 同形色の Webサイトを紹介しますね!

2. まずは色の三属性から

それでは配色の Tips を見ていきましょう。でも配色を始める前に、まずは色の三属性について復習しておきます。デザインの配色をする上で欠かせない基本ですね!

2.1. 色相 – 色相と色の持つイメージ

色相とは、赤とか青とか緑とか色味のことです。よく下のような色相環を見たことがあると思いますが、色にはたくさんの「色相」がありますね。

色相環

色相環

色相環の色は、適当な順番で並んでいる訳ではありません。暖色、中間色、寒色、という風に並んでいます。そして反対側の色を、対照色とか反対色、補色って呼んだりします。

それでは赤や青、黄色など、各色の持つイメージをひとつひとつ確認してみましょう!

青(寒色)

青

青は信頼感清潔感安定感冷静さなどをイメージさせるので、企業系の Webサイトでは、青を基調としたデザインをよく見かけますね。海や空のイメージともかぶります。

緑(中性色)

緑

自然や癒し、最近ではエコでしょうか。森や植物を連想させ、調和健康などもイメージさせますね。親しみ安心感を与える色です。

オレンジ(暖色)

オレンジ

太陽のような温かさをイメージさせる色。また、食欲増進、シズル感をイメージさせる色とも言われています。どことなく弾むような楽しさもイメージさせますね!他の色とも相性もよく、比較的使い易い色です。

赤(暖色)

赤

情熱的刺激的躍動感をイメージさせる色、赤。ダイレクト感もあって、とにかく目立つ色なのでよく警告、注意などにも使われる色ですよね。赤信号は世界共通みたいです。彩度が高いと色が主張しすぎるので、広い面積で使う場合は、明度や彩度を下げたりすると使い易くなります。

黄(暖色)

黄色

ちょっとゆるい感じの一面がある色。その一方で、活発活動的元気なイメージもあります。色そのものは弱い色なので、他の色の主張に負けることが多いです。よく見かける工事現場の黒、黄色のパターンでも黒に負けてます。

紫(中性色)

紫

色の主張が強くって、独自性をイメージさせる色。昔から紫は高貴な色とされ、神秘的おしゃれなイメージも併せ持ちます。どちらかと言えばアダルトな色ですねー。

桃(中性色)

ピンク

個性も強く、色の持つイメージも強いので、使いどころを選ぶ色です。非日常的女性っぽい魅力的コケティッシュなどを連想させますよね。

灰(無彩色)

グレー

知的誠実冷静なイメージ。またシルバー(貴金属)から、高尚なイメージも併せ持ち、先進的なイメージも連想させます(アップルの Webサイトはシルバーですねー)。

白(無彩色)

白

純粋無垢潔白純粋汚れのないイメージ。花嫁衣装に白が使われてるのは、このイメージがあるからです。また色を際立たせるのでベースの色としてよく使われてます。

黒(無彩色)

黒

夜、闇、死、悪を意味する黒。それと同時に高級感機能的なイメージが強いので、車や家電などにもよく使われていますね!ハイヤーに黒塗りの車が多いのは、高級感を演出してるからですね。


それぞれの色の持つイメージを見てきましたが、機能的にも特徴があったりもします。例えば暖色は出っ張って(手前に)見えるし、寒色は引っ込んで見えたりします。

2.3. 彩度

彩度は、色がどれくらい豊か … 鮮やかであるかということです。ネオンカラーはとても彩度が高く、パステルカラーはそれほど彩度が高くありません。ひとつの色相は、低彩度から高彩度まで、様々な色味を持って並んでいます。

彩度

1がオリジナル、2が彩度を上げた写真、3が彩度を下げた写真です。同じ敷きそうでも、こんなに印象が変わるんですね!

彩度が高い色は派手さ、華やかさを演出できますし、彩度の低い色は褪せた色から地味、ビンテージ感を演出できます。また日本的、和風の Webサイトでも低彩度の色をよく使いますね!

2.3. 明度

明度はそのまま – 色の明るさの度合いです。明度が高いとさわやか、爽快感、軽快感などをイメージさせ、明度が低いとどっしりとした重厚感、落ち着きをイメージさせます。

明度

1がオリジナル、2が明度を上げた写真、3が明度を下げた写真です。明度を上げると爽やかな感じ、初々しい感じがして、個人的には大好きです!


こんな風に、色相、彩度、明度を見ただけでも、いろんな印象を与えることができるんですねー。例えば病院の Webサイトを作る時、信頼とか安心、安全を強く印象つけたいのか、それとも健康とか癒しというキーワードを連想させたいのかでは、色相選びも変わると思います。明度や彩度も同じです。デザインのコンセプトによって、レイアウトなどが同じでも、配色ひとつでメッセージをコントロールすることもできるんですね!

3. 同系色デザインをする時のポイント

同系色デザインは、たくさんの色相を使う訳ではないので、比較的簡単にまとまりのあるデザインを作ることができます。また、前述した色のもつイメージを強く印象付けられるメリットもあります。それでは同色系デザインをするときの、注意するポイントをいくつか見て行きましょう。

3.1. 隣通しの色にはコントラストを!

コントラストの差がない配色は、まったりしすぎて印象に残りにくいです。ぼやけた印象は、コントラストをはっきり付けることで解消できますね!特に隣通しの色にはコントラストの差をつけると、よりくっきりした印象になります。

コントラストの強弱

1は3色使ったアーガイルパターン。でもコントラストがいまいち弱くて、ちょっとぼんやりした印象かも。2は同じ柄で4色にして、1よりもコントラストを強くしました。

好き嫌いもあると思いますが、ちょっとぼんやりするときには、コントラストをつけると際立ちますね!

3.2. 面積が重要 … でもバランスはもっと重要

それぞれの色の面積を、どう振り分けるかで印象が全然かわります。その色をどれくらい目立たせるかは面積の大きさにも依存します。後で出てきますが、目立たせたい色(メインカラー)の面積は特に重要です!

面積の違い

基本的に面積が大きいと、やっぱり目立ちますよね。でも12を比べた時、目立つという視点で見るとどうでしょう?2の様に、ぽつんと一カ所だけアクセントのように配置された色は、それだけでも目立ちますね!面積ももちろん重要ですが、もっと重要なのは全体とのバランスですね!

3.3. 低彩度の中に高彩度を入れてみる

同系色の配色では、どうしても同じ色相を使うので、全体的に活気がないような感じがします。もし低彩度の色ばかりを使っているなら、少し高彩度の色を入れてみると、ぼやけた印象からメリハリのあるデザインに生まれ変わります。

彩度の違いでメリハリ

1は彩度の低い色ばかりで配色されています。少しぼんやりした印象ですねー。それに対して2には彩度の高い色を入れてみました。メリハリもついて、しまった印象になりましたね!

3.4. アクセントカラーを使ってみる

メリハリって大事ですよねー。どうしてもぼやけた印象になってしまうときは、他の色味を少し加えて、メリハリをつけてあげると印象が変わります。同系色のデザインのいいところは、統一感がでてよくまとまって見えるところですが、その反面、単調な配色でデザインに活気がないように見えてしまいがちです。そんな時はアクセントとなる色をひとつ入れてみるだけで、ずっと素敵なデザインに生まれ変わります!

アクセントに他の色味を加えてみました

4. ベースカラーとメインカラー

コツが分かったところで、実際の配色に取りかかりたいところですが、もうちょっとポイントを確認。配色と言っても漠然としすぎていて、どこから手をつけていいか分かりませんよね。

配色の一番始めに、まずベースとなるベースカラー(背景の色)を決める方法があります。ベースカラーは自然と面積も多くなるので、ページ全体のイメージを支配しがち。後からベースカラーを決めようとすると、すでに配色した部分とのバランスを取るのが難しく、バラバラな配色になってしまったりします。どうしようもなくなって結局白、黒、灰色の無彩色の背景が一番しっくりくる…なんてことになりがちです。

4.1. ベースカラーを選ぶ時のポイント

前述したように、ベースカラーはほとんどの場合ページを占める面積が大きくなります。そのため色の持つイメージをよく考えて決めることが大切ですねー。前述した色の持つイメージ、意味合いを参考にするのがいいと思います。

同じコンテンツでも、ベースカラーによって見る人が受ける印象が大きく変わってしまうという … ということに注意が必要です。たとえば…

ピンクの背景
Pink

淡いピンクのベースカラーでは、どことなく女の子向けのページかな?っていう印象を受けますよね!可愛らしいイメージです。

黒の背景
Black

ベースカラーを黒にすると、同じ写真でもフォトグラファーのギャラリー … といったような印象になってしまします。前述した色味の持つイメージ、意味合いを考慮しながらベースカラーを決めましょう!

もうひとつ注意点。ベースカラーは脇役です!目立つ必要は全くありません。ベースカラーが目立ってしまうと、コンテンツ内の写真やテキストが目立たなくなってしまいますよね!ちょっと下の図を見てみてください。

ビビッドな赤の背景
Red

ちょっとキツいくらい真っ赤なベースカラー。ベースカラーの主張が強すぎて、写真より背景に目がいっちゃいます。例えば赤をベースカラーに使いたいなら、彩度や明度を調整して、少し大人しくしてもらった方が無難です。ベースカラーは目立たない色を使った方がしっくりくることが多いです。

彩度や明度を調整しよう!
Red

同じ赤でも、こっちの方が背景色にはふさわしいですねー。背景色は一般的に脇役 … ということを忘れないようにしましょう!

4.2. 目立たせたい色、メインカラーに気を配る

ベースカラーとは逆に、見る人に印象付けたい色、目立たせたい色をメインカラーに選びます。メインカラーも、当然ながら色の持つイメージを考慮して決めることを忘れずに!また、企業などの場合は、初めからブランドカラーが決まっていることがありますよね。そんなときは、もちろんそれをメインカラーにします。

ではどうやってメインカラーを目立たせればいいんでしょう?ここではメインカラーを目立たせる方法をいくつかご紹介しますね。

  • 前述したように、面積を活かして目立たせる方法。
  • 薄い同色相を使って目立たせる方法。同じ色相の色を使えばページ全体のイメージも保てますし、今回のテーマは「同系色」なのでこれが一番しっくりきますね!
  • 無彩色の上に乗せて際立たせる方法。
緑をメインカラーに使った例

Green

メインカラーである緑をあちこちに使って、単純に面積を増やしています。ロゴは薄い緑と合わせて、濃い緑が目立つようにもしています。また、全体的に無彩色のグレーを使うことで、「色」自体が余計に目立つようになりますね!Green – 私がデザインしたサイトですいません … X(

もちろん目立たせる方法って、全体のバランスの中でのお話なので、色だけじゃなくて、形や余白なども関わってきます。面積だって広くすれば目立ちますが、逆に小さくても、周りに何もなければ「ぽつん」と一カ所だけで充分目立つ … ということだってあります。あ、それとサンプルが同系色デザインじゃないってイジワルは言わないで … X(

5. 色を選ぶ順番は、ベースカラー → メインカラー → その他の色

ベースカラーとメインカラーが決まったら、その他の色を決めて行きます。Photoshop で彩度や明度を調整してパレットを作るのもいいですし、Web上のオンラインツールを使うのもアリです。私はほとんど Photoshop で済ませてしまうんですけど、いろいろな Webサービスがあるので、いくつかご紹介します!

5.1. Color Scheme Designer

Color Scheme Designer 3

知ってる人もたくさんいると思いますが、同色系のカラースキームはもちろん、アクセント色、トライアドなどの配色をジェネレートしてくれます。また同じカラースキームでも、面積を変えて明るいページのレイアウト、暗いページのレイアウトも表示してくれるのでとても参考になります。

5.2. 0 to 255

0to255

  • 明度違いの色を一覧表示してくれる 0 to 255

    0 to 255

ひとつの色相の 0 ~ 255(暗 – 明)までの間の色を生成してくれるジェネレーターです。同系色デザインの時は眺めてるだけでもイメージが湧くのでおすすめです。

5.3. COLORlovers

COLOURlovers

膨大な量のカラーパレットがあります。キーワードからパレットを検索できるのも嬉しいです!見ているだけでリラックスできますねー ;D

6. いろいろな同系色デザインの Webサイト

最後に冒頭でも紹介したように、いくつか同形色のデザインをご紹介して終わりにします!

Green – 緑のサイト

Silverback

カラーパレット

Silverback – とっても素敵なでざいんですねー。ゴリラもなぜか可愛く見えます ;D

Green – 緑のサイト

Lipton Green Tea

カラーパレット

Lipton Green Tea – さっきの Green と、また違った印象ですね!

Green – 青のサイト

Loewy Design

カラーパレット

Loewy Design – 全体的に落ち着いた暗めのブルー … シンプルで素敵なデザインですねー。

Green – グレーのサイト

The Invoice Machine

カラーパレット

The Invoice Machine – 無彩色のグレーは、アクセントで他の色を使うと、ポイントになっていいかもです!

今回は「色」… とくに同形色デザインにクローズアップしてみました。


以下のリンクでも、同系色の Webデザインがたくさんまとめられていますので、興味のある人は参考にしてみてくださいねー!

Share
this post

Belong to - ,

Comments

Thank you for the comment.