ホームページの背景色と文字色を考える。白?黒?グレー?

前回、「ホームページのテキストリンクの色や下線」について取り上げましたが、リンクの色以上に重要になってくるのが、背景色と文字色です。

基本は白背景に黒文字ということになりますが、世の中には色々な色のサイトがあります。黒背景に黒文字では全く何も見えなくなってしまいます。これは隠しテキストと呼ばれるSEOスパムなのですが、ユーザーが認識できない文字を書くことは検索エンジンのペナルティの対象になりますので注意しましょう。

背景色と文字色のバランス

すべて14pxのフォントサイズなのですが、使う文字や色によってだいぶ見え方が変わってきます。画像なので少し印象が異なるのですが、文字の色というのは、背景色だけではなく、使うフォントの種類や大きさによっても変わってくるのです。

白背景(#fff)に真っ黒(#000)だと視認性は上がるのですが、文章を読むぶんにはコントラストが強すぎて少し読みづらくなってしまうかもしれません。

ちなみに、当サイトでは「メイリオ、14px、#333」を使っています。WindowsのVista以降、デフォルトフォントがメイリオになっていますので、最近はメイリオを使っているサイトが多いと思います。

黒背景の場合、白文字(#fff)を使いたくなりますが、実は黒背景に白文字というのは刺激が強すぎて目が疲れる原因になります。黒にグレーを使うとちょうど良くなりますので、個人的には黒背景の時は#ccc~#999の間のグレーを使っています。

PCにインストールされているフォントの違いによるレイアウト崩れ

メイリオのような等幅フォントとMS Pゴシックのような文字によって幅が異なるフォントは、グローバルメニューや見出しなどで使用すると、その人のパソコンにインストールされているフォントによってはレイアウトが崩れてしまう可能性があります。

たとえば、メイリオとMS Pゴシックを比べると、メイリオの方が横幅が広くなりますが、太文字(ボールド)にした場合、MS Pゴシックの方が横幅が広がります。

お世話になっているWebデザイナーさんのブログですが、私のサイトを作る際に、グローバルナビの文字をメイリオにしたことで、メイリオが入っていないパソコンで見た時にレイアウト崩れが発生し苦労した経験があります。

文章部分のフォントについては何を指定しても特に問題はないと思いますが、決まったサイズに収めなければならない場所のフォントについては、横幅が広がっても大丈夫な状態にしておかなければなりません。

背景色と文字色を同色にした隠しテキスト

2000年初頭までの検索エンジンが未熟な時には、隠しテキストというSEOスパムが流行りました。これは、背景と同じ色のテキストで沢山のキーワードを書き、検索エンジンは読めるがユーザーにはわからない状態にしておく手法です。

検索エンジンはHTMLソースを読みますので、実際にその文字が見える状態なのかということは評価対象にしません。ただ、ユーザーに見えない文字にすることは、検索エンジンを欺く行為ですので、スパムとしてペナルティを受ける可能性があります。

なお、CSSの画像置き換えで、テキストリンクを隠したり外に飛ばしたりする手法がありますが、これについては使い方を間違っていなければスパムにはなりません。

»text-indent-9999pxによる画像置換えと隠しテキスト

ただ、Googleは画像置き換えを推奨していませんし、使い方を誤ればペナルティを受ける可能性もあるので、なるべく使わない方向で考えましょう。ちなみに当サイトではヘッダー部分のリンクに画像置き換えを使用しています。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ