ブログのデザインをリニューアルしました!(2014年5月)

このブログに何回か来たことのある方は気付いたかもしれませんが、本日ブログデザインをリニューアルしました。基本的な構成(2カラム・右サイドバーなど)はあまり変えておらず、ブログ全体の配色変更が中心のリニューアルとなりました。

デザインを変えようと思った理由

以前から当ブログのデザインで気になっていたことがありました。

なんかのっぺりしてるし清潔感がない!

参考として、リニューアル前の記事ページがこちら。

気に入った背景画像があったので、それを基に素人ながら色々と考えて見た目を整えようとしていたのですが、なかなか納得いくものが出来ませんでした。

結構長い時間をかけて上の画像のようなデザインになったものの、のっぺりとした素人感が抜けず、雰囲気もどこか暗い感じ。Apple製品の画面ではそうでもないのですが、それ以外だと暗い印象を受けました。

この”環境によって見た目の印象が変わる”という点もリニューアルに踏み切った理由です。背景のメインカラー・ベージュの発色が環境によってかなり異なってくるようで、ブログの雰囲気が閲覧環境に大きく左右されてしまい、その点が嫌だなあと感じるようになっていました。

変更した点

「のっぺりしていて暗い印象を受ける」、「閲覧環境によって見た目の印象が大きく変わる」という点を主に改善すべく、次のような変更をブログに加えました。

1.メインカラーを白に

これが今回のリニューアル作業のほぼ全てと言ってもいいかもしれません。

ブログを明るく清潔感のある見た目にするため、背景色を画像を使わない白一色にしたうえ、(PC環境の)メニューバーの色も白に変更しました。

これで以前よりもシンプルでクリーンな印象になったのではないかと思います。上の画像にあるように記事ページのファーストビューは色的にかなりゴチャゴチャしてましたからね(汗)

清潔感なら他の色でも出せそうですが、モニターの影響をあまり受けないだろうということで白を選択。トップページがちょっと味気ないかも。。。っていうのはちょっと思いましたが、とりあえず良しとしました。

2.デバイス毎の見た目を改善

当ブログはレスポンシブデザインを採用しており、レイアウトが画面サイズごとに自動で変更されるようになっていました。

そのため、どの端末(PC・タブレット・携帯)でも一応閲覧することは出来ていたのですが、これまで閲覧ユーザー数の観点からタブレットでの表示に関してはあまり調整していませんでした。

きちんと設定しなければ、、、と思いながらも出来てなかったのですが、最近タブレットでこのブログを見に来て下さる方が多くなってきたため、このリニューアルのタイミングで調整することにしました。

調整と言っても文字サイズやタップ領域などの細かいところがほとんどではあるのですが、以前に比べるとだいぶ見やすくなったかなと思います。

また、今回はメディアクエリのブレークポイントを増やし(3→5)、より閲覧環境によって見えにくくならないよう配慮しました。

以上、大きく2つが今回のリニューアルでの大きな変更点となりますが、これらの変更にあわせて関連記事やコメント欄、サイドバー等の表示方法などもいじっています。

おわりに

今回、久しぶりに大きなリニューアルをしてみたのですがいかがでしょうか。

個人的にはまあまあ気に入っているので、しばらくは細かい修正を加えながらこんな感じでやっていきたいと思います。

ということで、これからも当ブログをよろしくお願いします:)