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

この記事は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 ページ に含まれる コンテンツ の要素を、%単位で指定しますが、最小幅と最大幅をあらかじめ指定しておくデザインです。

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

リキッドレイアウトのWebサイトデザインまとめ

http://art-noc.com/category/layout/liquid

国内外の、リキッドレイアウトデザインが採用されているWebサイトを閲覧することができるサイトです。
気になる ページ の画像をクリックすると、各Webサイトの URL を確認することができますので、アクセスしてデザインの参考にしていてはいかがでしょうか。

3.グリッド レイアウト

Web ページ を縦横に分裂する直線で格子状に分割して、 コンテンツ の要素の大きさや配置などを構成していくデザインです。
もともとは、新聞や雑誌などの紙媒体で採用されていましたが、Web ページ においても採用されるようになってきました。
架空の格子状の部ブロックに コンテンツ が配置されていくので、整然としたイメージのある レイアウト を作成することができます。

しかし、シンプルであるがゆえに、この レイアウト が取り入れられているWebサイトは、どれも似たようなイメージになりがちです。
少しでも差別化を図ることを考えるなら、色使いやコンテンツの中身などで勝負することも重要となってきます。

最近では、カード型グリッドデザインという、カードを整列させたようなデザインを目にします。
一度にたくさんの情報を提示することができるので、少しでも多くの コンテンツ を ユーザー に届けることが可能ですが、裏を返すと、どこから見たらいいのか戸惑ってしまう可能性もあります。

4.可変グリッド レイアウト

グリッド レイアウト の特徴と、リキッドレイアウトの特徴を合わせたデザインです。
グリッド レイアウト では、ベースの単位がpxですが、これを％に帰ることでグリッドを可変 レイアウト にできる、というものです。
ウィンドウのサイズに合わせて可変的に動くだけではなく、整然と コンテンツ の要素が整ったデザインになるので、 UX の高い見やすいWebサイトになります。

グリッド レイアウト を採用しているWebデザイン 40【国内】

http://www.nxworld.net/inspiration/japan-grid-layout-web-design-showcase.html

国内の、グリッドデザインが採用されているWebサイトが紹介されているWebサイトです。
可変グリッド レイアウト はもちろん、上記で紹介したグリッド レイアウト も含まれています。
シンプルなものはもちろん、特徴のあるものも紹介されていますので、ぜひ参考にしてみてください。

5.固定幅 レイアウト

幅が固定されているデザインです。
どのデバイスで見ても、制作者が作成時に意図したデザインで表示されますが、幅が不変なことから、例えば制作者が自分のパソコンに合わせた横幅のWebサイトを作成した場合、それより横幅の狭いスマートフォンを閲覧すると、横スクロールバーが表示されてしまいます。

逆に制作者が想定しているWeb ブラウザ よりも大きな ブラウザ で閲覧すると、不自然な空白ができてしまいます。

6.エラスティック レイアウト

Web ページ に含まれる コンテンツ の要素を、em単位で指定するデザインです。
em単位とは、1文字分の幅のことを指します。
文字の拡大や縮小に伴い、Web ページ の レイアウト 幅が同じ比率で変化するので、 ユーザー が文字の大きさを変更しても、 レイアウト が崩れないままで閲覧することが可能になります。

しかし、px単位の要素が混在してしまうとサイト設計のコントロールが難しくなってしまうため、現在ではなかなか使われなくなってきているようです。

まとめ

今回はWebデザインを行う際によく使われるデザイン(手法)6選を、事例とともに紹介しました。
デザインの知識は難しいこともありますが、概要を理解して、デザイナーの方と共通言語を増やすことは重要です。

最近では Google がモバイルフレンドリーを推奨していることもあり、どの デバイス でも ユーザー が閲覧しやすいWebサイトが求められるようになっています。

今回ご紹介した レイアウト の手法を複数組み合わせて、情報を分かりやすくまとめ、閲覧しやすいWebサイトを設計することが大切です。

このニュースを読んだあなたにオススメ

LPOとは
Webデザインに役立つ無料のツール・デザイン集まとめ
これだけ読めば大丈夫！デザインの基礎が学べる厳選5記事

このニュースに関連するカリキュラム

LPOとは

URL:https://ferret-plus.com/8

ランディングページ とは ユーザー が最初に見るホームページのことです。そのページは第一印象であり、その後のユーザーの行動にも大きく影響することは必至です。その ランディングページ を最適化し、成果の最大化を目指すこと、それを ランディングページ 最適化＝ LPO (Landing page optimization)といいます。