最近、高解像度のノート PC（15.6インチ 1920×1080）に乗り換えたら、自分のブログが見にくくてしかたなかった。こんな風に見える。

高解像度時代の Web デザインについて思いを巡らせていたら、いつの間にか新しい CSS を書いていた。結果、こうなった。

新しいデザインで重視したこと

1. デフォルトのフォント サイズを使う

本文のフォントはデフォルトのサイズにした。

いままでは見栄えを気にして、13px にしていたが、高解像度端末では見にくい。変な小細工はせずに「デフォルトのフォントサイズで表示しておけば、そのデバイスで一番適切なサイズで表示される」と信じることにした。 → (2012/3/15 追記) 信じていたが、やっぱり見にくいと指摘を受けたので、やや小さくしてみた。

リンクの色もデフォルトのままにした。無駄に凝るのはやめた。

サイズ指定の単位は px ではなく em を使うようにしてみた（画像を除く）。たとえば、本文の横幅は 45em に設定している。

2. シングルカラム化

いままでは右側のカラムに色々置いてたが、しっくりきてなかった。

マルチカラムの悲しいところは

• 本文が短い ＋ カラムが無駄に長い → フッターがあらわれない
• 本文が長い ＋ カラムがシンプル → 空っぽなカラムが残ったまま

である。

そんな中、最近、シングルカラムのブログを見かけるようになってきたので、時流に乗ってみた。

記事一覧とプロフィールはフッターに移動した。最近のコメントやトラックバックは自分しか見ないだろうから消した。ブログパーツは究極の自己満足なのですべて消した。

ページ上部と脇のカラムに Google アドセンスを貼り付けていたが、今回のリニューアルに際して見てみるとクリック率が異様に低かった。記事の下の広告が一番まともだったので、そこだけ残しておいた。

4. CSS3 はじめました

CSS3 の border-radius や box-shadow、text-shadow を使ってみた。

この手の新しいプロパティーは、ついつい派手に使いたくなってしまう気持ちを堪えて、控えめに使うようにしてみた。

ベンダープレフィックスが面倒だったので、Compass を使ってみた。@include border-radius(1em, 1em); のように書くだけで、各ブラウザー向けのプロパティーを吐き出してくれるので楽だった。Sass の変数やネスト表記も使えるので生産性があがった。

IE9、Firefox10、Chrome17 で確認したけど、どれも一発 OK でほとんど同じ見た目だった。モダン ブラウザーすごい。IE6 で見たら、:first-child が効いてなくて悲しくなったが、それ以外はだいたい同じにした。

と思ったら、IE9 で表示が崩れていた…。はてなダイアリーの DOCTYPE の関係で、互換モードになってしまうのかな。悲しい。。。 → (2012/3/15 追記) IE でもほとんど崩れなくなったはず。

5. ロゴを調整した

いまのロゴは5年前に作ったもので、イラストレーター ファイルが紛失していたので、あらためてトレースした。

今回のデザインで白背景になり、いままではごまかせていた歪みが目立つようになってしまった。隙間や大きさを調整して違和感ないようにした。

結果、5年前にこだわった「湯気が『てっく』になっている」「『煮』が茹でられているお椀にみえる」「てっく煮+4 → tech.nitoyon」といった細かいポイントも伝わりやすくなった気がする。

まとめ

新しいデザインのソースコードなどは https://github.com/nitoyon/tech.nitoyon.com にコミットしてある。気になる人はご自由に見てください。

高解像度の Web デザインについてや、Sass は便利だぜ、といった話は後日エントリにまとめるかもしれない。