EKKEN♂

このブログは http://ekken.blog1.fc2.com/ に移転しました

広告

※このエリアは、60日間投稿が無い場合に表示されます。記事を投稿すると、表示されなくなります。

このブログのデザインについて

2005-04-16 | WEBにまつわる話
 デザインの良し悪しなんて、人の好みの問題だから、これから書くことは一個人の趣味の問題として読んで頂きたいのだけど、CSS(あるいはHTML)をいじりまくって、「凝ったデザイン」にしている人のブログに限って、読みにくいものが多いと感じます。
 「ぱっと見」かっこいいデザインのブログを作るに、文字を小さめ、情報量を多く見せるために両サイドバーにし、背景画像を使うなどの工夫をしている人がいますが、僕の場合は、そうしたブログ、中身が面白ければ読みますけど、記事の題名のつけ方が興味を惹くものでなければ、読む確立はかなり低くなっています。
 他人のブログのサイドバーを丹念に読みますか?ブログペットをクリックしますか?アバターに何らかの価値を感じますか?画像がいっぱいで重いブログと、画像が無くて軽いブログ、どっちを見ますか?

 これらに対する答え、つまりは「ブログの好み」っていうのは、人によって大きく異なるものだと思う。重要なのは「万人にとって良いブログを作る」って事を考えるのではなく(そんな物は存在しないのですよ)「自分が読みたいブログを作る」っていう意識でやることでしょう?
 「読み手」としての自分を想定して、「自分ならこういうブログは読まない」という要素を排除し、「こういうブログは思わず読んじゃう」っていう部分を増やしてゆけば良いと思うのです。
 
他人の不幸は蜜の味:
またブログ論(Listed、読者はメンドクサガリ、自分はどう読んでいるか?)

 LSTYさんのこの記事を読んで、自分のブログがどういう意図でこんなデザインにしたのか、振り返ってみました。
 ここのデザインはカスタムブルーのデザインが元になっています。デフォルトで右側に配置される「gooおすすめリンク」やQRコードは、僕にとっても、読者にとっても、必要な情報と思わないので、HTMLでこの部分を消しています。
 そして、通常、左サイドバーに表示されている部分を、テーブルタグの要素を入れ替えて、右側に持ってきています。本文表示部分を左にし、全体の表示幅を800PXに指定、CSSでサイドバー部分に260PXを与えています。これで本文表示部分は540PX。
 閲覧者の中には800*600サイズ以下のモニタを使っている人もいるかもしれないし、ブラウザを最大サイズで開いているわけではないのでしょうから、表示幅を固定するのは良くない、という考え方もあるでしょうが、シンプルテンプレートの両サイドバーのように、本文表示部が可変のものだと、窓を小さくした時や、エクスプローラーバーを非表示&ブラウザ最大化した時には、かえって読みにくいものなのです(あくまで個人的に)。
 僕はブラウザを最大化、エクスプローラーバーを常に200PX幅くらいで表示させる使い方をしているので、自分のモニターの環境(1024*768サイズ)では横スクロールバーが表示されることがないし、仮にエクスプローラーバーの表示幅を大きくしても、隠れるのは右のサイドバーのみで、本文表示部は横スクロールさせることなく読むことが出来るのです。これ、僕にとっては、とても重要。800PXを超える幅で見ることが前提になっているデザインのサイトは、中身を読む前に閉じてしまうことも多いです。

 サイドバーの情報ですが、見直してみると「もしかしたらいらないのではないか」というものが結構ありますね。
 ほぼ毎日更新している者にとって、「カレンダー」にはあまり意味がないような気もするし、1ページ10記事以上掲載のスタイルをとっている者には、RECENT ENTRYも不要かもしれない。記事の一覧で必要と思うのは、自分にとってのお勧め記事(PICK UP という形で実現しています)と、トップページには表示されない「少し前の記事一覧」ですね。あいにくgooブログではモジュールの関係で、「少し前の記事一覧」は今のところ実現できないのですが。
 お勧め記事は、自分が主に伝えたいことはどんなことか、ということを訴える為に必要と思い、アドバンス(gooブログ有料版)にしてHTMLをいじれるようになって導入しましたが、「ページごとのアクセス数」のデータを見ると、結構効果があるみたいです。
 Amazonアソシエイトによる、オススメのCDや本の表示、これは画像を増やすことによって、ページを重くする一因になっているものの、書き手がどのようなものに対して興味があるのか、をお知らせする意味で、僕にとっては重要です。ここから買い物をしてくれる人はほとんどいないので、アフィリエイトの効果はあまりないのですが、僕は自己紹介のエントリを作っていないので、あれが自己紹介代わりです。アビステーションによる似顔絵アバターもその一つとして置いています。
 
 結局は自分の満足感添える為のデザインになってしまうのですが、もうちょっと派手にしたいなぁ、と思うこともあるものの、職場で見る人のことを考えると、地味なデザインのほうが好まれるのかもしれません(爆死)




Comments (16)   この記事についてブログを書く
この記事をはてなブックマークに追加
« 函館の居酒屋で | TOP | ホッケの開きなのだ »
最近の画像もっと見る

16 Comments

コメント日が  古い順  |   新しい順
Unknown (こに)
2005-04-16 21:14:49
確かに「RECENT ENTRY」よりも「少し前の記事一覧」の表示の方が欲しいですね。



トップから読んでいって、もっと前の記事も読みたいと思った場合、現在のブログの形式だと、結構面倒に感じることが多いです。



私も文字が小さいブログが一番読みにくいです。

そういうブログに出会うと興味深い記事でも、もう一度読みに行こうという気がなくなります。



デザインに凝りすぎて重くなるのも嫌です。

それもやっぱり再度見に行く気がなくなります。
確かに。 (keko)
2005-04-16 21:40:30
横スクロールバーは、私も嫌いです。

サイトを作る時は、いつもフレームにしてしまう人なので、

つい横幅が広がってしまうのですが。

横スクロールでも、お気に入りに入っているのはココ↓だけかな?(えっけんさんも好きかも)

http://www.u100.net/



>「gooおすすめリンク」やQRコード



これは、アドバンスでなくても外していいのかしら?

いらないなーと思っていたのですが。
●こにさん (えっけん)
2005-04-16 21:52:51
>私も文字が小さいブログが一番読みにくいです。



このコメント欄の文字が小さくないかと、ちょっと不安なのですが、僕自身が読みにくいとは思っていないので、どうしたものかと。



>デザインに凝りすぎて重くなるのも嫌です。



デザインはシンプルだけど、Amazonのせいでちょっと重くないかと不安です。

まぁ、このところのgooブログはずっと重いのですけど。
●kekoさん (えっけん)
2005-04-16 21:54:15
>http://www.u100.net/



しまった、そこ、投稿したことあるよ!!



>アドバンスでなくても外していいのかしら?



特に問題ないと思われます。

display:none

で消せますよ。

>「凝ったデザイン」 (ともえ)
2005-04-16 22:25:31
そんなモノは飾りですよ。



えらいさんにはソレがわからんのですよ。





・・・まあ、ウチとこはもっと凝れよ、

つー感じですが。

しまったって。 (keko)
2005-04-16 22:50:30
別にいいじゃ~ないですか。



(探してやろうっと。)
バランスが難しい… (なつはづき)
2005-04-17 01:13:29
自分のサイトを立ち上げるにあたって

一番気にしていた事は

壁紙と文字色・トップはスクロールさせないと言う事でした。

壁紙と文字色は自分自身が仕事で8時間ドギツい配色の画面を見たくないと言うことで意識しました。

しかし、プライベートでやっている分ある程度遊び心が欲しいと思ってしまうところが少し困りものです・・・

画像もこの頃大きくなってきているし(汗)



日替わりタイトル (八環)
2005-04-17 09:18:21
私はここ



http://www1.u-netsurf.ne.jp/~hi-sh/efm.html



が読みやすくて一番好きだったりします。
Unknown (びといん)
2005-04-17 15:46:09
 下記は、当然、俺個人の趣味の問題ですが……。

 サイトデザインに凝るというのは、楽しみ方のひとつとして理解はできますが、デザインとして画像を使いまくり、その結果重たくなるというは嫌ですね。

 もちろん、テキスト(記事内容)が一番重要だとも思ってます。

 文字も、大きめが好きですね。

 それと、バリアフリー対策。

 HTMLの中でTableタグやfontタグをレイアウト手段として多用しているのは、ある意味では時代に逆行しているように思います。

 そういうレイアウトをしていると音声認識ソフトが文章構造を誤認識を起すおそれもあるし。

 ともかく、サイドバーだのウィンドウサイズだの文字の大きさだのという以前に、「デザインよりも記事内容が大切」とおっしゃるえっけんさんが、このHTMLソースだとは、意外でした。



 余談ですが、このコメント欄、当方のMacだと、とても小さいです。ご参考まで。
Unknown (えっけん)
2005-04-17 16:21:10
★凝ったデザイン



サイドバーの黒いのをやめて、題名表示部分以外は全部灰色にしてやろうかと考える、今日この頃。





★探してやろうっと



ないっすよ。採用されていませんから。





★デザイン



ダイズバタケ: とりあえず文章に背景画像はやめよう

http://www.towofu.net/mt/archives/2004/09/03_00_49.php





★私はここ



行間設定がもう少し広ければ。





★HTMLの中でTableタグやfontタグをレイアウト手段として多用しているのは、ある意味では時代に逆行しているように思います。



gooブログはCSSのデザインがしやすいといわれていますが、基本的に元になるHTMLがテーブルタグで書かれていることによるのです。

以前、Seesaaブログでやってましたが、CSSだけでレイアウトを作るのって、結構大変なんですよね。

で、gooブログは、外部スタイルシートを呼び出すことは出来るのですが、記事内でスタイルシートを記述することが出来ないのです。

-------------------

html タグの利用について - goo ブログ

http://blog.goo.ne.jp/info/tag_info.html

-------------------

div styleが使えないので、フォントタグに頼ったり、強引に使えるブロックタグのスタイルを決めて装飾しなければならないのです。これ、あまり要望に挙がらないのですが、実は僕の持っているgooブログの大きな不満点。

昨日から「関連記事」などにテーブルタグを使って表示するようにしましたが、このテーブル専用のスタイルを与えたくても、テーブルに与えられるスタイルが全て強要になってしまうので、結局全てHTMLで記述になり、やたら長いタグがずらずらと並ぶのがイヤン。



★字が小さい



実験的に一回り大きくしたら、本文と変わらなくなったので、やっぱりこのままで行きます。

ゴメンナサイ。
うちもにたような感じかなあ (ぶんだば)
2005-04-18 14:37:48
タイトル部分が画像(えっけんさんところは字が画像ですよね。あれのやり方がわからなかった)なくらいで。



わたしも「少し前の記事」を表示させたいです。昨今みたいに重いと、くだらない記事ばかりになってしまい、一ページ10記事で、そのページだけみて「テレビのブログかよ」とか思われたりしちゃう可能性もありますし。実はちょっと遡ってくれるとこの記事あるんだけど、っていうの、ありますから。



(自己紹介の似顔絵もえっけんさんとこと同じなんですよね)



サイドバーのアマゾンはご自分で作られたのですか?

アマゾンプレゼンツのは、気に入ったのが全部javascript使用で、gooブログでは使えないため、わたしなんかテキストです(情けない)しかも全然売上ないし。とほほほほ。
●ぶんだばさん (えっけん)
2005-04-18 18:11:27
>タイトル部分が画像



むだづかいにっき♂:題名を画像にしてみる

http://blog.goo.ne.jp/simauma_dx/e/88faa705a1311a5a554c729010346836

参照どうぞー。

バナー作成ソフトは、ベクターなどで探せます。



そのうち詳しい記事書きます。



有言不実行になると思いますけど。



>サイドバーのアマゾンはご自分で作られたのですか?



テーブルタグは自分で書きましたけど、画像リンクは、「本の話」カテゴリでよく使っている「G-tool」とか、アソシエイトへルパーといった、簡単リンク作成ツールを使用しています。

アマゾンアソシエイトを使う場合は必須!

gooブログは「iframe」タグが使えないから、こういうところにも制限がかかってしまいますね。

アドバンスユーザーだけにでも開放してくれないかしら。

いまのままでは無料版とアドバンスにあまり差がないし。



ありがとうございました (ぶんだば)
2005-04-19 14:38:57
いつもお世話になってばかりで申し訳ございません。

さっそくタイトルを替えてみましたが、センスが悪くなりました…改善の余地有り。



アマゾンは時間がかかりそうなので(本の選定含めて)、ゆっくりやります。…昼間に。
すみません、パクリました (ぶんだば)
2005-04-20 20:39:03
アマゾンのあれ、画像リンクはgooの「おすすめ」の記事用URLを使いました。

ほとんど同じになってしまって申し訳ございません。

決してぱくったとかそういうつもりです。はい。



でもなんか高貴そうになったぞ(自己満足)
Unknown (えっけん)
2005-04-20 23:57:17
あんなのパクリのうちに入らないですよ。

誰でも思いつく種のものだし、サイトデザインの基本は、気に入ったサイトの「ソースを表示」でしょう!



サイト全体がまんま他人と同じなのはどうかと思いますが。
どこにコメントすればよいのか分からなかったので (かつを)
2005-12-04 14:50:42
ここの今のCSSは、ところどころ「 」(漢字のスペース)が含まれているようです。



「 」を無視する「特殊」なブラウザ以外ではうまく機能しないので、「 」を「 」(アルファベットのスペース)とか水平タブとか改行辺りの「空白」に変更していただけませんか?



それとも、「特殊なブラウザ」限定でセレクタやプロパティを機能させる「裏技」ですか?

Related Topics

Trackback

Trackback  Ping-URL
ブログ作成者から承認されるまでトラックバックは反映されません。
  • 送信元の記事内容が半角英数のみのトラックバックは受け取らないよう設定されております。
  • このブログへのリンクがない記事からのトラックバックは受け取らないよう設定されております。
  • ※ブログ管理者のみ、編集画面で設定の変更が可能です。