気持ちのいいサイトとは(3)~リキッドデザイン~

前回「リキッドデザイン」について、触れたので、制作のポイントについて補足しておきます。

リキッドデザインはユーザーのブラウザ画面幅に合わせて変化するものですが、1px~無限大を想定して作成するのではありません。あくまでも、デザインのアプローチなので「絶対的な見やすさを提供する」必要があります。
PCやモバイルなど、画面解像度の規格があるわけですから、その最小幅と最大幅を想定して設計することによって、誰にとっても「見やすい」デザインが提供できるわけです。

おおよその画面解像度は下記の通りです。

QVGA (Quarter-VGA) 320×240px
CGA 640×240px
VGA 640×480px
SVGA (Super-VGA) 800×600px
XGA 1024×768px
Quad-VGA 1280×960px
SXGA (Super-XGA) 1280×1024px
SXGA+ 1400×1050px
UXGA (Ultra-XGA) 1600×1200px
QXGA (Quad-XGA) 2048×1536px
QUXGA (Quad-Ultra-XGA) 3200×2400px
QUXGA Wide 3840×2400px

モバイル(携帯電話)のディスプレイを想定するなら、最小幅:240pxとなります。最大幅については、提供するコンテンツにもよりますが、PCのディスプレイであれば1600pxを想定すればいいでしょう。

最小幅については、扱う画像サイズについても注意しなければなりません。240px幅でコーディングを行っても、画像サイズが500pxであれば、当然ながら240px幅では表示されません。最終的に想定されるディスプレイすべてで検証を行わなければならないので、デバッグ時間も含めたスケジュールを立てることも忘れないようにしましょう。


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

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

コメントを残す

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

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