当ブログについて | 管理人プロフィール | コンタクト

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

2007.08.15 サイト運営 C(15) TB(0) このエントリーを含む「はてなブックマーク」 この記事を「livedoorクリップ」! 「Yahoo!ブックマーク」に登録

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

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

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

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


よくないよな、と。


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

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

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

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

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

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

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


+++


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

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

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

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

 
 
 
悩む~!



コメント

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

投稿者: tomono (2007.08.15 14:02)

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

投稿者: わだ (2007.08.15 14:05)

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

投稿者: 青のり (2007.08.15 14:08)

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

投稿者: わだ (2007.08.15 14:11)

> しかも背景はグレー。

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

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

投稿者: わだ (2007.08.15 14:16)

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

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

偉そうにすいません

投稿者: オレンジスカイ (2007.08.15 16:08)

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

投稿者: たけにゃか (2007.08.15 16:49)

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

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

投稿者: しん (2007.08.15 19:21)

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

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

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

投稿者: みにぃ (2007.08.15 19:57)

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

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

投稿者: hbrit (2007.08.15 22:06)

変わりましたね。

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

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

投稿者: yousay7 (2007.08.15 22:09)

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

投稿者: takeshi (2007.08.15 22:26)

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

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

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

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

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

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

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

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

投稿者: わだ (2007.08.16 01:39)

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

投稿者: takeshi (2007.08.17 01:48)

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

投稿者: わだ (2007.08.17 09:41)





トラックバック
http://app.cocolog-nifty.com/t/trackback/5901/16122955

内容に関連性のある記事からのトラックバックは歓迎です。記事内リンクも特に必要ありません。過去交流のないブログでもまったく問題ありません。ただし「単に部分的なキーワードつながり(関連性が薄すぎ)」「自動で大量トラックバック送信」「自身がトラックバックを受付けていないブログからの一方的なトラックバック」は、削除します。

最新の記事

管理人プロフィール

和田 亜希子

利根川流域に生息するアラフォー独女。ニッチなテーマで小さなサイトを作る「ミニサイト職人」で、主に運営サイトの広告収入で生計たてるようになり早10年経ちました。「パソコン一台携え、旅しながらサイト運営で生計立てる」ベドウィン・モバイラーの夢まであと一歩。大切にしたいのは「好奇心」と「向上心」。うさぎは2011年の干支、ヘビ年バージョンはこちらです。(詳細

Twitter

著書一覧(Amazon)
Yahoo!プロフィール
YouTube動画一覧

AMNパートナーブログ