2009年版・人気ブログ型サイトのデザイン
- 第1回 基礎データ編
- 第2回 レイアウト編（この記事です）
- 第3回 色・サイズ編
- 第4回 ナビゲーション編
第2回となるこの記事では「レイアウト編」と題して、各ブログの要素の配置などを比較・考察します。
第二次選出基準
77サイト全てのデザインを解析するのは大変ですので、第1回の基礎データ編で算出した1日平均被ブックマーク数の多い順から10サイトを抽出しました。
さらに各サイトの中で被ブックマーク数が最も多い「個別記事ページ」を解析対象にしました。
- これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
- 404 Blog Not Found:プログラマーでなくても名前ぐらい覚えておきたいアルゴリズムx10
- 『無料＋ブラウザ』で全部やってしまおう。webジェネレーターとサービス50個まとめ*ホームページを作る人のネタ帳
- ダウンロードし放題 商用利用可能な写真素材サイトいっぱい | DesignWalker
- 2007年版: これなくしては生きていけないWeb 2.0企業15社
- ウノウラボ Unoh Labs: デザインセンスの無い人がwebサイトを作成する際に参考にしているサイト
- Gmailをマスターしたい人が読むべきエントリー５０選 | Google Mania – グーグルの便利な使い方
- MOONGIFT: ? 必見！怖くなるくらい優秀なCMS「concrete5」:オープンソースを毎日紹介
- [N] 容量無制限のファイル共有サービス「MediaFire」
- まじで使えるJavascriptライブラリ75選 | CREAMU
レイアウトの比較
2009/05/20追記: 「ホームページを作る人のネタ帳」はこの記事シリーズを執筆中の2009年4月にリニューアルしたため、新デザインの分を追加しました。
| サイト名 | レイアウト （本文/サイドバー配置） |
有効表示幅 | 本文開始位置 | 本文幅 | サイドバー幅 | 広告割合 |
| PHPSPOT開発日誌 | 固定3カラム（左/右2） | 950 | 664 | 530 | 160+200 | 58.59% |
| 404 Blog Not Found | 可変2カラム（左/右1） | 1000 | 213 | 684 | 268 | 29.50% |
| ホームページを作る人のネタ帳（旧） | 固定3カラム（左/右2） | 980 | 834 | 470 | 240+210 | 51.14% |
| ホームページを作る人のネタ帳（新） | 固定3カラム（左/右2） | 1000 | 675 | 450 | 275+220 | 53.65% |
| DesignWalker | 可変3カラム（左/右2） | 856 | 326 | 438 | 162+216 | 26.11% |
| TechCrunch | 固定2カラム（左/右1） | 1000 | 300 | 635 | 313 | 7.81% |
| ウノウラボ | 可変2カラム（左/右1） | 900 | 240 | 640 | 202 | 11.39% |
| Google Mania | 固定3カラム（中/左右2） | 980 | 628 | 530 | 160+240 | 59.52% |
| MOONGIFT | 可変2カラム（左/右1） | 920 | 527 | 602 | 240 | 20.17% |
| ネタフル | 固定3カラム（左/右2） | 840 | 553 | 420 | 160+240 | 64.19% |
| CREAMU | 固定3カラム（左/右2） | 964 | 553 | 562 | 234+142 | 24.61% |
| 平均 | - | 939 | 483.8 | 551.1 | 338.7 | 35.3% |
- レイアウト
- レイアウトの種別とカラム数、及び本文とサイドバーの配置・カラム数。
- 対象領域（赤枠内）
- SXGA（1280×1024）環境でブックマークなどのツールバーを横に展開した状態を想定し、ブラウザのクライアント領域を1000×800(px)としました。
また、ブラウザはFirefox 3.0.6を使用しました。 - 有効表示領域（これ以外の領域は黒）
- ブラウザを最低限この幅にしておけばページの情報を全て読めるという領域。
要素にmarginやpaddingを指定している場合があるのでCSSのwidthの数値ではなく、純粋に視覚的な要素で計測しました。また、可変レイアウトの場合は固定レイアウトと同条件にするため、基準幅を1000pxとして同様に計測しました。 - ヘッダ（青）・フッタ（青）・サイドバー（黄）
- 基本的にサイト内の全ページで共通の領域。
サイトタイトルやロゴ、コンテンツへのリンクなどが含まれます。また、見た目上のまとまりで分類しました（それぞれのマークアップの癖やテクニックによる差異を回避するため） - 本文（緑）
- そのページのメインである本文を含む領域。余白は除外。
- 本文開始位置
- 画面上端から、本文領域までの縦方向長さ。
- 広告領域（赤）
- アフィリエイト広告が占める領域。ただし広告本体と、広告であることを明示したキャプション・境界線も含める。
- 広告割合
- 有効表示領域における、広告領域が占める割合。
2007年から何が変わったのか？
ディスプレイのサイズ・解像度
技術の進歩によって大きいサイズのディスプレイが安価で手に入るようになりました。それに伴って訪問者の画面解像度の環境も変化しています。
下の表は本サイトの2007年（1年分）と2009年（1月から2月まで）の訪問者（ユニークアクセス）の画面解像度環境の割合です。母数はどちらもちょうど2万セッション前後だったので、十分比較材料になると思います。
| 解像度(px) | 2009年 | 2007年 |
| 1024×768 | 27.67% | 39.52% |
| 1280×1024 | 23.87% | 30.49% |
| 1280×800 | 16.68% | 7.7% |
| 1680×1050 | 8.45% | 3.81% |
| 1440×900 | 5.91% | 2.24% |
| 1920×1200 | 4.64% | 2.51% |
| 1600×1200 | 2.58% | 3.3% |
| 1280×768 | 1.84% | 2.73% |
| 1152×864 | 1.42% | 1.42% |
| 1400×1050 | 1.38% | 1.97% |
HD・フルHD映像を表示できるような解像度が劇的に増えています。
ただ現時点では、従来のXGA(1024×768)やSXGA(1280×1024)の環境が「まだ」半分も残っているとも言えます。それゆえに今回も、2007年版の「閲覧環境の想定」と同条件で解析しています。
ブラウザ
| ブラウザ名 | 2009年 | 2007年 |
| Internet Explorer (IE) | 62.7% | 71.28% |
| Firefox | 27.29% | 19.98% |
| Opera | 3.75% | 2.51% |
| Safari | 3.01% | 4.98% |
| Chrome | 2.62% | - |
IEが減り、Firefoxが着実にシェアを伸ばしています。また、2008年末に正式リリースされた話題性もあってか、Google Chromeが入っているのも面白い点です。
| バージョン名 | 2009年 | 2007年 |
| 7.0 | 57.39% | 16.39% |
| 6.0 | 41.33% | 81.33% |
| 8.0 | 0.96% | - |
| 5.5 | 0.31% | 0.6% |
IEのバージョン別で言うと、2007年は圧倒的に6.0が多かったのに対し、2009年には7.0が逆転しています。旧ブラウザが駆逐され、ウェブデザインのトラブルが解消することを切に願っています。
レイアウトの考察
画面解像度が大きくなる流れを受けて、基本的に横幅に関する数値が2007年版よりも増えています。また、横方向に余裕が出来たからか、サイドバーを2つにしたレイアウトが多く採用されています。
本文配置と開始位置
偶然か必然か、今回抽出したサイトでは「Google Mania」を除く9サイトが「左本文・右サイドバー」のレイアウトになっています。「個別記事を読ませる」デザインとしてはこれがスタンダードのようです。
以前「ブログデザインで気をつけている10個の細かい要素」でも書いたとおり、視点の移動方向（左から右へ）を考えるとこのレイアウトの方が本文の開始位置がわかりやすくなることも理由のひとつだと考えられます。
ただ本文開始位置は平均483.8pxと対象領域の半分より下になっていて、何回かスクロールさせないと本文を読むことが出来ません。特に「ホームページを作る人のネタ帳」は本文が対象領域外になってしまっています。
サイドバー
サイドバーを2つにしたレイアウトが4サイトあります（なお「MOONGIFT」はデザイン上1カラムとしましたが、途中で2つに分かれているため2カラムとも言えます）
2つにすることによってサイドバーが縦長になるのを抑えられ、ページの上の方にナビゲーションを持って来ることができるので「ずーっと下までスクロールさせないと検索フォームが出てこない！」という事態を防げます。
ただその分、本文幅を減らすことになるので上手くバランスをとらないと読みにくくなってしまいます。
また、広告バナーのサイズに合わせたからか、幅は160pxや240pxのものが多いようです。
固定レイアウト vs 可変レイアウト
ウェブデザインにおいていまだに議論の対象になっている横幅固定レイアウト問題ですが、前述の通り画面解像度の種類が多くなっていることを受けてか、可変レイアウトが4サイトあります。
「DesignWalker」は「本文・サイドバーともに可変」、「ウノウラボ」は「本文可変・サイドバー固定」となっており、一般的なリキッドレイアウトを採用しています。
また「DesignWalker」は外側のブロック要素にmax-widthを指定しているため、かなり広いディスプレイでも本文領域が横に伸びすぎないような工夫がされています（ただしIE6ではサポートされていません）
驚いたのは「404 Blog Not Found」と「MOONGIFT」で、「本文固定・サイドバー可変」となっています。思わず「えっ、広くなるのって本文じゃなくてサイドバーなの？ なんで！？」と声に出してツッコミを入れていました。
有効表示幅
固定レイアウトでは唯一「ネタフル」だけが800px代ですが、他は大体横幅1000pxでの閲覧を想定しているようです。
中には「ホームページを作る人のネタ帳」や「creamu」のように1000px以上を想定しているものもあり、この統計を次回（来年？ 再来年？）にやるときには測定基準を見直す必要が出てくるかもしれません。
広告割合
有効表示領域における広告領域の割合が平均35.3%と、かなりのスペースを占めています。
この数値から各サイトが「広告をどのくらい重視しているのか」がわかります。
特に「ネタフル」・「Google Mania」・「PHPSPOT」・「ホームページを作る人のネタ帳」では50%を越えてしまっていて、サブコンテンツであるべき広告を、メインコンテンツである本文よりも優先しているように感じられます。
もうここまでくると本文を読んで欲しくて記事を書いているのか、それとも広告を踏んで欲しくて記事を書いているのか、各サイトの本質の理解に苦しみます。
1 response
#814: 2009-03-03のjavascript - JavaScriptのまとめブログ
date: 2009/03/04 01:51:57
[...] by WAVEHOUSEさん. カンタンCM作成サイト コマーシャライザー. 2009年版・人気ブログ型サイトのデザイン 第2回 レイアウト編 … 選 | Google Mania – グーグルの便利な使い方; MOONGIFT: ? [...]
permalink to this pingback #814