gerenuk.crazyphoto.org/

2009年版・人気ブログ型サイトのデザイン

• 第1回 基礎データ編
• 第2回 レイアウト編
• 第3回 色・サイズ編
• 第4回 ナビゲーション編（この記事です）

第4回となるこの記事では「ナビゲーション編」と題して、ブログ内の他のページや他のサイトへの誘導の仕方、採用されたナビゲーションの種類に注目します。
ただ、どのサイトもテンプレート（テーマ）をかなりカスタマイズしているため、簡単に比較は出来ません。デザインのセンス・マークアップの癖・ブログ要素の解釈などから、同じブログツールを使っていてもまさに十人十色のナビゲーションが生まれています。

ブログの要素を出来るだけ大雑把に捉え、それぞれのサイトで共通する部分・しない部分を見ていくことにします。

基本的なブログの要素

基本的なブログの要素一覧

サイト名	ロゴ	プロフィール	リンク	広告	問い合わせ	メールマガジン
PHPSPOT開発日誌	○（画像）	△	○	○	○	×
404 Blog Not Found	○（テキスト）	△	○	○	△	×
ホームページを作る人のネタ帳	○（画像）	○	○	○	○	○（feedburner）
DesignWalker	○（テキスト）	×	×	○	△	×
TechCrunch	○（画像）	△	○	○	△	×
ウノウラボ	○（画像）	△	○	○	×	×
Google Mania	○（画像＋テキスト）	△	○	○	△	○（feedburner）
MOONGIFT	○（テキスト）	△	○	○	○	×
ネタフル	○（画像）	△	×	○	△	○（まぐまぐ！）
CREAMU	○（画像）	○	○	○	△	○（feedburner）

「△」記号は、「個別ページにはないが、リンク先に要素がある場合」もしくは「個別ページにはないが、トップページに要素がある場合」です。

ロゴ

サイト名の記述。画像・テキスト、またはその両方かを併記

プロフィール

サイトのコンセプトや著者の経歴など

リンク

他のサイトへのリンク（広告を除く）

広告

サイト内広告

問い合わせ

問い合わせ先の情報、もしくは著者直通のメールフォーム

メールマガジン

メールマガジンサービスの提供。有の場合は提供サービス名を併記

ロゴ

「顔」とも言うべきロゴは多くのサイトが画像を採用しています。
テキストのみだとシステムフォントによるタイポグラフィまでしか表現できないこともあり、自サイトのブランディングをしたいブロガーの場合はこだわるべきポイントだと思います。

例えばロゴがテキストのみの「404 Blog Not Found」では、ロゴ下の広告バナー画像の方が目立ってしまい、まるで「BLOG RADAR（ブログレーダー）」という名前のサイトのように見えてしまっています。

また「Google Mania」を除く9サイトでは、ロゴにトップページへのリンクが付加されています。

プロフィール・問い合わせ先の情報

ほぼ全てのサイトで「サイトプロフィール」もしくは「著者プロフィール」というページが設けられています。
「この記事を書いたのは誰であるのか？」という情報は、記事やサイトの信頼を得る上で大事な要素だということがわかります。
また、フィードバックを得るための「問い合わせ先の情報」もしくは「メールフォーム」も多くのサイトで採用されています。

個別記事の要素

個別記事の要素一覧

サイト名	最新記事	関連記事	人気記事	前後記事	コメント	トラックバック	SBM・RSS登録
PHPSPOT開発日誌	○	○	×	○	×	×	○
404 Blog Not Found	○	×	○	○	○	○	○
ホームページを作る人のネタ帳	○	○	×	×	○	○	○
DesignWalker	○	○	○	×	○	○	○
TechCrunch	○	×	×	○	○	○	○
ウノウラボ	○	×	×	○	○	○	○
Google Mania	○	○	○	○	○	×	○
MOONGIFT	○	×	×	○	○	×	○
ネタフル	×	×	○	○	○	○	○
CREAMU	○	○	○	○	○	○	○

最新記事

サイト内で最新の記事を表示する機能

関連記事

現在表示している記事に関連する記事を表示する機能（タグや訪問者の行動などから算出）

人気記事

サイト内で人気の記事を表示する機能（SBMや訪問数から算出）

前後記事

現在表示している記事の前後の記事を表示する機能

コメント・トラックバック

コメント・トラックバックでのフィードバックを受け付けているか

SBM・RSSリーダーへの登録リンク

ソーシャルブックマークサービスや、RSSリーダーへの登録を促すナビゲーション

記事間リンク

より多くの記事を読んでもらえるように、全てのサイトで個別記事ページに他の記事へのリンクが貼られています。
記事間リンクは大別すると、最新記事・関連記事・人気記事・前後記事の4種類に分けられます。
ただ改めてリストアップしてみると「最新記事」が9サイトで採用されている以外は、採用・不採用に規則性はないようです。
当然、各ブログツールによって記事間リンクの導入のしやすさは異なりますが、ツール間の差をなくすプラグインやウェブサービス等が多数提供されているため技術的な問題とは考えられません。
おそらくは各サイトで「この4種類のうち重要なのはコレ！」という取捨選択がなされた結果が現在のナビゲーションになっているのだと思います。

フィードバック

どのサイトも、コメント・トラックバック・メールフォームのいずれかを採用し、訪問者からのフィードバックを受けられるようになっています。

各種アーカイブページ

各種アーカイブページ一覧

サイト名	サイトマップ	カテゴリー	タグ	月別	カレンダー	検索フォーム
PHPSPOT開発日誌	×	×	×	△（テキスト）	×	○（Google）
404 Blog Not Found	×	○	×	○（リスト）	○	×
ホームページを作る人のネタ帳	×	○	○	○（プルダウン）	×	○（Google）
DesignWalker	×	○	○	○（リスト）	×	○（Google）
TechCrunch	○（月別のみ）	×	×	×	×	○（Google）
ウノウラボ	○（全記事）	△	×	△（リスト）	×	○（ブログツール）
Google Mania	×	○	○	×	○	○（Google）
MOONGIFT	×	○	×	○（リスト）	×	○（Google）
ネタフル	○（カテゴリーのみ）	△	×	△（テキスト）	×	○（Google）
CREAMU	○（全記事）	○	×	○（プルダウン）	×	○（ブログツール）

「△」記号は、「個別ページにはないが、リンク先に要素がある場合」もしくは「個別ページにはないが、トップページに要素がある場合」です。

サイトマップ

全個別記事へのリンク、もしくは各アーカイブの抜粋ページを提供しているか

カテゴリー

カテゴリーによる分類

タグ

タグによる分類

月別

1ヶ月ごとにまとめたアーカイブページ。リスト・プルダウン・それ以外のテキスト、という形式を併記

カレンダー

カレンダー機能の有無

検索フォーム

全文検索フォームの有無

アーカイブページ

ブログ以前の静的サイトで多用されていた「サイトマップ」の代わりに、記事を1ヶ月ごとにまとめた「月別アーカイブ」を採用しているサイトが多いようです。

時系列以外の記事の分類の仕方は、8サイトが「カテゴリー」を採用しています。
今となってはやや死語となった感のある「Web 2.0」の代表的な要素、「タグ」を併用しているサイトは意外にも少なく、3サイトのみとなっています（ただし、タグ機能を実装する以前からWPを使っている「MOONGIFT」ではカテゴリーをタグのように使って分類しています）

興味深いのは、インデックスページで「phpspot」と「ネタフル」が過去ページへの導入に全く同じナビゲーション（リストやプルダウンではなく、シンプルテキストにリンクを張ったもの）を採用している点です。

偶然同じになったのか、それともこのデザインが訪問者にとって使いやすく、効率よく過去ログにアクセスできる形なのか、気になるところです。

検索フォーム

ブログツールが提供しているの全文検索フォーム機能より、Googleカスタム検索が7サイトで採用されています。
Google AdSenseとの連携や、サーバーへの負担の軽減などメリットが多いことが考えられます。

結論

「ブログ」という、「コンテンツ」と「デザイン」を分離して管理できるツールの登場によって、ウェブデザイナーでなくてもある程度体裁の整ったサイトを持つことが可能になりました。
今回調べてきたブログデザインは、一見似通っているように見えて、実はそれぞれ様々な試行錯誤によってデザインされていると感じました。
ただそれと同時に、広告が異常なまでに多かったり、あるべき基本的なナビゲーションが足りなかったり、人気だからといって必ずしもデザインが優れているわけではないという印象も受けました。

ブログが流行り始めの頃は「コンテンツ」さえ良ければどんどん人が集まってくる状況でしたが、現在では増え続けるブログに他との差別化を図ることが難しくなってきていると思います。
見やすく使いやすい「デザイン」が必要とされているのではないでしょうか？
この記事があなたのブログデザインを再考するきっかけになればと、考えています。

関連記事

• 2007/06/22: 人気ブログ型サイトのデザインと統計
• 2009/03/21: 2009年版・人気ブログ型サイトのデザイン 第3回 色・サイズ編
• 2009/03/02: 2009年版・人気ブログ型サイトのデザイン 第2回 レイアウト編
• 2008/05/21: 奇怪なマークアップへ至る思考
• 2009/02/01: ブログデザインで気をつけている10個の細かい要素