デザイン領域の幅を固定するデザインの時の背景色の選び方を説明しております。
印象を壊さない背景色で
ブラウザウインドウのサイズによって、幅が可変して最大幅が変わるようなデザインであればあまり問題はないのですが、固定レイアウトの場合、800×600ピクセルに対応して作られたデザインはもっと広い画面で見れば大きく隙間が出来てしまう場合があります。
この部分についつい色を使いたくなってしまいますが、使う場合でもほぼ白に近い色を彩度が低く、明るい色を使うようにしましょう。空いている面積がかなり大きいのでベースカラーなどを用いるとくどい印象になってしまいます。
この例ではベースカラーがHSB[270:15:90]、サブカラーにもHSB[270:5:90]と色相が270で統一感が出来ておりますので、背景の色として色相は近い物を選び、同じような低彩度、高明度のHSB[305:5:90]を用いました。読みやすさを重視するために本文が入る部分の背景には色を付けておりません。
背景に色を使うことで、色の印象は強くなるのですが、無理に背景色を付けて、違和感を感じるようであれば、白背景のままにしておくのも選択肢の一つでしょう。必要ないと判断された場合には背景色を使う必要はないのです。
« 隠す
背景色を変えることによって生じるリンク色の変更のデメリットについて説明しております。
リンク色と操作性
通常、未訪問のリンクは青で訪問済みのリンクは赤紫、となっております。背景色が明るい場合にはそれほど神経質になることはありませんが、暗い場合にはテキストの色を変える必要が出てきます。
またリンク色が読めなくなる場合が多く、変更の必要が出てきますが、リンクの青色を黄色などに変更すると、そこがリンクと認識しにくくなります。そのような場合にはテキストのリンクを使わず、ボタンなどにしてリンクであることをはっきりさせておかないと操作性が格段に落ちることとなります。
リンク色を変更する場合
このような理由からリンク色については少なくとも色相を大きく動かすことは避けた方がよいでしょう。黄色や緑などにしてしまうと、リンクと通常のテキストとの区別が付きにくくなります。少なくともリンクの下線をスタイルシートで取り去るようなことは避けるようにしましょう。
ただし元のままの青をそのまま用いた場合、彩度、明度ともに高すぎ、Windowsでブラウン管のモニターをお使いの方にはまぶしく見えることもあります。その場合には明度や彩度を落として微調整のみ行うことにします。
« 隠す
個人サイトやアパレル・デザイン関係などのホームページで、文字情報よりもカラーイメージを強く主張したい時の背景色の扱い方です
イメージを決定づける
背景色を使わなくても、それ以外の部分でイメージを形成することは十分可能ですが、イメージを強く形づけるためには有効な手段です。しかしそれによって文字が読みにくくなることはもってのほかですので、注意して用いることにします。
文字の読みやすさを損ねない
この場合、気を付けなければならないことは文字が読みやすい背景色にしなければならないということです。「明度だけを変えてサブカラーを作る」のページでも触れたように、可読性は明度差によって決まりますので、背景色が中間くらいの明るさの色だと文字を重ねた時に読みにくくなるおそれがあります。
背景色を置くことを決めた場合は、文字色との明度差が取れるように背景色を明るくするのか暗くするかのどちらかにした方が文字情報が読みやすいと言えます。
全ての配置を終えてから考える
ここでは背景色を決定する必要はありません。最終的にイメージを補助するために足すかどうかを決定すればよいでしょう。
« 隠す
オンラインショップやギャラリーなどで写真や画像を中心に扱う場合の背景色・壁紙をどのように考えればよいかをご説明いたします。
最も大事なのは画像
写真の周りには白もしくは灰、黒色を使うのがよいですが、出来れば白を使いましょう。
文字の情報と同じようにウェブサイト全体のイメージより商品写真などの方が重要な場合にはそれを引き立たせる配色をしなければなりません。写真を目立たせるのであれば、他の色の使用は抑えます。特に写真の周囲に色を施さないようにしましょう。
対比現象と画像の色
下の画像の中の色を図、背景の色を地などと言いますが、この図と地の組み合わせによって図の色がずれて見えてしまうことがあります。こういった現象を対比現象と呼ぶのですが、周囲の色相、明度、彩度の三属性のそれぞれの要素で起きるのです。
対比現象の詳しい説明につきましては色彩学の専門書を見ていただければよいと思いますが、特に色相対比は地の色相によって図の色相までもが少しずれてしまいます。これはオンラインショップなどの商品画像が重要なウェブサイトでは大きな問題となる場合があります。通常の行われているように「実際の商品の色とは異なります」という対応でよいとは思いますが、あえて色相をずらすような背景色を使う必要もないでしょう。
« 隠す
文字情報を中心として扱うホームページの配色に際して、背景色・壁紙をどう扱うのがよいかをご説明いたします。
最も大事なのは色ではない
これはウェブサイトで一番大事なのは情報であり、色ではないというスタンスに立つ場合の背景色・壁紙についての考え方です。検索エンジンなどであなたのホームページを見つけてくれた方は、配色を見に来るのではなく、内容を見にくるのです。
ビジネス書や検索サイトを考えれば、わかりやすくなると思います。ビジネス書だけでなく小説なども同じ事ですが、最も大事な部分は文字の情報です。また検索エンジンそのものにおいても最も重要なことは検索結果の表示です。どちらも文字の情報をいかに読みやすくわかりやすく伝えるかが重要だということがおわかりいただけるかと思います。
特に壁紙は模様が入っているため、よほど白に近い色でなければ、文字の読みやすさを妨げこそすれ、助けてくれることはありません。
下の表は背景色と文字色による読みの速さに関する調査の結果で、最も見慣れている白地に黒がやはり一番読むのが早いということになります。判読性の順位とは離れたところからも文字を読めるという距離の順位を表しています。つまり白地に黒が最も早く読め、離れたところからでも文字を読みやすいということになります。
読みの速さに関する色彩対比の効果
| （資料）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 |
文字情報が大事な時の背景色は白
このような理由から文字を中心として読ませたい場合は背景色は白を選ぶことをおすすめします。サービスや情報を邪魔するような色はいくら美しくても本来伝えたい内容を邪魔しないようにしましょう。
どうしても背景色をつけなければならない場合はごく薄く付けるようにしましょう。ただしさみしいからとかかわいい壁紙を見つけたなどという曖昧な理由で選んではいけません。
« 隠す
▲このページの先頭に戻る
