気持ちのいいサイトとは(2)~画面幅~

今回は、前回に引き続き、「画面幅」について説明します。

1024pxの画面幅いっぱいに表示される「980px幅」のメリットは、なんといってもワイドでダイナミックな表現ができることと、ファーストビューで表示される情報量が多いことではないでしょうか。A4サイズノートPC(1024×768px)画面のファーストビューに情報を表示させようとすると、ページのタテ幅は600px以内(ブラウザのツールバーのタテ幅によって変動)となります。言うまでもなく、ヨコ幅が広いほど多くの情報を表示できるわけです。

トップページ(Home)やカテゴリーのトップページなど、より一覧性が求められるページには向きますが、一方でWebサイト構成上のほとんどを占めるテキスト情報中心の記事ページにおいては、文章の折り返し幅が広くなるため一行あたりの文字数が多くなり、文章を目で追いづらくなります。

ほとんどのヨコ書きの文庫本(和文)は、35~40文字で文章が折り返されており、「読みやすさ」を追求するのであれば、標準的な文字サイズ(12pt) のとき、コンテンツ幅を600px前後にするのがよいでしょう。「760px幅」の場合は、ローカルナビゲーションのヨコ幅を差し引くとコンテンツ幅が 600px前後になるため、とくに意図しなくても「読みやすさ」を手に入れることができます。だからといって「760px幅」をすすめているのではなく、このようなメリットやデメリットを考慮して、情報設計およびデザイン設計を行う必要がるということです。

また、ユーザーの画面サイズに依存されない作り方として「リキッド(可変)デザイン」があります。例えば、A4サイズノートPCを使っているユーザーが画面いっぱいにブラウザを表示させているとは限りません。もしかすると、400px幅でブラウザを表示させているかもしれません。さらに、ケータイや PDA、i-Phoneなど、多くのデバイスでの使用を想定すると、ヨコ幅が固定されないリキッドデザインを採用することが望まれます。

しかし、リキッドデザインに関しては、制作する側にある程度のスキルと各種ブラウザでの検証時間が必要となるという制作側の理由と、ページの見え方が一定でない(固定されない)ことを嫌うクライアントの意向が重なって、意外に採用されていないのが現状です。

※この記事は2008年9月~ All About Profile に掲載していたものを移設しています。
cCopyright 2009 xyz corporation. All Rights Reserved.

カテゴリー: Web制作   タグ:   この投稿のパーマリンク

気持ちのいいサイトとは(2)~画面幅~ への1件のコメント

  1. Yahoouj より:

    Really good work about this website was done. Keep trying more – thanks!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>