entry

人気ブログ型サイトのデザインと統計

date: 2007/06/22 01:08 | modified: 2009/02/25 18:47

導入

消費者メディア調査によると,ブログの利用者・訪問者は2600万人を越えているそうです(2006年9月時点) livedoorやココログなどのブログを提供するサービスが増えたことによって,ウェブの知識がなくても簡単に始めることができますし,また,個人の「ホームページ」を開設していた人がCMSを自分のサーバーに導入してブログを始めるケースも多くなっています.

しかし,ブログサービスやツールごとに多くのテーマが提供され,さらにブロガーによるカスタマイズも可能になった結果,ブログ間のユーザビリティの統一性が失われているのが現状です(例えば文字列検索がなかったり,過去ログへのリンクがなかったり,そもそも日付がなかったり,など)
コンテンツが重視されるためか,そのコンテンツを提供しているフォーマットについてはあまり関心が高くないのかもしれません.

目的

日本のブロガーから広く認知されて人気があり,また個人的にも巡回先にしている8つのブログ型サイトを参考にして,コンテンツからではなく,デザイン(特に今回はレイアウト)の側面から各ブログの特徴を比較・検討・考察したいと思います.

対象とするブログ型サイトの記事

  1. [N] 容量無制限のファイル共有サービス「MediaFire」
  2. 次のYouTubeはこれだ!簡単に文書が共有できる『Scribd』 | 100SHIKI.COM
  3. Going My Way: 英語のわからない単語は英語で調べるのが上達の近道、Alt+クリックでanswers.comでの検索結果を表示する1-Click Answers
  4. CSSの小技集、20個:phpspot開発日誌
  5. FirefoxやThunderbirdのメモリ消費量を劇的に減らす方法 – GIGAZINE
  6. 個人的に常用中の Firefox 拡張機能 20個 | WWW WATCH
  7. Twitterが激しく面白すぎる件と日本語のTwitterツールいろいろ | caramel*vanilla
  8. photoshop- 1ピクセルラインで質感を高めるテクニック – WEBデザイン BLOG

選出基準

先の項目で「人気」という言葉をすでに使ってしまいましたが,具体的には,

を参考に,ウェブサービスの紹介やウェブ技術の解説を記事にしているブログを選んでいます(個人的主観によって,ややばらつきがあることは否めませんが……)

各ブログの中で被ブックマーク数(はてなブックマーク調べ)の最も多い記事を,対象ページにしています.また,情報は2007年6月18日時点のものです.敬称略で失礼します.

閲覧環境の想定

一般的なブラウジング予想図

まずは一般的な閲覧環境について考えます.
現在はSXGA(1280×1024)サイズが主流で,さらにブラウジング中にブックマークなどのサイドバーを展開している状態を想定して,ブラウザのクライアント領域は1000x800(ピクセル)としました.

Firebugの機能を使いたいため,ブラウザはFirefox 2を使いました.

デザインに関する比較

タイトル レイアウト 有効表示幅 本文位置 本文幅 サイドバー幅 文字サイズ/行間/字間 広告割合
ネタフル 固定3カラム 920 590 420 240 14px/1.6/- 63.99%
百式 固定2カラム 725 249 510 200 14px/1.5/- 0.00%
Going 可変2カラム 970 731 598 350 medium/1.7/1px 21.32%
phpspot 固定1カラム 740 594 732 - small/1.5/- 49.82%
GIGAZINE 可変3カラム 958 328 548 200 14px/1.0/- 4.95%
WATCH 固定2カラム 710 203 380 235 75%/1.5/- 0.00%
caramel 固定2カラム 705 479 450 190 1.2em*70%/1.6/- 6.64%
WEBデザイン 固定2カラム 800 454 502 256 1.1em/1.6/- 12.14%
平均値 - 816.0 453.5 517.5 238.7 -/1.5/- 19.86%

凡例

有効表示領域(これ以外の領域は黒)
ブラウザを最低限この幅にしておけば,ページの情報を全て読める,という領域
ヘッダ(青)・フッタ(青)・サイドバー(黄)
基本的にサイト内の全ページで共通の領域.サイトタイトルやロゴ,コンテンツへのリンクなどが含まれる.また,見た目上のまとまりで定義する(それぞれのマークアップの癖やテクニックによる差異を回避するため)
本文(緑)
そのページのメインである本文を含む領域.余白は除外
本文位置
画面上端から,本文までの縦方向長さ
広告領域(赤)
アフィリエイト広告が占める領域.広告本体と,広告であることを明示したキャプションも含める
広告割合
有効表示領域における,広告領域が占める割合

ネタフル

百式

Going My Way

phpspot開発日誌

GIGAZINE

WWW WATCH

caramel*vanilla

WEBデザイン BLOG

その他の統計

タイトル CMS 被ブクマ数 リクエスト数/容量 読み込み時間 1日平均記事数
ネタフル MT 1228 96/603 10.69 8.740
百式 MT 1362 32/170 1.91 0.996
Going MT 725 100/504 30.88 1.909
phpspot MT 767 22/144 2.49 ?
GIGAZINE ? 1549 37/180 5.66 6.485
WATCH MT 675 71/337 5.6 ?
caramel WP 765 113/506 16.61 1.501
WEBデザイン MT 385 113/1444 11.77 0.608
平均 - 932.0 73/486 10.70 (3.375)
CMS
対象サイトで使用されているウェブログ・ツールの名称
被ブックマーク数
対象ページがブックマークされた回数.対象サイトのドメイン内でもっとも多いページを採用(はてなブックマーク調べ)
リクエスト数・容量
画像・JavaScript・CSSなどを含む,対象ページから呼び出されるファイルの総数と総容量[KB]
読み込み時間
キャッシュをクリアした状態で読み込み完了までにかかった時間[sec] Firebugで計測.間隔を置き5回測定し平均をとる.サーバーの状態にもよるのであくまで参考数値(計測環境: 実測20Mbps)
1日平均記事数
基準日までの記事数を,開始日から基準日までの日数で割った値(基本的に地道な足し算で算出.ただし無理と判断したサイトは空欄)

結論・考察・感想

  • レイアウトは2カラムが多く,さらに本文を左に,サイドバーを右に配置する場合が多い.これは読み込む順番や人間の視線の移動が上→下・左→右という方向性であるため,本文を先に持ってくるためであると考えられる.
  • 「ネタフル」を除く固定カラムレイアウトの有効表示幅を比較すると,どのサイトも基本的に800x600サイズ以上のディスプレイを想定していると考えられる.
  • 文字サイズの指定に共通性は見出せないが,行間(line-height)は平均1.5(=150%)と,読みやすくする工夫がなされている.
  • 「ネタフル」・「Going My Way」・「phpspot開発日誌」は広告割合が多く,本来メインコンテンツであるはずの本文がかなり下方に位置している.広告を重要視していることが理解できる.
  • 基本的に読み込み時間はリクエスト数の多さとファイル容量の大きさに比例するが,「Going My Way」のように外部ドメインのAPI等を読み込んでいる場合さらに長くなる傾向がある.
  • 「caramel*vanilla」や本サイトのようにWPの場合は,ページを描画するために必要な時間に加えてプラグインによって必要なファイルが増えるためさらに読み込み時間が長くなっている.
  • ツールはMTの方が多い.これは現在のブームの前からブログを始めているサイトが多いことや,日本語のドキュメントが充実しているからだと考えられる.

対象ブログの抽出方法がやや意図的で,母数も多くないので,意味のあるデータとは言いがたいところですが,デザイン(設計思想など)を客観的に評価する指針くらいにはなるのではないでしょうか?

今回初めて他人のサイトをスクリーンキャプチャしてガイド線を引いて解析してみたのですが,特に「百式」と「WWW WATCH」がカッチリ作られていると感じました.細かい計算が感じられ実に心地よかったです.
また特に興味深いのが「WEBデザイン BLOG」で,CSSにおいてwidthをpxではなくemで指定しています.例えば有効表示領域は61.54em(=800px)など.どういう違いがあるのか知りたいです.

各対象ページには,内容ではなく「デザインの引用」ということでトラックバックを送っています.

参考

このエントリーは以下のリンク先の記事を参考・引用して書かれています.

関連記事

7 responses

reply

#3666: Aman

date: 2014/11/19 11:37:30

Call me wind because I am abtelusoly blown away.

#218: 技林

date: 2007/07/10 08:59:27

ソーシャル・ブックマーク・サービスの被ブックマーク数取得まと…

ソーシャル・ブックマーク・サービス(SBM)では、任意のURLの被ブックマーク数を取得するAPIが公開されていたりする。 メジャーどころをまとめてみた。… (more…)

#1061: Delicious Over 50

date: 2009/06/16 09:40:15

人気ブログ型サイトのデザインと統計 :: gerenuk.crazyphoto.org/ http://bit.ly/QHPLv webdesign まとめ layout

#1761: NewsBank

date: 2011/11/22 04:34:17

比較分析からの結論がわかりやすいです。RT @gerenukrumoi: 人気ブログ型サイトのデザインと統計 http://t.co/cFBFbxkE

#2147: UX Feeder

date: 2012/01/19 03:02:09

Delicious: 人気ブログ型サイトのデザインと統計 :: http://t.co/km3OoxwE: http://t.co/ACWSyENk [Research]

#3096: Sani Elfishawy

date: 2012/03/04 20:16:03

Delicious: 人気ブログ型サイトのデザインと統計 :: http://t.co/wKwZGaU6: http://t.co/9fN68sGZ [Research]

#273: links for 2007-07-18 « test

date: 2007/07/18 12:33:40

[...] 人気ブログ型サイトのデザインと統計 :: gerenuk.crazyphoto.org/ (tags: design layout サイトの事) [...]

respond