気持ちのいいサイトとは(1)~画面幅~

建築でいう設計図にあたるのが、ワイヤーフレーム(ページ構成書、あるいはページ設計書)です。ワイヤーフレームで細かなルールや機能を明確にしておかなければ“気持ちのいいサイト”は作れません。これから数回にわたって、ワイヤーフレームを作成するときのポイントを紹介します。第1回目は、「画面幅」について説明します。

Webサイトの画面幅を決めるときの基準はあるのでしょうか?

あくまでも参考ですが、以下が筆者のブログに訪れたユーザーの画面解像度です。セッション数は大きな違いがありますが、比率はポータルサイトなどで行っている調査とあまり差はありません。

20090508

1位:1024x768px 970 29.56%
2位:1280x1024px 619 18.87%
3位:1280x800px 617 18.81%
4位:1680x1050px 262 7.99%
5位:1440x900px 217 6.61%
6位:1920×1200 167 5.09%
7位:1600×1200 82 2.50%
8位:1280×768 76 2.32%
9位:1400×1050 60 1.83%
10位:1366×768 29 0.88%

順位/解像度/セッション/比率
(Google Analytics/3,281セッション対象)

全体の30%近い割合を占めるのが「1024×768px」で、A4サイズのノートPCで閲覧していることが想定されます。次に「1280x1024px」、「1280x800px」と続き、1280px幅は全体の40%を占めているのがわかります。

この調査結果をもとに大きく3つに分類すると、1024px幅:30%、1280px幅:40%、1280px幅以上30%となります。ちなみに、1024px幅より小さい画面で閲覧しているユーザーは0.3%ほどです。

Webブラウザで閲覧されることだけを想定すれば、最も解像度の低い1024px幅を基準にすれば、横スクロールを回避することができます。

上記のような理由から現状ほとんどのWebサイトが、この1024px幅を基準に作成されています。ブラウザの外枠やスクロールバーの幅を考慮すると、画面いっぱいに作成する場合は「980px幅」、お気に入りリストや履歴リストなどが常時表示(200px幅前後)されていることを想定すると「760px 幅」という2つの「ページ幅」にたどりつきます。

それでは、どちらの幅でワイヤーフレームを作成するのがいいのでしょうか?
次回は、「980px幅」と「760px幅」のメリット・デメリットについて考察していきます。

※この記事は2008年9月~ All About Profile に掲載していたものを移設しています。
cCopyright 2009 xyz corporation. All Rights Reserved.

カテゴリー: Web制作   タグ:   この投稿のパーマリンク

気持ちのいいサイトとは(1)~画面幅~ への1件のコメント

  1. Yahoouj より:

    Really good work about this website was done. Keep trying more – thanks!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>