Web基礎 – ページ 3

WEBサイトのデザインなど、サイトヘッダーやコンテンツの幅、高さは時代によって様々変化しています。では、最近のレイアウトはどのようになっているのか、実際に調べた情報を元に指標となるものを考えてみました。

※今回の調査はあくまでも最近のレイアウトトレンドを勝手に考えたものであって、この内容で作れば必ず集客が上がるなどの効果は分かりません。WEBサイトはクライアントやエンドユーザー、制作側の目的によりサイトコンテンツは大きく変わります。それを踏まえた上で記事をお読みください。

今回指標とする調査の内容

「最近のモニタサイズの状況とWEBサイトの測定結果から各コンテンツ幅のベストな組み合わせ」なのですが、ただサイトを測るのもいいのですが、もう少し他の情報が欲しいので、下記にネットで得られる情報を拾ってみました。

世界中でのPCモニタの使用解像度状況

下記サイトは手軽に現状を調べることができるのでとても重宝しています。世界の比較なので、日本と同義にはできませんが、こういう結果が出てますよという一つの説得材料になりますね。

Market share for browsers（現在最新の2010年3月に代わっています）より抜粋

【世界での解像度シェア別上位5 ※2010年2月時】
順位	横幅	高さ	比率
１位	1024px	768px	26.53%
２位	1280px	800px	19.71%
３位	1280px	1024px	10.52%
４位	1440px	900px	8.75%
５位	1680px	1050px	5.49%

これらの解像度は、モニタで定められた解像度の規格そのものです。詳しくは、ウィキペディアより画面解像度での検索を参照してみてください。

この結果から、昔からある解像度の規格（XGA、SXGA）が基本としてよく使われていますが、ワイド画面（16:10）のPCモニタが普及し、世界でも一般化しつつあることが分かります。ちなみに、国内で販売されているPCモニタはほぼワイド液晶で、21インチ以上の大型タイプが比較的安価（2万円前後）で入手できるようなりました。

Webサイト調査条件

では、実際にサイトを測ってみましょう。調査はあるWebサイトのこちらで勝手に指定した任意の1ページとなります。Webサイトをキャプチャし、Fireworksのスライス機能を使い、ざっくりと大まかに調べています。

測定箇所は下記7項目です。

サイトコンテンツ全体の幅
ヘッダーの高さ
グローバルナビゲーションの高さ
メインビジュアルの高さ
メインコンテンツの幅
サイドカラム（あれば2つめも）の幅
フッターの高さ

サイトコンテンツの実測

【Webサイトコンテンツサイズ比較表（単位はpx）】
サイト名	コンテンツ	ヘッダー	グローバルナビゲーション	メインビジュアル	メインコンテンツ	サイドカラム	サイドカラム2	フッター
ソニー	1024	70	23	261	635	252	–	34
オクルココロ	900	86	61	399	462	200	181	150
m/f	950	72	35	220	660	260	–	83
嵐山たなか	903	109	37	392	642	232	–	31
ゼクシィ	942	83	30	215	688	220	–	58
結婚準備室	980	83	36	267	744	220	–	75
ウェディングパーク	930	96	30	370	600	300	–	73
札幌グランドホテル	782	89	60	322	544	201	–	171
マイクロソフト	934	80	45	325	500	197	–	66
ホテルモントレー	940	90	40	390	460	240	240	110
トヨタ自動車	980	32	24	280	560	385	–	17
goo	970	131	–	–	400	200	350	117
msn	974	135	54	–	420	161	350	76
yahoo	950	101	–	–	410	170	350	73
pansonic	967	54	63	367	475	228	229	69

調査から判明したこと

上記実測から分かったことは次の通りです。

サイト全体のコンテンツ幅は、900px～1000pxに集中している
ヘッダー、グローバルナビゲーションの高さが以前より短くなっている
メインコンテンツ幅は500px～600pxあたりが多い
2カラムWebサイトのサイドカラムは200px～300px程度に集中
情報系コンテンツのサイドカラム２（右側）はほぼ350pxに固定
フッターの高さは掲載する内容によりバラツキがある

2008年頃からサイトコンテンツの幅が広がる傾向がありましたが、大企業のサイトが同じような作りになってきていることが分かります。サイトコンテンツ全体の横幅が1000px以内となっているのは解像度1024pxのモニタサイズから、お気に入り分40pxを引いたサイズが基本となっていると思われます。

ヘッダーやグローバルナビゲーション、メインビジュアルの高さは全体的に縮まり、その分ネットブックや16:9のワイドモニタ1画面でも多く情報を表示できるようサイト構成が変わってきている様に見えます。

興味深いのは、情報系サイトは右側のサイドカラムの幅が皆同じになっていること。また、フッターは表示する情報量により高さが大きく変わる傾向があります。個人ブログなどでよく見られるカテゴリーをフッターに持っていく形が該当すると思います。

結論

上記の結果を踏まえ、例として実寸でサイトコンテンツを色分けしたものを作ってみました（下記画像をクリックすると大きな画像が表示されます）。モニタサイズ1024px×768pxを基本に、調査から導き出されたコンテンツサイズを当てはめています。このようなレイアウトを参考にしていけば、最近のトレンドに近いWebサイトの構築が可能となるでしょう。

今後の傾向

他、今後PCモニタの影響からどのようなことが考えられるか、個人的主観ですが挙げておこうと思います。

モニタの比率が16:9に統一化

家庭用テレビのワイド一般化に合わせ、モニタサイズも統一されつつあります。開発側からすれば16:10の方が圧倒的に使いやすいのですが、エンドユーザーにしてみれば、大きさの違うモニタがあるのはおかしいと思われるでしょう。

各端末に合わせた解像度によるサイト構築が進む

iPhoneを皮切りにスマートフォン市場が活発化しつつありますが、これに合わせたWebサイトの構築も進むと考えられます。ただし、PC1レイアウトではなく、小型端末に特化したサイトデザインも合わせて構築する必要性が出てくるということです。

HTMLを覚えるとき、必要なポイントを挙げてみようと思います（今はXHTML1.0が主体と考えていますので、ベースはコチラになります）。

文書構造を理解する。
HTMLには見えない情報と見える情報がある。
命令には意味がある。
最終的な意味づけは制作者側に決定権がある。
文字コードに気をつける。
現在組み方の大枠は決まっている

文書構造を理解する。

人と会話するとき、結論を話さないまま勢いで喋ることがあると思います。結構イライラしますよね。HTMLも記述に順序があり、それを守っていくことが大切です。近い例えでは論文を書くときのように、題名、制作社、概要、大見出し、小見出し、前段、本論、結論など内容を整理してする、ということです。

HTMLには見えない情報と見える情報がある。

HTMLは人間の目に見える箇所とネットへ伝える2つのセクションから成り立っています。目に見える場所は＜body＞タグで囲み、ネットへは＜head＞タグで囲みます。目に見えない箇所にも気をつけて記述します。

命令には意味がある。

例えば＜p＞は段落を意味していて、文章を記述するときに使います。意味づけする言葉に対して意図しないタグを使うのはあまり良くない方法です。

最終的な意味づけは制作者側に決定権がある。

上記と矛盾していますが、HTMLの命令はかなり曖昧なところがあります。文章を箇条書きする場合リストタグを使いますが、単なる箇条書きで良いのか、番号を振った方が良いのか、または定義リストのように説明した方が良いのか、迷う部分があります。残念ながら明確な答えはありません。制作者側がこうと決めているのであればルールから外れていなければ良し、とされています。

文字コードに気をつける。

日本語でWebサイトを閲覧していると、たまに文字化けしているサイトがあると思います。これは日本語の場合、制作する文字の種類が統一されていないために起こる現象です。統一されていなくてもある程度見ることができますが、プログラムの誤動作の遠因になることがあるので、HTMLに限らずWebで記述する言葉は統一した文字コードで記述すると文字化けが回避できます。

現在組み方の大枠は決まっている

現在のHTMLは＜div＞を使ったボックスレイアウトで組み立てるのが一般的です。そして大枠は以下のように記述します。一番上はヘッダー部でロゴなど始まりを示す情報が入ります。次にコンテンツ部として伝えたい情報が入ります。この中にメインコンテンツやメニューなどを記述します。最後に終わりを表すフッター部で、コピーライトなどを入れます。文書構造を学ぶときにセットで覚えてしまいましょう。

カテゴリー: Web基礎

Webレイアウト基礎？2010春 Ver.2