このブログをはじめてから大体1年2ヶ月ほどなのですが、一念発起してブログのデザインをリニューアルしました。
今までははてなブログテーマの中でも人気のDUDEを利用してそれを改造していたのですが、回遊率の悪さやアイキャッチを効果的に訴求できていない、そしてレスポンシブ対応していないのでスマホサイト表示がちょっとダサいという点が問題だなと感じていまして、勢いにまかせて全て解決してやろう！とリニューアルに取り組みました。
個人でできるサイトUX改善PDCAというスローガンのもと、今回はどういう意図でどう変えたのか記録しておき、後々数値としてどう改善されたかレポートしたいと考えているのでリニューアル概要についてまとめました。
1. カード表示でアイキャッチによる訴求を向上
TOPページの記事一覧を今までは1記事ずつ縦に並べていたのですが、それだとアイキャッチが可視領域に対して1つしか表示されず訴求効果が弱いのでカード表示にしました。カード表示にすることで多数のアイキャッチを訴求して回遊率を高める意図となっています。
アイキャッチのクオリティが記事詳細ページへの遷移率を高めると仮説を立てているので、当ブログではアイキャッチのデザインには割と力を入れているのですが、カード表示はアイキャッチに力を入れているブログではかなり効果が期待できるのではないでしょうか。
カード表示に関してカスタマイズで苦労したところは、今まで作ってきたアイキャッチ画像のアスペクト比(1000×375)に合わせるところですかね。Chromeの検証機能で何度も行ったり来たり...。
2. レスポンシブ対応でモバイルユーザーの刈り取り
今回のリニューアルにあたってベースとなったテーマはZENO-TEALなのですが、こちらはレスポンシブ対応しているのでスマホ表示でもイイ感じにカード表示してくれます。
今まではてなブログ標準のスマホ表示だったので味気がなく、尚且つPV・セッションにおけるプラットフォームの割合としてモバイルが70〜80%もあるのでこのままではいかんと危機感を抱いていたところでしたが、これでモバイルユーザーで直帰していた人をもっと快適に回遊させることができればなと思います。
はじめてレスポンシブ対応のCSSを書いたのですが、ブレイクポイントごとにいろいろ設定しなおさないといけないのが大変でした。本業でバリバリとレスポンシブ対応サイト作っている人はすごい...!!
3. 回遊のためのコンテンツ整理
以前のデザインではグローバルナビゲーションや新着記事一覧などがあったのですが、そういったものを全て削除しました。
というのも、CTRを調べると全く機能しておらず回遊のための施策としてはほぼ無駄だと判明したからです。よかれと思って設置していたグローバルナビゲーションは意外と、というかユーザー行動を想像したらそりゃクリックされないよな、と納得したため有無を言わさずの削除です。
はてなブロガーの方でよくハンバーガーメニューだったりグローバルナビゲーションを設置している方がいますが、それちゃんとクリックされてますか？ 皆さんも見直してみることをおすすめします。
4. AdSense配置の見直し
はてなブログProの費用を回収できればいいやくらいで設置しているAdSenseですが、こちらも配置と数を見直しました。
サイドバーにある300×600はそのまま据え置きなのですが、記事下のダブルレクタングルだったものをレスポンシブ1つに変えました。というのも常々ダブルレクタングルで全く同じ広告が表示されるのが無駄だし気持ち悪いなと思っていたためです。
ダブルレクタングルのユニットが一番稼いでくれていたのですが、デザイン性とユーザーのうっとうしさ軽減を優先しての判断です。月あたりの収益が減りそう。
5. ロゴのリニューアル
リニューアル前に訪れていてもらってた方はお気づきかもしれませんが、ロゴもリニューアルしました。もう少し親しみやすく、かわいい方向性にしました。
ロゴをリニューアルすると新しい気分になって愛着が増しますね〜。
最後に
まだまだ仮説を立てて施策をいろいろ実装してみた部分はあるのですが、そちらは数字として結果が出てからまたご報告します。ブログではじめるUX改善、いい方向に行くといいな〜。