其の3 ブラウザのサイズに考慮する | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル中級其の3

ブラウザのサイズに考慮する


Webサイトを制作する際、ウィンドウ幅の設定には悩むことだろう。

800*600で制作している場合が多いが、最近では1024*768を対象にレイアウトを行っているサイトも多く見られる。傾向としては大きな解像度に移行しつつあるだろうが、やはり800*600を対象にしてレイアウトするのがよいであろう。

また、固定幅のレイアウトはできるだけ回避すべきだ。水平スクロールバーが出ると非常にコンテンツを読みにくくなり、コンテンツを読んでもらう機会を損なうこともある【1】【2】。

【1】横幅760固定で制作し、閲覧した例
【1】横幅760固定で制作し、閲覧した例。ブラウザの横幅を縮めると……
【2】横幅760固定で制作し、ブラウザの横幅を狭めて閲覧している例
【2】横幅760固定で制作し、ブラウザの横幅を狭めて閲覧している例。閲覧している側の解像度が大きければ問題なく表示されるが、そうでない場合水平スクロールバーが出てしまう

固定幅のレイアウトを絶対にしてはならないというわけではないが、明確な理由がないのであれば柔軟性のある「リキッドレイアウト」を採用したほうがユーザーにとって使いやすい。

リキッドレイアウトとは、ブラウザの表示サイズに合わせ相対的に横幅が変わるデザインで ブラウザのサイズやディスプレイのサイズが何であれ影響を受けにくいため、ユーザビリティ向上方法のひとつとされている【3】【4】。

【3】リキッドレイアウトの例
【3】リキッドレイアウトの例。ブラウザをいくら狭めても相対的に幅が変わるので、すべての情報を閲覧することができる
【4】同じくリキッドレイアウトの例
【4】同じくリキッドレイアウトの例。ブラウザを最大に広げても、相対的に幅が変わるので、レイアウトが崩れない

お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在