Website Usability Info



Webページの横幅について

Webページの「横幅」について、皆さんのサイトでは、どのようにされていますでしょうか?
固定幅にしているサイトもあれば、リキッドレイアウト(ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト)にしているサイトもあるでしょう。いずれにしても、ユーザビリティの観点から、横スクロールが発生しないことが望ましいとされています。というのも、横スクロールをしなければ見れないページですと、一行読むたびに右へ/左へとスクロールしなければならず、(仮に一文字分だけスクロールしなければならない程度だとしても)ユーザーに大きなフラストレーションを与えてしまうからです。

だからといって、厳密に「あらゆるブラウザ表示幅においても横スクロールが発生しないこと」を実現するのは、非現実的かもしれませんね。テキスト(文字情報)のみのページであれば別ですが、メディアとしてこれだけWebの影響力が大きくなってきている昨今、それなりの解像度の画像を使ってエモーショナルに訴求したい場合もあると思うからです。

そんな中での落としどころとしては、(パソコン画面での閲覧を前提とした場合)「画面解像度800×600ピクセルの状態で表示しても横スクロールが発生しないこと」になろうと思います。「800×600?うちのサイトに来るお客さんは解像度が1,024×768ピクセルが圧倒的だから、もう少し幅広くしても良いんじゃないの?」と思うウェブマスターさんもいらっしゃるかもしれませんね。アクセスログ解析をしてみると、確かに、今の主流は1,024×768ピクセル以上で、800×600ピクセルの人はごくわずかだったりすることでしょう(多少、サイトによって異なるとは思いますが)。ちなみに、現在販売されている小型のノートパソコンでも、画像解像度は1,024×768ピクセルあるのが普通ですし、1,280×1,024ピクセルの高解像度パソコンも多く出回っています。それでも、敢えて落としどころとして「800×600」にこだわるのは、以下の理由によります。

  • アクセシビリティ(Webにおけるユニバーサルデザイン)の観点から、少数派ユーザーも救いたい。
  • 画面解像度が1,024×768以上ある場合、ブラウザの左側に閲覧履歴を表示するユーザーも少なくなく、その場合(ブラウザを全画面表示したとしても)、実質的な表示領域は横幅800ピクセル前後になってしまう。

なお昨今では、ユーザーの多様な閲覧環境にフレキシブルに対応すべく、リキッドレイアウトが良いという意見もよく聞かれます。ただしリキッドレイアウトにすると、高解像度の画面でブラウザ表示幅を広げた場合、一行あたりの文字数が多くなりすぎる(かえって可読性を下げてしまう)リスクもあります。このあたりは、コンテンツ内容も含めて、バランスよく考慮する必要があるでしょう。

ちなみに当サイトでは、リキッドレイアウトは採用せず、横幅を770ピクセルで固定しています。800ピクセルより少し狭いのは、仮に800×600の画面でブラウザを全画面表示してご覧いただいたとしても、ブラウザの縦スクロールバーの分だけ表示領域が狭まるからです。

(2007年2月18日 17:42)

このエントリーを含むはてなブックマークはてなブックマークこのエントリーのはてなブックマーク数 livedoorクリップへ追加livedoorクリップこのエントリーのlivedoorクリップ数 Buzzurlへ追加BuzzurlこのエントリーのBuzzurlブックマーク数 add to del.icio.usdel.icio.us POOKMARK Airlinesへ追加POOKMARK Airlines ニフティクリップへ追加ニフティクリップ 

いただいたコメント(2通)

リキッドレイアウトがさらに進化したといえるエラステックレイアウトがグッドだと思います。
通常90%、
最短で720ピクセル、
最長で40em
てな感じ。

ちょっと補足
最長で本文が40emぐらい

コメントを投稿する

(投稿いただいたコメントは、当サイト管理者による承認後、公開させていただきます。)


トラックバック

この記事に対するトラックバックURL:
http://website-usability.info/cgi/mt/mt-tb.cgi/71