blog-0221b
Design

ブログをプチリニューアルしました

こんにちは!新人森田です。
今日はアプリ博2014を見学してまいりました。
ユーザーでいるだけでは気付かないようなアプリの裏側を垣間見ることが出来たり、
名刺交換させていただいたりととても良い刺激になりました。

マーケットに山ほどあるアプリの中から選んでもらえるものを作れるように
デザインももちろんですが技術の理解も深めていきたいと思いました。

ブログプチリニューアル

さて、ハレノヒブログのリニューアルから早くも約1ヶ月が経ちました。
実装された時は嬉しいだけだったんですが、自分たちで実際に使ってみると改善点がちらほら。
修正箇所を挙げてどう進めていこうか相談していたところ、ちまちま直していくよりは思い切って作り直そうという結論になりました。

早速デザインの見直しをして、昨日プチリニューアルしました!

今回は、様々な制作会社のブログを観察しながら制作を進めました。
その作業の中で気付いた点をいくつかまとめたいと思います。

他ブログとの比較をして気付いたこと

デザインルールを意識する

リニューアルするにあたって、「デザインルール」をもう少し意識してみました。

ハレノヒブログの場合はヘッダーを水色・背景をうすいグレー・コンテンツは白地に黒文字としています。
そのルールに従って、各サブカテゴリのタイトル部を水色の帯にしたらメリハリがつきました。

また、今まで白だったフッターを濃いめのグレーにしてフッターとしての存在感を出してみました。
さらにそれに従って、記事の下のページングを同色にして同類っぽさを出してます。
濃いめのグレーに黒文字だと印象が重すぎる気がして、文字をグレーにしたところもちょっとしたポイントです。

ゆったりとしたマージン

ブログといえば情報量が多いし、いかにコンパクトに詰め込むかと考えていたのがそもそも間違いでした。
情報量が多いからこそ1つ1つの要素に広めの幅を取ることで、どこを見るべきかが分かりやすくなるんだと思います。
今までほとんど5pxだったmarginやpaddingを部分的に15px〜30pxくらいにしてみたら、窮屈感がなくなって広々と見やすくなりました。

フッターエリアが広い

フッターといえば会社のロゴやリンクやコピーライトを表示するだけの簡潔であまり幅を取らないエリア、というのが今までの認識でした。
でも改めてフッターに注目してみると、工夫する余地は十分あるんだと気付かされました。

今回フッターエリアを縦に3分割して使ってみることに。
会社情報がちょっと豊かになって、名前の文字列だけじゃないものも伝わるような気がします。

ソーシャルボタンの設置位置

これは一覧ではなく記事のページについてです。
前はツイートボタンなどは記事の頭の部分に設置していたんですが、これも良くありませんでした。他のブログでなぜソーシャルボタンを記事の上下に2カ所設置しているのかを改めて考えると、

上部:その記事の人気指数を表して、読みたくさせる
下部:記事を読み終えた後にボタンを押す、という流れをつくる

ということなんじゃないかと思います。

なのでソーシャルボタンを記事の上下に設置してみました。(押していただけるとやる気倍増します)

まとめ

結論からいえばブログはあくまでブログなので、パーツの寄せ集めなんですよね。
個性を出す部分はある程度決まっていたり。

でも色々見ながら作り直してみることで、思い込みで作っていたことに気付かされたりもしました。

まだまだ改良点はありますが、プチリニューアルしたハレノヒブログをよろしくお願いします!

標準