色相を動かす

まずは色相だけ動かしてみることにします。明度と彩度は変わりません。サブカラーはあくまでもベースカラーを支える色ですので、ベースカラーに似た色を選ぶことで、最初に選んだ一色を支えるような色を作ります。

すでに色彩について学んだことのある方は、色相だけを動かした時に明度や彩度も同時に変わっていることに気づくかもしれません。しかし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をお使いの方は彩度を下げてやれば明度も上がりますので、サブカラーが相対的に地味になります。

関連記事：

• 彩度だけを変えてサブカラーを作る
• 明度だけを変えてサブカラーを作る
• サブカラーの分割
• 色彩は面積比で扱う
• アクセントカラーの分割

自分で配色サンプルをアレンジする

ここでは一つの例だけを取り上げましたが、このような配色サンプルは元々印刷用に作られたものが多く、それをモニターで見た場合、大きな面積で表示した場合にどのように映るかということについては考慮されていない場合が多いように思います。

そのままで使える色も多く含まれていることは事実ですが、中には明度、彩度がともに100%近く、そのまま使ってしまうとまぶしくて使用に耐えないような色やイメージに合わないような色、読むのに苦労する色などが混ざっている可能性は非常に高いものとなっております。このような場合には使えない色は捨てるなり変更するなどして、自分のウェブサイトで使うことの出来る配色にアレンジしていくことが必要です。

配色サンプルは2色だけ使う

配色サンプルの利用法のページで見ていただいたサンプルのように、サンプルの3色ともが無条件で自分のサイトに使えるとは限りませんので注意が必要です。このような場合については、自分が使いたいベースカラーを決定して、あらかじめ考えていたイメージに近いと思われる色をサブカラーとする2色を決め、3色目については自分で選んだ方が、より自分が考えるイメージに近づきます。

またどうしてもイメージに合わない場合や色がおかしいと思える場合には、色彩設計まで戻って、ベースカラーとサブカラーの関係などを見直していくことにします。面積比から考えると、この2色を入れ替えるだけでも大きくイメージが入れ替わります。

関連記事：

• 配色サンプルを信じない
• 配色でやってはいけないこと
• アクセントカラーの分割
• サブカラーの分割
• レイアウトをしてから配色

配色サンプルが全て正しいわけではない

書店に行けば様々な種類のカラーチャートといった本を手に入れることが出来ます。その中には様々な配色サンプルが掲載されており、イメージしやすい形容詞などから3つの色を辞書のように取り出せたりするようなものなどがあります。特に最近の物はありがたいことにRGB値も掲載されているので、そのまま使うことが出来るのが特徴です。

そこでとある本に載っていたサンプルを使って配色を行ってみました。「フレッシュ」というページに載っていた配色サンプルです。面積比は出来るだけ維持することにして、サンプル1と2を作ってみましたが、どうも黄色が暑苦しくてフレッシュな配色とは思われません。

そこで面積比を調整してみたのが、サンプル3と4です。サンプル3の方は黄色をアクセントカラーに持ってきましたが、それでも暑苦しくてフレッシュではないような気がします。4の方はなんだかゆるい印象になってしまいました。

そこで思い切って邪魔をしていた黄色の明度を上げてみたサンプルが5と6ですると、少しはフレッシュなイメージに近づいたかと思われます。

あとは使うべき部分を考え直したり、全体の面積を調節するなどして理想のイメージに近づけていくようにしましょう。

関連記事：

• 配色サンプルの常識
• 配色でやってはいけないこと
• アクセントカラーの分割
• サブカラーの分割
• 目の動きを考える

色の組み合わせるツールは多数ありますが、当サイトでも読みにくかったりまぶしかったりしないWebサイトの配色を決めるツールを提供しています。

読みやすくて使いやすい配色を行います

このツールは自分の思い通りのイメージの配色を作るものではありません。思い通りの配色を行うには、それなりの色彩に対する知識なども必要ですが、思い通りにならない方のために、最低限、読みやすい配色を提供するツールです。

このページをご覧になるにはFlash Playerが必要です。

「Web配色ツール」の使い方

右下の色相・明度・彩度をスライドバーで調整し、右上の一色を決めると、それに応じて自動計算で各部の色を決定してくれます。

ツールの都合上というよりもイメージに差を出しにくいので、明度・彩度とも40以下は設定できないようになっております。

予告なしに機能や仕様が変更する可能性がありますので、ご注意ください。

「Web配色ツール」で決められる色

配色できる各部分はこのようになっております。

メインカラー

ヘッダー部分の2本の横線がこれに当たります。ベタ塗りにすると重ねた文字が読みにくく、印象を損ねる可能性がありますので、控えめにしております。

ロゴ

ロゴマークの色です。マークや文字の色が決まっていない場合のために同系色を入れておりますが、実際に使う場合にはご自由に入れ替えてください。

ボタン

メニュー部分のボタンの色です。コントラストをつけて読みやすくするために黒文字を入れてあります。

ボタン背景

メニューの背景色です。メインカラーの印象を損ねないために同系色で配色されるようにしてあります。チェックボックスにより表示・非表示の切り替えが出来ます。

見出し1

そのページで一番上にある大きな見出しのことです。HTMLの<h1>要素にあたります。文字の読みやすさを優先するため、ワンポイントで視線の誘導に使っております。

見出し背景

見出し1の背景のことです。チェックボックスにより表示・非表示の切り替えが出来ます。見出し1に合わせて同系色で配色されます。

見出し2

いわゆる中見出しで、HTMLでは<h2>要素にあたります。見出し1からのスムーズな視線の移動を促すため、見出し1よりも控えめな同系色を配色しています。

背景色

コンテンツ（中身）部分の背景色を表します。本文の文字色は黒であることを前提として、十分に読むことが可能なコントラストを維持するために、明るく控えめな色を配色いたします。こちらもチェックボックスにより表示・非表示の切り替えが出来ます。

関連記事：

• ウェブ配色ツール Ver2.0
• リンク、トラックバック、コメントについて
• 背景色と文字色
• レイアウトをしてから配色
• 関連サイトの紹介

サブカラーと同じ方法で分割する

アクセントカラーもサブカラーと同じように分割することが出来ます。最初に決めていたアクセントカラーと似た色を選ぶようにしましょう。大きく動かしてしまうと、サブカラーやベースカラーに似てきてしまうので、アクセントカラーとしての機能を損なうことになります。

元々使われる面積が小さいアクセントカラーをさらに細かくするということで、使い方によっては逆に目立たなくなってしまう場合もあります。アクセントカラーを分割するのは2色くらいまでにしておくのがよいでしょう。

アクセントカラーの分割サンプル

サンプルはサブカラーの分割のページで使った物を使います。左右ともアクセントカラーを2分割して、明度が低い方の色を見出しに使ってみました。アクセントは目立たせるための色ですので、小面積でワンポイントで使用することを考えた方が、全体のイメージを損ないません。

関連記事：

• アクセントカラーを決定
• サブカラーの分割
• 彩度だけを変えてサブカラーを作る
• 色彩は面積比で扱う
• 悩んだら色を減らす

サブカラーの分割でカラフルに

ここまでの色彩設計の考え方だと、カラフルな配色にはなり得ないのではないかということにすでにお気づきになられている方もいらっしゃることでしょう。そして3色だけでは配色しきれないとも感じられておられると思います。

色を増やしていく方法はいろいろあるのですが、ここではサブカラーを分割する方法を使います。ここまでの段階でサブカラーはベースカラーよりも地味に作られているはずですし、調和もしているはずです。上手くサブカラーが出来ていれば違和感なく分けられるはずです。

サブカラーの分割例1

両方とも同じ色を使ったサンプルです。ベースカラーの明度と彩度を少し動かしたHSB[30:40:60]のサブカラーを最初に作り、それを分割して色相を動かしたHSB[90:40:60]の緑を作り、それに明度と彩度を動かしたHSB［90:20:70]を加えております。アクセントカラーはベースカラーの色相だけを大きく動かしたHSB[220:60:80]の紺色を用いております。

ベースカラーであるHSB[30:60:80]に明度と彩度を動かしたHSB[30:40:60]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。これらは左右のサンプルで共通している色です。左のサンプルでは出来上がった3色をそのまま配置しております。

次に右のサンプルですが、配色にやや動きを付けるためにサブカラーを4分割しております。サブカラーの色相は左の青から30、47、90、144となっております。この数値は目で確認しながら適当に動かしておりますが、明度と彩度があまり変化していないので、同じような印象の５色が出来上がっていると思います。

サブカラーのうちの3色をボタンの色として配置いたしました。残った緑を見出しとして用いております。

これによって使用している色は増えておりますが、ベースカラーの面積は変えておりませんので、その印象は損なわれていません。

サブカラーの分割例2

こちらは左右で違う配色サンプルをご用意しました。

まず左のサンプルですが、ベースカラーであるHSB[200:15:100]に明度と彩度を動かしたHSB[205:10:98]のサブカラーを加えました。アクセントは色相と明度を動かして作ったHSB[0:35:60]を使っております。

サブカラーを分割し、少し動きを付けるために色相だけを大きめに動かしたHSB[70:15:98]を作り、そのままメニューの部分に使っております。ここではテキストでのリンクを想定しておりますが、このリンクの背景の色をそのままボタンの色に使うことも可能です。

次に右のサンプルですが、少し落ちついた和の雰囲気を出すためにHSB[50:20:100]の明るいベージュをベースカラーに持ってきました。サブカラーにはHSB[90:20:80]を最初に決定いたしました。サブカラーを分割して2色追加しております。これは看板部分にそのままの面積と形で用いております。アクセントはベースカラーの明度と彩度だけを動かしたHSB[50:80:90]を選びました。他の色が全て明るい色なので、十分にアクセントとして目を引くと思います。

カラフルになった印象を受けると思いますが、ベースカラーのベージュの印象は損なわれていないはずです。これは面積比を維持したことによります。

関連記事：

• アクセントカラーの分割
• 彩度だけを変えてサブカラーを作る
• 色相だけを変えてサブカラーを作る
• 色の三属性の２つを動かす
• アクセントカラーを決定

イメージを決定づける

背景色を使わなくても、それ以外の部分でイメージを形成することは十分可能ですが、イメージを強く形づけるためには有効な手段です。しかしそれによって文字が読みにくくなることはもってのほかですので、注意して用いることにします。

文字の読みやすさを損ねない

この場合、気を付けなければならないことは文字が読みやすい背景色にしなければならないということです。「明度だけを変えてサブカラーを作る」のページでも触れたように、可読性は明度差によって決まりますので、背景色が中間くらいの明るさの色だと文字を重ねた時に読みにくくなるおそれがあります。

背景色を置くことを決めた場合は、文字色との明度差が取れるように背景色を明るくするのか暗くするかのどちらかにした方が文字情報が読みやすいと言えます。

全ての配置を終えてから考える

ここでは背景色を決定する必要はありません。最終的にイメージを補助するために足すかどうかを決定すればよいでしょう。

関連記事：

• 背景色と文字色
• 情報を見せる背景色
• 文字の読みやすさに関するまとめ
• Webの配色に関する調査のご協力お願いします
• 明度とは

最も大事なのは画像

写真の周りには白もしくは灰、黒色を使うのがよいですが、出来れば白を使いましょう。

文字の情報と同じようにウェブサイト全体のイメージより商品写真などの方が重要な場合にはそれを引き立たせる配色をしなければなりません。写真を目立たせるのであれば、他の色の使用は抑えます。特に写真の周囲に色を施さないようにしましょう。

対比現象と画像の色

下の画像の中の色を図、背景の色を地などと言いますが、この図と地の組み合わせによって図の色がずれて見えてしまうことがあります。こういった現象を対比現象と呼ぶのですが、周囲の色相、明度、彩度の三属性のそれぞれの要素で起きるのです。

対比現象の詳しい説明につきましては色彩学の専門書を見ていただければよいと思いますが、特に色相対比は地の色相によって図の色相までもが少しずれてしまいます。これはオンラインショップなどの商品画像が重要なウェブサイトでは大きな問題となる場合があります。通常の行われているように「実際の商品の色とは異なります」という対応でよいとは思いますが、あえて色相をずらすような背景色を使う必要もないでしょう。

関連記事：

• 情報を見せる背景色
• 有彩色と無彩色
• カラーイメージを見せる背景色
• Webプロフェッショナルのための黄金則 Web配色デザインのセオリー
• 固定レイアウトの背景色

最も大事なのは色ではない

これはウェブサイトで一番大事なのは情報であり、色ではないというスタンスに立つ場合の背景色・壁紙についての考え方です。検索エンジンなどであなたのホームページを見つけてくれた方は、配色を見に来るのではなく、内容を見にくるのです。

ビジネス書や検索サイトを考えれば、わかりやすくなると思います。ビジネス書だけでなく小説なども同じ事ですが、最も大事な部分は文字の情報です。また検索エンジンそのものにおいても最も重要なことは検索結果の表示です。どちらも文字の情報をいかに読みやすくわかりやすく伝えるかが重要だということがおわかりいただけるかと思います。

特に壁紙は模様が入っているため、よほど白に近い色でなければ、文字の読みやすさを妨げこそすれ、助けてくれることはありません。

下の表は背景色と文字色による読みの速さに関する調査の結果で、最も見慣れている白地に黒がやはり一番読むのが早いということになります。判読性の順位とは離れたところからも文字を読めるという距離の順位を表しています。つまり白地に黒が最も早く読め、離れたところからでも文字を読みやすいということになります。

文字情報が大事な時の背景色は白

このような理由から文字を中心として読ませたい場合は背景色は白を選ぶことをおすすめします。サービスや情報を邪魔するような色はいくら美しくても本来伝えたい内容を邪魔しないようにしましょう。

どうしても背景色をつけなければならない場合はごく薄く付けるようにしましょう。ただしさみしいからとかかわいい壁紙を見つけたなどという曖昧な理由で選んではいけません。

関連記事：

• カラーイメージを見せる背景色
• 画像を見せる背景色
• 明度とは
• 背景色と文字色
• Webの配色に関する調査のご協力お願いします

作りたいイメージに色彩を調整する

ここまで様々なことを考えて、カラーコーディネートの基本とも言える3色を面積を考えながら決定しました。しかしそのイメージが自分が表現したかったイメージと一致するのかは別の問題です。

そこで色彩の調整が必要になってまいりますが、ここではベースカラー、サブカラー、アクセントカラーを同時に動かすことにします。これはトーンの考え方が基本になっています。調和するように色彩設計を行ってきたので、それをそのまま移動させるというわけです。

このような配色が出来上がったとして、もし自分が考えていたよりも軽い配色だなと感じるようなことがあれば、全体的に明度を下げてやることによって、重いイメージを出すようにします。

この時に注意することはあまり大きな変化をさせずに微調整を行うと言うことです。大きな変化が必要な場合はベースカラーを決定する段階ですでに問題がある場合が多いので、ベースカラーから見直すことにしましょう。

また彩度を動かすことで派手・地味感を変えることも出来ます。これも地味な場合は全体の彩度を動かしてあげましょう。

色相を変えたい場合

色相を変えたい場合も3色の色相を動かしますが、色相によっては色合いが大きく変わってしまうことがあります。均一の数値で動かすと著しく印象が変わる場合もありますので、対応表を見ながら慎重に色相を変えていきましょう。

数値が100以上になる場合

彩度や明度を上げようとした時に、これ以上上がらないという場合も出てくると思います。このような場合は上げられる部分だけ上げることで問題はありません。全体のイメージを考えながら、少しずつ動かしましょう。

関連記事：

• 色の三属性の２つを動かす
• 色相だけを変えてサブカラーを作る
• サブカラーの分割
• 彩度だけを変えてサブカラーを作る
• アクセントカラーを決定