ホームページを作成する中で、背景選びは非常に重要です。画面のレイアウトや文字の大きさ、文字の色、配置する写真やイラストなど、ホームページの個性を決める要素は沢山あります。その中でも背景の色や柄を決定することは、そのページだけでなくサイト全体の雰囲気作りにも関わってきます。
そもそも真っ先に目に付くのは、ページに配置された写真やイラスト、そしてその次には背景が目に飛び込んできます。サイトの作りによっては先に背景が目に映ることも少なくありません。そして、重要なのは、背景がそのページの文字を生かしたり殺したりするということなのです。
| 暗い背景 | 明るい背景 | |
|---|---|---|
| 黒い文字 | ようこそ！ | ようこそ！ |
| 白い文字 | ようこそ！ | ようこそ！ |
上記の事例のように背景が、暗い色の場合には明るい色の文字が見やすくなります。そして、逆に明るい背景では暗い色が見やすいのです。その様に背景の色彩は、そのページに使用する文字の色に影響を与えます。
やはり見やすく読みやすいページ作りを心がけるべきですから、そのための色選びは非常に重要な要素なのです。
文章を書く場合は、文字に色を付けることはほとんどありません。見出しや重要箇所にのみ色を付けるということが多いでしょう。その場合でも、背景色は重要ですから後で背景色を考え直さなければいけないことも出てきます。
さて、もう１つ。背景には画像を置くこともできます。写真のようなものもあれば、イラストや壁紙調のものもあります。
背景に画像を置くと、色選びは難しくなりそうですが、案外濃いめの背景でも文字は映えますし、薄い背景も場合によっては画面がぼけたようになってしまいます。
下記事例では、赤い文字を使っていますが、このように背景と同じ色調の文字は見にくくなります。白い文字だとどちらの背景でもほとんど文字の判読はできません。
| 濃い背景 | 薄い背景 | |
|---|---|---|
| 黒い文字 | ようこそ！ |
ようこそ！ |
| 赤い文字 | ようこそ！ | ようこそ！ |
| 白い文字 | ようこそ！ | ようこそ！ |
背景に画像を使用する場合は、色調が全体に同程度のものが使いやすいでしょう。柄がある場合、地の部分に比べて濃い（暗い）柄や薄い（明るい）柄があると、その部分にかかる文字だけが読みづらくなってしまい、結果文章全体が見にくくなってしまうのです。
背景はそのページのイメージ作りに大きな影響を与えますので、文章の内容に適した配色や柄を考えてください。
| 背景と文字のイメージ | 背景と文字の調和 |
|---|---|
| ★★★★★★★ | ♪♪♪♪♪♪♪ |
| ★★★★★★★ | ♪♪♪♪♪♪♪ |
上記の例では、黒い背景に黄色の文字の場合と赤い文字の場合があります。黄色い文字だと夜の神秘的なイメージに合いますが、赤い文字だと怖い感じがします。
緑の音符は、それぞれ背景色と文字色を入れ替えています。同系色の濃い色と薄い色を組み合わせており、どちらも見やすくなっています。画面の色調を背景と文字で統一するには、このように同系色の濃淡で使い分けると判りやすいと思います。
この他に、色そのもののもつ相性というものもあります。また、使用する色の組み合わせによって、画面が穏やかになる場合もありますし、画面が力強くなったり、ときには色調（コントラスト）が強すぎるととても見にくい印象を与えてしまいます。そのときは良いと思っても、後日客観的にその配色が間違っていないか見直すべきでしょう。
また、単色の色を使うよりも、背景画像を使う方が見やすくなるので、画面の雰囲気をやわらげるために同系色の背景を差し込むと良いこともあります。
| 背景画像なし | 背景画像あり |
|---|---|
|
♪☆★♪☆★ ♪★♪★♪★ |
♪☆★♪☆★ ♪★♪★♪★ |
同じ色調でも、凹凸のある画像によって右の方が画面に奥行きを感じさせてくれます。
特に濃い背景の場合に文字を見やすくする効果が高くなります。薄い背景に薄い画像を置く場合は、かえって画面がぼける感じがすることがあるので気をつけてください。
背景は各ページに個性を与える物ですが、もっと大きな意味あいでは、サイト全体へのイメージも考慮しなければなりません。
１つのサイトは、複数あるページからなりたち、目次のページに始まって、そこから各コンテンツへと導かれます。
表紙となるページと各ページ、また各ページ間のつながり方によっても、背景の色のつながりを同様に考える必要があります。
例えば、背景が白いページから突然、真っ黒なページに飛ぶと驚いてしまいます。また、ページをめくる度に白と黒が入れ替わったらどうでしょう。どのページも同じ色で統一されたサイトと、どのページも異なる風合いでできたサイトもあるでしょう。
サイト内をクリックして移動する際に、驚きはあっても良いのですが、それが本当に必要なものかどうかです。また、統一感は非常に大切で、そのサイト内に滞在するときの居心地の良さを生むことができます。
ホームページ作りの最初は、統一感のあるページ作りをしたほうが良いでしょう。色々とできるようになると、楽しくてページに色を付けたり画像を貼ってカラフルにしたくなります。しかし、実はそういうページは独りよがりになりがちで、見る人のことを考えていないものになることがあるのです。
ホームページ作りにおいて大切なのは、また同じ人が見に来てくれることです。そうでなくとも、気持ちよく帰ってもらえるような優しさが必要です。色というのは人の好みが大きく出ます。作る人の好みと見る人の好みが同じとは限りません。そこで少なくとも内容にあった色選びが大切になってくるのです。
ホームページは、印刷物とは違って、公開後も簡単に修正ができます。何度も見返したり、他人の意見も聞きながら調整して行けば良いでしょう。
どうしても背景と同系色の文字を使わなければ行けないとき、次のようなテクニックがあります。
| 背景画像なし | 背景画像あり | ||
|---|---|---|---|
|
|
テーブルを使って、テーブル内に文字が見えるように背景色を使い、元々の背景色が影響しないようにしてしまうのです。
このように部分的に背景を変更することで、文章を強調する役割にも使えますが、色の説明をするときに全体の背景を変更しなくても対応できます。とくにサイト全体で背景を統一したいのに、どうしても色が合わない部分が出てきたときに、このような方法で対処することができます。
プリンタでの印刷について考えておきましょう。
背景は印刷しないのが普通なので、白い背景に文字が印刷されることになります。そのため、画面の文字が明るいと印刷しても読めないことがあります。薄い背景と濃い文字を組み合わせるとそのような心配はいらなくなります。もちろん、わざと読めないようにすることもできますが、ブラウザで文字色を変更したり、文章をメモ帳などにコピーして印刷することは可能ですので、印刷を完璧に防ぐことはできません。