「OBOLOG」のデザインをリニューアルしました(2017年4月実施)

報告記事を書くのが遅れましたが、1週間ほど前に当ブログ「OBOLOG」のリニューアル作業を終えました。今回は「無駄なスペースを減らして読みやすく!」をテーマにデザインの変更をおこないました。

リニューアル前後の比較

▼リニューアル前のトップページ

20160720-obolog-top-before

▼リニューアル前の記事ページ

20160720-obolog-single-before2

ブツ切りしてますが、あくまで雰囲気の参考ということで。

しかしまあ、この画像から分かるように無駄な空白がページ上部に多いですよね。特に記事ページでは、PCから閲覧してもファーストビューが「ヘッダーと記事タイトルのみ」なんてことに。スクロールしてもアイキャッチ画像がドーン。本文まで遠いこと遠いこと。

こんなところが気になって、リニューアルを思い立ったわけです。

そして完成したものがこちら。

▼リニューアル後のトップページ

▼リニューアル後の記事ページ

見たまんまの違いですね。ただ、せっかくなので主な変更点を以下で説明していきたいと思います。

全体

レスポンシブデザインはリニューアル前から採用しているのですが、画面幅が1279px以下の時は1カラム、1280px以上の時は2カラムデザインになるようにしました。

また、以前は画面幅によらず15pxとしていたフォントサイズを、タブレット・PCを想定した画面幅では16pxに指定し直しました。その方が全体のバランスが良く、1行あたりの文字数も多くなりすぎず読みやすいかなと思ったためです。

ヘッダー

画面幅768px以上ではページ全体を引き締めることを期待し、暗い色で横幅いっぱい塗りつぶしています。1色だけだとのっぺりした感じが強かったので、#1a1c21#3a3c41の2色を使って斜めストライプにしました。

また、画面幅1280px以上の時には、推しカテゴリとして「場面緘黙」「ヒゲ脱毛」、ABOUTページである「当ブログについて」、検索フォームやカテゴリ一覧(という名のメニュー)をスライドインさせるリンクを表示しています。

なお、画面幅767px以下では背景を#f2f2f3#ededeeの2色を使って斜めストライプにしており、右側にメニューをスライドインさせるハンバーガーボタンを設置しました。

↑こんな感じですね。

記事ページのタイトル周り

以前の記事ページデザインは、アイキャッチ画像ありきのものでした。そのため、記事を書くたびにアイキャッチ画像を探したり、あるいは作ったりする必要がありました。

しかし、毎回ぴったりな画像を見つけるのは難しく、「無理があるだろ」「こじつけだろ」っていう画像を設定することも多くありました。そんなレベルの画像さえ見つからず、「NO IMAGE」と書かれた画像を作成してアイキャッチに利用したこともあります。

640×426pxのサイズでデカデカと表示される「NO IMAGE」。こんなのいらないよなと思うと、こじつけレベルのアイキャッチ画像の必要性にも疑問符が。

そこで、いっそのこと記事タイトル周りのデザインを変えてしまおうと思い立ちました。

  • 以前ほど大きなスペースをとらないようにする
  • アイキャッチ画像がなくても統一感を持たせる
  • 記事の属するカテゴリを表示する
  • 記事の投稿日と最終更新日を表示する

上記の条件を満たすために試行錯誤した結果、現在のデザインになりました。

↑こんな感じ(画面幅768px以上の時)ですね。

背景にアイキャッチ画像(リサイズ済)を指定しています。CSSでぼかしているのではなく、小さい画像が引き伸ばされてぼやけた感じに見えるようになっています。

アイキャッチ画像を指定しない場合は、次のようになります。

背景を2色による斜めストライプにしています。ブログ全体の統一感を出すために、画面幅が768px以上か未満かで色の指定を変えています。

なお、シェアボタンは記事下だけに付けていたのですが、上にも付けた方がまとまりが良く見えたのでそうしています。

カエレバ・ヨメレバの導入

これまで商品を紹介する際には「AmazonJS」というプラグインを利用していたのですが、このリニューアルを機に「わかったブログ」のかん吉さんが作ったカエレバ・ヨメレバへと置き換えました。

Amazonだけでなく楽天へのリンクも一緒に張れるのがいいですね。デフォルトでも十分その機能を果たしますが、僕はCSSでカスタマイズして使っています。

↑こんな感じですね。

サイドバー

リニューアル前は「検索フォーム」「広告」「最新記事5件」「人気記事10件」を表示させていましたが、「広告」と「人気記事20件」のみのシンプルな構成にしました。

検索フォームは使われることがゼロに近かったし、最新記事が気になる人はトップページに行くだろうと思ったため、サイドバーからなくしてしまいました。

フッター

ページ全体を引き締めることを期待し、#1a1c21#3a3c41の2色を使った斜めストライプにしています。

画面幅768px以上では、フッターメニューとしてABOUTページやコンタクトフォーム、SNSアカウントへのリンクなどを表示させています。

おわりに

特筆するようなことではないものの、これらの他にも様々なところを修正しており、その結果かなり気に入ったデザインにすることができました。

しかし、昨年のリニューアル時に課題として挙げていた「記事の適切なカテゴライズ」は解決できていません。(もっと記事が増えたら再分類すると言ったものの10記事ちょっとしか増えていない)

ともかく、心機一転ブログを書いていきたいと思いますので、これからもOBOLOGをよろしくお願いします。