サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論

 このブログの本文の横幅は、かなり狭い。それはなぜか。

 結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。

 このことを実際の統計数値を交えて書いてみたいと思う。

2006年11月25日02:42| 記事内容分類:ウェブデザイン| by 松永英明
この記事のリンク用URL| ≪ 前の記事 ≫ 次の記事
| コメント(15) | トラックバック(7) タグ:w3c, ウェブデザイン, ユーザビリティ|
twitterでこの記事をつぶやく (旧:

画面の広さ

 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも(狭すぎると困るが)はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。

 だから、可変幅というのは、ある意味、無難な正解といえる。

一行の長さは40字前後にしたい

 しかし、画面そのものがかなり大きくなってくると、一行が異常に長くなってしまうという弊害も出てくる。単行本などでは一行が35字~45字くらいにおさまっているが、やはりそれくらいの字数で改行されるのが一番読みやすいのだ。新聞などは1段あたり12~15文字だったりするが、これはかなり短い方になる。ちなみに、さっきリンクした本のサイズと内容の組み立て [絵文録ことのは.]2004/04/05との関連で言うならば、一行の長さが短い場合(たとえば新聞や雑誌の記事)はコラム的な文章が合っているし、逆に一行が40字前後になると小説などに合う長さとなる。

 テキストエディターでも、デフォルトで一行半角80字(すなわち全角40字)設定のものが多いように思うが、やはりそれくらいの字数が読みやすいのだろう。

 となると、「幅可変」サイトは一行が長くなりすぎる。試しに数えてみると、字の大きめのはずの旧デザインでも一行70字を超えていたりする。これは長すぎる。

 そこで、現在のブログでは、横幅を狭めに固定してみることにした。以前のブログは字が大きすぎるという話もあったので、少しフォントサイズを小さくしたが、それでも今で約40字程度(もちろん、フォントサイズ可変なので増減は可能)。これは岩波文庫級ということで、まあ悪くない数値だろう(本当は等幅フォントにしたいのだが、Unicode対応等幅フォントがOSの基本フォントの中に存在していないので断念)。

 ……というのはある意味結果論である。字数を数えて横幅を決めたわけではない。横幅640ピクセル。この数字が前提にあった。

ブラウザに合わせたサイトの横幅は800pxが最適

 ウェブデザイン上、サイトの横幅はどれくらいがいいか。

 この記事にあるように、実際にサイトを見ているブラウザの大きさに合わせて考えるなら、800ピクセルくらいという結論になるだろう。

 画面自体の大きさはどんどん大きくなっている。自分も今月、急にモニターが死んだので、15インチ(1024×768)から19インチ(1280×1024)に買い換えた。急に広くなって、逆に他のところで15インチ画面だと狭くてしょうがなく感じる。

 それはさておき、画面が大きくなっても、それに比例してブラウザが大きくなっているとは一概に言えないようである。うちのサイトのアクセス解析を単純に見れば、

  1. 1024×768……50.0%
  2. 1280×1024……27.2%
  3. 1280×800……5.5%
  4. 1280×768……2.7%
  5. 1600×1200……2.6%
  6. 1400×1050……2.6%
  7. 1680×1050……1.6%
  8. 1152×864……1.3%
  9. 1440×900……1.3%
  10. 800×600……1.0%

となっている。しかし、ブラウザの横幅は、スクロールバーでも縮むし、お気に入りを表示させているとその分やはり縮まってしまう(これを開いている人は案外多い)。普通のアクセス解析では、実際のブラウザサイズがわからないのだ。

ブラウザサイズ解析

 そこで上記記事の筆者akiyanさんが作ったのが、BROWSIZE.ORGである。

BROWSIZE.ORG は、貴方のウェブサイトを訪れるユーザーのブラウザ表示領域サイズを集計・解析する無料サービスです。

 これがほしかったのだ。実際に、ブラウザの画面の幅をどれだけにしている人が多いのかを教えてくれるデータが。

 というわけで、少し前に設置してみたのだが、なかなか興味深い結果が出てきた。以下、このブログでの実際の統計である。数値はここ1週間分。カッコ内は、広いサイズからの累計値である(もとの解析データとしては小さい方からの累計値が表示されるが、広い方からの累計値の方が役に立つと思う)。

  • 0~640……3.2%(100.0%)
  • 641~800……12.9%(96.8%)
  • 801~860……12.1%(84.0%)
  • 861~900……5.8%(71.8%)
  • 901~960……8.6%(66.0%)
  • 961~1024……26.9%(57.4%)
  • 1025~1152……13.6%(30.5%)
  • 1153~1280……13.7%(16.9%)
  • 1281~1400……1.9%(3.2%)
  • 1401~1600……1.0%(1.3%)
  • 1601~2048……0.3%(0.4%)
  • 2049~9999……0.1%(0.10%)

 これで見れば、たとえば横幅800ピクセルにしておけば、3つめの欄を見て、合計84%の人は問題なく見られるだろう、という考え方である。

 900ピクセルで約3分の2、960ピクセルで過半数の人が、横スクロールバーを気にすることなくサイトを見られることがわかる。

 画面自体のサイズとしては現時点で最大多数派の1024ピクセルいっぱいに使ってしまうと、わずか30.5%の人しか快適に見られない。1280ピクセルまで行ってしまうと、わずか3.2%の人だけが満足できるという結果に終わる。

 現実問題として、800ピクセルを推奨する上記akiyan.comの記事は、統計上もかなり納得できる数値であることがわかる。

ではなぜ640pxなのか

 それがわかっていて、私はあえて横幅640ピクセルにした。横幅800ピクセルで文字サイズを大きめにしておけば一行字数問題も解決できるはずである。それなのに狭くしたのは、印刷の問題である。

 今、最も普及しているIE6でページを印刷することを考えてみる。特に何の設定もせずに普通にプリントアウトすれば、横幅およそ640ピクセルくらいまでしか印刷されないはずである。これは非常に厄介な問題である。試しにこんな質問もしてみた。

 たとえば、左にナビゲーションがついていて、横幅が800ピクセルになっている会社のサイトがあったとしよう。そのサイトの「弊社へのアクセス」というページには地図が載っているとする。そしてプリントアウトする。

 見事に、地図がぶった切られてしまうのである。

 地図の右半分が印刷されず、結局、設定し直して紙を横向きにして印刷したり、縮小印刷を試みたりしなければならない。なんでページ一つ印刷するのにこんなに手間をかけねばならないのか。

 これを防ぐ方法は3つである。

  1. サイト自体を横幅可変サイズで設定する。これなら、印刷時にはぴったりと収めてくれる。ただし、内部に含む画像は横幅640ピクセル未満にする必要がある。
  2. 左端から640ピクセルまでを本文、それ以上の部分を右ナビゲーションにする。これなら、切れるのはナビの部分だから、肝心な地図などが切れる心配はない。(サイドバーは右がいいか左がいいかという議論があるが、印刷上は「右」が正解のように思われる)
  3. サイトの横幅そのものを640ピクセルにしてしまう。
  4. 印刷用CSSを別途設定する。

 そこで、第三の選択肢を選んだのが、現在のデザインというわけである。

 もちろん、画面表示用と印刷用で別のCSSを適用させて、画面では800px、印刷のときは640pxという考え方もあるのだが、画像の大きさを結局印刷サイズに合わせておかねばならないこと、また、単純に面倒なことから、CSS対応法は見送った。

将来どうなるか

 IE7では、印刷したときにサイトをきちんと縮小して、全体がプリントアウトされるという(伝聞で書いているのは、まだインストールしていないからである)。しかし、だからといって際限なく大きくできるわけではない。印刷された画像や文字があまりにも小さくなっては困るからである。

 したがって、IE7なら「右端が切れて困る」ことはなくなるとしても、「小さくなりすぎて困る」ことが想定される。また、IEの普及率がどれくらい伸びるかも、しばらく様子見する必要があるだろう。

 だとすれば、やはり(ほとんど)縮小しないでそのまま印刷できるサイズを想定してサイトを作るのも、一つの要素として考慮していいのではないかと思うのだ。

おまけ。アクセス解析結果より

 以下、煩雑になるため、1%以下の項目は表記していない。実際問題として「すべての環境に対応する」ことはあまりにも労力の無駄となりかねないので、残念ながら、少数ユーザーには涙をのんでもらうしかない、と考えるからである。

ブラウザ

  • InternetExplorer……72.3%
    • IE6……62.4%
    • IE7……8.0%
  • Mozilla……20.2%
    • Mozilla1.8.0.8……7.3%
    • Mozilla1.8.1……11.1%
  • Safari……3.5%
  • Opera……2.6%
  • NetscapeNavigator……1.13%

 すでにIE7が8%に及んでいるのは意外だった。しかし、プリインストールされたソフトしか使わない人が多いという実態を考えると、今後IE7へ乗り換えるスピードがどの程度になるのかは不明。もちろん、新しく買ったPCがWindowsVista搭載だった、という人が増えれば、自然とIE7のパーセンテージも高くなるだろう。

 とりあえず、多い順でIE6、Mozilla、IE7の3つを考慮していれば、9割以上の人に対応できることがわかる。

 下のOS統計にあるとおり、Macユーザーは約7%なのに、Safariユーザーはその半分しかいないというのも興味深い。

OS

  • Windows……91.7%
    • Windows98……1.9%
    • WindowsMe……1.6%
    • Windows2000……9.6%
    • WindowsXP……78.2%
  • MacOS……6.9%

 Windowsが9割を超えているが、大半がXPに移行済み。しかし、Macユーザーを上回る1割の2000ユーザーをはじめとして、98やMeもごく一部に残っていることがわかる。

 とりあえず、現時点ではXP、2000、Macあたりを想定しておけば、大体は大丈夫ということだろう。

 なお、Linux系は合計しても1%に満たなかった。あまりの劣勢ぶりには隔世の感がある。

追記

 このエントリーに対して「リキッドデザイン以外は認めない」という「閲覧者の自由至上主義」「W3C原理主義」的な反応がいくつか見られる。たとえばこのあたり。

 極端な話である。まず、このような人たちは文字情報以外のサイト要素(デザインや配色など)もまた情報であるという事実をかなぐり捨てる。そして、閲覧者の自由は語るが、情報を伝える側の意図(配色や配置やデザイン等々)についてはすべて捨てろと言う。また、大多数の人たちは「自分の環境に合わせてカスタマイズ」などしないこと(つまり、現状でいえばXP-IE6のデフォルト設定でしかページを見ることができない)という現実を忘れ、自分のレベルですべてを考える偏狭な視野しかもたない。こういう極端な人種とは論争するだけ時間の無駄である。だって、そういう「他の画像などとのサイズ調整」の必要に迫られたことのない「お幸せな」人たちなんだろうからね。

 私は当然、発信者と受信者の両方を勘案した落としどころとして、プリントのことも考えて「画像は少なくとも640ピクセル」と表現したが、CSSファイル読み込みによるデザインとしているのだから、それ以外の制約はかけていない。

 自分の好きなデザインで見たい(から640px指定は悪)と主張する人は、遠慮なくユーザースタイルシートを適用してください。普段のエントリーなら本文中にstyle指定はしていないので。それに、文字サイズだけなら大きくも小さくもできるようにしてあります。むしろ、このサイトのデザインはかなりユニバーサルデザイン的な方だと思うんだけど。

 そういえば以前「本文フォントサイズを90%にするのはおかしい。100%であるべきだ。それ以下ということは、本文が重要ではないということだ」と主張する人たちがいてげんなりしたが(さすがにW3Cにもそんなことは書いていない)、非実用的・机上の空論的ウェブデザイン論にはみなさんくれぐれもご注意ください。

【広告】★文中キーワードによる自動生成アフィリエイトリンク
以下の広告はこの記事内のキーワードをもとに自動的に選ばれた書籍・音楽等へのリンクです。場合によっては本文内容と矛盾するもの、関係なさそうなものが表示されることもあります。
2006年11月25日02:42| 記事内容分類:ウェブデザイン| by 松永英明
この記事のリンク用URL| ≪ 前の記事 ≫ 次の記事
| コメント(15) | トラックバック(7) タグ:w3c, ウェブデザイン, ユーザビリティ|
twitterでこの記事をつぶやく (旧:

トラックバック(7)

※当ブログへトラックバックされる場合は必ずこのページへのリンクを入れてください。こちらへのリンクのない一方通行トラックバックは承認されません。

トラックバックURL: http://www.kotono8.com/mt5/mt-tb.cgi/545

テキストサイトにおいて、ページの横幅やフォントを固定するのは弊害が大きい。料理にたとえると「目玉焼きには醤油」と決めつけているようなものだ。 続きを読む

とっちゃん坊やのよしなしごと - サイトの横幅の最適解は? (2006年12月 4日 00:02)

【絵文録ことのは】のエントリ「サイトの横幅を640ピクセルにする理由――統計と 続きを読む

国民宿舎はらぺこ 大浴場 - サイトの横幅問題再び (2006年12月 4日 12:50)

まーた乗り遅れた。(苦笑) サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 (絵文録ことのは さま) デザインを固定したい症... 続きを読む

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用... 続きを読む

ロゴ・デザイン・Web2.0 明日の知識に。 続きを読む

サイドバー不要説が最近ブロガーさんたちの間で議論され始めている様子。 煩悩是道場 - ブログのサイドバーって本当に必要? こちらの方は、「何を表示させるか... 続きを読む

最近、サイトの横幅を800pxから900pxに変更しました。 アクセス解析見てみると800x600の解像度で見ている人はほとんどいないし、Yah... 続きを読む

コメント(15)

印刷用のページを生成するように設計すればいいのでは?エントリーのヘッダー部分にプリンターのアイコンからリンクさせるとか。

それをやるくらいなら、CSSでprint設定しています。
でも画像サイズはやはり最初から考えなければいけませんしね。

画像はともかく、文字まで640固定だとやや見づらいのでCSS使うほうが無難ですね。コメントのところのテキストFireFoxだとかなり小さいですよ。

コメントのテキストはIEだろうと何だろうとむちゃくちゃ小さいです。フォントサイズを極小にしているのは、本文と差別化するためです。わざと読みづらくしています。たとえば、荒らされたり、炎上したときでも、文字が小さいと読みたくなくなるでしょうから。

なんで、こんなに悩まれているのかが分かりません。

media="print"でナビゲーションやサイドバーなどをdisplay="none"にして、あとは、div id="wrapper"などの幅を調整してやれば、それで済むと思うんですが。

それなら、サイドバーなどはブラウジング時には表示されるし、印刷時は何も表示されずに、ちゃんと印刷できると。

要は、別に640pxにこだわらずに、CSSでやらなかった理由が正直分からないのです。

コンテンツの表示可能領域と、ディスプレイの解像度は分けて、考えた方がよいと思いますよ。

それからプリンタのことを考えるならば、プリントした場合に関係がないナビゲーションを右に持ってきて、重要なコンテンツを左で、640px以内に納めるという方法もあります。これはプリントする場合が主な目的ではないのですが・・・。

この様なことに関しては、ウェブアクセシビリティとかユニバーサルデザインに関して勉強されると自ずと答えは出てくると思います。

それからアクセス解析ですが、ディスプレイサイズなどの集計だったらGoogleも便利ですよ。

ウェブアクセシビリティとかユニバーサルデザインについてはさんざん読みました。
ウェブアクセシビリティ至上主義とかユニバーサルデザイン至上主義にはついていけないし、現実的ではないというのが結論です。
「ナビゲーションを右」については本文に書いています。
CSSで印刷時と振り分ける話も本文に書いてあります。

余計なコメントをしたようですね。失礼しました。

私も先にコメントされている方同様に、なんで、こんなに今更悩まれているのかが理解できません。CSSを使ったデザインへ世の中が大きく動き始めた頃に、議論され尽くした内容のような気がしてしまいます。確かに面倒なことなんですが・・・。

何か「悩んで」いるのでしょうか、私は?
単に、印刷向きでないサイトを多く見たのでいろいろまとめてみただけの話です。

>松永様
IE7のみならず、Firefox(確か1.5から)にも「用紙サイズにあわせて印刷」する機能があります。ご参考まで。

>K3様
Google Analytics には、ディスプレイの解像度の集計はありますが、ブラウザの描画領域のサイズは集計していないと思います。少なくとも、自分のアカウントではそれらしい情報を見たとこがありません。

画像に関しての解決方法ってないんでしょうか。
リキッドデザインについてはみなさんのおっしゃるとおりですが、画像だけのために640にしています。

最適な横幅を導き出すのに何故 "ピクセル" なのか不思議でならない。
1行の文字量というのは、可変的なフォントサイズで決るのでないか。
そしてフォントサイズは、読者の好みでサイズ設定するものであろう。

読者から観て文字が大きいなら、自身の好みに設定すれば宜しい。
1行が流すぎるなら、読者側でウィンドウを狭めれば宜しい。それだけ。
これが出来ないとするなら、読者側の怠慢としか言いようがない。

読者側の怠慢に乗じて、答えが出ぬことを、然も答えが出るように、
統計の数値だけに基いて勝手に解釈しているようにしか、思われない。
そもそも「1行の最適な長さ」は感覚的な問題であり、個人差がある。

著者は読み易くできる余地だけを残し、後は読者に任せれば宜しい。
読者は読み辛いと感ずるなら、積極的に好みの設定にすれば宜しい。
1つの答えに帰着する事に囚われて、頑迷な態度を執るべきではない。

100人居たら,100人それぞれ異る感覚を持つ、と考えるのが自然だ。
これを無視して、固定的な中庸値を導きだせば、当然反撥が生じるのだ。

はじめまして。とても参考になりました。
私も現在CSSを使ってホームページを作成しているのですが、横幅のサイズには悩みました。当初同じような理由で640ピクセルで作っていたのですが、800x600の画面で普通に見ると(「お気に入り」などが表示されていて)横におさまりきれないのと、確実に印刷されるようにと考え、現在580ピクセルで作り直しています。(個人的なホームページでわざわざプリント用のページをCSSで設定するのは確かに面倒くさいです。)
理想的にはブラウザ利用者が自由に設定を変えられて、自分の見やすい表示方法で見られるのがベストですが、いまのところすべての人---ウェブ製作者も含めて----を満足させることはできないのですから、ウェブ製作者が自分の方針でサイズを決めてもいいのではないかと私も思います。

> それがわかっていて、私はあえて横幅640ピクセルにした。横幅800ピクセルで文字サイズを大きめにしておけば一行字数問題も解決できるはずである。それなのに狭くしたのは、印刷の問題である。

と、あるのですが「絵文録ことのは」では印刷メディアにスタイルシートが適用されていないようです。(なんで?)

プリント用CSSでメニューを勝手に削除する、または右に配置し切れても良いようにする仕様はユーザビリティに沿わない。なぜならユーザーはメニューの必要・不必要を選択する権利を有するべきからだ。 2009年の現在でも家庭に普及しているプリンタのサイズはA4なので、印刷を想定するならば750以下の横幅が適していると考える。自動縮小は意図する大きさで文字や画像が印刷されないことを考えるとかえって扱いにくい機能である。

コメントする

OpenID対応しています OpenIDについて

このブログ記事について

このページは、松永英明が2006年11月25日 02:42に書いたブログ記事です。
同じジャンルの記事は、ウェブデザインをご参照ください。

ひとつ前のブログ記事は「ブログサイト引っ越しの記録」です。

次のブログ記事は「静的生成のブログツールの魅力」です。

最近のコンテンツはインデックスページで見られます。
過去に書かれたものは月別・カテゴリ別の過去記事ページで見られます。