訪問者に優しいWebサイト作り

サイト内検索  

HOMEコンテンツページ編→文字と背景

文字と背景

基本的には、  

「薄い色の背景+濃い色の文字」
 「濃い色の背景+薄い色の文字」

女性が作成したページに多いのが、背景も文字もパステルトーン。
ページの雰囲気としてはかわいらしいけど、はっきり言って読みづらい。私も女性の端くれだから、かわいらしいページの雰囲気をしたいという作者の気持ちはわかるのですか、読んでもらえなかったら、意味ないですよね。
それと、印刷の時に不親切なんですよね。モノクロでは薄いグレーでしか印刷されないし。画面でも読めない、紙に印刷しても読めない、とないないづくしなページになっちゃいます。

背景色:#000000の落とし穴

#000000というのは、黒ですね。真っ黒な背景は、文字を引き立てる効果があるので、初心者は多用しがちです。プロは、好んで使わないそうです。

黒の背景を使って、明るい色の文字をのせると、「それなりにきれい」に見えちゃうんですよ。洋服でもそうですよね。黒ってかっこよく見えますよね。 
でもって、ついついいろんな文字色を使ったページを作っちゃうんですよね(^^ゞ
結果は、、、アダルトページもどきのぎらぎらしたデザインになっちゃうと。

ついでに、リンクを設定したときに標準のままだと、リンクが見づらいというのもあります。リンク:青、訪問済みリンク:紫ですから、黒背景にこれらの色をそのまま出してしまうと目立ちません(特に訪問済みリンク)。

さっき、プロは黒背景を好んで使わないと言いました。どうしてかって?
それは、「黒は色の組み合わせが難しい」からそうです。 そして、文字色の刺激になれてしまって、アクセントとしての画像も使わなくなりがちです。軽いページ作りという点では大いに貢献しますが、デザインを学ぶというコトは難しくなるそうです。

それと、黒の背景色は、色覚障害者の方々にとっても不親切です。詳しくは、「藹藹倶楽部:色弱について考える」というサイトの「黒の背景に文字を重ねた画面は見えにくい?」を参照して下さい。色覚障害者自身の声が反映されています。

うるさい背景

というのも、WWWサーフィンをしているとよく見かけます。文字より背景画像の方が目立ってしまっているという状態です。うるさい背景画像を使っているページもやっぱり読みづらいです。背景画像は、あくまで彩りを添えるための物です。どうかその点をお忘れなく。

画面上で、うるさいと背景かどうかわからないという方。実際に部屋にそのような壁紙を使ったら、どう思うかがポイントです。「こんな部屋、居心地悪いな〜」と感じたら、それはWWWにおいてもうるさい背景です。

背景画像を使う落とし穴

背景画像の指定をしたから、背景色の指定は、デフォルトのままにしているページもあります。背景画像が明るい目で、文字色とのバランスがきちんと取れていれば、問題はないです。デフォルトで、背景色が白もしくは灰色ですから。

しかし、濃い色の背景画像を使っている場合は、きちんと背景色の指定もしておかないと、画像を読み込まない設定にしていたり、文字ブラウザでは、何が書いてあるのか読めない状態になりかねません。

色覚障害を持つ方への配慮

リンクの張り方」で少し触れましたが、色づけをしているから、そこは強調されていると安易に考えない方がいいです。色による情報が届かない方もおられるんだと言うのは頭に入れておきましょう。本当に強調したいのであれば、strong要素 もしくは em要素でHTML上で強調していることがわかるようにしましょう。

色覚障害で有名なのが、「赤と緑」ですが、それ以外にも人によっては、他の色が苦手という方もおられます。
実際にどのような文字色と背景色の組み合わせが、色覚障害者にとって苦手なのかをアンケート調査に基づいてまとめたのが、「藹藹倶楽部:色弱について考える」というサイト「私の苦手なWEBの色・文字が読めない色の組み合わせ」というページです。 

©Copyright 2001-2006 FUMING fuming@neko.chan.ne.jp

リンクに関してはご自由にどうぞ。