読みやすさ・回遊率・SEOをキーワードにブログをリニューアルしました(2015年4月)

どうも、エヌジマです。2週間ほど前から記事の投稿が途絶えていたのですが、その間ずっとブログのリニューアル作業をしていました。

今回はその変更点等をまとめて紹介したいと思います。タイトルにもありますが、読みやすさ向上、回遊率アップ、SEO対策という3つの狙いが話の中心となります。

  1. リニューアルを決めた理由
  2. リニューアルの目的
  3. 読みやすさの向上
    1. 配色の決定
    2. 要所要所に太字を使用
  4. 回遊率の向上
    1. 関連記事の表示形式
    2. 人気記事の表示形式
  5. SEO対策
    1. パンくずリストの作成
    2. 見出しタグの見直し
  6. その他いじったところ
    1. ヘッダーにボタン追加(PC環境のみ)
    2. 記事ページタイトル下のアイキャッチ画像を小さくした
    3. 記事一覧を1列表示にした
    4. ABOUTページに免責事項等を追加
  7. おわりに

リニューアルを決めた理由

リニューアルの実施に至った最も大きな理由、それは記事を書くことに集中したかったからというものです。

矛盾しているように思われるかもしれませんが、僕はこれまでブログカスタマイズに没頭してしまうことがたびたびありました。

先月下旬にも本末転倒モードに突入し、約1週間かけてブログ全体の配色を見直す作業を終えました。が、なんかいまいち。まるで自分を見ているかのようなのっぺりとしたつまらない配色。しかも曖昧な色を使用したため、モニターによって結構色味が違って見えたのです。

僕は思いました。

駄目じゃん。キリないじゃん。いつまでも記事を書けないじゃん。

いや、見た目なんか気にせず記事書けよと多くの人は思うでしょう。しかし、中途半端な完璧主義、無意味な執着心、または強迫観念的な何かに憑りつかれてそれが出来なかったのです。

そんな悪霊のせいか守護霊のおかげか、ワードプレスをやめてはてなブログに移転するという選択肢が頭に浮かびました。

調べてみるとはてなブログに移った人は結構いる模様。僕も続こうかと思ったのですが、現在のサーバーを延長したばかりだと気付きました。

お金がもったいない、どうしよう。そうだ、無料ワードプレステーマを使ってみよう。

……というわけで思い浮かんだのがStingerやSimplicity。基本的な外見は整っておりデフォルトで使用している人も多いため、記事を書くのに集中できると思いました。

この予測が甘かった。実際にダウンロードして使ってみようとしたのですが、やっぱりカスタマイズに時間をかけてしまうことに気付いたのです。数時間作業した後のことでした。

これなら今まで使っていたテーマをとことんカスタマイズした方が早い!さっさと終わらせて記事を書くことに集中出来るようにしよう!

そんなことを思って今回のリニューアルの実施を決めたというわけです。

リニューアルの目的

何故僕はこれまでカスタマイズを繰り返していたのか。それは納得のいく見た目に出来なかったからです。具体的にはヘッダー、背景、見出し……そういったものの配色です。配色を見直して読みやすいブログにする、これが第一の目的となります。

最初はこの読みやすさの向上だけを目指そうと思っていたのですが、せっかくなので他にも色々といじることにしました。

それが第二の目的、回遊率アップです。当ブログではグーグルアナリティクスでいうところの「ページ/セッション」の値が1.15くらいしかありません。そこで1つの記事を読んだあとに別の記事を読んでもらえるような設計を目指すことにしました。

そして、第三の目的はSEO対策をすることです。当ブログではAll in One SEOというプラグインを使って設定しているのですが、そもそものサイト構成の部分で改善出来るところがあるのではないかと思ったのです。

ここから先は以上3つの目的のために行ったことを紹介していきます。

読みやすさ向上

配色の決定

僕のセンスで配色を決めるとダメになることは分かっていたので、色んなサイトやツールを利用しました。

COLOURlovers
PLTTS
Adobe Color CC

まずチェックしたのがこれら。カラーパレットが共有されていて配色の参考に役立つサイトなのですが、個人的にビビっとくるものはありませんでした。

続いてチェックしたのがFlat Inspireというフラットデザインのウェブサイトを集めたギャラリーサイト。そのサイトで使用されているカラーコードも一緒に掲載されているため、イメージしやすくて非常に参考になりました。

その中でも個人的に良いなと思ったのがイエロー×ブラックの配色。自分だったら絶対に出来ない配色ですが、黄色をヘッダーに持ってくればブログ全体の雰囲気が明るくなりそうだと思い、挑戦することにしました。

黄色と黒を使うことは決まりましたが、その2色だけでデザインする能力は僕にはありません。リンク色や記事内の追記部分など他の色も使いたいという思いがありました。

そこで参考にしたのがHUE/360です。

詳しい使い方は「56DOCブログ」さんの「Webサイトの配色で困った!」→「HUE/360使えば良いじゃない」という記事を参照していただければと思いますが、このHUE/360を使えば簡単に相性の良い複数の色のカラーコードを取得することが出来るのです。

以上の作業によって基本的に使うカラーコードが#F7D020#231F20#DE612F#158BBA#5FB3D4#F3F3F3・#FFFFFFと決まりました。

これまでは#57BDAE#373F43#EAEDED#F9F9FA#6487C3#F9737F#FFCE75#FFAE75というぼんやりした色がメインだったので、はっきりとした配色への変更となりました。

要所要所に太字を使用

以前は「太字を使わない」という謎のこだわりとデザインセンスのなさがのっぺり感を演出していました。しかし、今回のリニューアルではそのこだわりを捨て、記事タイトルや本文内の見出しに太字を使うことにしました。

太字の使用と配色の変更によってブログにメリハリが生まれ、可読性や視認性を向上させることが出来たと思います。

回遊率向上

ブログ内の回遊率をアップさせるため、記事本文下にある関連記事の表示とサイドバーにある人気記事の表示に手を加えました。

関連記事の表示形式

リニューアル前の関連記事はPC・タブレット環境で3列、スマホ環境で2列に表示されていました。

これがPCやタブレットでの表示。次の画像がスマホでの表示です。

これらの画像では一部しか表示されていませんが、実際は12個の記事を関連記事として表示させていました。

一度に多くの記事が目に入るので良いんじゃないかと思ってこの仕様にしていたのですが、むしろマイナスの効果があるんじゃないかと思うようになりました。

客観的なデータがあるわけではなく個人的な感覚なのですが、こう一度に目に入る情報が多いとそのひとつひとつを何となく見る感じになるのではないかと思うのです。

そのため関連記事を1列に複数表示させることをやめ、記事タイトルの文字を大きくした上で太字にしてみました。効果の有無さえ不明ですが、ひとつひとつの関連記事にしっかり目が行くように調整してみました。

人気記事の表示形式

これまでは全カテゴリでの人気記事を表示させていたのですが、今回の一連のリニューアルに伴い、現在見ている記事と同じカテゴリの人気記事を表示させた上でスクロールに追従するように設定しました(追従はPC環境のみ)。

また、タブ化することで同カテゴリの人気記事(1ヶ月・全期間)、全カテゴリの人気記事(24時間・1週間・1ヶ月・全期間)の表示をワンクリックで切り替えられるようにしました。さらにカテゴリ名にそのカテゴリの記事一覧ページへのリンクを張りました。

これらの設定については、以下のサイトを参考にしました。

カテゴリー別の人気記事を表示する方法!WordPress Popular Postsプラグインで – ゆめぴょんの知恵
ワードプレスのサイドバーにカテゴリ別人気記事を表示する | イリテク
jQueryでタブを作る方法あれこれ(短いコードで済むやつ・デザイン変更しやすいやつ) – Qiita

なお、スクロール追従に関しては[WP]「Standard Widget Extension」を使ってサイドバーの人気記事を固定表示させましたという記事に書いているので良かったらご覧ください。

SEO対策

上の方でも言いましたが、SEO対策は基本的にAll in One SEOというプラグインを利用して行ってきました。しかし、その他にもまだやっていない対策があったので今回のリニューアルで取り入れてみました。

パンくずリストの作成

パンくずリストはこのページのタイトル部分にあるものです。訪問者にサイト全体のどこにいるのかを伝えるためのものであり、またSEOにも好影響を与えるものでもあるそうです。

当ブログは複雑な階層から成り立っているわけではないので導入していませんでしたが、検索エンジンのクローラーの巡回効率を高めてくれると聞き、表示させることにしたのです。

パンくずリストのプラグインもあるのですが、僕は「Web Design RECIPES」さんのパンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)という記事を参考に実装しました。

見出しタグの見直し

これまではHタグについてあまり考えずに使っていました。例えば、記事ページだと具体的に以下のような使い方です。

H1:ブログタイトル
H2:記事タイトル
H3:大見出し
H4:中見出し(小見出し)
H3:記事下にある関連記事の見出し
H5:各関連記事のタイトル
H3:サイドバー各ウィジェットのタイトル(人気記事等)
H3:人気記事の各記事のタイトル

これはひどい

かなり滅茶苦茶な使い方をしていたのですが、色々なサイト・ブログを参考に次のように設定してみました。

H1:記事タイトル
H2:大見出し
H3:中見出し(小見出し)
H4:記事下にある関連記事の見出し
H5:各関連記事のタイトル
H4:サイドバー各ウィジェットのタイトル(人気記事等)
H5:人気記事の各記事のタイトル

これは記事ページでの設定であり、トップページではブログタイトルをH1にしています。ブログタイトルをH1で囲ったheader.phpの他にH1で囲まないheader-noth1.phpというファイルを作って出し分けるようにしました。

その他いじったところ

主な変更点は以上なのですが、他にも手を加えたところがあるので紹介したいと思います。

ヘッダーにボタン追加(PC環境のみ)

ヘッダーがちょっと寂しかったのでこの画像のようにボタンを表示させることにしました。リンクを張っていて左から僕のツイッターアカウント、ブログのFacebookページ、お問い合わせページ、ブログ内検索となっています。

記事ページタイトル下のアイキャッチ画像を小さくした

以前は記事本文幅(PCだと635px)いっぱいに表示させていたのですが、最大でも240×160pxで表示させることにしました。

その狙いは表示速度の改善です。これまで635×423pxで表示させていたのでretinaを考慮すると単純に1270×846pxの画像が必要になります。パソコンだとあまり表示速度は気にならないのですが、スマホだと話は別です。

画面幅が△△以上だったら1270×846pxの画像を635×423に縮小表示、○○以下だったら640×427pxの画像を320×214pxに縮小表示、みたいなことが出来ればいいのかもしれませんが、それは面倒だし何より僕の力だと難しいです。

そこで480×320pxの画像を新たに生成し、これを画面幅によって適宜縮小表示させることにしたのです。GoogleのPageSpeed Insightsでは画像を最適化するよう言われますが、1270×846pxを縮小表示させるよりはずっとマシになっているのでこれでいきます。

そもそも当ブログではアイキャッチ画像の重要性は高くありません。一応記事の内容に何らかの関係があるものを設定していますが、特にこだわって作成しているわけでもないので大きなサイズである必要がないのです。

大きいサイズで見てもらいたい画像があれば、それは記事の本文中に載せればいいと考えています。

記事一覧を1列表示にした

これまでトップページやカテゴリページの記事一覧を2列で表示させていたのですが、1列表示へと変更しました。これもretina対応が関係しており、アイキャッチ画像を小さくしたのと大体同じような理由なので詳しくは割愛します。

ABOUTページに免責事項等を追加

当ブログについてというページに免責事項等の項目を追記しました。いつかやらなきゃとずっと思っていたことがやっと出来ました。

おわりに

さて、リニューアルでの変更点について長々と書いてきましたがこれで終わります。

初めの方で述べたように今回のリニューアルは「記事を書くことに集中するため」に実施したもの。これからは更新ペースを上げてやっていきたいと思っているので、今後ともGootaLife(グータライフ)をよろしくお願いします!