MB-Support

パソコン初心者のサポートページ

ホームページの横幅を決める

 ホームページを作成する上で、閲覧者の画面サイズを研究する必要があります。その結果により、自分のサイトの横幅を決める事で、より多くの環境に適したページ構成を選択できます。


閲覧者の画面サイズを研究する

ホームページを作成する上で大切な事は、ページの横幅を決定する事です。 文章だけのページであれば、自動で折り返されるため(レタリングエンジンにより例外もある)、さほど気を使う必要もありませんが、複雑なレイアウトを適用したページは、閲覧者がブラウザサイズを変更する事で、どこまで対応させるかがポイントになります。 また、デザインとして横スクロールを多様するサイトであれば問題ありませんが、ブラウザを最大表示した時に横幅が収まりきらないページは、時として閲覧し難い場合もあります。



管理人は1回目のホームページ改良の時に、ページの横幅を 1020 px に設定していました。 ページを作成しているパソコンのディスプレーが17インチで、解像度が 1152 × 864 です。 この環境では見やすいホームページだと思っていたのですが、WEB サーバーで表示させた時、横幅を狭める必要性を感じました。 WEB サーバーで使用しているパソコンはディスプレーが 15 インチで解像度が 1024 × 768 です(解像度は、コントロールパネルの「システム」をダブルクリックして、「設定」タブを左クリックするとコントロールするプロパティが表示されます)。

17 インチ 液晶ディスプレイ 、解像度 1152 × 864 で閲覧した場合は、横に少し空白が入る余裕がありましたが、15 インチディスプレイ、解像度 1024 × 768 で閲覧すると、ディスプレイに入りきらず下に横スクロールバーが表示されてしまいます。 意図的に横スクロールを使用するホームページなら問題ありませんが、縦と横にスクロールさせなくてはならないホームページは参照し難いものです。



17 インチ・解像度 1152 × 864 で閲覧した場合<



15 インチ・解像度 1024 × 768 で閲覧した場合<


現在、このサイトは 15 インチディスプレイを利用して、解像度 1024×768 の環境でブラウザを最大表示した時に横幅が収まるサイズに設定されています。 もしブラウザを小さくした場合、下段に横スクロールバーが表示されます。

下のスクリーンショットは、MB-Support が使用させて頂いている無料カウンタのアクセス解析データです。 最も近い 200 件のアクセス情報から、2 件以上の情報がグラフで表示されます。 アクセスしていただいた方々のデータから、解像度 1152 × 864 と 1024 × 768 が平均的である事が分かります。 1152 × 864 ならディスプレーが 17 インチで、1024 × 768 なら 17 インチと 15 インチが相場でしょう。 また、少ないながらも 800 × 600 を使用されている方もいらっしゃいます。 自分のホームページをどの環境に合わせるか検討する必要があります。

閲覧者の解像度の統計

注:2007年9月現在では、「無料アクセス解析データ」が消滅したため使用しておりません。

さらに考慮するならば、 PDA携帯電話 のような画面サイズが小さいものまで。 また、時代と共に普及しているディスプレイサイズも変化します。現在ではワイド液晶を搭載するノートパソコンが普及していて、デスクトップパソコンで20インチを超えるワイド液晶ディスプレイも手の届く価格になってきました。 ディスプレイサイズよりも、解像度をいくつに設定しているかがポイントとなりますが、一般的にその時普及しているディスプレイサイズから解像度を予測する事もできます。



制作者の陥りやすい問題<

ホームページを制作している側が陥りやすい事は、制作者のパソコン環境にあったサイトを構築してしまう事です。 ホームページを作成するには、ソースを書き、プレイビューさせて確認する作業が伴います。 その確認で、制作者の環境で閲覧しやすい、または、制作者のコンピュータの構成で利用しやすいサイトを構築してしまうのが失敗の原因となります。 プレイビューするコンピュータ環境が、古くて一般的に劣っているものであれば、多くのユーザーはそれより優れた環境を利用していると予測して、その環境で確認しても互換性を維持できるかも知れません。 しかし、その逆の場合は、多くのユーザーは閲覧しにくいサイトになるとも考えらます。



自分の利用している環境で、画面サイズを確認する度にシステムのプロパティで変更するのは面倒ですが、Internet Explorer 7 に用意された「IE Developer Toolbar」をインストールすると、複数の解像度に対応したブラウザサイズで開く事ができます。 この機能はホームページ制作ソフトを利用している場合は、そのソフトが搭載しているかも知れません。インストール方法は以下。

IE Developer Toolbar のインストール方法




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項