Beckの活動&SNSまとめはこちら

過去記事へのアクセスがしやすい様にブログのナビゲーションを改善してみた

先日倉下さんとの対談の中で「ブログのIndexが新着記事一覧になっていて、過去ログへのアクセスをGoogle任せにしていた」という話があがったので、思い立ってブログのナビゲーションを色々見直すことにしました。

ブログのテーマを無難にSANGOに変えてから、何の疑いもなくデフォルトのトップページを使っていたのですが、今回はドラスティックにトップページやサイドバーをいじってみましたので、今回はその変更点等をご紹介できればと思います。

トップページの変更箇所

Hacks for Creative Life!のアクセス解析をすると、トップページのPV数が並みいる個別記事を差し置いて1位や2位であることが殆どです。トップページの利便性を向上させることで、1ユーザあたりのページ閲覧数が増えるんじゃないかという推測の元、今回はトップページを大々的に変えてみました。

アイキャッチをコンパクト且つ検索可能に

以前のデザインではアイキャッチ部分が無駄にスペースを使っていたので、サイズをコンパクトにしつつ、検索窓を付けてみました。トップページに検索窓付けるのって結構使って貰えるんじゃないかというほのかな期待があります。

新着記事より先におすすめ記事を差し込みました

SANGOの記事一覧というパーツがスライダー的に使えたので、「Featured」というカテゴリに属している記事をお薦め記事として紹介するスライダーをアイキャッチ直下に配置しました。

更新頻度を高めるために「小粒なネタ」を投下したり、「お知らせ」な感じの記事を書くこともあるので、そういうのに「手間暇掛けた子」が埋もれてしまわないよう、一手間を加えていきたいと思います。

新着記事を2カラム→3カラムに増やした

今まで2カラム表示で割と「スペース取るなぁ」と思っていた新着記事。このたびトップページを固定ページで作り直す際に3カラム表示に変更しました。ちょっとごちゃごちゃ感は出るけれど、今までよりも一覧性が高まったので個人的には結構良い感じなんじゃないかと思っています。

固定ページでトップページを作ると新着記事のページングができないため、ボタンをクリックすると通常のページング可能な新着記事一覧を表示するようにしています。

まぁ、多分ほとんど誰も使わないと思いますが・・。

他メディアの更新情報

トップページ下部には他メディアでのアウトプットへのリンクと更新情報(RSS Agregatorを使って更新情報を取得/表示)を配置しました。なんとなくここを見れば自分の更新情報が全て追える感じになったので良いんじゃないかと。

サイドバーの変更

ナビゲーションを改善すべく、サイドバーも大々的に見直しを行いました。

カテゴリとタブをサイドバー上部に

カテゴリやタブなどを使って他の記事にアクセスしやすいようにFollow、プロフィール、ランキングよりも先にカテゴリとタグが来るように設定しています。検索は以前同様最上部。

また、個別の記事にアクセスしたときは「同一カテゴリ」の人気記事が上位に表示されるように細工を施しました。モバイルがアクセスの大半を占めるので効果の程は・・微妙かもですが。

週間ランキングをちょっと小さくした

WordPress Popular Postというプラグインを使って週間ランキングを出しているのですが、今までサムネイルがデカすぎたので、前後の新着記事、累計ランキングと同じぐらいのサイズ感になるように調整を行いました。

追尾メニューはTOCのみにした

いままで追尾メニューにGoogle Adsenseを載せていたのですが、長文記事のTOCを表示する際に邪魔だったので追尾メニューから外して週間ランキングと累計ランキングの中間に配置しました。ユーザビリティ重視!

メニューを少しだけ見直した

メニューのカテゴリの中身を見直しました。今後カテゴリの整理を行って、出来れば4大分類ぐらいにまとめなおしたいと思っています。そうすると、メニューに大分類、マウスオーバーで子分類が表示されるようになって利便性が高くなるであろう、という見立てです。

他メディアへのリンクはコンパクトにまとめて一番右に配置。このブログのナビゲーションを優先すべきだろうってこと。

さいごに

取り急ぎ、トップページとサイドバーに大改造を施し、今後の課題としてカテゴリの整理とメニューの改善が挙げられます。折角固定表示のトップページにしたので、もう少し色んな情報を載せてみても良いかもです。

是非、ブログナビゲーション改善へのフィードバック等コメントでいただければ幸いです!


Also published on Medium.

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください