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

このデジタリスト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をよく見てみる価値はあると思う。

池田信夫blogのデザインテンプレートは、今日の夕方に再び変更されて背景が白色のものになったようです。薄褐色のバックグラウンドにダークブラウンのフォントだった今朝までのテンプレートに比べると、ずいぶんと見やすくなった。