ブログデザインをリニューアルしました!

  • 公開
  • 更新
  • その他

もう既にご存知かと思いますが、ブログをリニューアルしましたのでいくつかポイントとなる部分について書いていきたいと思います。

全般

※旧デザインの実寸サイズはこちら→旧リストページ旧シングルページ

以前はサイト名の「KuroBox」の名の通り、ヘッダーやフッター部分が黒かったのですが、今回から全体的に白を基調とした配色に変更しました。

これはできるだけ閲覧者が記事そのもののコンテンツに集中できるようにし、「サイトカラー」のようなもので印象を左右されたくないがための措置です。

レスポンシブデザインで作成しているところは前回と同じです。相変わらず単位は基本的にremベースで作成しています。

地味にサイトタイトルの辺りはWebフォントを使っており、以前より洗練したサイトロゴになったのではないかと思います。

詳細ページ(シングルページ)やカテゴリや月別アーカイブのリンク部分などのデザインは基本的に前回を踏襲したカタチです。しいてあげればリンク関係はタブレットの時は3列、スマホの時は2列になるように変更したぐらいなものです。壊れていない古典を直す必要はないのかな、と。

記事一覧

ここは前回のデザインが「一覧性の低さ」が問題だったので改善しました。

本当は一覧性を重視するなら1個辺りのサイズを小さくしてサムネイルがたくさん並ぶリストページがベストなのかもしれませんが、私はこの個別記事が横幅いっぱい型の一覧が好きなんですよね。

なのでせめて一覧では画像比率をかなり横長に固定し、前回ではあった「日付、カテゴリ、続きを読む」といったパーツを一掃して省スペース化をはかりました。この辺りは若干SEO的に不安な部分も少しあったりしますが・・・。

全体がリンクになるようにしたのも吉と出るか凶と出るか・・・このくらいのサイズだと「押せる感」があまりなくて詳細ページへの誘導に不安があるのは本音です。デザインの好みとユーザビリティの狭間で今でもかなり揺れ動いているところではありますね。

必ずしも一覧性を重視したベストなリストページとは言い難いですが、前回デザインとの相対比較ではかなり一覧としての機能性はアップしたと思います。

「関連情報、最新記事、オススメ」タブ

関連情報は以前からありましたが、前回デザインでは画像が小さすぎて何が何やらよくわからない時があったので画像を大きくするデザインに変更しました。比率は一覧と合わせた比率にしてあります。

今回から追加された最新記事とオススメなんですが、最新記事はその名の通り最新の記事が10件ほど並びます。

オススメは私的に見て欲しいモノを並べていきたいと思います。現状は・・・まぁ、わかる人が見るとわかる理由でチョイスしています(笑)。

ただ、少しタブになっているのがわかりにくい気がしますし、ここはjQuery的にはclickなので反応悪いんですよね・・・近いうちに改善したいと思っています。

タブバー(スマホ版のみ)

これはスマホ版のみで追加したフッター固定型のメニューです。

ヘッダー固定でハンバーガーメニューと、タブバーと迷ったのですが、この規模のブログ程度であればタブバーのほうが使い勝手が良さそうなのでこちらをチョイスした次第です。

現状は「カテゴリ、最新記事、Twitter、feedly」というメニューを用意してみました。

前回サイトではこういったカテゴリや最新記事のような一覧性はブログの多様性をあえて伝えたくなかったので行きにくくしていたのですが、今回から実験的に追加してみました。

さらにTwiiterやfeedlyといった最新情報をユーザーが入手できる手段へのボタンを入れてみました。feedlyはWebフォントアイコンになかったのでrssマークをfeedly色にして誤魔化しています(笑)。

正直な話、これまではこういった「積極的に読んでもらう仕掛け」を用意することはいかがなものかと思っていたのですが、やったことがないのに否定ばかりというのもやはりどうかと思うので実験的にやってみることにしました。

わたし的にはブログを続けやすくするにはいかに「人の目」を意識しないか、が大事だと考えているので実験的とはいえこの決断はかなり勇気が必要でした。


以上が今回のリニューアルに関しての主だった変更点です。

大事なのはデザインやレイアウトよりもコンテンツというところは変わらないと思いますけどね。

しばらくしたら今回のリニューアルがもたらした変化について報告したいと思います。