ページデザイン再構築の計画

現在のこの日記のデザインは、はてなダイアリー公式テーマ「hatena-brown.css」に多少のカスタマイズを加えた物である。背景色を明るさを落として(#f5f5f5)、落ち着いた感じで見やすくしたり、記事ごとに二重線を引いたり。
CSSも多少経験を積んできたし、いよいよ全ページ的な自分流デザインをきっちり考えてもいいかと思えて来た。
定番だけど、参考書籍はコレ。

スタイルシート スタイルブック

スタイルシート スタイルブック

  • 今のデザインの長所とツッコミ
    • はてな公式デザインに手を加えているので、はてなのシステム更新に常にネイティブ対応できる。
    • 画像が少ないので、表示が早い。
      • 裏を返せば地味とも言えるが。
    • シンプルで迷わない。
    • 原稿用紙的な配色が日記的イメージにピッタリ。この色合いは気に入っているので使い続けたい。
    • カスタマイズで、強調のレッドとか、隠し文字のclassを入れてあるので、これは使いやすいから残したい。
    • コメントとトラックバックの推移を把握しやすいので、何か書き込まれたら対応できる。
    • 自分の使っているはてなサービスのボタンがある。
      • はてなツールバーを使うようになったらいらなくなって来たかも。他のヒトにはaboutから飛んでもらう方がスマート?
    • 白地に黒文字、は、スタンダードだが、やはり読みやすさにつながっていると思う。
      • 本文文字のサイズはもう少し大きくした方がいい。行間のつめ方も考えておきたい。
      • 本文の横幅が少し広すぎるかも。長文を読む時の視線の移動を考えると多少狭めた方が読みやすいかも。
      • それこそ、本当に原稿用紙みたいに20字で改行したら……?
    • プルダウンメニューで、省スペースに過去の話題に飛べる。
      • カテゴリが妙に増えているので、少し整理した方がいいかも。日記をダウンロードしてJEditでカテゴリ変換しないと……(はてなのシステム的弱点の一つ)。カテゴリはSEO的な効果も高いので、親切な名前にした方が本当は良いんだよね。
  • 新しいデザインのイメージ
    • 原稿用紙、っていうカラーテイストは気に入っているので変えたくない。配色イメージはこのまま。もっとまとめる方向で。
    • 画像はできるだけ使わない。全体的なCSSの経験が少ないのだから、まずは簡単に創れて、軽いデザインのブログを目指す。
    • 1日にたくさん記事を書いた時に、記事ごとの区分を明確にする。
    • 原稿用紙みたいに、大きめの本文文字にする。弱視者対策は結局自分を守る事につながる。
    • サイドバーをやめて、ヘッダとフッタをスマートに活用する。
      • このブログに用があるヒトは、管理者のために置いているサイドバーは見ないと思う。だからその分、本文にスペースを割いた方がいい。
      • もっとも強調すべき要素は、本文である。要素の優先順位とか、メリハリをもっと考える。
      • 本文枠はセンター表示で見せる。幅は狭めて、視線の移動にかかる負荷を減らす。
      • 1時間につき30分休め運動はもっと明確に出す。
    • strong.redやdiv.hideなど、カスタマイズ要素に加えたCSSは今後も必要なので継承する。
    • 日付の表示を何か工夫する。フォント的な事ではなく、どのフォントで表示しても面白い見せ方を考える。色をつけるだけでも面白い配色があるはず。緑で囲って白で表示すると、学校の黒板のイメージになる、とか。
    • 滅多に使わないその日の題名についても、使った時には面白い効果があるといい。効果でこの要素を活かす道を考える。
    • 見出しの見せ方をもっと古めかしく。
      • class sectioncategoryとかsanchorとかかな。配色とサイズの工夫でどうにかなるといいけど。
    • はてなカウンター画像を制作する。
      • 原稿用紙っぽいカウンターを創作してみよう。
    • コントラストの弱い配色はしない。白文字は多用しない。
    • キーワードや、URLなどのリンク部分は、マウスを乗せた時のアクションを何かする。
    • コメント位置やはてなブックマークのアイコン、もっと見せ方があっていい。巨大化させても面白い? (やりすぎなければ)

とりあえずここまで。