デジタリストBlog

« 前の記事 | トップ | 次の記事 »

2007年02月10日

あなたのブログのテンプレート、読みやすさに配慮されていますか?

http://blog.goo.ne.jp/ikedanobuo/cmt/bc2322c9b522cdbc50b39de1fbff847a
池田信夫blogのコメント欄(今回に限って、本文はどっちでも良い)でテンプレートの読みやすさについての意見が出ている。この池田信夫blog、先月の下旬にテンプレートの変更を行ったのだけれど以前に比べてずいぶんと見にくくなったと評判がかんばしくない。ブログのテンプレートはデザイン性も大切だけれど、それよりも読みやすさが重視されるべきだ。

このデジタリストBlogもかつてはダークグレーのバックグラウンドに白抜きの文字というデザインだった時代があった。PINUPS上田新聞ブログ版のデザインを参考にしたテンプレートだったけれど、去年の半ばからはデザインを現行の物に変えた。ちょうど別のブログで、黒背景のデザインが目が悪い人にとって見づらいという意見があったのを目にした頃だった。

僕は他のブログでもデザインは気にする。ときどきは勝手にCSSを覗いて、参考にさせて貰ったりする。ブログ板@2ちゃんねる掲示板ではテンプレートに関するスレも沢山あるけれど、デザイン性は高くても見づらいというブログは少なくない。

僕が基本的に守るべきと自分に課している基本的な事項は、以下の通り。

  1. 背景は基本的に#FFFFFF、ベースとなるテキストは#000000、unvisited linkはブルー系でhover linkはunvisitedとは明確に区別できる色
  2. 文字フォントは90%以上(理想は100%)でサイズ相対指定(80%またはsmallはアンチエイリアス系フォントを使う人にとっては見づらい)。サイズ絶対指定(ポイント指定等)はいまどきそれだけで企業の姿勢を疑われるくらい罪深いフォントサイズ指定方法だと月刊誌Web Designingに書かれていた。macとWindowsでは画面解像度が異なるので、mac使いがデザインしたテンプレートはWindows使いにとっては文字が小さすぎて見づらいことが少なくない。時々見られるフォントが異様に小さいブログは、オーナーがmac使いと見て間違いない。
  3. 1行の高さは1.35~1.4em。ちなみに今のデジタリストBlogのline-heightは1.36emで、大手ニュースサイトもこの基準に収まっていることが多い。出版社などDTPのノウハウを持つサイトも1.35emなどでデザインされているので、それなりに理に適った値だと思う。
  4. 基本的にHTMLとCSSを完全に分離する。これはサイトデザインを変更するときに便利であったり、サーバでのファイル容量を抑える効果もある。ついでに言うと、Javascriptも外部に置き、サイドバーもカウンターもタイトルもPHPでincludeする。このブログは各ページの拡張子はhtmlだけれど、実態は全ページがhtaccessで拡張子偽装したPHPである。ついでに言うと、Yahoo!も全ページがPHPという話を聞いたことがある(真偽はどうだか知らない)。
  5. marginとpaddingを正しく使うよう配慮する。tableでデザインを強引に調整しない。全角スペースももちろん同じ。これはマイナーなブラウザを使っている人でもデザインが崩れにくくする効果がある(と思う)。ただし、たとえばFirefoxでこのページを見てみるとborderの具合がちょっと変わってしまうなど、まだ調整するところが残っている。

べつに商業サイトじゃないから、デザインがW3C勧告のWeb標準に完全準拠した完璧なものである必要はない。ただ、ちょっと気を遣うのと遣わないのではブログの印象はかなり変わってくる。いちど、自分のブログのCSSをよく見てみる価値はあると思う。

Posted at 2007/02/10(土曜日) 6:34

この記事を読んだ人はこんな記事も読んでいます

コメント





保存しますか?


Loading...

« 前の記事 | トップ | 次の記事 »

« 前の記事 | トップ | 次の記事 »