Web屋のネタ帳

ピクセル単位で幅を指定したテーブルタグなどでページ全体を囲み、 ページの横幅を固定しているサイトは少なくない。 しかし、これは一歩間違えると弊害だらけだ。

話しだせばキリがないのだが、代表的な例だけを示しながら説明してゆこう。

横幅を完全に固定したページ

公文式

ピクセル単位で横幅を完全に固定している。

横幅を固定しないページ

アマゾン

テーブルタグを使ってはいるが、その横幅を「100%」としている。

横幅を固定することの弊害はなんだろうか？

ユーザーの画面を無駄にしてしまう

ブラウザのウィンドウを常に最大表示にして見ているユーザーは意外と多い。 ところが、例えば上であげた公文式のページを最大表示で見ると右側に大きな空白が生じてしまう。 これでは何のための最大表示なのだろう？ 紙と違って自分の好きなサイズで見ることができるのがWebのいいところなのに？ その利便性を殺していいのは動画だとかそういう特殊なコンテンツのときだけだ。

ユーザーにブラウザのサイズの調整を強要することになる

逆に、4月ぐらいから新しくなった 日経BPのトップページはどうだろう？ 恐ろしいことにこのページは1024x768サイズの画面でブラウザを常に最大表示で見ることを前提にしてデザインされている。 たしかに上でも書いたように、「ブラウザのウィンドウを常に最大表示にして見ているユーザーは意外と多い。」 がしかし、全員ではない。

何枚かのブラウザを重ね合わせて表示してあっちこっち見て回る移り気なユーザーも間違いなく存在する（テレビのチャンネルをポチポチ変えるのと同じ感覚）。 業務システムのWebページでならともかく、一般公開用のページにおいてすべてのページをこんな広い幅で固定したら、 小さめのウィンドウで見ている人には横スクロールバーの出現という、 Webデザインとして最悪な結果を見せることになる。

「ブラウザのサイズを調整して見てください」と？冗談じゃない！ 郵便のＤＭなら特になにも感じないのに、「激安バイアグラ」のスパム 一本で沸き起こるあの「むかつき」を思い出してほしい。 それはつまり、 ユーザーのパソコンの画面はユーザーのかなりプライベートな空間だということだ。 そのレイアウトの調整に他人が踏み込むとは何事か！？ Webサイト運営者もWebデザイナーも、もう少し、ユーザーの心理を学ぶべきだ。

ちなみに、日経BPのトップページをブラウザを幅600ピクセルぐらいにして見ると、 中央の記事は見えるが右側の広告は見えない。 収入源であるはずの広告を見せにくいデザイン。あきれてものも・・・(笑)

結局のところどうするべきなのだろうか？ ブラウザの大きさを最大にしても小さめにしてもそれなりに見えるデザイン＝リキッドデザインにするのがベストだ。 お手本はもちろんアマゾン。 このリキッドデザインは、「見る画面」だけでなく、「印刷できる画面」をつくることができる。 ちなみに上で紹介した公文式 のページのいくつかは、A4に印刷すると端っこが切れて見えない。 これも固定幅デザインの弊害のひとつである。

印刷専用のページを別途作ればいい？ それは確かにひとつの方法だが、 はじめからリキッドデザインする場合と比べてみると余計なコストであることには間違いない。

ちょっとまって、あのYahoo!のトップページは、 横幅を固定してるじゃないか？

そう、675ピクセルの横幅で固定したテーブルタグを使っている。これはどう説明するべきなのだろう？ おそらく、各コンテンツのトップページだけは固定幅にすることで、 「ほら、いつものやつだよ」という安心感(?)のようなものを演出しているのかもしれない。

さて、「後悔しないWebデザイン」という副題での記事は今後もときどき書き続けようと思う。 断っておきたいが、この記事を含め、今後ここで書く内容はすべてのWebサイトにあてはまるとは全く限らない。 特に、芸術性を重視するタイプのサイトでは横幅固定やフォントサイズ固定は必須だろうし、それを否定するつもりはまったくない。 筆者が想定するサイトは無視できない数の初心者ユーザーがいるECサイトやニュースサイト、企業のサイトなどである。

See also:

• 用紙幅に収まるようにWebページを印刷するツールを無償公開byエプソン
• 印刷できるページを作るには