解像度に合わせたウェブサイト制作 | Technolog.jp - ICTウェブマガジン

解像度に合わせたウェブサイト制作

ウェブサイトを制作する上で気を付けなければならないことはたくさんあります。以前、本サイトでも取り上げた「ホームページ制作の基礎 – ブラウザ互換チェック」のように利用者が様々なウェブブラウザでアクセスしてくることを想定し、汎用的にデザインするのもその一つです。

これと類似したことですが、画面の解像度を意識することもウェブデザイナーとしては欠かせません。おそらく現在、市場で出回っている多くのパソコンの解像度は「1024 * 768」ではないでしょうか。Windows XPであれば、デスクトップ上で右クリックし、「プロパティ」を開くと上部にタグが並んでいるので、その中から「設定」をクリックしてください。ここに表示されている「画面の解像度」の数字があなたの画面の大きさを表しています。

最近では「1440 * 900」など高解像度の画面も増えてきましたが、やはり一番メジャーである「1024 * 768」に合わせておくことがベターです。以前は「800 * 600」という低解像度のものもありましたが、今ではほとんど見受けられません。

それでは何故、解像度を意識する必要があるかというと、それは利用者のストレス軽減にあります。高解像度を基準に制作されたウェブサイトを低解像度の画面で見ると横スクロールをしなければなりません。画面内に収まりきらないために発生するこのワンアクションが利用者には面倒で仕方ないことがあります。

縦スクロールは一般的でさほどストレスを感じないのですが、横スクロールになると情報を閲覧する上で見栄えや利便性が著しく悪く感じます。これは心理的なものかもしれませんが、ほとんどの人がそう感じるはずです。

それでは横スクロールさせないためにはどうすれば良いか、固定幅で1000px未満にすることも良いですし、パーセンテージ(%)で幅を指定することも考えられます。仮に1000pxを100%とした場合、20%は200pxになります。当たり前のことですが、デザインを整えた上で、幅を意識した作りにするにはそれなりの設計が必要とされます。

モバイルサイトはまた別の括りになりますが、こういった解像度を意識したウェブサイト作りは地味ではありますが、非常に重要な作業だと感じています。

KEYWORD