SEO白書 
- 文字を大きくする
- 行間を広げる
- 文字間隔を広げる
綺麗なデザインサイトがアクセスを稼いでいるとは限らない
綺麗な Web デザインのページに出会うと、自分でも使ってみたいという衝動に駆られることがあります。
「きっと、閲覧してくださる皆様も、喜んでくれるに違いない。」
そんな風に思ったりもします。でも、実際そうでしょうか？
フォントを見直そうと思った時には、この疑問に一度立ち戻るのがいいかもしれません。
というのも、良いデザインを求めてWebサイトを見る見方と、良いコンテンツを求めてＷｅｂサイトを見る見方とでは、求めるものが大きく異なるからです。
綺麗なフォントを使っても閲覧される皆様が喜んでくれるとは限りません。場合によっては自己満足と捉えられてしまう可能性もあります。
実際、 Google の検索結果は、スマートフォンやパソコンのデフォルトフォントです。
そして、ほとんどが文字情報なわけですが、それでも必要な情報にどんどんと届く有能なサイトであることを否定する人は誰もいないはずです。
ですが、現実的に「読みやすいサイト」と「読みにくいサイト」は存在します。
では、どんな違いがあるのかと言いますと、読みやすいサイトは行間や文字間隔などを絶妙に調整しています。
綺麗なフォントを使って美麗なサイトを来る必要は全くないものの、ある程度の品質で読みやすいサイトを作るといった目的には以下の方法が有効です。
本当に直す前のちょっとした工夫
工夫１：文字を大きくする
フォントサイズを16～18ptにするだけでもかなり読みやすくなります。 WordPress のテーマの中にはデフォルトフォントが14ptがあります。海外製のものや、デザイン性を重視したテーマには少し気をつけた方がいいかもしれません。
工夫２：行間を大きくする
行間を１行程度取ると非常に読みやすくなります。CSSでは「line-height」で設定します。
工夫３：文字間を少し広くする
文字と文字の間が集まりすぎているととても読みにくくなります。ほんの少しだけ文字間を少し広げると全体としてゆったりとした印象になります。CSSでは「letter-spacing」で設定します。
サンプル
例えば以下のような CSS にすると、とても読みやすいサイトになります。
body {
font-family: "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "Hiragino Sans", ヒラギノ角ゴシック, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 2;
letter-spacing: 0.05em;
}
まとめ
他のサイトを見ていて、なんでこんなに引き込まれるようなコンテンツがあるんだろうと考えたことがあります。
そこで全く同じ内容のコンテンツを作って、デザインのみの違いから、分析した結果この記事のような結論になりました。
Webサイトはコンテンツが大切とよく言われますが、コンテンツを引き立てるデザインもやっぱり大切です。ですがそこまで過剰な演出でなくても、閲覧される皆様に十分に訴求することもできると思います。
高いデザイン性のあるサイトを作りを目指す場合は別にして、ある程度の品質で十分なケースでは、文字の大きさ・行間・文字間隔を見直すだけでも綺麗なサイトになると思います。
