ウェブサイトの横幅について: 小粋空間

Top ＞お知らせ＞ blog ＞ウェブサイトの横幅について

ウェブサイトの横幅について

Posted at October 6,2006 12:50 AM
Tag：[Website]

近いうちにサイトのデザイン（というよりレイアウト）を少しだけ変更しようと思っています。サイト開設からこれまで一貫してリキッドレイアウトで運用してきたのですが、

「固定カラムにする場合、横幅を何ピクセルにすれば良いのだろう？」

と思い、ちょっと調べてみました。
サイトデザイン（幅）で悩んでいる方には役に立つかもしれない内容です。

私が普段使っているディスプレイの解像度は SXGA（1280×1024）といわれるものです。横幅が 1280px に近いサイトはほとんど存在しないため、サイトの横幅というものをあまり気にしたことはなかったのですが、試しに画面のプロパティで解像度を、

SVGA（800×600）
XGA（1024×768）

にそれぞれ変更してみたところ、（当たり前かもしれませんが）この2つの解像度を考慮した横幅になっているサイト（サービス・ツール）があることに気がつきました。

個人的によく利用するサービス・ツールを上記2つの種類に分類した結果が下記の通りです。

SVGA: Blogger; BlogPeople; FeedBurner; mixi（メイン画面）; Movable Type 管理画面; Serene Bach 管理画面; Research Artisan(メイン画面); Yahoo!（メイン画面）

XGA: Google Analytics; mixi（ログイン後）; Research Artisan(ログイン後); YouTube; Vox; Web Artisan Search

ここに含まれていないサービスは、

リキッドレイアウト
どちらにも属さない（解像度に合わせていない固定幅）

のいずれか（または私が利用していない）で、「リキッドレイアウト」派が意外に多かったことに気がつきました。「どちらにも属さない」サービスは少数派です。

参考までに、ディスプレイの解像度には以下のような種類があります。

名称	解像度（横×縦）
QVGA（Quarter-VGA）	320×240
CGA	640×240
VGA	640×480
SVGA	800×600
XGA	1024×768
SXGA（Super-XGA）	1280×1024
SXGA+	1400×1050
UXGA（Ultra-XGA）	1600×1200
QXGA（Quad-XGA）	2048×1536
QUXGA（Quad-Ultra-XGA）	3200×2400
QUXGA Wide	3840×2400

また、当サイトの閲覧者が利用しているディスプレイの解像度ベスト30です。データは Google Analytics の直近1週間の値にもとづいています。

	解像度	割合
1	1024x768	36.93%
2	1280x1024	36.25%
3	1280x800	4.24%
4	1600x1200	4.17%
5	1400x1050	3.30%
6	1680x1050	3.23%
7	1280x768	2.99%
8	1920x1200	2.00%
9	1152x864	1.59%
10	1280x960	1.27%
11	1440x900	1.22%
12	800x600	0.51%
13	1280x854	0.48%
14	1366x768	0.39%
15	1152x870	0.17%
16	1280x720	0.15%
17	2560x1024	0.14%
18	1440x960	0.14%
19	2560x1600	0.11%
20	1600x1024	0.09%
21	1360x768	0.09%
22	2048x1536	0.06%
23	1024x600	0.05%
24	1024x1280	0.05%
25	1152x768	0.04%
26	1920x1440	0.04%
27	1344x1008	0.04%
28	1360x1024	0.03%
29	1120x840	0.02%
30	1920x1080	0.02%

XGA・SXGA で 73% を占めており、3位以降も横幅が広い解像度が続き、10位までで 96% 近くの方が XGA 以上（うち横幅が SXGA 以上が 57%）のディスプレイを利用されています。

また、SVGA が 12位、割合も 0.51% と、かなり利用者が減少していることがお分かりになると思います。だからといって「無視していい」ということにはならないのですが、興味深いデータと言えるでしょう。

本題と関係ありませんが、このエントリーで用いているテーブルは下記の記事を参考にさせて頂きました。ありがとうございました。

Lucky bag::blog：tableの見栄えをCSSで整える

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

どうもどうも。
私の場合、ディスプレイの解像度は1600x1200なのですが、ブラウザの幅を800にしているので、基本横幅750で作成しています。

どうしてもその幅じゃ足りないときは、1024x768の画面想定で作りますけどね?。

まあ、たいていはSVGA相当の幅でないと、コンテンツが少なくてスカスカになってしまうという悩みも…。

[1] Posted by Toshix : October 6, 2006 1:05 PM

最近のサイトだと、液晶ディスプレイの関係も合ってか、XGAクラスを良く見かけるような気がしますね。
うちもXGAで考えるようにしてます。

・・・っと、重箱の隅をつつくようで申し訳ないですが、VGAとは必ずしも640＊480では無いですよ。
どうやら、640＊480以上のいくつかの形式を指すと、シスアドの本に敢えて注釈が載ってました。
でも、だいたい640＊480の意味で使われている気がしますけどね。(^^A

[2] Posted by Ｆｅａｒウルフ : October 6, 2006 10:27 PM

＞Toshixさん
こんばんは。
なるほど、大きなディスプレイを使っていてもその幅でブラウザを使う訳ではない、言い換えるとディスプレイの解像度と閲覧する時のブラウザ幅は別物、ということですね。

＞Ｆｅａｒウルフさん
こんばんは。
私はXGAにするかどうか悩んでいるところです。

情報もありがとうございます。
勉強になりました！

[3] Posted by yujiro : October 9, 2006 2:22 AM

こんばんは。
ブログのカスタマイズでカラムの横幅を変更した結果、エントリーアーカイブから生成された記事の右カラムだけ表示がずれてしまいます。ほかのインデックスページなどはちゃんと表示されるのですが。。ぜひアドバイスをお願いします。

環境
・左右のカラムの中身はphp化しています。
・幅の設定　205ｐｘ　478ｐｘ　205ｐｘ　（左カラム　中央カラム　右カラム）　全体の幅は890ｐｘにしています。
・解像度　1400x1050

こんな感じです。よろしくお願いします。

[4] Posted by Chipmunk : February 10, 2007 1:13 AM

ｙｕｊｉｒｏさん、何とか解決できました。。どうやらエンドタグが一つ余計だったみたいですorz　なにかこうインデントしてくれるツールとかってありませんか？
それとデザインを変えるとしばらくはｆｉｒｅｆｏｘでの表示がおかしくなるのですがどうしたらよいでしょうか？

[5] Posted by milk-cocoa : February 10, 2007 3:12 AM

＞milk-cocoaさん
こんにちは。
ご質問の件ですが、Firefox の表示がおかしい点につきましては、テンプレートの検索フォームに下記の青色のタグを追加してください。

　　　　：
<div class="side">
<form method="get" action="http://www.milk-cocoa.com/cgi/mt/mt-search.cgi">
<input type="hidden" name="IncludeBlogs" value="8" />
<!--<label for="search" accesskey="4">サイト内の検索</label><br />-->
<input id="search" tabindex="5"  accesskey="t" name="search" size="20" value="" /><br />
<input type="submit" tabindex="6" accesskey="s" value="Search" />
</form>
</div>
　　　　：

インデントツールについては別途エントリーしたいと思います。
それではよろしくお願い致します。

[6] Posted by yujiro : February 12, 2007 12:29 PM

yujiroさん、無事解決しました。どうやら今までずっとタグがなかったようです。助かりました、ありがとうございます☆

[7] Posted by milk-cocoa : February 12, 2007 4:15 PM

＞milk-cocoaさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは！

[8] Posted by yujiro : February 13, 2007 1:05 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

Now loading...