坂本邦夫の「基礎からわかるホームページの配色」» 読みやすい背景色

固定レイアウトの背景色

坂本邦夫 — Wed, 27 Jan 2010 15:20:21 +0000

デザイン領域の幅を固定するデザインの時の背景色の選び方を説明しております。

印象を壊さない背景色で

ブラウザウインドウのサイズによって、幅が可変して最大幅が変わるようなデザインであればあまり問題はないのですが、固定レイアウトの場合、800×600ピクセルに対応して作られたデザインはもっと広い画面で見れば大きく隙間が出来てしまう場合があります。

この部分についつい色を使いたくなってしまいますが、使う場合でもほぼ白に近い色を彩度が低く、明るい色を使うようにしましょう。空いている面積がかなり大きいのでベースカラーなどを用いるとくどい印象になってしまいます。

この例ではベースカラーがHSB[270:15:90]、サブカラーにもHSB[270:5:90]と色相が270で統一感が出来ておりますので、背景の色として色相は近い物を選び、同じような低彩度、高明度のHSB[305:5:90]を用いました。読みやすさを重視するために本文が入る部分の背景には色を付けておりません。

背景に色を使うことで、色の印象は強くなるのですが、無理に背景色を付けて、違和感を感じるようであれば、白背景のままにしておくのも選択肢の一つでしょう。必要ないと判断された場合には背景色を使う必要はないのです。

関連記事：

背景色とリンク色

坂本邦夫 — Wed, 27 Jan 2010 14:20:03 +0000

背景色を変えることによって生じるリンク色の変更のデメリットについて説明しております。

リンク色と操作性

通常、未訪問のリンクは青で訪問済みのリンクは赤紫、となっております。背景色が明るい場合にはそれほど神経質になることはありませんが、暗い場合にはテキストの色を変える必要が出てきます。

またリンク色が読めなくなる場合が多く、変更の必要が出てきますが、リンクの青色を黄色などに変更すると、そこがリンクと認識しにくくなります。そのような場合にはテキストのリンクを使わず、ボタンなどにしてリンクであることをはっきりさせておかないと操作性が格段に落ちることとなります。

リンク色を変更する場合

このような理由からリンク色については少なくとも色相を大きく動かすことは避けた方がよいでしょう。黄色や緑などにしてしまうと、リンクと通常のテキストとの区別が付きにくくなります。少なくともリンクの下線をスタイルシートで取り去るようなことは避けるようにしましょう。

ただし元のままの青をそのまま用いた場合、彩度、明度ともに高すぎ、Windowsでブラウン管のモニターをお使いの方にはまぶしく見えることもあります。その場合には明度や彩度を落として微調整のみ行うことにします。

関連記事：

背景色と文字色

坂本邦夫 — Wed, 27 Jan 2010 14:08:30 +0000

背景色を使う場合の文字の読みやすさとその重要性を説明しております。

全ての人のために読みやすくする

基本的には背景色を使うことと文字の色を変えるのは見出しなど特別な場合を除いては変えることはお勧めしません。これは文字が読みにくいことで来訪者が帰ってしまうことを防ぐと共に、誰にでも使いやすいホームページを目指すことでビジネスの機会損失を減らすことも目的としております。

色覚障害者、白内障の方への配慮

色覚障害者は日本人男性の5%、女性では0.2%と言われ300万人以上の方が程度の差はあれ、色覚に障害を持っていると言われております。また白内障については60歳代では70%以上で水晶体の白濁が見られるそうです。

合計すると1000万人を軽く超えることは明らかで、今後高齢化社会が進行するにあたっては、文字の読みやすさは考慮されてしかるべき問題となっております。

このような状況も踏まえ、文字色を決定する際には富士通が提供しているColorSelectorやアイ・クリエイツの提供しているカラーコントラストチェッカーなどを使いチェックすることが望ましいでしょう。

関連記事：