ピクセルとは？/ レイク
[ 321] サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論 [絵文録ことのは]2006/11/25
[引用サイト] http://www.kotono8.com/2006/11/25640px.html
|
結論から言えば、「ブラウザで見るときの実際の横幅」と「印刷可能な横幅」の二つの要素が大きな要因となっている。画面そのものはかなり広くても、実際に見るサイズ、そして印刷したときにはみ出ないサイズというのは案外小さい。 以前の旧デザインでは、横幅を指定せず、可変幅で表示していた。たとえばここなどを見てもらえばわかるが、ブラウザを小さくすればそれに応じてサイズが縮まる。したがって、どんな幅のブラウザでも（狭すぎると困るが）はみ出ることはないし、また、印刷するときにもきちんと印刷される。画面上で見るときの「横スクロール」というのは想像以上に鬱陶しい。 しかし、画面そのものがかなり大きくなってくると、一行が異常に長くなってしまうという弊害も出てくる。単行本などでは一行が35字〜45字くらいにおさまっているが、やはりそれくらいの字数で改行されるのが一番読みやすいのだ。新聞などは1段あたり12〜15文字だったりするが、これはかなり短い方になる。ちなみに、さっきリンクした本のサイズと内容の組み立て [絵文録ことのは.]2004/04/05との関連で言うならば、一行の長さが短い場合（たとえば新聞や雑誌の記事）はコラム的な文章が合っているし、逆に一行が40字前後になると小説などに合う長さとなる。 テキストエディターでも、デフォルトで一行半角80字（すなわち全角40字）設定のものが多いように思うが、やはりそれくらいの字数が読みやすいのだろう。 となると、「幅可変」サイトは一行が長くなりすぎる。試しに数えてみると、字の大きめのはずの旧デザインでも一行70字を超えていたりする。これは長すぎる。 そこで、現在のブログでは、横幅を狭めに固定してみることにした。以前のブログは字が大きすぎるという話もあったので、少しフォントサイズを小さくしたが、それでも今で約40字程度（もちろん、フォントサイズ可変なので増減は可能）。これは岩波文庫級ということで、まあ悪くない数値だろう（本当は等幅フォントにしたいのだが、Unicode対応等幅フォントがOSの基本フォントの中に存在していないので断念）。 ……というのはある意味結果論である。字数を数えて横幅を決めたわけではない。横幅640ピクセル。この数字が前提にあった。 この記事にあるように、実際にサイトを見ているブラウザの大きさに合わせて考えるなら、800ピクセルくらいという結論になるだろう。 それはさておき、画面が大きくなっても、それに比例してブラウザが大きくなっているとは一概に言えないようである。うちのサイトのアクセス解析を単純に見れば、 となっている。しかし、ブラウザの横幅は、スクロールバーでも縮むし、お気に入りを表示させているとその分やはり縮まってしまう（これを開いている人は案外多い）。普通のアクセス解析では、実際のブラウザサイズがわからないのだ。 これがほしかったのだ。実際に、ブラウザの画面の幅をどれだけにしている人が多いのかを教えてくれるデータが。 というわけで、少し前に設置してみたのだが、なかなか興味深い結果が出てきた。以下、このブログでの実際の統計である。数値はここ1週間分。カッコ内は、広いサイズからの累計値である（もとの解析データとしては小さい方からの累計値が表示されるが、広い方からの累計値の方が役に立つと思う）。 それがわかっていて、私はあえて横幅640ピクセルにした。横幅800ピクセルで文字サイズを大きめにしておけば一行字数問題も解決できるはずである。それなのに狭くしたのは、印刷の問題である。 今、最も普及しているIE6でページを印刷することを考えてみる。特に何の設定もせずに普通にプリントアウトすれば、横幅およそ640ピクセルくらいまでしか印刷されないはずである。これは非常に厄介な問題である。試しにこんな質問もしてみた。 人力検索はてな - ブラウザで表示されたページをそのまま特に設定せずにＡ４縦で印刷したとします。 横幅何ピクセルまで印刷できますか。 縮小印刷とかそういう手間をかけず、ブラウザでのデフォルト設定が知りたいです。もちろん、プリンターによっても違いはあると思いますが……。 たとえば、左にナビゲーションがついていて、横幅が800ピクセルになっている会社のサイトがあったとしよう。そのサイトの「弊社へのアクセス」というページには地図が載っているとする。そしてプリントアウトする。 地図の右半分が印刷されず、結局、設定し直して紙を横向きにして印刷したり、縮小印刷を試みたりしなければならない。なんでページ一つ印刷するのにこんなに手間をかけねばならないのか。 サイト自体を横幅可変サイズで設定する。これなら、印刷時にはぴったりと収めてくれる。ただし、内部に含む画像は横幅640ピクセル未満にする必要がある。 左端から640ピクセルまでを本文、それ以上の部分を右ナビゲーションにする。これなら、切れるのはナビの部分だから、肝心な地図などが切れる心配はない。（サイドバーは右がいいか左がいいかという議論があるが、印刷上は「右」が正解のように思われる） IE7では、印刷したときにサイトをきちんと縮小して、全体がプリントアウトされるという（伝聞で書いているのは、まだインストールしていないからである）。しかし、だからといって際限なく大きくできるわけではない。印刷された画像や文字があまりにも小さくなっては困るからである。 したがって、IE7なら「右端が切れて困る」ことはなくなるとしても、「小さくなりすぎて困る」ことが想定される。また、IEの普及率がどれくらい伸びるかも、しばらく様子見する必要があるだろう。 だとすれば、やはり（ほとんど）縮小しないでそのまま印刷できるサイズを想定してサイトを作るのも、一つの要素として考慮していいのではないかと思うのだ。 以下、煩雑になるため、1%以下の項目は表記していない。実際問題として「すべての環境に対応する」ことはあまりにも労力の無駄となりかねないので、残念ながら、少数ユーザーには涙をのんでもらうしかない、と考えるからである。 このエントリーに対して「リキッドデザイン以外は認めない」という「閲覧者の自由至上主義」「W3C原理主義」的な反応がいくつか見られる。たとえばこのあたり。 極端な話である。まず、このような人たちは文字情報以外のサイト要素（デザインや配色など）もまた情報であるという事実をかなぐり捨てる。そして、閲覧者の自由は語るが、情報を伝える側の意図（配色や配置やデザイン等々）についてはすべて捨てろと言う。また、大多数の人たちは「自分の環境に合わせてカスタマイズ」などしないこと（つまり、現状でいえばXP-IE6のデフォルト設定でしかページを見ることができない）という現実を忘れ、自分のレベルですべてを考える偏狭な視野しかもたない。こういう極端な人種とは論争するだけ時間の無駄である。だって、そういう「他の画像などとのサイズ調整」の必要に迫られたことのない「お幸せな」人たちなんだろうからね。 私は当然、発信者と受信者の両方を勘案した落としどころとして、プリントのことも考えて「画像は少なくとも640ピクセル」と表現したが、CSSファイル読み込みによるデザインとしているのだから、それ以外の制約はかけていない。 自分の好きなデザインで見たい（から640px指定は悪）と主張する人は、遠慮なくユーザースタイルシートを適用してください。普段のエントリーなら本文中にstyle指定はしていないので。それに、文字サイズだけなら大きくも小さくもできるようにしてあります。むしろ、このサイトのデザインはかなりユニバーサルデザイン的な方だと思うんだけど。 そういえば以前「本文フォントサイズを90%にするのはおかしい。100%であるべきだ。それ以下ということは、本文が重要ではないということだ」と主張する人たちがいてげんなりしたが（さすがにW3Cにもそんなことは書いていない）、非実用的・机上の空論的ウェブデザイン論にはみなさんくれぐれもご注意ください。 以下の広告はこの記事内のキーワードをもとに自動的に選ばれた書籍へのリンクです。場合によっては本文内容と矛盾するもの、関係なさそうなものが表示されることもあります。 印刷用のページを生成するように設計すればいいのでは？エントリーのヘッダー部分にプリンターのアイコンからリンクさせるとか。 コメントのテキストはIEだろうと何だろうとむちゃくちゃ小さいです。フォントサイズを極小にしているのは、本文と差別化するためです。わざと読みづらくしています。たとえば、荒らされたり、炎上したときでも、文字が小さいと読みたくなくなるでしょうから。 それなら、サイドバーなどはブラウジング時には表示されるし、印刷時は何も表示されずに、ちゃんと印刷できると。 テキストサイトにおいて、ページの横幅やフォントを固定するのは弊害が大きい。料理にたとえると「目玉焼きには醤油」と決めつけているようなものだ。 それからプリンタのことを考えるならば、プリントした場合に関係がないナビゲーションを右に持ってきて、重要なコンテンツを左で、640px以内に納めるという方法もあります。これはプリントする場合が主な目的ではないのですが・・・。 この様なことに関しては、ウェブアクセシビリティとかユニバーサルデザインに関して勉強されると自ずと答えは出てくると思います。 ウェブアクセシビリティ至上主義とかユニバーサルデザイン至上主義にはついていけないし、現実的ではないというのが結論です。 私も先にコメントされている方同様に、なんで、こんなに今更悩まれているのかが理解できません。CSSを使ったデザインへ世の中が大きく動き始めた頃に、議論され尽くした内容のような気がしてしまいます。確かに面倒なことなんですが・・・。 私も現在CSSを使ってホームページを作成しているのですが、横幅のサイズには悩みました。当初同じような理由で640ピクセルで作っていたのですが、800x600の画面で普通に見ると（「お気に入り」などが表示されていて）横におさまりきれないのと、確実に印刷されるようにと考え、現在580ピクセルで作り直しています。（個人的なホームページでわざわざプリント用のページをCSSで設定するのは確かに面倒くさいです。） 理想的にはブラウザ利用者が自由に設定を変えられて、自分の見やすい表示方法で見られるのがベストですが、いまのところすべての人---ウェブ製作者も含めて----を満足させることはできないのですから、ウェブ製作者が自分の方針でサイズを決めてもいいのではないかと私も思います。 > それがわかっていて、私はあえて横幅640ピクセルにした。横幅800ピクセルで文字サイズを大きめにしておけば一行字数問題も解決できるはずである。それなのに狭くしたのは、印刷の問題である。 と、あるのですが「絵文録ことのは」では印刷メディアにスタイルシートが適用されていないようです。（なんで？） この記事へトラックバックする場合は、このトラックバック用URLを、あなたのウェブログ等の投稿ページの「トラックバック先のURL」欄に入れて更新してください。 トラックバックが重複しても削除依頼コメントは不要です。見つけ次第適当に消します。こちらの記事へのリンクのないトラックバックは受け付けていません。無関係な記事からのトラックバック、宣伝のみのspamトラックバックは削除することがあります。記事内容と関係のないコメントは削除します。 |
レイクのサイトです。
