entry

ブログデザインで気をつけている10個の細かい要素

date: 2009/02/01 23:25 | modified: 2009/06/30 20:11

ふと、自分や他人のブログの過去記事を見直そうとしたときに、目的の記事にたどり着けなかったことがありませんか? もしくは、使いにくいなとか読みにくいなと思ったりしたことはないでしょうか?

このエントリーでは日々ブログをデザインしている中で、個人的に気をつけている本当に細かい要素をまとめてみました。

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

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

blogdesign_01

好き嫌いや慣れの問題は多少あるでしょうが、この順番にしておけばブックマークしてもらったときに、どれがどの記事なのかわかりやすくなります。

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

blogdesign_02

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

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

blogdesign_03

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

4. 必ず日付を入れる

blogdesign_04

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

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

blogdesign_05

アーカイブページへのリンクをクリックするときに、いちいち下にスクロールさせるのは意外と面倒です。

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

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

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

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

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

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

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

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

blogdesign_07

すべての訪問者がAIM力を持つ神スナイパーとは限りません。
クリックをミスすることは、かなりイライラしてしまいます。フォントサイズを小さくしているのならなおのこと、CSSの display:block; などでクリックできる範囲を広げてあげたいところです。

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

blogdesign_08_01 blogdesign_08_02

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

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

blogdesign_09

なにも、「これは広告です」などとデカデカと断り書きを入れる必要はありません。
ただ、(もちろん広告の利用規約にもよりますが)誤クリックを誘発しないようにデザインしてあげたいところです。

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

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

後記

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

定期的に、アクセス解析などから訪問者の行動パターンを研究し、ナビゲーションを改善するなどの試行錯誤を続けることが大事なのだと思います。
そして今日もまた、「サイドバーに入れるべき要素なんて、本当にそんなに多いんだろうか?」などと自問自答する作業がはじまるわけです。

付記

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

ブログの構造

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

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

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

関連記事

respond