モンキーレンチのデザインをリニューアルしました!

年末に「来年に向けてブログのリニューアルについて考える」という記事を書いてから、少しずつデザインを変えていて、ある程度形になったので記事にまとめました。

リニューアル前のデザインについて

リニューアルまでのデザインは右のものです。このデザインにしたとき、ポイントにしたことが2つありました。

単なるブログではなく、Webサイトである。

ブログはメインコンテンツではあるのですが、僕が個人的に制作したWebサイトやサービスも大切なものの一つだし、趣味である写真も大事なコンテンツの一つにしたかったので、ブログの形式ではなくWebサイトのの形式にしていました。

なるべく余白を取り、シンプルに。

そして、コンテンツ以外に目移りして肝心のコンテンツを見てもらえないという状況にしたくなかったので、ブログパーツ的なものは無くしたり、ワンカラムレイアウトにしたり、余白を大きく取るデザインにしていました。

それなりに気に入っていたのですが、アクセス解析などで分析してみると、リデザイン前とたいして変化がないのと、だんだん間が抜けたような印象をもつようになってきたので、今回またデザインを替えてみようと思ったのでした。

変更点など

自分の感覚でデザインをやると、あまり変わらないような気がしたので、今回ははてブなどで人気のサイトやIT系のニュースサイトなどを調査し、それを参考しながらデザインしてみました。

変なこだわりは捨て、サイトをブログ化

人気のサイトはブログ形式が多く、記事の更新頻度や質で人気を集めているようだったので、それを参考に僕のサイトもブログ形式に変更。

余白はそんなにとらない・賑わい感を演出

デザイン系の記事などを見ていると「余白を大きくとる」「ミニマルデザイン」などが人気で、僕もそのようなデザインが好きですが、実際、人気のあるサイトは情報量が多く見えるように余白が詰めてあり、画像やアイコンで賑わい感を演出しているものが多い印象だったので、主に下記のようなことを行いました。

  • ヘッダーに画像広告
  • 単純な序列リストだった「人気の記事」に王冠アイコンを表示
  • 最近の記事にサムネイル画像、はてブ数アイコン
  • 各記事には必ずアイキャッチが出る


ギークっぽさは消えてしまいましたが、賑わい感が出たほうがキャッチーで分かりやすそうな印象があるし、適度に余白を詰めたことで情報量が多く見えてもっと知りたい情報があるのでは?感を演出できたかなーと。


とりあえずこれで様子を見ようと思います。ちなみに、「最近の投稿」の部分はウィジェットなのですが、WordPressの標準ウィジェットでは実現できなかったので自作しました。もうちょっとコードが整理できたら公開しようと思います。以外にウィジェットの自作は簡単だったので、このあたりも後々記事にしたいですね〜。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく