人気ブログを分析することで、人気ブログを作る方法を探ろう
本には本の、テレビにはテレビのフォーマットがあるように、人気ブログにもフォーマットがあります。フォーマットを使えばユーザーフレンドリーで説明不要なインターフェイスを構築できます。
具体的な例を出せばサイトのロゴです。サイトのロゴをクリックすればホームヘ移動することは暗黙の了解です。わざわざ説明しているサイトはありません。しかし多くの訪問者が、ホームへの移動の際に、ロゴをクリックすることが知られています。
特にブログの訪問者はななめ読みがメインで、クリックして自分の意図しないところに飛ばされた場合、ページに戻って注意深く読み返すのは稀だと思います。
当サイトでも紹介してきましたが、WordPressでは人気記事や、関連記事などを自在に表示できます。しかし、せっかくの機能も有効に使えなければ宝の持ち腐れです。そこで、人気ブログのナビゲーションを分析して、人気のフォーマットを探っていきます。
今回の分析
- 「Authority」で人気ブログをピックアップ。
- ナビゲーションのデザイン、配置場所、リンク数を分析します。
1.Gigazine
説明
日々のあらゆるシーンで役立つ情報を提供するIT系ニュースサイト。毎日更新中。
サムネイル
ページのナビゲーション
| ヘッダー | サイト内検索 | |
|---|---|---|
| サイドバー | ジャンル24件 | 最新ニュース30件 |
| 記事カレンダー | ||
| ページ上部 | 特になし | |
| ページ下部 | 関連記事5件 | 次の記事、前の記事 |
| フッター | 特になし |
総ナビゲーション数：63件
ナビゲーションの数こそ多いですが、メニューが折りたたまれているため、複雑な構造という印象はありません。それでも賑やかに見えるのはオリジナル記事の写真が高品質なのと、カラフルな配色の効果が高いようです。
2.lifehacker
説明
ガジェットなどを駆使し、スマートに楽しむ仕事術「Lifehack」。「ライフハッカー［日本版］」では、その言葉を広義に捉え、生活全般に役立つライフハック情報を日々お届けします。
サムネイル
ページのナビゲーション
| ヘッダー | 最新記事サムネ8件 | サイト内検索 |
|---|---|---|
| サイドバー | 最新記事一覧5件 | 注目数ランキング5件 |
| ページ上部 | 人気記事ランキング10件 | Tweet数ランキング10件 |
| ページ下部 | あわせて読みたい12件 | |
| フッター | 記事のカテゴリ24件 |
総ナビゲーション数：75件
ページトップにアイキャッチとしての画像リンクが特徴的で、とても訴求力があります。リツイートの数やページビューをナビゲーションに加えることで、サイトが賑やかで訪問者が多いことを表現しています。
上部には人気の記事で注意を引き、記事を読み終わった人には関連する記事を紹介。それぞれに意味のあるナビゲーションが適切に配置されています。
3.かちびと.net
説明
かちびと.netはビジネスに繋がるWebマーケティング、SEO、ソフトウェアや有益なWebサービス情報を配信する、価値人、勝ち人を目指す方のマーケティングブログです。
サムネイル
ページのナビゲーション
| ヘッダー | 特になし（オプションあり） | |
|---|---|---|
| サイドバー | サイト内検索 | NEW7件 |
| カテゴリ29件 | 人気記事8件 | |
| コンタクト7件 | ||
| ページ上部 | 特になし | |
| ページ下部 | Related Posts関連記事8件 | |
| フッター | 特になし |
総ナビゲーション数：60件
総リンクは60件ですが、メニューがたたまれていて、トップのオプションも非表示になっているので、一見するとすっきりとした印象を受けます。
カラーも抑えられ、ノイズが少ないので、技術系の内容を読ませるデザインになっています。技術系ブログで一二を争う人気なのも頷けます。
4.痛いニュース
説明
２ちゃんねるで見つけた痛いニュースをピックアップしてお伝えします。
サムネイル
ページのナビゲーション
| ヘッダー | 特になし | |
|---|---|---|
| サイドバー | サイト内検索 | カテゴリ30件 |
| カレンダー | 逆アクセスランキング30件 | |
| 応援してるブログ40件 | Recent Comments10件 | |
| 最近の痛いニュース10件 | ||
| ページ上部 | 次のページ、前のページ | |
| ページ下部 | 属する各カテゴリの関連記事5件 | 次のページ、前のページ |
| フッター | 特になし |
総ナビゲーション数：131件
2chの情報をまとめるタイプのブログです。このタイプの特徴である大量のリンク、大量の広告、大量の新着記事がステレオタイプに配置されています。
煩雑になりやすい情報を、落ち着いたグリーンのデザインで統一することで、視認性を確保しています。
まとめサイトのお手本と言ってもいいのではないでしょうか。
5.TechCrunch
説明
次世代のウェブ社会に影響を与えるスタートアップ・新サービス・スクープねたを毎日リアルタイムで綴るブログ‐TechCrunchの日本語版サイト
サムネイル
ページのナビゲーション
| ヘッダー | サイト内検索 | |
|---|---|---|
| サイドバー | 人気記事10件 | |
| ページ上部 | 特になし | |
| ページ下部 | 次のページ、前のページ | |
| フッター | 特になし |
総ナビゲーション数：13件
ほとんど誘導するようなナビゲーションはなく、記事が独立しています。またナビゲーションに見えるものも、ほとんどが広告。
アメリカ本社の記事をメインに扱い、内容が独創的で他のサイトに真似できない内容のためにできる、強気のナビゲーション。
6.アルファモザイク
説明
巨大掲示板２ちゃんねるのスレッドを紹介するブログです。
サムネイル
ページのナビゲーション
| ヘッダー | 最新記事サムネ5件 | サイトメニュー12件 |
|---|---|---|
| サイドバー | 最新記事8件 | 人気記事8件 |
| 注目されてるカテゴリ30件 | 注目の動画5件 | |
| 注目の画像5件 | 人気記事30件 | |
| 殿堂入りの記事20件 | カテゴリ1 50件 | |
| カテゴリ2 40件 | 注目のワード（タグ） | |
| ページ上部 | 次のページ、前のページ | 人気記事8件 |
| RSSヘッドライン | ||
| ページ下部 | 属する各カテゴリの関連記事4件 | 最近コメントされた記事14件 |
| 注目されている記事12件 | おすすめ記事画像付き24件 | |
| 今日の更新記事50件 | 今日の注目記事50件 | |
| フッター | 特になし |
総ナビゲーション数：379件
2chまとめ系サイトの特徴を余すところ無く表現しています。どこを向いてもリンク、リンク、リンクです。記事を読みながら別のタイトルに惹かれてクリックしてしまう。そんな構造です。
他のサイトとの違いは画像を大きくとってクリックを誘っているところです。記事への興味が無くなってもスクロールしていくと、思わずクリックしてしまうという構成になってます。
7.Webクリエイターボックス
説明
WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。
サムネイル
ページのナビゲーション
| ヘッダー | 特になし | |
|---|---|---|
| サイドバー | 記事カテゴリ4件 | サイト内検索 |
| ランダム8件 | 人気記事8件 | |
| 新着記事8件 | ||
| ページ上部 | 特になし | |
| ページ下部 | 関連する記事5件 | |
| フッター | 特になし |
総ナビゲーション数：34件
独特なデザインが目に楽しいサイトです。それでいてガチャガチャしていないのは徹底したカラーコントロールと、細かな調整の賜物。
技術系らしく、ノイズを配したシンプルな構成で、リンクも必要最小限に抑えています。（実はソースに…ゴニョゴニョ）
8.ハムスター速報
説明
ハムスターがまとめる２ちゃんねるスレッド紹介ブログです。
サムネイル
ページのナビゲーション
| ヘッダー | 特になし | |
|---|---|---|
| サイドバー | ２０１１年を振り返る | 特選スレ一覧4件 |
| 最新記事一覧20件画像つき | 感謝（逆アクセスランキング）20件 | |
| ヤフーニュース64件 | カテゴリ別アーカイブ93件 | |
| 月別アーカイブ63件 | 最新記事10件 | |
| 人気記事30件 | 月別人気まとめ37件 | |
| ページ上部 | VIPetc！（RSS配信、他サイト）25件 | 今日のニュース（RSS配信、他サイト） 25件 |
| ページ下部 | カテゴリ関連記事15件 | 過去の人気記事ランダムぴっくあっぷ6件画像付き |
| 今週の人気記事一覧15件画像つき | ||
| フッター | 人気記事10件 | 最新記事10件 |
| ランダム？人気記事8件画像つき |
総ナビゲーション数：456件
2chまとめ系ブログらしくリンクが多いのが特徴。他と違うのはコンテンツの途中にも画像リンクがある点です。途中で目線の移動が起こる可能性がありますが、2chというクオリティが一定しないものを扱っているので、記事に飽きた人への訴求という意味で効果的だと思います。
ページ最後にある画像リンクや人気記事・関連記事は、他のまとめブログよりも見やすくまとまっています。
9.IDEA*IDEA
説明
百式管理人のライフハックブログ
サムネイル
ページのナビゲーション
| ヘッダー | サイト内検索 | ナビゲーションメニュー4件 |
|---|---|---|
| サイドバー | 人気のエントリー5件（はてな） | 最近の記事10件 |
| カテゴリー別ナビゲーション87件 | 過去記事一覧プルダウン | |
| ページ上部 | パンくずリスト | |
| ページ下部 | こちらもあわせてどうぞ（関連記事10件） | 次のページ、前のページ |
| フッター | 特になし |
総ナビゲーション数：121件
最近の記事と、カテゴリーというオーソドックスなナビゲーションで、迷うこと無くサイトの構成が分かるようになっています。多めの関連する記事と、動的に飛び出すおすすめ記事が効果的です。
10.MOONGIFT
説明
MOONGIFTはオープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナーのためのブログです
サムネイル
ページのナビゲーション
| ヘッダー | グローバルナビゲーション（サブ含め約20件） | 月別アーカイブ、プルダウン |
|---|---|---|
| サイト内検索 | ||
| サイドバー | お知らせ3件 | アンケート5件 |
| 人気記事5件 | プレミアム限定記事5件 | |
| ページ上部 | 属するカテゴリ3件 | 属するタグ5件 |
| ページ下部 | MOONGIFTの関連記事5件（画像つき） | |
| フッター | グローバルナビゲーション（サブ含め約20件） |
総ナビゲーション数：73件
高コントラストの文字と、質感のあるメニューを組み合わせることで、読みやすく内容を把握しやすいデザインです。プレミア記事への誘導という点でリンクの数が多くなっていますが、通常のリンクはとても少なく厳選されている印象があります。LinkWithinを使った画像つきの関連記事も効果的に配置されています。
まとめ
ナビゲーションについて、気づいた点をまとめてみます。
- オリジナリティーがある記事の場合はそれだけで成り立っているのでリンクが少ない。
- 情報をまとめるサイトは多くの記事を集めることで成り立つのでリンクが多い。
- エンターテイメントなブログはビビットで賑やかさを演出する。
- 技術系ブログは色を抑えて記事へのノイズを極力減らしている。
- 色は抑えられていて、多くがメインカラーとサブカラーという構成。1色のみというサイトも珍しくない。
- 画像付きリンクはアイキャッチとして使われるのでホームやページトップで人を惹きつけるのに使われる。
- 関連する記事は、当該記事に興味のある人を惹きつけるため記事の最後に配置される。
- 新着記事はリピーターにすぐ分かるようページ上部に配置される。
- ブログは検索エンジンからのユーザーが多いメディアのため、カテゴリなどグローバルナビゲーションの比重は低い。多くの情報を扱うサイトほど横断的にリンクが配置されている。
今回は人気ブログのナビゲーション編ということで取り上げてみました。次回もさまざまな観点から人気ブログを分析していきます。皆さんが気がついた点などありましたらコメントいただけるとうれしいです。
※今回取り上げたブログは「Authority」のランキングを参考に、扱う記事の分野がかぶらないように選びました。この場を借りてお礼をさせていただきます。