gerenuk.crazyphoto.org/

WordPress や Movable Type だけではなく、FC2 のようなブログサービスにおいても、テンプレートデザインの変更が簡単になり、自分のブログを色々カスタマイズしている人も多いはずです。

この記事では日々ブログをデザインしている中で、少しでも使いやすくするために個人的に気をつけている本当に細かい要素を10個にまとめてみました。

1. 個別ページのタイトルは「記事名→ブログ名」の順にする

例えばこのページで言うと、
「ブログデザインで気をつけている10個の細かい要素 :: gerenuk.crazyphoto.org/」です。

好き嫌いや慣れの問題は多少あるでしょうが、「gerenuk.crazyphoto.org/」のように長いサイト名のブログの場合、例えばブラウザやはてななどでブックマークしてもらったときに「肝心の記事名が切れてしまった！」という事態を防ぐことが出来ます。

2. ヘッダーのロゴは、トップページへのリンクにする

逆説的な説明になってしまいますが、これは「大抵のブログがすでにそうなっている」からです。
つまり、ロゴをクリックしたときにトップページ（インデックス）に飛ばないと、ブログに慣れている訪問者が混乱してしまいます。
また、さらにこのロゴのそばに「ホーム（home）」や「トップページ」などと書いたナビゲーションを置いて、どちらからでも戻れるようにするとなお良いと思います。

3. 記事のタイトルは、個別ページへのリンクにする

これはいわゆる「パーマリンク」の問題です。
初期のブログは、個別ページの概念がよくわかっていなかったり、出回っていたテンプレートの影響などからインデックスページが重視されていたため、パーマリンクを「投稿時間」や「『固定リンク』という文言」だけに設置しているものが多くありました。
現在では個別ページが重要になってきているので、よりアクセスしやすいように記事のタイトル自体にリンクを付けることが一般的になっています。

4. 記事には必ず日付を入れる

「誰かの個人ブログで良さそうなカフェを見つける → 実際に行く → とっくに潰れ取るがな！」という経験をしたことはありませんか？
訪問者は過去の記事も読んでいます。本文に書かれた情報がいつのものなのか、その情報が有用なのか、訪問者自身に判断してもらわなければなりません。
このブログのようにひとつの記事を書くのに平気で1ヶ月以上かかる上に更新頻度がやたらと低いサイトならなおのこと、情報の公開日時と（さらに可能ならば）更新日時は明記したいところです。

5. サイドバーを縦に長くしすぎない

アーカイブページへのリンクをクリックするときに、何十回もマウスホイールを下にスクロールさせるのは意外と面倒です。

また大抵の場合、長くなってしまうのは、

• ブログ歴が長くなってきて過去ログが増えすぎた
• カテゴリーを増やしすぎた
• コメントやトラックバックが多すぎた
• 欲張って広告を貼りすぎた

など、管理者が情報を整理しきれず、もてあましていることが原因だと思います。

汎用性のあるブログデザインを作る上で難しいのは、これらの要素が少ない状態と逆に多くなった状態を想定する必要がある点です。長くなってしまうことが想定される場合は、優先順位を考えて位置を入れ替えたり、プルダウンを使ったり、カテゴリーの項目自体を整理したり、サイドバーの列を増やしたり、見やすくする工夫を心がけたいところです。

もちろん、本文よりもサイドバーが長いと単に見た目が悪いから、という理由もあります。

6. 検索フォームを設置する

突然記事を消してイチから書き直したくなったり、リンクしてくれた相手がアドレスを間違っていたり、検索サイトが古いデータをキャッシュしていた場合など、訪問者が意図していないページが表示される可能性があります。
全文検索ができる検索フォームを設置しておけば、訪問者を再度目的のページまで誘導することが可能かもしれません。

7. クリック出来る領域を大きくする

すべての訪問者がマウスを巧みに操る達人とは限りません。
クリックをミスすると、かなりイライラしてしまいます。
フォントサイズを小さくしているのならなおのこと、CSSの display:block; などでクリックできる範囲を広げてあげたいところです。

8. 本文の開始位置をわかりやすくする

ブログで一番大事なのはコンテンツ、つまり記事本文です。
視点の移動方向などを考えてサイドバーを右に配置したり、本文の開始位置周辺をすっきりさせることで、読みはじめやすくしましょう。

9. 広告は広告だとわかるようにする

なにも、「これは広告です」などとデカデカと断り書きを入れる必要はありません。
ただ、（もちろん広告の利用規約にもよりますが）誤クリックを誘発しないように、背景色を変更するなどのデザイン要素を付加したいところです。

10. (X)HTMLやCSSがValidにならないことを気にしすぎない

CMSを使っていると、その仕様ゆえに他人のコードを使わざるを得ない状況があるはずです（WordPressで言えばプラグインなど）
CMS自体が日々進化を続け、プラグインの取捨選択をする機会が多いブログデザインにおいて、それらをひとつひとつフィックスしていくのは決して効率的ではありません。
だからどうか、神経質になり過ぎないでください。要は、きちんと表示さえされれば誰にも文句など言われないのですから！

まとめ

ブログデザインは結局、今使っているブログツールが出来る範囲を見極め、かつ、使いやすいナビゲーションを考え、かつ、見た目も良くするという、三者の着地点を探る作業です。

定期的に、アクセス解析などから訪問者の行動パターンを研究し、ナビゲーションを改善するなどの試行錯誤を続けることが大事なのだと思います。

付記

このエントリーでは、ブログの構造や要素名などを説明なしに使っているので、本項で補足します。

ブログの構造

ブログは、エントリーなどの「個別ページ」と、そのエントリーを一定のルールごとにまとめた「アーカイブページ」から構成されます。

• 個別ページ
  • ブログコンテンツ（エントリー・記事とも）
  • ページコンテンツ
• アーカイブページ
  • インデックス
  • 日付（年・月・日）
  • カテゴリー
  • タグ
  • 検索結果

ブログデザインの独自性

ブログデザインの一番の特徴は、ページの生成にCMS（特にウェブログ・ツール）を用いている点です。
例えば「ブログって何？」と問われれば、「ヘッダ・フッタ・サイドバー」などの全ページに共通する部分（テンプレート）がある・記事ごとにコメントやトラックバックを付けられるようになっている、などいくつかの特徴を思いつくはずです。
CMSの機能であるテンプレートによって様々な恩恵を受ける反面、デザインを行う際にはこのテンプレートの都合上いくつかの「お約束事」が生まれ、勝手気ままにレイアウトすることはできません。
これによって普通のウェブデザインとは少し異なる、言うなれば「ブログデザインの文法」とも言うべき独自性が生まれています。

関連記事

• 2009/06/10: 最適なレイアウトとは何か？　固定か、可変か、エラスティック・レイアウトか
• 2008/05/21: 奇怪なマークアップへ至る思考
• 2007/06/22: 人気ブログ型サイトのデザインと統計
• 2009/02/01: ブログデザインで気をつけている10個の細かい要素
• 2009/06/30: はてブと Twitter を使って、1ヶ月で約3万 PV を稼いだ顛末