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

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

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

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

2006年11月25日02:42|記事内容分類：ウェブデザイン|by 松永英明
この記事のリンク用URL|コメント＆トラックバック(21) ≪ 前の記事 ≫ 次の記事
タグ：w3c, ウェブデザイン, ユーザビリティ
はてなブックマークに追加 del.icio.us に追加 MM/Memo に追加
newsing it! LivedoorClip FC2ブックマークへ追加

■画面の広さ

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

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

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

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

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

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

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

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

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

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

• mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 : akiyan.com

　この記事にあるように、実際にサイトを見ているブラウザの大きさに合わせて考えるなら、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 を作りました : akiyan.com
• 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ピクセルになっている会社のサイトがあったとしよう。そのサイトの「弊社へのアクセス」というページには地図が載っているとする。そしてプリントアウトする。

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

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

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

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原理主義」的な反応がいくつか見られる。たとえばこのあたり。

• Voice of Stone #1475 デザインを固定したい症候群

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

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

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

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

【広告】★文中キーワードによる自動生成アフィリエイトリンク

以下の広告はこの記事内のキーワードをもとに自動的に選ばれた書籍・音楽等へのリンクです。場合によっては本文内容と矛盾するもの、関係なさそうなものが表示されることもあります。

2006年11月25日02:42|記事内容分類：ウェブデザイン|by 松永英明
この記事のリンク用URL|コメント＆トラックバック(21) ≪ 前の記事 ≫ 次の記事
タグ：w3c, ウェブデザイン, ユーザビリティ
はてなブックマークに追加 del.icio.us に追加 MM/Memo に追加
newsing it! LivedoorClip FC2ブックマークへ追加