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

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

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

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

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

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

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

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

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

1
http://responsive-jp.com/

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

MUUUUU.ORG

2
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【国内】

3
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とは

LPOとは

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