ホームページ横幅の基準サイズは800ピクセルが妥当

11. 横幅800ピクセルを基準にせよ！

横スクロールバーって疲れない？
だって縦みたいにマウスホイールが使えないんだもん！

画面のデザインを考える時に、
横幅の基準（ピクセル数）を
あらかじめ決めておかなければならない。

インターネットを閲覧する環境は、
各ユーザによってさまざまである。

デスクトップＰＣ、ノートＰＣの違いもあれば、
ディスプレイ、画面サイズの大きさなども考慮
しなければならない。

また、大きなディスプレイを使っている人でも、
ブラウザを画面いっぱいに広げて使っている人は少ないだろう。

それに対して、小型（Ｂ５）のノートＰＣなどでは、
画面いっぱいのサイズに広げなければ、
ほとんどのサイトで「横スクロールバー」が発生してしまう。

画面デザインにおいては、縦の幅よりも、
横の幅に気をつけなければならない。

縦の幅は多少長くなっても、ホイール付きマウスが常識になっている現在では、
縦スクロールにそれほどストレスを感じる人は少ないだろう。

しかし、横スクロールとなれば話しは別だ。
横スクロールをするためには、横スクロールバーにマウスカーソル
を合わせるという面倒な手間がストレスになってしまう。

では、最適な横幅の長さはどれぐらいなのか？
現在のデファクトスタンダード（業界標準）としては、

横幅は最大で800ピクセル

という考え方が一般的だ。

Yahoo!のトップページを見れば分かると思うが、
左右にかなりの余白（マージン）を取るようになっている。

だから、１７インチのディスプレイで画面いっぱいにブラウザを
広げて見てみると、左右にかなりの隙間を感じる。

そのため、１７インチ以上のディスプレイを使っている人でも、
Yahoo!の表示幅に合わせて、普段はブラウザのウインドウサイズを
小さめに調整して使っているはずだ。

つまり、世の中のほとんどの人が、無意識のうちに
「ブラウザのサイズを横800ピクセル程度に設定している」
ということになる。

だから、画面デザインを考える時に、
テーブルの横幅とか、改行位置とか、ヘッドコピーロゴのサイズなど、
すべてが横800ピクセル以内に収まるデザインにすればよいのだ。

ちなみに私の場合は、横幅の最大を780ピクセル以内にするようにしている。
これは、画面の最大表示ピクセル数が横幅800ピクセルのパソコンを考慮している。

私は以前、1998年製のＶＡＩＯノート（Ｂ５サイズ）を使っていたが、そのパソコンの
縦横サイズは 600×800 ピクセルだった。現在では最低でも 768×1024 が
主流だが、今でも旧式のパソコンを使っている人のことを考慮している。

そして画面サイズが横800の場合、実際のページの表示領域は800よりも少なくなる。
ブラウザの縦スクロールバー領域が10ピクセルほどの幅を占領するからだ。

Yahoo!に限らず、ほとんどの大手商用サイトは、
この法則に従って作成されている。
だから、デファクトスタンダード（業界標準）なのだ。

つまり、一番小さな画面サイズのパソコンに合わせているのだが、
じゃあ大きな画面のパソコンを使っている人にはどう見えるのか？
も忘れてはならない。

だから、ブラウザを800ピクセル以上の大きさにして閲覧した場合の
余白の位置についても、どのように表示されるかを検討してページを
デザインすべきである。

ほとんどのサイトは、

コンテンツをセンタリング（中央寄せ）して、
左右に余白マージンを取るタイプ（Yahoo!など）

か、または、

コンテンツを左寄せして、
余白を右に取るタイプ（マイクロソフトなど）

になる。

どちらが良いかはデザイン上の好みだが、
あまりにも余白の多さが気になる場合は、
ページの背景色を設定して、余白にも色を付けておく方法もある。
もちろん画像ファイルを設定することも可能だ。

例えばマイクロソフトのページのように、余白が青色になるように背景色を
設定しておけば、サイト全体の雰囲気も締まって見えるはずだ。

ちなみに、私のこのサイトは「コンテンツを左寄せして、余白を右に取る」
デザインを採用している。なぜなら、このサイトは文字情報が主体だからだ。
横書き文字は一般的に左から右に読むものだから、左寄せのほうが読みやすい。

成功のポイント：横幅を制するものはブラウザを制する。

続き → 12. 新しいウインドウは開き過ぎるな！

メール会員登録（無料）
ひと儲けドットコムの更新情報を無料でお知らせしています。いつでも解除できます。

Ｑ．なぜホームページビルダーが必要なのか？

ホーム＞ホームページ制作の極意！＞このページのトップへ