新ブログデザイン、去年とどう変わった？

こんにちは、広報の魚です。

皆様、GWはいかがお過ごしでしたでしょうか？私は「恋に落ちるエディタ」と噂の Sublime Text の導入作業をしていました。美しいインターフェースとカスタマイズ性でなかなか気に入っています。

「新しいエディタを手に入れると何か作りたくなる」ということで、ブログのテンプレートをいじって、デザインを新しくしたりもしました。

というか、実は、私は去年の夏ごろから、かなり頻繁にブログのデザインを変えていたのですよね。お気づきでしたでしょうか？

今回は、去年のデザインから今のデザインへの変遷を書いてみたいと思います。

ちょっと懐かしい香り、2013年夏以前

懐かしいですね。このころは一般に配布されていたテンプレートを利用していました。

2chのキャラがちりばめられていて個性的。良い意味でも悪い意味でも時代を感じるデザインでした。 「リキッドレイアウト」と呼ばれる手法を採用しており、常に記事の幅が画面幅にフィットするように設計されています。しかし、ワイドディスプレイで見ると記事部分が横に広がり過ぎて可読性が落ちてしまいました。さらに、背景画像の幅が足りなくて途中で継ぎ接ぎになっています。昔の小さいディスプレイでの閲覧を前提としていたのですね。
また、文字の大きさや行間の設定が甘く、非常に読みづらいのも残念でした。

最低限の可読性を確保、2013年夏

可読性の低さをなんとかしようと、先ほどの欠点を改善したものがこちらです。

字体にメイリオを採用し、行間や文字間隔にも気を配っています。文章の読みやすさが全然違うはず。
さらにリキッドレイアウトから固定幅レイアウトに変更し、ワイドディスプレイでも可読性が落ちないようにしました。
幅の足りない背景画像も思い切って削除しました。

フラットデザインへの憧れ、2013年秋

フラットデザイン、というかミニマルなデザインに憧れていたあの頃。
無駄をそぎ落とした美しさを求めて迷走していました。没になったデザインも実はたくさんあったり。

このデザインもあまり気に入っていませんが、古臭さは大分ましになったかなと思います。

余白の使い方にご注目。記事やサイドバーを囲う枠と、見出し文字との余白が適切になりました。細かい部分を気にして作れるようになってきたわけです。

また、見た目では分かりませんが、一部にリキッドレイアウトを再採用しています。広いブラウザ幅では記事は固定幅ですが、ブラウザ幅を縮めると自動で記事幅がブラウザ幅にフィットするようになっています。画像の崩れ対策なども施していました。

"人"に優しいデザインを目指す、現在

前回のデザインをブラッシュアップ。全体のバランスを整え、視認性が低いテキストリンクをボタンに変えたり（トップページ最下部の「次に行く」ボタン）、一部にwebフォントを導入したり（記事上部の日付部分）しました。また、コメント投稿フォームもシンプルながらも美しく整えました。

デザインだけでなく、機能性も向上しています。「読者にも執筆者にも優しいブログ」を念頭に置いてソースコードを一から見直しました。
執筆者のため、誰が書いても記事の見た目が崩れないようにCSSを修正しました。
読者のため、全記事一覧ページを整備し、過去記事をさかのぼりやすくしました。さらに、javascriptを用いて、ブログ内検索機能を強化したり、ページトップへ戻るボタンを実装したり…。

「そんなとこ誰も気づかない」というような部分に拘りを持って作っております。

新しい機能の詳細は、また今度ご紹介したいと思います。
本日はこれにて。