サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論このブログの本文の横幅は、かなり狭い。結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。このことを実際の統計数値を交えて書いてみたいと思う。)■画面の広さ以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。ここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも(狭すぎると困るが)はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。可変幅というのは、ある意味、無難な正解といえる。■一行の長さは40字前後にしたいしかし、画面そのものがかなり大きくなってくると、一行が異常に長くなってしまうという弊害も出てくる。単行本などでは一行が35字~45字くらいにおさまっているが、やはりそれくらいの字数で改行されるのが一番読みやすいのだ。新聞などは1段あたり12~15文字だったりするが、これはかなり短い方になる。[絵文録ことのは.]2004/04/05との関連で言うならば、一行の長さが短い場合(たとえば新聞や雑誌の記事)はコラム的な文章が合っているし、逆に一行が40字前後になると小説などに合う長さとなる。テキストエディターでも、デフォルトで一行半角80字(すなわち全角40字)設定のものが多いように思うが、やはりそれくらいの字数が読みやすいのだろう。なると、「幅可変」サイトは一行が長くなりすぎる。試しに数えてみると、字の大きめのはずの旧デザインでも一行70字を超えていたりする。そこで、現在のブログでは、横幅を狭めに固定してみることにした。以前のブログは字が大きすぎるという話もあったので、少しフォントサイズを小さくしたが、それでも今で約40字程度(もちろん、フォントサイズ可変なので増減は可能)。これは岩波文庫級ということで、まあ悪くない数値だろう(本当は等幅フォントにしたいのだが、Unicode対応等幅フォントがOSの基本フォントの中に存在していないので断念)。......というのはある意味結果論である。字数を数えて横幅を決めたわけではない。この数字が前提にあった。■ブラウザに合わせたサイトの横幅は800pxが最適ウェブデザイン上、サイトの横幅はどれくらいがいいか。akiyan.comこの記事にあるように、実際にサイトを見ているブラウザの大きさに合わせて考えるなら、800ピクセルくらいという結論になるだろう。画面自体の大きさはどんどん大きくなっている。自分も今月、急にモニターが死んだので、15インチ(1024×768)から19インチ(1280×1024)に買い換えた。急に広くなって、逆に他のところで15インチ画面だと狭くてしょうがなく感じる。それはさておき、画面が大きくなっても、それに比例してブラウザが大きくなっているとは一概に言えないようである。うちのサイトのアクセス解析を単純に見れば、1024×768......50.0%1280×1024......27.2%1280×800......5.5%1280×768......2.7%1600×1200......2.6%1400×1050......2.6%1680×1050......1.6%1152×864......1.3%1440×900......1.3%800×600......1.0%となっている。ブラウザの横幅は、スクロールバーでも縮むし、お気に入りを表示させているとその分やはり縮まってしまう(これを開いている人は案外多い)。普通のアクセス解析では、実際のブラウザサイズがわからないのだ。■ブラウザサイズ解析そこで上記記事の筆者akiyanさんが作ったのが、BROWSIZE.ORGである。貴方のウェブサイトを訪れるユーザーのブラウザ表示領域サイズを集計・解析する無料サービスです。これがほしかったのだ。実際に、ブラウザの画面の幅をどれだけにしている人が多いのかを教えてくれるデータが。いうわけで、少し前に設置してみたのだが、なかなか興味深い結果が出てきた。以下、このブログでの実際の統計である。カッコ内は、広いサイズからの累計値である(もとの解析データとしては小さい方からの累計値が表示されるが、広い方からの累計値の方が役に立つと思う)。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ピクセルくらいまでしか印刷されないはずである。これは非常に厄介な問題である。試しにこんな質問もしてみた。ブラウザで表示されたページをそのまま特に設定せずにA4縦で印刷したとします。横幅何ピクセルまで印刷できますか。縮小印刷とかそういう手間をかけず、ブラウザでのデフォルト設定が知りたいです。プリンターによっても違いはあると思いますが......。左にナビゲーションがついていて、横幅が800ピクセルになっている会社のサイトがあったとしよう。そのサイトの「弊社へのアクセス」というページには地図が載っているとする。見事に、地図がぶった切られてしまうのである。地図の右半分が印刷されず、結局、設定し直して紙を横向きにして印刷したり、縮小印刷を試みたりしなければならない。なんでページ一つ印刷するのにこんなに手間をかけねばならないのか。これを防ぐ方法は3つである。サイト自体を横幅可変サイズで設定する。これなら、印刷時にはぴったりと収めてくれる。内部に含む画像は横幅640ピクセル未満にする必要がある。左端から640ピクセルまでを本文、それ以上の部分を右ナビゲーションにする。これなら、切れるのはナビの部分だから、肝心な地図などが切れる心配はない。(サイドバーは右がいいか左がいいかという議論があるが、印刷上は「右」が正解のように思われる)サイトの横幅そのものを640ピクセルにしてしまう。印刷用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ユーザーはその半分しかいないというのも興味深い。■OSWindows......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原理主義」的な反応がいくつか見られる。