男子ハックのPCサイトのデザインをリニューアルしました!

@JUNP_Nです。男子ハック4回目の大幅リニューアルを行いました。今回のテーマは「情報に辿り着きやすいブログ」を目指してみました。構想だけで実現できなかったこともありますが、今までと比べ見やすく、興味のある情報へ辿り着きやすいデザインになったかと思います。

デザインからみた大きな3つ変更点

Danshihack ver4 4

サイトの印象自体も今までと比べるとずっと見やすくなったかと思いますが、今回の変更点は大きかった点は3つです。

というか全部作り替えているので大きな変更点というか全面リニューアルなのですが…

トップページは新着記事を並べるのではなくて、カテゴリ毎の新着記事を表示にしました。

Danshihack ver4 2

いわゆる「Webマガジン風レイアウト」と言えばわかりやすいでしょうか?ブログはストック型コンテンツであるにも関わらず、トップページはフロー型(新しい情報が流れていくタイプ)の表示です。これってブログだと機械損失なんじゃないかな?っていう考えです。

コンテンツは長くブログを続けるほど溜まっていきますが、アクセスが検索エンジンからしかない記事ってサイトに来てくれた人に届いていない。だからせめて主要なカテゴリ毎の新着記事をトップページに表示することができたらいいかなと。突き詰めていったら全カテゴリの新着記事を見やすく表示したほうがいいんでしょうが、今回は主要カテゴリのみになりました。

ユーザーの導線的に検索エンジンから記事にアクセスしてもらった人の多くがトップページにアクセスして離脱しているので、トップページから興味のあるカテゴリ毎に別の記事へアクセスしてくれたら嬉しいなという試みです。

メニューバーを追加しました

Danshihack ver4 1

え?今までなかったの?という感じですが、今さらですメニューバーを導入しました。こちらもやはり主要カテゴリを表示させています。

同一カテゴリの人気記事と過去に男子ハックで閲覧した記事がサイドバーに表示されるようになりました。

Danshihack ver4 3

サイドバーに表示される要素についても大幅に整理しました。記事単位でカテゴリの人気記事を表示するように調整。そして、最近多く見かけるスクロール追従型にしました。

スクロールに追従する部分には「おすすめ」として過去の閲覧履歴とカテゴリの人気記事を表示するようにしました。

裏側での大きな変更点

サイトのレイアウト変更をするたびに「効果はいかほどあったの?」ということを後で見なおさなくちゃいけないわけです。

それが大きい変更であろうと、小さい変更であろうと「効果あった?」って聞かれた時にPVがあがったよ、直帰率が下がったよだけでは不十分。というか、本当に変更したことに起因しているかわからない。というわけでサイドバーのリンクのクリック率が上がったよ!とか記事下のクリック率があがったよ!とかそうゆうことまでデータを取ってみることにしました。

サイドバーや記事下にある関連記事などのリンクにはパラメーターを付与しました。完璧にトラッキングできるようにはなっていませんが、ある程度どこのリンクがクリックされているのかGoogleアナリティクスで確認することができるようになっています。

まとめ

今後は重点的にサイト訪問者が興味のある情報に辿り着くにはどうしたらいいかのかなんてことを最適化していきたいと思っています。

それにあわせて男子ハックでの広告表示の最適化に向けた施策も行なっていけたらと思っています。具体的にはAdsenseの表示位置を柔軟に変更する仕組みや、Amazonのアフィリエイトリンクについてインプレッション数、クリック数などを把握できるようになりました。

というわけで、次はこれからモバイルページのリニューアルにとりかかります。

関連する記事
関連するカテゴリ
Facebook
LINE@ "友だち追加"

スマホでLINEを起動 > その他 > 友だち追加 > QRコード

メール配信登録
ランキング