ホーム » カテゴリー：色彩設計と調和
カテゴリー：色彩設計と調和の記事
今までの調査や準備によって絞り込まれた色を元に実際に使用する色彩を決定していきます。しかしいきなりデザインに色をつけてしまうと収拾がつかなくなり困ってしまうことが多いのです。まずベースとなる1色を決め、それを元に使用する色を決めてから配色を決めると失敗が少なくなります。
アクセントとしてワンポイントで使えるような色の選び方です。
今までの２色とは違う色を見つける
アクセントカラーとは配色の中に少量混ぜて（ここでは5%程度）、その部分を目立たせる色のことです。重要なのは少量というところで、あまり多くなってしまうとサブカラーと存在感が逆転してしまいます。その結果せっかく作った配色イメージが崩れてしまいますので、その分量に常に気を付けて使用します。
アクセントカラーの選ぶ際の注意
このように書いてくるとどんな色を選んでよいかわかりにくくなると思いますが、今まで選んできたベースカラー・サブカラーと離れた色を選ぶのですが、具体的には色相・明度・彩度をサブカラーを決めた時以上に大きく動かして作ります。ただし3つとも動かすと今までの段階となんら関係のない色になりますので、どれか2つを動かし、三属性のうちの1つを共通するものとして残すようにしましょう。
アクセントカラーは派手じゃなくともよい
アクセントカラーは派手であればいいということではありません。Yahoo!を見てみるとロゴの赤のインパクトは大きいですが、それ以外の部分はリンクの青色がほとんどを占めています（何度も申しますように白は計算に入れません）。上部左のカテゴリー分けの部分に「買う」「知る」「楽しむ」「調べる」「暮らす」「集まる」は黒になっており、十分アクセントになっていると言えます。
« 隠す
色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。
２つの属性は慎重に動かす
色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。
ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。
特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。
色相と明度を変えたサブカラー
まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。
色相と彩度を変えたサブカラー
また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。
明度と彩度を変えたサブカラー
この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。
« 隠す
彩度を下げていくと無彩色に近くなっていきます。派手・地味感を調整するのに便利です。
彩度と色のイメージ
高彩度になると派手になったような印象を生みだします。彩度を考えるにあたっては、以前に決めていた「女性向きで柔らかい感じの配色」などの言葉のイメージを思い出しましょう。もちろん子供向けの楽しい配色を想定するならベースカラーとサブカラーの両方の彩度を高めにすることも必要です。
サブカラーの方を低彩度に
彩度を動かす場合は特に注意が必要となります。サブカラーの方に彩度の高い色を持ってくると目立ってしまうと、ベースカラーとの力関係が逆転してしまうことになりかねません。
一番上のサンプルをご覧いただければおわかりになるかと思いますが、高彩度かつ高明度の色はまぶしく見えたりして目が痛くなるような印象を受けてしまう場合があります。ベースカラーに用いられた穏やかな草色のイメージが損なわれてしまいます。
このように彩度だけを動かす場合にはサブカラーに地味な色を持ってきた方が配色としてはしっくり来やすくなります。目立たせる部分にはアクセントカラーを用いることが出来ますので、サブカラーの彩度には十分に注意しましょう。
ただし一番下の例のようにベースカラーとサブカラーの彩度がともに60以下だとそれほど印象は損なわれません。ベースカラーの彩度が低い場合には全体が地味で陰鬱な感じにならないように、サブカラーの彩度を上げる必要も出てきますので、柔軟に対応しましょう。
« 隠す
ベースカラーの明度だけを変えてサブカラーを作ります。視認性（見やすさ）・可読性（読みやすさ）は明度の差によって決まりますので、非常に重要な項目です。
メリハリのある配色に
印象を変えずにコントラストを付けたい時には明度を変えるのが一番簡単です。どうもぼんやりしていると感じる時は少し明度差を多めに付けるとメリハリのある配色になります。しかし色相と彩度は同じですので、統一感は損なわれません。
可読性は明度差によって決まる
明度に差を付けると言うことは可読性（読みやすさ）を考える上では非常に重要なことです。背景によっては会社やお店の名前やロゴが見えにくくなったりします。
2色間の境目がぼんやりして見える場合は、この2色を背景色と文字色にすると読みにくくなるいうことになります。
« 隠す
アメリカの色彩学者ジャッドがまとめた色彩調和論の概略を知り、2色目の決定への架け橋とします。
色彩調和論とは
色彩調和とは2色以上の色を組み合わせて、色彩のバランスや美しさ、心地よさを作り上げていくことです。適当に色を選んで調和させるのは難しいので、先程決定したベースカラーに色彩調和論に基づいて調和する色を加えると配色を考えやすいでしょう。
多くの先人達が様々な色彩調和論を唱えてきましたが、ここではアメリカの色彩学者であるジャッドがまとめたものがわかりやすいので、それを用いてサブカラーを選んでいくことにします。
ジャッドは色彩調和論を大きな4つの原理にまとめあげました。
- 秩序の原理
- 一定の法則によって規則的に選ばれた色は調和する。
- なじみの原理
- 自然界にみられる色の変化や、見慣れている配色は調和する。
- 類似性の原理
- 共通性がある色同士は調和する。
- 明瞭性の原理
- 配色する色の関係があいまいでなければ調和する。
これを全て知ってから配色すると悩みますし、４つ全てを成立させる配色は不可能ですので、ここで無理して覚えたりせずに必要な時に必要なところで使うようにしましょう。
« 隠す
色彩のイメージは面積によって大きく変わります。その面積比についてご説明いたします。
ベースカラーを中心に配色
メインの１色をベースカラーと呼んでおりますが、インテリア等のカラーでよく使われるのがベースカラー、サブカラー、アクセントカラーという考え方で、その面積の比率を考えて配色を行うという手法です。この手法はウェブサイトの配色でも非常に有効です。
- ベースカラー 70%
- サブカラー 25%
- アクセントカラー 5%
この割合で配色すると調和しやすいのですが、あまり細かい数字にはこだわらなくて良いでしょう。ただし先程決めたベースカラーの割合が減ってきて、他の色が目立ちすぎるようなら注意しましょう。ベースカラーがきっちりと定まっていれば、サブカラーとアクセントカラーを選ぶことはそれほど難しいことではありません。
面積比に従って並べる
色彩を考える時には色をこのように面積比に従って並べていきましょう。大事なことは面積比を重視して適当に色を塗らないということです。同じ２色を使っていても、面積比が変われば印象が全く変わって見えてしまいます。逆の言い方をすれば面積比を守っていけば、イメージがぶれにくくなります。あとで困らないように必ず守るようにしてください。
例では同じ色相と彩度で明度だけ変えた２色を並べていますが、これを入れ替えるだけでも皆さんの受ける印象が違う物になることと思います。
実際に配色を行う時には２色を分離して使うことも多いと思いますが、距離を置かずに並べることは隣り合った色が調和するかどうかを考えるのに有効です。
ご自分で配色を行う時には下の画像のようなものを作り、それに彩色をしていくと面積比もわかりやすいでしょう。
« 隠す
全体の基調となるベースカラーを慎重に決定します。
ベースカラーの選定
いよいよここから色彩設計をしてまいりますが、これまでの手順を振り返ってみると、ウェブサイトの目的の整理、そこから導き出される言葉からのイメージの選定、競合サイトの調査という手順で進めてきました。現段階で集めたデータを整理すれば、色相が数種類に絞られていることと思います。
いろいろ考えた末に残った色には理由があるということですので、簡単には切り捨てられないとは思いますが、シンプルで印象に残る配色を目指すためにメインのカラーを１色（ベースカラー）に絞ることにいたします。
一口に赤と言っても、オレンジ色に近い物や臙脂のような深い色もあります。出来るだけ多くの色を作ってみて、イメージに合うような色を選びます。色相を明度や彩度などを変えながら、グラフィックソフトなどで実際に大きな面積で色を塗りましょう。まぶしく見えないかなどを確認しながら、自分が伝えたい印象に本当に合う色をベースカラーとして決定します。
また社員などがいれば投票してもよいでしょう。１人で決めずに第３者の共感を得られる色を選択出来れば、理想の色にまた一歩近づいたと言えます。メインに使われなかった色はアクセント的に用いることにすればよいでしょう。以降の配色については全てこのベースカラーを基準に行っていきます。
色の面積効果に注意
色彩には面積効果というものがあり、使われている面積によって見え方が変わってきます。一般的には色の面積が大きくなるとより明るく鮮やかになります。また重い色はより重くなったりというようにその印象にも影響を与えます。
左の例では左右共に#FF6633の同じ色なのですが、右側の面積の大きい方が明るくあざやかに見えていると思います。ベースカラーは大きく使われることも多いので、大きさによる印象の違いが出ないように決めたベースカラーを様々な面積で塗ってみて、確認することをおすすめします。
ベースカラーに白を選んだ場合
ウェブサイトの背景色は何も指定しなければ白く見えるはずです。Yahoo!のページを見ていただければご理解いただけると思いますが、一番面積として大きいのは白ですが、実際にはロゴの赤の方が印象に残るとおっしゃる方が多いのです。白を印象に残すのは難しいので、ベースカラーに白を選ばれた場合はベースカラーを変更し、その上で配色する部分の面積を減らし、背景色に白を指定することにします。
« 隠す
▲このページの先頭に戻る
