改めて知っておきたい、一般的なWebサイトのレイアウト6種類を解説

更新日: 2018年01月31日

CMS・サイト制作

この記事は2015年11月13日の記事を再編集しています。

Webデザインをする際に、ユーザーからみた見た目が美しいか、使いやすいデザインになっているかなど、気にかけたい点が多くあります。
普段から耳にすることがあっても、実際になにを指すか分からないという方も多いのではないでしょうか。

今回は、Webデザインを行う際に重要な、レイアウトについて解説します。

1.レスポンシブWebデザイン

レスポンシブWebデザインとは、様々なデバイスに対して、単一のHTMLファイルで対応することができるデザインのことです。

通常、Webサイトをパソコンやタブレット、スマートフォンなど、複数のデバイスで表示させる際に、それぞれに対応したHTMLファイルやCSSファイルを用意して、HTTPリダイレクトなどを利用してアクセスが振り分けられます。

しかし、レスポンシブデザインを利用すると、作成したひとつのHTMLファイルが各デバイスで閲覧した際に最適化された状態で、表示させることができます。
ユーザーが使用しているデバイスに最適化されて表示されるので、UX(ユーザーエクスペリエンス)を高めることができます。

通常の複数のHTMLファイルを用意する場合と異なり、デザインの自由度が若干下がりますが、更新作業の簡略化や更新漏れ防止にもつながります。
また、アクセス解析時に内容が重複した異なるURLが表示されることも避けることができるので、取り入れることをオススメするデザインです。

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

http://responsive-jp.com/

日本国内の美しいレスポンシブWebデザインが採用されているWebサイトを閲覧することができるサイトです。
パソコン、タブレット、スマートフォンでそれぞれどのように表示されているのかを見ることもできます。

MUUUUU.ORG

http://muuuuu.org/category/taglist/responsive

国内外のレスポンシブWebデザインが採用されているWebサイトを閲覧することができるサイトです。
MUUUUU.ORGは元々、業務中にパソコンで閲覧して、参考にできるようにと解説されたWebサイトで、パソコンでの閲覧が推奨されています。

紹介されているWebサイトについては、レスポンシブWebデザインが採用されていますので、どのデバイスからでも閲覧することは可能です。

2.リキッドレイアウト・フレキシブルレイアウト

Webページに含まれるコンテンツの要素を、％単位で指定して、ブラウザサイズによって相対的かつ可変的に幅を変更することができるデザインです。
ブラウザサイズに合わせた情報量を提供することが可能です。
リキッドレイアウトを使用すると、ウィンドウ幅に合わせて自動的に幅が調整されるので、横のスクロールバーを出現させることなく表示できるので、UXを損なうことがありません。

しかし、無限に可変可能という設定にしてしまうと、縦に長くなりすぎてしまったり、横に伸びすぎてしまうなどして、逆に読みにくくなってしまうこともありますので、注意が必要です。

このデメリットを解消するデザインとして幅のサイズの上限・下限を指定しておくフレキシブルレイアウトというものがあります。これはリキッドレイアウトと同様に、Webページに含まれるコンテンツの要素を、%単位で指定しますが、最小幅と最大幅をあらかじめ指定しておくデザインです。

リキッドレイアウトの、無限に可変可能なために発生してしまうデメリットを改善したものになります。
幅のサイズの上限・下限が指定されているため、レイアウトを崩してしまったり、読みにくくなってしまうことを防ぐ事ができます。