アンテナサイトのスタイル更新からサイトデザインについて考えた

http://2ch-matometter.com/
のスタイル更新してみました。

その際、今後のサイトデザインの参考になりそうな点がいくつかあったので残しておこうと思います。

前回のがこれです。（縦幅はもう少しあったのですが、編集でカットしてました）

そして今回変更した後がこちらです、

主な更新点

背景の変更

前回は背景のbackground部分が真っ白で、それはそれで気に入っていたのですが、
いざ使ってみると、目がちょっと痛いのと、視線が定まりにくいと感じました。

それを解決するために、記事部分を白にして残りの余白に色を入れてみました。
そうすると、視線が定まり易くなって、サイトにもグッと引き締まった感じがしました。
しかし、単色である程度彩度がある色を用いると、見た目が良い感じになりそう。
だけど彩度があるとチラチラした感じが残って、う〜む(-_-)　白や黒だとサイトに合わないし…という感じでした。

そこで、テクスチャを使ってみようということで色々探してみたのですが、
基本派手なものが多く、シンプルなのないかなぁーと探してたらピクセルパターンというのがありました！

↓こちらの記事が参考になりました。
WEBLE: Photoshop でフリーで使える12個の基本的な繰り返しピクセルパターン
http://weble.org/2012/05/07/photoshop-free-pixcel-pattern

これを使って、オリジナルでやろうということでチクチクやっていると、結構いい感じのができました。
これを背景にすると、色がある程度強くてもチラチラがそんなに気にならなくなったので、かなり使えると思います。

シームレスに記事が切り替え可能

今回カテゴリを選択した場合、サイトをブロックで表示するようにしました。
その歳気になるのが、ページ番号をポチポチ押して閲覧するサイトを変更するのは面倒くさいという点でした。
かといって、1ページに表示するブロックを増やすとゴチャゴチャして見づらいという問題が出てきます。

javascriptでなんとか解決できないかなぁーと思っていたらちょうどいいのがありました！
カルーセルという機能です。

↓こちらで詳しく解説されています。
KACHIBITO.net: jQueryのカルーセル系プラグイン・Caroufredselだけで「こんな事も出来るよ！」をまとめたサイト・Cool Carousels
http://kachibito.net/web-design/cool-carousels.html

この機能を使うことで、ページ移動の面倒くささと、詰め込んだ際のゴチャゴチャを解消することができました。
色々な例が紹介されているので、この機能を知らなかった人は見てみると発見があると思います。

そんなこんなで、サイトの更新を行いました。
よかったらお使いくださいませー
http://2ch-matometter.com/
サイトのブックマークボタンを押して頂けるとさらに嬉しいです(*´ω｀*)