logo

ブログ運営・SEO

雑記ブログをリニューアルしました【ページの高速化と利便性の向上】

[最終更新日]

雑記ブログをリニューアルしました【ページの高速化と利便性の向上】

※当サイトでは、記事内に広告を含む場合があります。

こんにちは、雑記ブロガーのタストテンです

この雑記ブログ(P+arts:パーツ)を開設しておよそ1年半が経ち、心機一転リニューアルしました。

リニューアルの目的は主に3つあって、下記になります。

  • 読者の利便性の向上
  • 高速化施策
  • 自分のモチベアップ

今回のリニューアルで、この3つをある程度対応できたと思っています。

高速化や利便性が向上することにより、ユーザーの滞在時間が長くなったりや直帰率の低下、リピーターの増加につながると考えています。

また、僕のモチベーションがめっちゃ高まりました。

今回は、リニューアルでやったことを中心に紹介していきますね

ブログのリニューアルを検討している人がいましたら、参考になれば幸いです。

※割と誰得記事です

リニューアルで行ったこと

このブログをリニューアルをするうえで行ったことは、主に下記になります。

サイト全体

  • 配色を少し変更
  • ロゴを変更
    ▶太めのインパクトのあるフォントを採用して、印象を強めた
  • アイコンを多めに増やした
    ▶何のリンクなのかをわかりやすくした
  • 記事ページに目次を追加
    ▶記事の概要を把握できるようになり、見たい内容にアクセスできるようにした(※今まではLasy Loadと干渉してしまい、ページ内リンクがズレる問題があったけど、解決できたので実装した)
  • 高速化の施策をした
    ▶プラグインを減らしたり、より画像圧縮をしたり、サーバーの設定を変更したり、不要なコードを削ったりした
  • 利便性の向上(UIを改善)
    ▶PCの記事ページを2カラムにしたり、ページトップボタンを追加したり、スマホのフッターメニューを追加するなどして利便性を向上した

PCのみ変更したところ

  • 記事ページにサイドバーを追加
    ▶1カラムから2カラムへ変更して、タグやカテゴリ、関連記事などを追加した
  • ページトップボタンを追尾するようにした

モバイルのみ変更したところ

  • フッターに固定メニューを追加
    ▶読むときに邪魔にならないように、上にスクロールすると出現。PCのサイドバーに載せている情報をメニューにしている

意識したことは『利便性の向上』と『高速化施策』

冒頭でも少し書きましたが、今回のリニューアルで意識したことは『利便性の向上』『高速化施策』(と自分のモチベアップ)になります。

ブログにおける利便性とは、目的の記事や知りたい情報に、スムーズにアプローチすること。

いろんなブログを見ながら、『ユーザーが回遊しやすいサイト』づくりを目指しました

もうひとつの高速化施策は、ページの表示スピードのことですね。

ページの表示スピードは、グーグルが提供しているサービス『PageSpeed Insights』や『Test My Site』を参考にしています。

リニューアル前の記事ページでの、PageSpeed Insightsのモバイルのスコアは下記でした。

このスコアが低いほど、『サイトの表示速度が遅い』という認識になります(あくまで参考ですが)。

ちなみにPCですとほぼ90点台後半になり、あまり変わらないので無視しています。

昨今はモバイルファーストなので、モバイルでのスコア改善を目指しました。

せっかくなので、同じページで、リニューアル前後のスコアを測ってみました。

🔻リニューアル前のスコア(40~50前後)

🔻リニューアル後のスコア(55~65前後)

スコアにばらつきがあるものの、リニューアル前と比べると10以上スコアを伸ばすことができました。

スコアを伸ばせた理由は、今までプラグインで使っていたものをやめたり、画像の圧縮をしたからですね。

画像の圧縮は、ワードプレスのプラグインである、『Compress JPEG & PNG images』を使用しています。

ブラウザ上で圧縮できるサイト『TinyPNG』が提供しているので、他の画像圧縮系プラグインより信頼できます。

プラグインはたくさん有効化しておくとページが重くなりがちなので、注意して使っていきたいところですね。

ページの高速化はもっと改善できると思いますので、今後の課題にしていきます。

今回は少しでも改善できたので、リニューアルしてよかったと思います

リニューアル後に確認すること

リニューアル後は、グーグルアナリティクスで、ユーザーの直帰率や滞在時間、ページ/セッションを見ていきます。

さらに、プラグインの『Aurora Heatmap』で、ユーザーがどこを見ているのか・クリックしているのかを可視化していきます。

1ヶ月間は様子を見て、配置を変えてみたりしていく予定です。

改善が見られれば、そのあとに記事のリライトをしていきます(計測中にリライトすると、ちゃんとデータが取れないので)。

【さいごに】久しぶりにサイトをいじってモチベが上がりました

久しぶりにサイトをいじったら、ブログのモチベがめっちゃ上がりました。

この記事もノリノリで書いたので、1時間かからずにアップできてると思います

ブログのモチベーションが低下している人は、サイトのテコ入れしてみると、モチベを再点火できるかもですね。

という感じで、ブログをリニューアルしたよっていう誰得めいた記事でした。

忙しかった仕事が落ち着いてきたので、しばらくはブログに力を入れていけそうです。

リニューアルを機に、心機一転取り組んでいきます!

[最終更新日]

ブログ運営・SEO

\ iPhoneを公式ショップで確認 /

プロフィール

[記事を書いた人]タストテン

横浜歴30年以上の横浜大好きブロガー。 ブログ開設1年で年間390万PVを達成。

当ブログ(P+arts:パーツ)では、実体験を基に『暮らしや仕事に役立つライフハックと雑学』を発信しています。
生活の一部として役立てることができれば幸いです。