« さようなら、現デザイン! | Home | デザインリニューアル第二弾! »

2007年8月15日

デザインリニューアルしました

写真本日、当ブログ初の、デザイン全面リニューアルをしてみました。どうでしょう?
ちなみに前のはこれです

旧デザインの時代が長かったので(開始後ずっと)、ちょっと違和感あるかもしれません。

ただ、まだ確定ではないです。
この後、Google AdSense入れたり、いろいろ微調整したり、使いにくい部分変えたりという作業を、まったりと進めていくと思います。

一番悩んでいるのは、段組部分。
はっきりいって、三段組の一番右にメインの記事部分を持ってくるのって、ユーザビリティ的にというかアクセシビリティ的に・・・


よくないよな、と。


解像度1024×768ピクセル以上のディスプレイの人が、ブラウザを最大化して見ている分にはいいけど、ウィンドウを少し小さめに開いて見ている人や、800×600ピクセルの画面で見ている場合、記事が途中で切れてしまい、下のスクロールバーをいちいち右にスライドさせないと、記事が読めなくなってしまうんです。

横幅も、800ピクセルくらいにしておいたほうがいいはずなんだけど、これは「実」部分で900ピクセル。両脇に少し余白とっている分を入れると960ピクセルになります。太めすぎかもです。

なので、仕事でブログレイアウトを考えるんだったら、絶対こうはしてなかったんだけど、個人的には、マウスが画面右半分にあることが多いので、記事内のリンクをすぐクリックできるよう、右側のスクロールバーと、記事本文の間に、余計なものがないほうがすっきりするんです。

両側をサイドバーではさむと、
ちょっと閉塞感を感じるというのもあります。

個人的な「すっきり感」か、アクセシビリティか。

どっちを優先すべきかと言ったら、間違いなく後者なはずなんだけど、ちょっともう少し悩んでみようかなと。
変更は、スタイルシートを数行直すだけで簡単にできるので。

試しに、段組の中の要素を入れ替えたものも、
この後作ってみます。


+++


配置変更したものを作ってみました。
「position: absolute」とか、マージンとかきちんと理解してないので、ブラウザによってぼろぼろになってしまってる可能性ありますが・・・(ちゃんとチェックしてないもので)

写真
現在のレイアウト(記事を右端)

写真
現在のレイアウト(記事を中央)

写真
現在のレイアウト(記事を左端)

 
 
 
悩む~!

コメント(15)

IEだとちょっと上の画像タイトルがずれてるのかな。。

tomonoさん、
あ、ありがとうございます!
余計な改行を入れて、それきりにしちゃっていたので、そのせいかも。。。見直してみます。

Firefoxだと1カラムで縦に一列です。
しかも背景はグレー。

青のりさん、
それはひどい・・・。
途中でFirefoxでも確認したつもりだったんですが、だめだめですね。ありがとうございます。

> しかも背景はグレー。

考えてみたら、背景がグレーになるのは、今のブログのテンプレートと、以前のスタイルシートが組み合わさった時のような気がしてきました。(今のスタイルシートは、一部にしか背景グレーを使っていないので)

やはりリニューアル時は、スタイルシート名を変えて作った方がよかったのかもと反省。

こんにちは~!
わださんのレビューが左端からわかりやすく読むことができるようになって、レビューfanとしてはとっても嬉しいです。

が・・・トップの画像2枚がガクッとずれてますね・・・。
私はルナスケープってタブブラウザで見てます。

偉そうにすいません

私は普段ブラウザの横幅を800ぐらいにしています。
個人的には、本文が切れてしまって読みにくいので本文が左だとありがたい。。。

トップ上部の画像は、どっかで見たことのあるラベンダーですね(笑

FireFox2.0で見てますがOKです。

あ、替わった♪
(。・・。)(。..。)うん、記事本文中の気になることをサッとクリックできるのは、このデザインですよね~。
そういう感じでは使いやすいなぁ~と。。。

けど、わたしが今目指してリニュしているのも3番目の記事左デザイン。
でも2番目のが万人受けする気がして悩んでたところでした。
サイトを作るとき、私はまったくPCがわからない母に印象を聞いて決めるのですが、どうしても2番目のタイプが馴染みがあるようです。

ちなみに「この3つのブログ、どれが見たい?」と聞いたらやっぱり2番目の記事が真ん中のでした。

新しいデザイン、すっきりしましたね。
以前のも、落ちついた感じで良いと思っていましたが…。
今度のは、整理が良く出来ていて、使い勝手が良いなと感心しています。

私は、全くの素人ですので、とやかく言う資格はありませんが、左側に二列並んだのは、ちょっと違和感がありました。
慣れれば少しも苦にはならないと思いますが…。

変わりましたね。

個人的には2カラムがブログの最終形と思っている私ですが、

すきなデザインは2番目の記事中央タイプです。

MacBookで見てます。
OperaやFirefoxでは、表示に問題は無いようです。
Safariでは全然ダメ。
青のりさんの言われるように、1カラムで背景グレーです。
どうかSafariでの表示確認もよろしくお願いします。

オレンジスカイさん、
ありがとうございます!
トップ部分、大きさぎりぎりなのに、余計な書き方してしまっていたような気がします。シンプルに書き換えてみます。

たけにゃか、
やっぱそうだよね。で、800ピクセル以内で記事がでるよう、変更することにしました。

しんさん、
はい。あの時ローアングルで一生懸命撮影してたやつです♪ ただここ、時期見て色気のないバナーになる可能性大です。

みにぃさん、
悩みますよね・・・好みでやるより、一般的に使いやすくてなじみのある配列がいいんだろうなあと思いつつ、やっぱ好みに走りそうになってしまったり・・・。

hbritさん、
ありがとうございます。結局、左側に二列はやめることにしました。記事読みにくい人がいたのでは、意味ないなということで。今、新しい配列で作り直し中です。

yousay7さん、
2カラムか3カラムか、悩みますね。
つい欲をだして、あれもこれも入れたくなっちゃうのですが、それだと元のと同じになってしまうので・・・再度「すっきり」重視で考え直してみます。

takeshiさん、
ありがとうございます。
それで、自分もMacBookのSafariで見ているのですが、1カラム背景グレーという状態が、どうしても再現できないのです。もしかしたら、スタイルシート名を変更していないので、背景グレー指定にしていた前のスタイルシートが、キャッシュで残ってしまっているのかもと思いました。

もしか、どなたかSafariで背景グレーになってしまう方がいたら、試しに「キャッシュを空にする」試していただけると助かります。

たびたびすみません。
Safariでの表示問題解決しました。
和田さんのおっしゃる通り、以前のキャッシュが残っていたようです。
キャッシュを空にしたら、正常に表示されるようになりました!
ご報告します(笑)

takeshiさん、
ご報告ありがとうございます!
おかげでひとつ勉強になりました。ブログリニューアルする時は、スタイルシートの名前を変えないと、キャッシュが残ってしまう可能性が高いと言うこと。
普通、リニューアル直後のブログが崩れまくっていても、「古いスタイルシートがキャッシュで残っているのが原因」って思わないですもんね。
ありがとうございました。

コメントする

カテゴリ

月別 アーカイブ

この記事について

このページは、wadaが2007年8月15日 13:40に書いた記事です。

ひとつ前の記事は「さようなら、現デザイン!」です。

次の記事は「デザインリニューアル第二弾!」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。