イメージを決定づける

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

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

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

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

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

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

関連記事：

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

最も大事なのは画像

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

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

対比現象と画像の色

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

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

関連記事：

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

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

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

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

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

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

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

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

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

関連記事：

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