本年もあんちもん2.Labをよろしくお願いします。
新年のあいさつはそこそこに、今日はこのサイトのデザインについて。
心機一転、ということで、ほんの少しデザイン変更しました。素人ながらそれなりにこだわってみました。
ポイントは、以下の3点:
- 色合いが淋しくぱっとしなかったので、少し鮮やかにでもバランスよい配色に変更
- 個別ページ以外のエントリー・フッターが長すぎて折り返していたのを修正・調整（エントリー情報表示領域の追加）
- SEO対策を考慮して、中央カラムがソースの先頭に来るよう調整
配色
こだわりは、以下の4点:
- バナー背景色は青系の濃い鮮やかな色、それ以外の背景は淡い色、特にエントリー本文の背景は白
- 基本文字色は黒に近い色、リンク文字色は目立つけれど目障りじゃない色、いずれもメインの背景色と色相が近い色
- 赤・青・緑の全系統の色を盛り込むこと
- 見た目に淋しくない、でも目につく違和感もない配色(*1)
(*1)の実現に、レタッチソフトの「ヒストグラムのノーマライズ」機能が役に立ちました。
本来は、明暗がパッとせず何となくぼやけた写真に対して、コントラストをはっきりさせるためにかけるフィルターですが、勝手な配色にして試しにそのフィルターを掛けてみたら、見た目の違和感が少なくなるんですね。
色合い（色相）はそのままに、鮮やかさ（明度および彩度）のバランスを整えてくれた、ってことですね。
エントリー情報
ポイントは2点:
- 投稿日時・カテゴリー・パーマリンクを右上（エントリータイトルの下）に表示し、それ以外の情報（投稿者、コメント、トラックバック）を従来通り右下（エントリーフッター部）に表示
- 文字はエントリー本文より一回り小さく、ただし小さすぎず
前者は、小粋空間さんのレイアウトを参考にさせていただきました。
ただ小粋空間さんでは、タグ（エントリー・タグ）も右上の情報表示領域に表示していますが、私は「カテゴリーは基本1つだけ」「タグは（キーワードとなる単語を）複数（場合によって多数）」設定するクセがあるので、タグを右上に持っていくとそこがタグでいっぱいになって見苦しくなる恐れがあると思い、今まで通り「エントリーの最後（エントリーフッターの前）」に置いておきました。
SEO対策
今までこれと言ったSEO対策は施してきていませんでしたが、曲がりなりにもWebプログラミングで食っていこうと考えている人間なので、自サイトもSEO対策の基本くらいは抑えておかないと、ということで重い腰を上げました。
SEO対策の基本は、「必要な情報をより効率よく検索エンジンに拾わせる」こと。
そこから出てくる基本的な対策のポイントとしては、以下が挙げられると思います:
- HTMLの正しい文法での使用
- 適切な用途によるHTML要素（タグ）の使用
- 文章（HTMLドキュメントからタグを除いたテキスト）の構成（結論や重要な情報を先に持ってくる、等）
中央カラムをソースの先頭に持ってくると言うのは、この最後のポイントに照準を合わせたモノ。
HTMLのソースを覗いて、いきなりカレンダーを見せられても困っちゃいますからね。
それよりは、新しく投稿した内容が一番最初に現れた方が、「あー更新したんだな、へーこんな記事書いたんだ」って一目で分かるわけです。これが、検索エンジン（のクローラーもしくはロボット君）にもやさしいデザインなのです。
他に今回施したSEO対策として、以下があります:
- JavaScriptは極力外部化する
→ソースをスッキリさせ、検索エンジンに余計な情報を与えないように - タグをコメントアウトする目的のコメントタグを削除
→理由は同じ。<MTIgnore>に変更
ちなみに「中央カラムを先頭に」は、アクセシビリティやユーザビリティの観点からも有益です。
Operaをご使用の方なら、メニューの「表示」→「スタイル」→「アクセシビリティレイアウト」を試してみてください。サイトタイトル・説明の後に、すぐに最新のエントリーが始まります。（今まではカレンダーが先頭に来ていました。）
内容が分かりやすいでしょ？ なんなら、声に出して読んでみてください、それでも違和感ないでしょ？
みんなにやさしいサイト。
そんなのを目指しています。
サイトデザインについて何かお気付きの点があれば、ご遠慮なくフィードバックしてください。
