サイト巡回率が15％上がったWordPressテーマのCSSデザイン変更3つ

このブログは、先月の7月15日から、テーマを自作のSimplicityに変更しています。

テーマ変更からのアクセスの推移はこんな感じ。

テーマ変更時と、現在では平均1000PVくらい増えました。（※テーマが要因ではない可能性も十分考えられます。そこらへんはGoogleにしか分かりません。ここ2日のPVはバズがあったので排除。）

ただ、テーマ変更後、3、4日PV数が減少している箇所があるのにお気づきでしょうか？

その数日は、ページへのセッション数は変わらないのに、PVだけが減っていました。このアクセスが減少した原因は、ページの巡回率（滞在時間も含めて）の減少でした。Google Analyticsで言えば、「ページ/セッション」「平均セッション時間」「直帰率」で表される数値です。

テーマの変更直後、「ページ/セッション」の数値で言えば0.1～0.2ぐらい、平均して15％ぐらい減ったでしょうか。これは、1万人（1万セッション）が訪問するページで「ページ/セッション」が1→1.15になったなら、PVが1500も違う数値です。そこで「これはいかん！」と巡回率が上がるように、素人なりにテーマの問題点を探り、デザインを見直しました。

それが功を奏したおかげで、サイト巡回率（ページ/セッション）が、当ブログでは15％改善し、滞在時間も増えました。これにより、以前と同等以上になったので、その変更したポイントを書きたいと思います。ただ、WEBデザインとかをやっている人なら、当たり前すぎて、へそで茶を沸かす内容かもしれません。ご了承ください。

以下、変更した部分です。

一覧のタイトルを目立つようにする

Simplicityは当初から、シンプルなものを目指して作ってきました。

で、その際、なるべく簡素になるようにタイトルを「font-weight:normal;」にしていました。

これを、「font-weight:bold;」に変更しました。

最初は、「スッキリと見えたほうがいいかな？」とか思いつつ、フォントの太さを細くしていたのですが、これがいけませんでした。

記事の概要で、最も重要なのはタイトルです。それが目立たないようでは、読者が読みにくいことに気づきました。現に、新聞や雑誌でも、タイトルはデカデカと一番目立つようになっています。タイトルが目立たない記事は一覧にしたとき、主張したいところがぼやけて見づらくなってしまいます。

これのおかげでページの巡回率が増えました。CSSでフォントの太さを変えただけですが、こんなにも違うものかと思いました。

見出しの文字も目立つようにする

これも、タイトルと同様の理由です。

僕は最初、なるべくスッキリと見えるようにばかり考えて、H1-H6の見出しを「font-weight:normal;」にしていました。

これを、「font-weight:bold;」に変更しました。

これをしたことで、章ごとの区切りがわかりやすくなり、読者にとっても「次はここまで読めばいい」というのが分かりやすくなりました。これにより、記事を最後まで読んでもらいやすくなったと考えられ、「ページの滞在時間」が増えました。

こうやって並べてみると確かに、太字にしていない方の見出しは、全体にメリハリがなく読みにくいです。あまりに、スッキリとさせることばかりに頭がいっていたため読みやすさが、おろそかになっていました。

文字の大きさは標準が読みやすいのかも

Simplicityは、本文のカラムの幅が680pxと横に広いので、文字の大きさも大きくしたほうが良いだろうと考え、当初記事の文字サイズを「font-size: 17px;」にしていました。

これを標準の文字サイズの「font-size: medium;（16px, 1em）」に変更しました。

これはちょっと自分でも、さほどの違いがわかりません。

ただ、ブラウザ（CSS）の標準のフォントサイズということだけあって、文字サイズ16pxというのは、最も読みやすいサイズが選択されているのでしょう。文字が小さすぎるのはダメなのは有名ですが、大きいというのも普段の大きさと違う違和感が有るのかもしれません。

追記：その後当サイトで長期間の観測の結果、16pxでも、17pxでもそこまで差はありませんでした。ですので、現在は管理者が読みやすい方の17pxを採用しています。（他の文字サイズは試していません。）

まとめ

結局、原因のほとんどは、以下のようにCSSの標準仕様を変更したために起こりました。

• H見出しデフォルトのbold → normal
• 文字の大きさデフォルトの16px → 17px

ですので、標準仕様を、そのまま継承してデザインしている人には、起こりえない改善点ではあります。

しかし、CSSにしてみればたった数行の変化であるこれだけのことで、「ページ/セッション」にしてみれば0.1～0.2、「平均セッション時間」にしてみれば10秒～30秒も改善したのには驚きました。（あくまでも、このブログでの計測です。）

やはり、CSSデフォルトの数値は、その設定が最も多くの人たちに読みやすいよう最適化されているから、デフォルトになっているんだと改めて実感した次第です。

もし、サイト巡回率が低いと悩んでいる場合は、「タイトルは目立つか？」「見出しは目立つか？」「文字サイズは適切か？」を文字サイズや太さを含めて検討しなおしてみると良いかもしれません。