ブログをリニューアルしました

そろそろブログを立ち上げて1年経つのでリニューアルをしました。
今回リニューアルするにあたって気をつけた点としては以下3点。

  • 記事へのアクセスのしやすさ
  • 記事の読みやすさ
  • WordPressのプラグインをなるべく使わない

それぞれについて少し詳しく書いてみようと思います。

記事へのアクセスのしやすさ

一番の大きなポイントはサイドバーの撤去。

ブログ内の記事を探しやすくするためサイドバーを置くということが慣例となってましたが、これについて疑問を持ってました。
サイドバーを持ったブログが100個あれば100種類のサイドバーがあります。ブログごとにサイドバーのパーツ配置を覚え、他の記事にアクセスするためにスクロールすることに慣れきってしまっていました。
この無駄なスクロールを減らつつ、他の記事にアクセスしやすくするか自分なりに考えて配置を考えてみました。

まずはヘッダーにグローバルナビゲーションを配置しました。

インデックスページを訪れた人にまずは記事を探してもらえるようにするためです。
ナビゲーションに最新記事を置いていないのはインデックスページにはスクロールさえすれば既に5つの記事が出ているためです。
また、ヘッダーに主要ページへのアクセス方法があると認識されると、「この記事の先頭へ」ボタンが今までよりも活きてくるんじゃないかと考えたからです。

直接、記事のページを訪れた人は探していたキーワードで検索にかかった、またはTwitterや他のブログからのリンクと考えられます。
なのでザっとでも記事に目を通すことにはなると思います。
そこに答えがなければ戻って別のページで探すか、ブログの他の記事から探そうとしようと思います。

そこで、記事の最後に関連記事へのリンクと記事のカテゴリーへのリンクを配置しました。

関連記事だけでもいいとは思いますが精度も完璧じゃないので、カテゴリーへのリンクはあったほうがいいと思いました。
実際にGoogle Analyticsで解析するとカテゴリーのクリックは結構あります。それを記事のタイトル周りやサイドバーだけに置いておくのは勿体無い気がします。

フッターには、記事を読み終えて、ブックマーク・関連記事・コメントまでくぐり抜けて、フッターまで辿りつく可能性はほぼないと考えて、重要ではないけどあれば一応ページ内で全ページの検索は可能なように、最新記事・Development Tool(タグ機能を利用)を置いてます。

他にも、スマートフォンのアプリにサイドバーがない(タブレット機用のアプリは別ですが)ことを考えると、今後はサイドバーよりも固定フッター・固定ヘッダーなどの方が利用者の学習コストを削減するためにもいいのかなという思いもあります。

記事の読みやすさ

ブログは記事を読んでもらうためにあるものです。
記事を読んでもらうには文章力が大事ですが、まず読むために最適な環境が整っていないと読者を逃してしまう原因にもなります。

上記のサイドバー撤去のおかげで記事を書くエリアの幅が広がりました。具体的にはリニューアル前が554pxでリニューアル後が770pxです。
記事を書く幅が広いと画像が大きく使えて拡大表示させる手間を省くことができ、文字の折り返しも少なくなってスクロールも少なくすることができます。

サイドバー撤去のおかげでお互いに相乗効果を得ることができました。

WordPressのプラグインをなるべく使わない

これはページ表示にかかる時間短縮と一年間で学んだことでどこまで出来るか挑戦するためです。
WordPressのプラグインを入れるとhead内が自分の中で把握できなくなってしまうし、自分のスクリプト・他のプラグインに影響を及ぼす場合もあります。
また、何らかの仕様変更があった場合にプラグインの更新を待たなくても、自分で更新できてしまうメリットがあります。

実際、ページを表示させてるのに使っているプラグインといえば、Popular Posts(ナビゲーションのPopular Entries)・Similar Posts(関連記事へのリンク)・All in One SEO Pack(メタタグなど)くらいのものです。もちろん他の管理する系プラグインは入ってますよ。
ブックマーク追加ボタン・ドロップダウンメニュー・ツールチップは自分で書いたJavaScriptで動いてますし、Syntax HighlighterLightboxはプラグインではなくサーバーに置いて自分で管理しやすいようにしてます。

と、長々と書いてしまいましたが、他にもリニューアルに伴い、CSS3非対応ブラウザ(主にIE)は必要最低限の措置しか行ってなかったり、あるブラウザでアクセスすると出現する隠しページなど準備してますよ。
これからもこのブログをよろしくお願いします。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ