ホーム » カテゴリー：色彩設計と調和
カテゴリー：色彩設計と調和の記事
今までの調査や準備によって絞り込まれた色を元に実際に使用する色彩を決定していきます。しかしいきなりデザインに色をつけてしまうと収拾がつかなくなり困ってしまうことが多いのです。まずベースとなる1色を決め、それを元に使用する色を決めてから配色を決めると失敗が少なくなります。
全体の基調となるベースカラーを慎重に決定します。
ベースカラーの選定
いよいよここから色彩設計をしてまいりますが、これまでの手順を振り返ってみると、ウェブサイトの目的の整理、そこから導き出される言葉からのイメージの選定、競合サイトの調査という手順で進めてきました。現段階で集めたデータを整理すれば、色相が数種類に絞られていることと思います。
いろいろ考えた末に残った色には理由があるということですので、簡単には切り捨てられないとは思いますが、シンプルで印象に残る配色を目指すためにメインのカラーを１色（ベースカラー）に絞ることにいたします。
一口に赤と言っても、オレンジ色に近い物や臙脂のような深い色もあります。出来るだけ多くの色を作ってみて、イメージに合うような色を選びます。色相を明度や彩度などを変えながら、グラフィックソフトなどで実際に大きな面積で色を塗りましょう。まぶしく見えないかなどを確認しながら、自分が伝えたい印象に本当に合う色をベースカラーとして決定します。
また社員などがいれば投票してもよいでしょう。１人で決めずに第３者の共感を得られる色を選択出来れば、理想の色にまた一歩近づいたと言えます。メインに使われなかった色はアクセント的に用いることにすればよいでしょう。以降の配色については全てこのベースカラーを基準に行っていきます。
色の面積効果に注意
色彩には面積効果というものがあり、使われている面積によって見え方が変わってきます。一般的には色の面積が大きくなるとより明るく鮮やかになります。また重い色はより重くなったりというようにその印象にも影響を与えます。
左の例では左右共に#FF6633の同じ色なのですが、右側の面積の大きい方が明るくあざやかに見えていると思います。ベースカラーは大きく使われることも多いので、大きさによる印象の違いが出ないように決めたベースカラーを様々な面積で塗ってみて、確認することをおすすめします。
ベースカラーに白を選んだ場合
ウェブサイトの背景色は何も指定しなければ白く見えるはずです。Yahoo!のページを見ていただければご理解いただけると思いますが、一番面積として大きいのは白ですが、実際にはロゴの赤の方が印象に残るとおっしゃる方が多いのです。白を印象に残すのは難しいので、ベースカラーに白を選ばれた場合はベースカラーを変更し、その上で配色する部分の面積を減らし、背景色に白を指定することにします。
« 隠す
色彩のイメージは面積によって大きく変わります。その面積比についてご説明いたします。
ベースカラーを中心に配色
メインの１色をベースカラーと呼んでおりますが、インテリア等のカラーでよく使われるのがベースカラー、サブカラー、アクセントカラーという考え方で、その面積の比率を考えて配色を行うという手法です。この手法はウェブサイトの配色でも非常に有効です。
- ベースカラー 70%
- サブカラー 25%
- アクセントカラー 5%
この割合で配色すると調和しやすいのですが、あまり細かい数字にはこだわらなくて良いでしょう。ただし先程決めたベースカラーの割合が減ってきて、他の色が目立ちすぎるようなら注意しましょう。ベースカラーがきっちりと定まっていれば、サブカラーとアクセントカラーを選ぶことはそれほど難しいことではありません。
面積比に従って並べる
色彩を考える時には色をこのように面積比に従って並べていきましょう。大事なことは面積比を重視して適当に色を塗らないということです。同じ２色を使っていても、面積比が変われば印象が全く変わって見えてしまいます。逆の言い方をすれば面積比を守っていけば、イメージがぶれにくくなります。あとで困らないように必ず守るようにしてください。
例では同じ色相と彩度で明度だけ変えた２色を並べていますが、これを入れ替えるだけでも皆さんの受ける印象が違う物になることと思います。
実際に配色を行う時には２色を分離して使うことも多いと思いますが、距離を置かずに並べることは隣り合った色が調和するかどうかを考えるのに有効です。
ご自分で配色を行う時には下の画像のようなものを作り、それに彩色をしていくと面積比もわかりやすいでしょう。
« 隠す
アメリカの色彩学者ジャッドがまとめた色彩調和論の概略を知り、2色目の決定への架け橋とします。
色彩調和論とは
色彩調和とは2色以上の色を組み合わせて、色彩のバランスや美しさ、心地よさを作り上げていくことです。適当に色を選んで調和させるのは難しいので、先程決定したベースカラーに色彩調和論に基づいて調和する色を加えると配色を考えやすいでしょう。
多くの先人達が様々な色彩調和論を唱えてきましたが、ここではアメリカの色彩学者であるジャッドがまとめたものがわかりやすいので、それを用いてサブカラーを選んでいくことにします。
ジャッドは色彩調和論を大きな4つの原理にまとめあげました。
- 秩序の原理
- 一定の法則によって規則的に選ばれた色は調和する。
- なじみの原理
- 自然界にみられる色の変化や、見慣れている配色は調和する。
- 類似性の原理
- 共通性がある色同士は調和する。
- 明瞭性の原理
- 配色する色の関係があいまいでなければ調和する。
これを全て知ってから配色すると悩みますし、４つ全てを成立させる配色は不可能ですので、ここで無理して覚えたりせずに必要な時に必要なところで使うようにしましょう。
« 隠す
ベースカラーの明度だけを変えてサブカラーを作ります。視認性（見やすさ）・可読性（読みやすさ）は明度の差によって決まりますので、非常に重要な項目です。
メリハリのある配色に
印象を変えずにコントラストを付けたい時には明度を変えるのが一番簡単です。どうもぼんやりしていると感じる時は少し明度差を多めに付けるとメリハリのある配色になります。しかし色相と彩度は同じですので、統一感は損なわれません。
可読性は明度差によって決まる
明度に差を付けると言うことは可読性（読みやすさ）を考える上では非常に重要なことです。背景によっては会社やお店の名前やロゴが見えにくくなったりします。
2色間の境目がぼんやりして見える場合は、この2色を背景色と文字色にすると読みにくくなるいうことになります。
« 隠す
色相だけを変えることで明るさや鮮やかさに統一感を与える配色です。一番イメージを変えやすい配色技法になります。
色相を動かす
まずは色相だけ動かしてみることにします。明度と彩度は変わりません。サブカラーはあくまでもベースカラーを支える色ですので、ベースカラーに似た色を選ぶことで、最初に選んだ一色を支えるような色を作ります。
すでに色彩について学んだことのある方は、色相だけを動かした時に明度や彩度も同時に変わっていることに気づくかもしれません。しかしHSBの色空間で色を変えるとそのような事は起きてしまうものとしてご了承下さい。どうしても気になる方はご自分の目で確認しながら色を決めるか、デジタル色彩マニュアル（日本色研事業編）のカラーチャートなどを確認するのもよいでしょう。
色相の角度は均等ではない
ここで注意することは隣り合う色同士でHの数値が均等ではないということです。左の表をご覧いただければわかると思いますが、11と12の幅が172-181と9しか幅がないのに対し、8と9の差は41もあったりします。困ったことにHSBの色相の角度は均等ではないのです。
例えばベースカラーのHSB[30:60:80]の色相に対して、HSB[50:60:80]のサブカラーを配色した場合とHSB[120:60:80]とHSB[140:60:80]の場合では見た目の印象が全く異なってしまいます。数値としてはHの差はどちらも20ですが、その色相次第で色の差が大きく出る場合とあまり変わらない場合があります。
一般的に色彩学でいうところの類似色相配色と呼ばれる場合は隣の色相もしくはもう一つ隣の色相との配色をさしますので、例えばベースカラーに赤を選んだ場合は赤紫もしくは橙といった前後の色相を選んで配色するとよいでしょう。対応表の数値の差を見ながら類似した色を見つけると良いでしょう。
サブカラーの方が目立つ場合
このまま隣の色相を選んでしまうと、場合によってはベースカラーよりもサブカラーの方が目立ってしまう場合があります。アクセントカラーは目立たせたりするために使う色なのでよいのですが、サブカラーの方が目立ってしまうと、一生懸命考えたベースカラーの理由付けが崩れてしまうことにもなりかねません。
この場合、サブカラーがベースカラーと同等に見えるか地味になるように色を変えてやると無難な配色になりやすいです。HSBをお使いの方は彩度を下げてやれば明度も上がりますので、サブカラーが相対的に地味になります。
« 隠す
彩度を下げていくと無彩色に近くなっていきます。派手・地味感を調整するのに便利です。
彩度と色のイメージ
高彩度になると派手になったような印象を生みだします。彩度を考えるにあたっては、以前に決めていた「女性向きで柔らかい感じの配色」などの言葉のイメージを思い出しましょう。もちろん子供向けの楽しい配色を想定するならベースカラーとサブカラーの両方の彩度を高めにすることも必要です。
サブカラーの方を低彩度に
彩度を動かす場合は特に注意が必要となります。サブカラーの方に彩度の高い色を持ってくると目立ってしまうと、ベースカラーとの力関係が逆転してしまうことになりかねません。
一番上のサンプルをご覧いただければおわかりになるかと思いますが、高彩度かつ高明度の色はまぶしく見えたりして目が痛くなるような印象を受けてしまう場合があります。ベースカラーに用いられた穏やかな草色のイメージが損なわれてしまいます。
このように彩度だけを動かす場合にはサブカラーに地味な色を持ってきた方が配色としてはしっくり来やすくなります。目立たせる部分にはアクセントカラーを用いることが出来ますので、サブカラーの彩度には十分に注意しましょう。
ただし一番下の例のようにベースカラーとサブカラーの彩度がともに60以下だとそれほど印象は損なわれません。ベースカラーの彩度が低い場合には全体が地味で陰鬱な感じにならないように、サブカラーの彩度を上げる必要も出てきますので、柔軟に対応しましょう。
« 隠す
色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。
２つの属性は慎重に動かす
色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。
ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。
特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。
色相と明度を変えたサブカラー
まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。
色相と彩度を変えたサブカラー
また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。
明度と彩度を変えたサブカラー
この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。
« 隠す
アクセントとしてワンポイントで使えるような色の選び方です。
今までの２色とは違う色を見つける
アクセントカラーとは配色の中に少量混ぜて（ここでは5%程度）、その部分を目立たせる色のことです。重要なのは少量というところで、あまり多くなってしまうとサブカラーと存在感が逆転してしまいます。その結果せっかく作った配色イメージが崩れてしまいますので、その分量に常に気を付けて使用します。
アクセントカラーの選ぶ際の注意
このように書いてくるとどんな色を選んでよいかわかりにくくなると思いますが、今まで選んできたベースカラー・サブカラーと離れた色を選ぶのですが、具体的には色相・明度・彩度をサブカラーを決めた時以上に大きく動かして作ります。ただし3つとも動かすと今までの段階となんら関係のない色になりますので、どれか2つを動かし、三属性のうちの1つを共通するものとして残すようにしましょう。
アクセントカラーは派手じゃなくともよい
アクセントカラーは派手であればいいということではありません。Yahoo!を見てみるとロゴの赤のインパクトは大きいですが、それ以外の部分はリンクの青色がほとんどを占めています（何度も申しますように白は計算に入れません）。上部左のカテゴリー分けの部分に「買う」「知る」「楽しむ」「調べる」「暮らす」「集まる」は黒になっており、十分アクセントになっていると言えます。
« 隠す
今までに決めた3色がイメージと本当に合うかを考えて、微調整を行います。
作りたいイメージに色彩を調整する
ここまで様々なことを考えて、カラーコーディネートの基本とも言える3色を面積を考えながら決定しました。しかしそのイメージが自分が表現したかったイメージと一致するのかは別の問題です。
そこで色彩の調整が必要になってまいりますが、ここではベースカラー、サブカラー、アクセントカラーを同時に動かすことにします。これはトーンの考え方が基本になっています。調和するように色彩設計を行ってきたので、それをそのまま移動させるというわけです。
このような配色が出来上がったとして、もし自分が考えていたよりも軽い配色だなと感じるようなことがあれば、全体的に明度を下げてやることによって、重いイメージを出すようにします。
この時に注意することはあまり大きな変化をさせずに微調整を行うと言うことです。大きな変化が必要な場合はベースカラーを決定する段階ですでに問題がある場合が多いので、ベースカラーから見直すことにしましょう。
また彩度を動かすことで派手・地味感を変えることも出来ます。これも地味な場合は全体の彩度を動かしてあげましょう。
色相を変えたい場合
色相を変えたい場合も3色の色相を動かしますが、色相によっては色合いが大きく変わってしまうことがあります。均一の数値で動かすと著しく印象が変わる場合もありますので、対応表を見ながら慎重に色相を変えていきましょう。
数値が100以上になる場合
彩度や明度を上げようとした時に、これ以上上がらないという場合も出てくると思います。このような場合は上げられる部分だけ上げることで問題はありません。全体のイメージを考えながら、少しずつ動かしましょう。
« 隠す
文字情報を中心として扱うホームページの配色に際して、背景色・壁紙をどう扱うのがよいかをご説明いたします。
最も大事なのは色ではない
これはウェブサイトで一番大事なのは情報であり、色ではないというスタンスに立つ場合の背景色・壁紙についての考え方です。検索エンジンなどであなたのホームページを見つけてくれた方は、配色を見に来るのではなく、内容を見にくるのです。
ビジネス書や検索サイトを考えれば、わかりやすくなると思います。ビジネス書だけでなく小説なども同じ事ですが、最も大事な部分は文字の情報です。また検索エンジンそのものにおいても最も重要なことは検索結果の表示です。どちらも文字の情報をいかに読みやすくわかりやすく伝えるかが重要だということがおわかりいただけるかと思います。
特に壁紙は模様が入っているため、よほど白に近い色でなければ、文字の読みやすさを妨げこそすれ、助けてくれることはありません。
下の表は背景色と文字色による読みの速さに関する調査の結果で、最も見慣れている白地に黒がやはり一番読むのが早いということになります。判読性の順位とは離れたところからも文字を読めるという距離の順位を表しています。つまり白地に黒が最も早く読め、離れたところからでも文字を読みやすいということになります。
読みの速さに関する色彩対比の効果
| （資料）D.G.Paterson and M.A. Tinker, “How to Make Type Readable,” 1940, p.120. |
| 配色 |
相対的読みの速さ |
大学生に判定された
判読性の順位 |
| 白地に黒 |
100.0% |
1 |
| 白地に緑 |
97.0% |
4 |
| 白地に青 |
96.6% |
2 |
| 黄地に黒 |
96.2% |
3 |
| 黄地に赤 |
95.2% |
5 |
| 白地に赤 |
91.1% |
6 |
| 赤字に緑 |
89.4% |
7 |
| 黒字に橙 |
86.5% |
8 |
| 白地に橙 |
79.1% |
9 |
| 緑地に赤 |
60.5% |
11 |
| 紫地に黒 |
48.5% |
10 |
文字情報が大事な時の背景色は白
このような理由から文字を中心として読ませたい場合は背景色は白を選ぶことをおすすめします。サービスや情報を邪魔するような色はいくら美しくても本来伝えたい内容を邪魔しないようにしましょう。
どうしても背景色をつけなければならない場合はごく薄く付けるようにしましょう。ただしさみしいからとかかわいい壁紙を見つけたなどという曖昧な理由で選んではいけません。
« 隠す
▲このページの先頭に戻る
