gerenuk.crazyphoto.org/

導入

消費者メディア調査によると，ブログの利用者・訪問者は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

選出基準

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

• アルファブロガートップ40　2006（1～4）
• テクノラティ：ブログランキング（5）
• 個人的にお世話になっている，巡回ブログ（6～８）

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

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

閲覧環境の想定

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

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%

有効表示領域（これ以外の領域は黒）

ブラウザを最低限この幅にしておけば，ページの情報を全て読める，という領域

ヘッダ（青）・フッタ（青）・サイドバー（黄）

基本的にサイト内の全ページで共通の領域．サイトタイトルやロゴ，コンテンツへのリンクなどが含まれる．また，見た目上のまとまりで定義する（それぞれのマークアップの癖やテクニックによる差異を回避するため）

本文（緑）

そのページのメインである本文を含む領域．余白は除外

本文位置

画面上端から，本文までの縦方向長さ

広告領域（赤）

アフィリエイト広告が占める領域．広告本体と，広告であることを明示したキャプションも含める

広告割合

有効表示領域における，広告領域が占める割合

その他の統計

タイトル	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カラムが多く，さらに本文を左に，サイドバーを右に配置する場合が多い．これは読み込む順番や人間の視線の移動が上→下・左→右という方向性であるため，本文を先に持ってくるためであると考えられる．
• 「ネタフル」を除く固定カラムレイアウトの有効表示幅を比較すると，どのサイトも基本的に800ｘ600サイズ以上のディスプレイを想定していると考えられる．
• 文字サイズの指定に共通性は見出せないが，行間（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）など．どういう違いがあるのか知りたいです．

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

参考

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

• 【Web広告研究会】 トピックス 「消費者メディア調査」の結果を発表
• Dynamic Drive CSS Layouts- Tableless, CSS based templates
• ブログのレイアウト　あなたの好みは？
• [アンケート]読みやすい・見やすいと感じるblogのレイアウトは? | caramel*vanilla
• [アンケート結果]見やすいと感じるblogのレイアウト | caramel*vanilla

関連記事

• 2009/02/28: 2009年版・人気ブログ型サイトのデザイン 第1回 基礎データ編
• 2009/02/01: ブログデザインで気をつけている10個の細かい要素
• 2009/06/30: はてブと Twitter を使って、1ヶ月で約3万 PV を稼いだ顛末
• 2009/05/13: 2009年版・人気ブログ型サイトのデザイン 第4回 ナビゲーション編
• 2009/03/21: 2009年版・人気ブログ型サイトのデザイン 第3回 色・サイズ編