日記のスタイルシートを修正した(余白重要)
この日記のデザインは、数年間ずっと同じスタイルシートを使ってきた。 ベースは tDiary の「お花見(右サイドバー版)」で、色を少しカスタマイズしている。
でも、ふと思い立ってスタイルシートを少し修正してみた。 キッカケは、「Geekなページ: 10人のデザイナさんに駄目出しして頂きました」に書かれている以下のような改善ポイントを読んだこと。
背景や罫線は使わない
余白やマージンの取り方でもっと区切りを明確にできる
という訳で、余白を活かすようにデザインを修正した。
修正前と修正後のページ
これが修正前のページ。
こっちが修正後。
主な修正点はこんな感じ。
- 日記本文の背景をクリーム色から白へ変更。より本文が目立つように。
- イメージカラーを残したかったので、サイドバーを白からクリーム色へ変更。目立ちすぎないように色はより薄くした。
- 見出し (h3, h4) の文字を大きくし、上下のマージンを確保した。
- タイトルは、目立つようにマージンを多めに確保している。日記はタイトルが命。
- 日記上部の日付を右寄せに変更。日付下の罫線も削除。
- これもタイトルが目立つようにするため。
所要時間は30分くらい。 そんなに大きくは変えていないんだけど、余白を入れただけで見やすくなったように感じる。 情報を分類するために「罫線などの情報を加える」よりも「情報を削除する」ほうがいい結果になることもあるんだね。 まるで、「プログラムは削るものが無くなったときが完成」という名言みたい。